<template>
  <el-cascader
    ref="cascader"
    v-model="selectData"
    placeholder="全国 | 请选择租户"
    :options="areaRootList"
    :size="size"
    :show-all-levels="showAllLevels"
    :collapse-tags="collapseTags"
    :separator="separator"
    :filterable="filterable"
    :filter-method="filterMethod"
    :debounce="debounce"
    :clearable="clearable"
    :disabled="disabled"
    :props="props"
    @change="onChange"
  />

</template>

<script>

import { findTenantList, getProvinceByTenant } from '../../api/vue/tenant/saasTenantApi'
export default {
  name: 'EcTenantByPro',
  // 2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    /**
             * 绑定值
             */
    value: {
      type: String,
      required: true
    },
    /**
             * 是否多选
             */
    multiple: {
      type: Boolean,
      default: false,
      required: false
    },
    /**
             * 单选时控制是否可选父级节点；多选时控制复选框是否级联
             */
    checkStrictly: {
      type: Boolean,
      default: false,
      required: false
    },
    /**
             * 在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值
             */
    emitPath: {
      type: Boolean,
      default: false,
      required: false
    },
    /**
             * 次级菜单的展开方式
             */
    expandTrigger: {
      type: String,
      default: 'click',
      required: false
    },
    /**
             * 选项的标签字段
             */
    attrName: {
      type: String,
      default: 'name',
      required: false
    },
    /**
             * 选项的值字段
             */
    valueField: {
      type: String,
      default: 'value',
      required: false
    },
    /**
             * 是否可清空选项
             */
    clearable: {
      type: Boolean,
      default: true,
      required: false
    },
    /**
             * 是否禁用
             */
    disabled: {
      type: Boolean,
      default: false,
      required: false
    },
    /**
             * 是否只读
             */
    readonly: {
      type: Boolean,
      default: false,
      required: false
    },
    /**
             * 选项分隔符
             */
    separator: {
      type: String,
      default: ' | ',
      required: false
    },
    /**
             * 是否开启过滤筛选
             */
    filterable: {
      type: Boolean,
      default: true,
      required: false
    },
    /**
             * 过滤筛选方法
             */
    filterMethod: {
      type: Function,
      default: () => {},
      required: false
    },
    /**
             * 输入框中是否显示选中值的完整路径
             */
    showAllLevels: {
      type: Boolean,
      default: true,
      required: false
    },
    /**
             * 多选模式下是否折叠Tag
             */
    collapseTags: {
      type: Boolean,
      default: false,
      required: false
    },
    /**
             * 搜索关键词输入的去抖延迟，毫秒
             */
    debounce: {
      type: Number,
      default: 300,
      required: false
    },
    /**
             * 组件展示大小
             */
    size: {
      type: String,
      required: false
    }
  },
  data() {
    return {
      loading: false,
      areaList: [], //  通过递归遍历，拿到每一个节点
      areaRootList: [], //  含有子节点的树集合
      selectData: []
    }
  },
  computed: {
    props() {
      return {
        expandTrigger: this.expandTrigger, // 次级菜单的展开方式  click / hover
        multiple: this.multiple,
        checkStrictly: this.checkStrictly, // 是否严格的遵守父子节点不互相关联
        emitPath: this.emitPath, // 在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值
        lazy: false, // 是否动态加载子节点，需与 lazyLoad 方法结合使用
        lazyLoad: () => {}, // 加载动态数据的方法，仅在 lazy 为 true 时有效; function(node, resolve)，node为当前点击的节点，resolve为数据加载完成的回调(必须调用)
        value: this.valueField, //	指定选项的值为选项对象的某个属性值
        label: this.attrName, //  指定选项标签为选项对象的某个属性值
        children: 'children', //	指定选项的子选项为选项对象的某个属性值
        disabled: 'disabled', //  指定选项的禁用为选项对象的某个属性值
        leaf: 'leaf' //  指定选项的叶子节点的标志位为选项对象的某个属性值
      }
    }
  },
  watch: {
    value: {
      handler(val) {
        // if (typeof val === 'object') {
        //   this.selectData = val
        //   return
        // }
        //
        // if (this.props.multiple) {
        //   if (this.separator) {
        //     this.selectData = val ? val.split(',').map(item => item.split(this.separator)) : []
        //   } else {
        //     this.selectData = val || []
        //   }
        // } else {
        //   this.selectData = val || ''
        // }
        // if (val) {
        //   this.selectData = this.props.multiple ? val.split(',').map(item => item.split(this.separator)) : val.split('/')
        // } else {
        //   this.selectData = []
        // }
      },
      immediate: true
    }
  },
  created() {
    this.init()
  },
  methods: {
    /**
             * 初始化组件数据
             * @public
             */
    init() {
      this.getData()
    },
    /**
       * 获取areaTree数据
       * @public
    */
    async getData() {
      this.loading = true
      const [tenant, province] = await Promise.all([findTenantList(), getProvinceByTenant()])
      tenant.data.forEach((d) => {
        d.value = d.id
        d.label = d.name
      })
      province.data.forEach((item) => {
        item.value = item.id
        item.label = item.name
        item.children = []
        item.tenantIdList && item.tenantIdList.forEach((id) => {
          const d = tenant.data.find(user => user.id === id)
          if (d) {
            item.children.push(d)
          }
        })
      })

      province.data.unshift({
        value: '-1',
        name: '全国',
        children: tenant.data
      })

      this.areaRootList = province.data
      this.loading = false
    },

    /**
             * 刷新数据
             * @public
             */
    refresh() {
      this.getData()
    },
    onChange(e) {
      // const result = this.props.multiple && this.strResult ? e.map(item => item.join(this.separator)).join() : e.join(this.separator)
      const result = this.props.multiple ? e.join() : e
      /**
                 * 选中值改变事件
                 * @event change
                 * @type {string/array} 选中值(多选且strResult为true时为string)
                 */

      this.$emit('change', result)
      /**
         * 选中值改变事件 （[{key,value}]） 形式返回
         * @event change
         * @type {array}
         */
      const c = this.$refs.cascader.getCheckedNodes().map((item) => { return { 'label': item.label, 'value': item.value } })
      this.$emit('getTenant', c)
    }
  }
}
</script>
