<template>
  <div class="toy-set-area no-bottom-form">
    <el-form-item>
      <el-select
        v-model="formState[0]"
        clearable
        value-key="sortCode"
        placeholder="请选择投放区域"
        @change="handleChange"
      >
        <el-option
          v-for="item in sortTreeData"
          :key="item.sortCode"
          :label="item.sortName"
          :value="item"
        />
      </el-select>
      <template v-if="formState && formState.length > 0">
        <el-select
          v-model="formState[1]"
          clearable
          value-key="sortCode"
          placeholder="请选择投放区域"
          @change="handleChange"
        >
          <el-option
            v-for="item in levelOptions[formState[0].level]"
            :key="item.sortCode"
            :label="item.sortName"
            :value="item"
          />
        </el-select>
      </template>

      <!--      <el-cascader-->
      <!--        ref="cascader"-->
      <!--        v-model="list"-->
      <!--        style="width: 100%"-->
      <!--        clearable-->
      <!--        placeholder="请选择主题"-->
      <!--        :options="sortTreeData"-->
      <!--        :props="cascaderProps"-->
      <!--        @change="handleChangeSort"-->
      <!--        @expand-change="handleExpandChange"-->
      <!--      >-->
      <!--        <template slot-scope="{ node, data }">-->
      <!--          <span @click="handleClickSortItem({ node, data })">{{ data.sortName }}</span>-->
      <!--        </template>-->
      <!--      </el-cascader>-->
    </el-form-item>
    <el-button @click="handleClick">获取节点</el-button>
  </div>
</template>

<script>
import { fetchSortList, listSort } from '@/api/toy/sort'

const LEVEL = {
  AREA: 1,
  CATEGORY: 2,
  DETAIL: 2,
  GOALS: 4
}
const toySortMap = {
  '1': { key: 'putArea', level: '1' },
  '2': { key: 'toyCategory', level: '2', list: 'toyCategory' },
  '3': { key: 'detailCategory', level: '3', list: 'detailCategory' },
  '4': { key: 'developmentGoals', level: '4', list: 'developmentGoals' }, // 发展目标
  '5': { key: 'diversityLabels', level: '5', list: 'diversityLabels' } // 多样性
}

export default {
  model: {
    event: 'update:toyCategory',
    prop: 'toyCategory'
  },
  props: {
    toyCategory: {
      type: Object,
      default: () => {
        return {
          putAreaCode: null, // 放置区域
          putAreaName: null, // 放置区域
          toyCategoryCode: null, // 玩具大类
          toyCategoryName: null, // 玩具大类
          detailCategoryCode: null, // 细分种类
          detailCategoryName: null, // 细分种类
          developmentGoalsCode: null, // 发展目标
          developmentGoalsName: null, // 发展目标
          diversityLabelsCode: null, // 多样性
          diversityLabelsName: null
        }
      }
    }
  },

  data() {
    return {
      list: [],
      cascaderProps: {
        value: 'sortCode',
        label: 'sortName',
        children: 'children',
        multiple: false,
        checkStrictly: false // 父子节点是否取消选中关联
      },
      levelOptions: {},
      sortTreeData: [],
      formState: [],
      allSortList: [],
      putAreaCodeList: []
    }
  },
  computed: {
    localToyCategory: {
      get() {
        return this.toyCategory
      },
      set(val) {
        this.$emit('update:toyCategory', val)
      }
    },
    toyCategoryCodeList() {
      const { putAreaCode } = this.localToyCategory
      return putAreaCode ? this.allSortList.filter(item => item.parentCode === putAreaCode) : []
    },
    detailCategoryCodeList() {
      const { toyCategoryCode } = this.localToyCategory
      return toyCategoryCode ? this.allSortList.filter(item => item.parentCode === toyCategoryCode) : []
    },
    developmentGoalsCodeList() {
      const { detailCategoryCode } = this.localToyCategory
      return detailCategoryCode ? this.allSortList.filter(item => item.parentCode === detailCategoryCode) : []
    }
  },
  created() {
    this.getSortList()
  },
  methods: {
    getSortList() {
      fetchSortList().then(({ data }) => {
        this.sortTreeData = this.handleTree(data, 'sortCode', 'parentCode')
      })
    },
    onInitCategoty(val, isSetNextLevel) {
      this.levelOptions[val.level] = isSetNextLevel && val && val.children && val.children.length > 0 ? val.children : []
      if (val && val.children && val.children.length > 0) this.onInitCategoty(val.children[0], false)
    },
    handleChange(val) {
      const label = toySortMap[val.level]
      console.log('val', val, label)
      // this.formState[label] = val
      // this.levelOptions[val.level] = val.children
      this.onInitCategoty(val, true)
      console.log('handleCHange', this.levelOptions)
    },
    handleChangeSort(val) {
      console.log('change', val)
    },
    handleExpandChange(val, $event) {
      console.log('handleExpandChange', val, $event, this.$refs.cascader.getCheckedNodes())
    },
    handleClickSortItem({ node, data }) {
      console.log('clisk sotr item', node, data)
      // this.cascaderProps.checkStrictly = !!data.isBatch
      this.cascaderProps.checkStrictly = data.sortName === '益智区'
    },
    handleClick() {
      console.log('handleClick', this.$refs.cascader.getCheckedNodes())
    },
    handleChangeArea(area, e) {
      this.localToyCategory.putAreaName = this.putAreaCodeList.find(item => item.sortCode === area).sortName
      this.localToyCategory.detailCategoryCode = null
      this.localToyCategory.detailCategoryName = null
      this.localToyCategory.toyCategoryCode = null
      this.localToyCategory.toyCategoryName = null
      this.localToyCategory.developmentGoalsCode = null
      this.localToyCategory.developmentGoalsName = null
      this.$emit('change')
    },
    handleChangeCategory(category) {
      this.localToyCategory.toyCategoryName = this.toyCategoryCodeList.find(cate_ => cate_.sortCode === category).sortName
      this.localToyCategory.detailCategoryCode = null
      this.localToyCategory.detailCategoryName = null
      this.localToyCategory.developmentGoalsCode = null
      this.localToyCategory.developmentGoalsName = null
      this.$emit('change')
    },
    handleChangeDetail(detail) {
      this.localToyCategory.detailCategoryName = this.detailCategoryCodeList.find(cate_ => cate_.sortCode === detail).sortName
      this.localToyCategory.developmentGoalsCode = null
      this.localToyCategory.developmentGoalsName = null
      this.$emit('change')
    },
    handleChangeDevelopment(deve_) {
      this.localToyCategory.developmentGoalsName = this.developmentGoalsCodeList.filter(cate_ => deve_.includes(cate_.sortCode)).map(k => k.sortName).join(',')
    }
  }
}
</script>
<style scoped lang="scss">
.toy-set-area {
  //width: 100%;
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  //.el-select:not(:first-child) { margin-left: 5px }
}
</style>
