<template>
  <div class="select-goodsClass">
    <el-cascader
      v-if="!loading"
      v-model="value"
      :size="size || 'medium'"
      style="width: 100%"
      filterable
      clearable
      :options="options"
      :placeholder="placeholder || ''"
      :props="props"
      :disabled="disabled"
      @change="handleChange"
    />
  </div>
</template>

<script>
import asyncRequest from '@/apis/components/search'
import resToken from '@/mixins/resToken'
export default {
  name: 'SearchSort',
  mixins: [resToken],
  props: ['size', 'value', 'placeholder', 'isDetail', 'disabled', 'companyNo'],
  /**
   * 属性集合
   * @param {String}        size             : 组件大小            非必填
   * @param {Array}         value            : 选中值              必填
   * @param {String}        placeholder      : 提示信息            非必填
   * @param {Boolean}       isDetail         : 是否是详情逻辑       必填
   * @param {Boolean}       disabled         : 是否禁用            必填
   */
  /**
   * 事件集合
   * @searchChange             : 选中值变化调用   抛出选中数据
   */
  data() {
    return {
      loading: false,
      options:[],
      props: {
        checkStrictly: true,
        expandTrigger: 'hover',
        lazy: true, // 开启远程加载
        lazyLoad: async(node, resolve) => {
          const { level, value } = node

          const model = {
            cat_name: '',
            pid: '',
            status: '',
            size: 1000
          }
          const list = []
          if (level === 0) {
            model.pid = '0'
          } else {
            model.pid = value
          }

          const res = await asyncRequest.category(model)
          const { code, data } = res
          if (code === 1) {
            data.forEach((v1) => {
              const province = {
                value: v1.id,
                label: v1.cat_name,
                leaf: level >= 2,
              }
              String(v1.status) !== '0' && v1.status !== null && list.push(province)
            })
            resolve(list)
          } else {
            resolve([])
          }
        }
      }
    }
  },
  // watch: {
  //   // value: function (val, old) {
  //   //   if (val) {
  //   //     this.loading = true;
  //   //     setTimeout(() => {
  //   //       this.loading = false;
  //   //     }, 10);
  //   //   }
  //   // },
  // },
  mounted() {
    this.options = []
    this.selectLoading = false
  },
  methods: {
    async handleChange(value) {
      this.$emit('handleChange', value)
    },
    async loadData(pid,leaf = false){
      const list = []
      const res = await asyncRequest.category({pid})
      const { code, data } = res
      if (code !== 1) return

       data.forEach((v1) => {
         const province = {
           value: v1.id,
           label: v1.cat_name,
           leaf,
           children:[]
         }

         String(v1.status) !== '0' && v1.status !== null && list.push(province)
       })

       return list
    },
    async init(_v){
      const list = await this.loadData(0)
      const index = list.findIndex(({value}) => String(value) === String(_v[1]))
      const list2 = await this.loadData(_v[1])
      list[index].children = list2      
      const index2 = list2.findIndex(({value}) => String(value) === String(_v[2]))
      const list3 = await this.loadData(_v[2])
      list2[index2].children = list3
      const index3 = list3.findIndex(({value}) => String(value) === String(_v[3]))
      list3[index3].leaf = true
      this.options = list

      this.$emit('handleChange',_v.slice(1).map(v => Number(v)))
    }
  }
}
</script>

<style lang="scss" scoped>
.select-goodsClass {
  .loading-input {
    background-color: transparent;
    border: 1px solid #dfe4ed;
    color: #c0c4cc;
    width: 100%;
    height: 36px;
    line-height: 36px;
    padding: 0 30px 0 12px;
    border-radius: 4px;
    &.disabled {
      background-color: #f5f7fa;
    }
    span {
      font-size: 16px;
      height: 36px;
      line-height: 36px;
      padding: 0 0 0 3px;
      vertical-align: top;
    }
  }
}
</style>
