<style lang="scss">
.hcst-cascader{
    .el-cascader {
        display: inline-block;
        position: relative;
        font-size: 14px;
        height: 32px;
    }
    .el-input__inner{
        height: 32px  !important;
    }
}

</style>
<template>
  <div class="hcst-cascader">
    <!-- <a-checkbox-group v-model="selectedVal" :disabled="disabled" style="width: 100%">
      <a-checkbox
        v-for="item of selectOption"
        :label="item.label"
        :key="item.value"
        :value="item.value"
        :class="{
          item: true && userButton,
          selection: selectedVal && selectedVal.indexOf(item.value) > -1 && userButton,
          bgcolor: item.disabled,
        }"
        >{{ item.label }}</a-checkbox
      >
    </a-checkbox-group> -->

    <!-- :show-all-levels="false" -->
        <el-cascader
        v-model='selectedVal'
        :disabled="disabled"        
        :props="props"
        clearable
        collapse-tags
        
        ></el-cascader>
        {{selectedVal}}
  </div>
</template>

<script>
// import { dictionary } from '@/components/service/core/dictionary'
import { isArray } from '@/utils/Tools'
import { httpAction, getAction } from '@/api/manage'

let id = 0;

export default {
  name: 'Cascader', // Cascader组件二次封装
  props: {
    userButton: {
      type: Boolean,
      default() {
        return true
      },
    },
    code: {
      // 参数code
      type: String,
      default: '',
    },
    allValue: {
      type: Boolean,
      default() {
        return false
      },
    },
    options: {
      // 外部传入的option 可替代请求项
      type: Array,
      default() {
        return []
      },
    },
    value: {
      // v-model绑定值
      type: [Number, Array, String],
      default() {
        return []
      },
    },
    label: {
      // label 绑定值
      type: [Array, String],
      default: '',
    },
    radioStyle: {
      // 是否复选框模拟单选效果
      type: Boolean,
      default: false,
    },
    disabled: {
      // 是否禁用
      type: Boolean,
      default: false,
    },
    isLazy: {
      // 是否禁用
      type: Boolean,
      default: false,
    },
  },
  components: {},
  data() {
    return {
        // selectOption: [],
        props: {
            multiple: true ,
            // checkStrictly: true ,
            emitPath:false,
            lazy: this.isLazy,
            lazyLoad (node, resolve) {
                console.log(node,resolve)
                const { level } = node;
               
                // const nodes = Array.from({ length: level + 1 })
                //     .map(item => ({
                //     value: ++id,
                //     label: `选项${id}`,
                //     leaf: level >= 2
                //     }));
                let params={}
                if(node.root){
                    params.level=1;
                }else{
                    params.parent=node.root?0:node.data.regionId
                }
                getAction('/kuaishou/batch/getRegion',params).then(res=>{
                    console.log(res)
                    const nodes =res.result.map(item => ({
                        value: item.id,
                        label: item.name,
                        level:item.level,
                        parent:item.parent,
                        regionId:item.regionId,
                        leaf: item.level >= 3
                    }));
                    // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                    resolve(nodes);
                })
                
               
            }
        },
    }
  },
  watch: {
    options(val) {
      if (isArray(val)) {
        this.selectOption.splice(0, this.selectOption.length)
        this.selectOption.push(...val)
      }
    },
    selectedVal(n, o) {
      if (this.radioStyle && !this.allValue) {
        if (n.length == 0) {
          this.selectedVal = o
        }
      }
    },
  },
  computed: {
    selectedVal: {
      get: function () {
        return this.value
      },
      set: function (val) {
        this.selectChange(val)
      },
    },
  },
  mounted() {
    this.$nextTick(() => {
      if (this.code && this.options.length == 0) {
        // 如果code值不为空且options.lengt==0， 则去请求字典项
        this.getOptions()
      } else {
        // 否则直接获取外部传入的options
        this.selectOption.splice(0, this.selectOption.length)
        this.selectOption.push(...this.options)
      }
    })
  },
  methods: {
    getOptions() {
      // 获取字典项
      getAction('/sys/dictItem/list', { dictId: this.code, pageSize: 1000, pageNo: 1 }).then((res) => {
        if (res.success && isArray(res.result.records)) {
          var data = res.result.records
          data = data.map((item) => {
            return {
              label: item.itemText,
              value: item.itemValue,
              ...item,
            }
          })
          if (this.allValue) {
            data.unshift({ label: '不检查', value: 'unlimited' })
            if (this.value == '' || this.value == '' || this.value == null || this.value.length == 0) {
              this.selectedVal = ['unlimited']
            }
          } else {
            if (this.value == '' || this.value == '' || this.value == null || this.value.length == 0) {
              this.selectedVal = []
            }
          }
          this.selectOption.push(...data)
        }
      })
    },
    selectChange(val) {
      // 选择事件
     
        // 多选
        var retrunData = []
        // let label = this.selectOption.filter((v) => val.findIndex((item) => item == v.value) > -1).map((v) => v.label)
        // if (this.allValue) {
        //   if (val.findIndex((item) => item == 'unlimited') == 0) {
        //     retrunData = val.slice(-1)
        //   } else if (val.findIndex((item) => item == 'unlimited') == val.length - 1) {
        //     retrunData = ['unlimited']
        //   } else {
        //     retrunData = val
        //   }
        // } else {
        //   retrunData = val
        // }

        this.$emit('input', val)
        this.$emit('update:label', val)
        this.$emit('change', val)
        // this.consoleFun('VALUE: ', val, 'LABEL:', label)
      
    },
    emitChange(...args) {
      // emit change事件
      this.$emit('change', ...args)
    },
    consoleFun(...args) {
      // 打印信息
      if (process.env.NODE_ENV == 'development') {
        console.log(...args)
      }
    },
  },
}
</script>

