<template>
  <el-cascader
    ref="cascader"
    :value="categoryId"
    :props="casProps"
    style="width:500px;margin-right: 20px;"
    clearable
    @change="handleChange">
  </el-cascader>
</template>

<script>
  import {
    getCateByPidAndSite
  } from '@/api/goods/category'
  export default {
    name: 'ProjectCascader',
    data() {
      return {
        casProps: {
          value: 'categoryId',
          label: 'categoryName',
          checkStrictly: true,
          lazy: true, // 此处必须为true
          lazyLoad: (node, resolve) => {
            this.getChildProject(node, resolve)
          }
        }
      }
    },
    props: ['categoryId', 'site'],
    methods: {
      handleChange(value) {
        // 将当前选中节点数据和当前路径数组返回给父组件
        // this.$emit('getData', value)
        // 获取当前选中节点
        const checkNode = this.$refs['cascader'].getCheckedNodes()
        // 将当前选中节点数据和当前路径数组返回给父组件
        this.$emit('getData', checkNode[0].data, value)
      },
      // 懒加载树数据
      getChildProject(node, resolve) {
        const params = {
          parentId: node.root ? '0' : node.data.categoryId,
          site: this.site
        }
        let childProjects = [];
        getCateByPidAndSite(params).then(res => {
          if (res.code !== '0') {
            this.$message.error('获取项目数据失败')
          } else {
            childProjects = res.data.map(item => {
              return {
                cateId: item.id,
                categoryId: item.categoryId,
                categoryName: item.categoryName,
                leaf: item.leafCategory == '1' ? true : false
              }
            })
            // 获取数据后调用resolve将子项数据渲染至视图
            resolve(childProjects)
          }
        }).catch(error => {
          console.log('获取数据异常', error)
          // 此处调用resolve 防止接口数据异常时级联选择器一直处于加载状态
          resolve(childProjects)
        })
      }
    }
  }
</script>

<style>
  .el-cascader-panel{
    height:300px;
  }
</style>