
<template>
  <el-cascader
    :key="cascaderKey"
    v-model="localValueData"
    :options="options"
    :filterable="filterable"
    clearable
    :props="{ multiple: true , checkStrictly: true}"
    placeholder="请选择园投放"
    no-data-text="putClassText"
    :show-all-levels="false"
    popper-class="popper-select"
    collapse-tags
    style="height: 34px"
    @change="handleChange"
  />
</template>
<script>

import { getClassList } from '@/api/toy/query'

export default {
  name: 'SelectPutClass',
  model: {
    prop: 'value',
    event: 'update:value'
  },
  props: {
    value: {
      type: Array,
      default: () => []
    },
    parentId: {
      type: Array,
      default: () => []
    },
    filterable: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      options: [],
      cascaderKey: 0,
      cascaderTag: [],
      localValueData: []
    }
  },
  watch: {
    value: {
      handler(val) {
        this.$set(this, 'localValueData', val)
      },
      deep: true
    },
    localValueData: {
      handler(val) {
        this.$emit('update:value', val)
      },
      deep: true
    },
    parentId: {
      handler(val) {
        if (val && val.length > 0) {
          const that = this
          this.cascaderKey++
          that.options = []
          getClassList(val[0], 1).then(({ data }) => {
            console.log(data)
            that.options.push({
              value: 1,
              label: '班级',
              children: data.map(item => {
                item.value = item.id
                item.label = item.name
                return item
              })
            })
          })
          getClassList(val[0], 2).then(({ data }) => {
            that.options.push({
              value: 2,
              label: '位置',
              children: data.map(item => {
                item.value = item.id
                item.label = item.name
                return item
              })
            })
          })
        }
        this.options = []
        this.localValueData = []
      }
    }
  },
  created() {

  },
  methods: {
    handleChange(val) {
      if (val && val.length > 0) {
        this.$set(this, 'options', this.options.map(item => {
          if (item.value !== val[0][0]) {
            item.children.forEach(child => {
              child.disabled = true
            })
          }
          return item
        }))
      } else {
        this.$set(this, 'options', this.options.map(item => {
          item.children.forEach(child => {
            child.disabled = false
          })
          return item
        }))
      }
    }
  }

}
</script>
<style lang="scss" scoped>
::v-deep {
  .el-cascader .el-input .el-input__inner:focus, .el-cascader .el-input.is-focus .el-input__inner{
    height: 34px; //这里高度根据需求自己设定
  }
  .el-cascader__tags {
    display: inline-flex;
    margin-right: 60px;
    flex-wrap: nowrap;
  }
}

</style>
<style lang="scss" >
.popper-select {
  li[aria-haspopup="true"] {
    .el-checkbox {
      display: none;
    }
  }
}
</style>

