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

</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"  :clearCheckedNodes='clearCheckedNodes'-->
        <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 []
      },
    },
    cascaderValue: {
      // 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: [],
        totalData:[],
        selectedVal:[],
        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.value
                }
                
                getAction('/kuaishou/batch/getRegion',params).then(res=>{
                    // console.log(res)
                    
                    const nodes =res.result.map(item => ({
                        value: item.regionId,
                        label: item.name,
                        level:item.level,
                        parent:item.parent,                        
                        leaf: item.level >= 2
                    }));
                    if(!node.root&&node.level==1){
                      if(this.totalData.length){
                        let dataArr=[];
                        dataArr=this.totalData.filter(item=>{
                            return item.value==node.value
                        });
                        if(!dataArr.length){
                          this.totalData.push({
                            label:node.label,
                            value:node.value,
                            children:res.result.length
                          })
                        }
                      }else{
                        this.totalData.push({
                          label:node.label,
                          value:node.value,
                          children:res.result.length
                        })
                      }
                    }
                    // console.log(this.totalData)
                    // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                    resolve(nodes);
                })
                
               
            }
        },
    }
  },
  watch: {
    
    selectedVal(n, o) {
      console.log(n,o)
      if(n.length){
          var retrunData = []
          
          if(n.length){
             retrunData=JSON.parse(JSON.stringify(n))
            this.totalData.forEach(element => {
                let arr=[];
                arr=n.filter(item=>{
                  let number=(item+'').substr(0,2)
                  // console.log(number)
                  return element.value==number
                })
                if(arr.length==element.children ){
                  
                  retrunData=retrunData.filter(ele=>{
                    return element.value!=(ele+'').substr(0,2)
                  })
                  console.log(retrunData)
                  // this.selectedVal=[];
                  retrunData=[
                    ...retrunData,
                    element.value,
                    
                  ]
                }
                
              
            });
          }
          console.log('retrunData',retrunData)
          // this.$emit('input', val)
          // this.$emit('change', val)
          this.$emit('update:cascaderValue',retrunData)
          // this.consoleFun('VALUE: ', val, 'LABEL:', label)
      
      }else{
        this.$emit('update:cascaderValue',n)
      }
      
      
    },
  },
  // 
  mounted() {
    this.$nextTick(() => {
      
    })
  },
  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 = []
        
        console.log(val)
        
        if(val.length){
          this.totalData.forEach(element => {
              let arr=[];
              arr=val.filter(item=>{
                let number=(item+'').substr(0,2)
                // console.log(number)
                return element.value==number
              })
              if(arr.length==element.children ){
                let otherArr=[]
                otherArr=this.selectedVal.filter(ele=>{
                  return element.value!=(ele+'').substr(0,2)
                })
                console.log(otherArr)
                // this.selectedVal=[];
                retrunData=[
                  ...retrunData,
                  element.value,
                  ...otherArr,
                ]
                
              }else{
                retrunData=[
                  ...retrunData,
                  ...arr
                ]
              }
             
          });
        }
        console.log('retrunData',retrunData)
        // this.$emit('input', val)
        // this.$emit('change', val)
        this.$emit('update:cascaderValue',retrunData)
        // 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)
      }
    },

    // clearCheckedNodes(){

    // },
  },
}
</script>

