<template>
  <div class="toy-set-area no-bottom-form">
    <el-form-item>
      <el-select
        v-model="localToyCategory.putAreaCode"
        clearable
        placeholder="请选择投放区域"
        @change="handleChangeArea"
      >
        <el-option
          v-for="dict in putAreaCodeList"
          :key="dict.sortCode"
          :label="dict.sortName"
          :value="dict.sortCode"
        />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-select
        v-model="localToyCategory.toyCategoryCode"
        clearable
        placeholder="请选择玩具大类"
        @change="handleChangeCategory"
      >
        <el-option
          v-for="dict in toyCategoryCodeList"
          :key="dict.sortCode"
          :label="dict.sortName"
          :value="dict.sortCode"
        />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-select
        v-model="localToyCategory.detailCategoryCode"
        clearable
        placeholder="请选择细分种类"
        @change="handleChangeDetail"
      >
        <el-option
          v-for="dict in detailCategoryCodeList"
          :key="dict.sortCode"
          :label="dict.sortName"
          :value="dict.sortCode"
        />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-select
        v-model="localToyCategory.developmentGoalsCode"
        clearable
        multiple
        placeholder="请选择发展目标，可多选"
        collapse-tags
        collapse-tags-tooltip
        :max-collapse-tags="3"
        @change="handleChangeDevelopment"
      >
        <el-option
          v-for="dict in developmentGoalsCodeList"
          :key="dict.sortCode"
          :label="dict.sortName"
          :value="dict.sortCode"
        />
      </el-select>
    </el-form-item>

  </div>
</template>

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

const LEVEL = {
  AREA: 1,
  CATEGORY: 2,
  DETAIL: 2,
  GOALS: 4
}
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 {
      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() {
      listSort().then(({ data }) => {
        if (data && data.length > 0) {
          this.allSortList = data
          this.putAreaCodeList = data.filter(item => item.level === LEVEL.AREA)
        }
      })
    },
    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>
