<template>
  <div>
    <el-cascader ref="cascaders" v-model="toyClass" :options="options" :props="props" clearable :show-all-levels="true"
      style="width: 100%" :placeholder="placeholder" :disabled="handDisabled" @change="handleChange" />
  </div>

</template>

<script>
import { fetchPuzzleGoals, fetchSortPublicList } from '@/api/toy/sort'
import { handleTree } from '@/utils/vctgo'
import { deepClone } from '@/utils'

export default {
  name: 'AreaCascader',
  model: {
    prop: 'value',
    event: 'update:value'
  },
  props: {
    value: {
      type: Array,
      default: () => []
    },
    placeholder: {
      type: String,
      default: '请选择玩具分类'
    },
    level: {
      type: Number,
      default: 0
    },
    handDisabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      props: {
        checkStrictly: true,
        emitPath: false,
        expandTrigger: 'click',
        label: 'sortName',
        value: 'sortCode',
        children: 'children'
      },
      options: [],
      lastWords: null,
    }
  },
  computed: {
    toyClass: {
      get() {
        if (this.value.length > 0) {
          if (!!this.lastWords) {
            return this.value[this.value.length - 1].value + '_' + this.lastWords
          } else {
            return this.value[this.value.length - 1].value
          }
        } else {
          return ''
        }
      },
      set(val) {
        const checkedNodes = this.$refs.cascaders.getCheckedNodes() || []
        if (!!checkedNodes[0] && checkedNodes[0].pathNodes[0].level == 1 && checkedNodes[0].pathNodes[0].value == '01') {
          this.seaveLastWords(checkedNodes[0].pathNodes);
        } else {
          this.lastWords = null;
        }
        this.$emit('update:value', checkedNodes[0] ? this.clearLine(checkedNodes[0].pathNodes) : [])
      }
    }
  },
  watch: {
    toyClass: {
      handler(val) {
        if (!val) {
          this.$refs.cascaders.$refs.panel.checkedValue = []
          this.$refs.cascaders.$refs.panel.clearCheckedNodes()
          this.$refs.cascaders.$refs.panel.activePath = []
          this.$refs.cascaders.$refs.panel.initStore()
        }
      }
    }
  },
  created() {
    this.getTree()
  },
  methods: {
    clearLine(list) {
      return list.map(i => {
        return {
          ...i,
          value: i.value.split("_")[0]
        }
      })
    },
    seaveLastWords(list) {
      if (list[list.length - 1].level == 5) {
        this.lastWords = list[list.length - 1].value.split("_")[1];
      } else {
        this.lastWords = null;
      }
    },
    getTree() {
      fetchSortPublicList().then(async ({ data }) => {
        const result = handleTree(data, 'sortCode', 'parentCode')
        // 额外处理特殊数据
        const goals = (await fetchPuzzleGoals()).data || []
        const yzIndex = result.findIndex(item => item.isBatch === '1')
        // 益智区单独处理(递归)
        result[yzIndex] = this.handleData(result[yzIndex], goals, 1)
        this.options = result
      })
    },
    // change事件
    handleChange(val) {
      // if (!val) {
      //   this.$refs.cascaders.$refs.panel.checkedValue = []
      //   this.$refs.cascaders.$refs.panel.clearCheckedNodes()
      //   this.$refs.cascaders.$refs.panel.activePath = []
      //   this.$refs.cascaders.$refs.panel.initStore()
      // }
    },
    // 数据处理的递归
    handleData(item, goals, ind) {
      if (item.children) {
        item.children.map((ditem, dindex) => {
          if (Number(ditem.level) === 5 && Number(ditem.isDevelopmentGoals) !== 1) {
            ditem.children = deepClone(goals).map(i => {
              i.sortCode = i.sortCode + '_' + ind.toString() + dindex.toString()
              return i
            })
          } else {
            this.handleData(ditem, goals, ind.toString() + dindex.toString())
          }
        })
      }
      return item
    }
  }
}
</script>
