<template>
  <div style="position: relative">
    <el-cascader
      ref="cascader"
      :value="value"
      :options="options"
      :props="props"
      :disabled = "disabled"
      :placeholder="placeholder"
      :filterable = "filterable"
      :clearable = "clearable"
      style="width: 100%"
      @change="cascaderChange" />
    <i v-show="loading" class="el-icon-loading" style="position: absolute;top: 10px;right: 25px;"/>
  </div>
</template>
<script>
import { requestFN } from '@/utils/request'
export default {
  name: 'CascaderDict',
  props: {
    /* 选项列表数据(树形结构的对象数组) */
    /* 初始值 */
    form: {
      type: Object,
      default: () => { return {} }
    },
    type: {
      type: String,
      default: () => { return 'search' }
    },
    dictId: {
      type: String,
      default: () => { return '' }
    },
    value: {
      type: Array,
      default: () => { return [] }
    },
    // 可搜索
    filterable: {
      type: Boolean,
      default: () => { return true }
    },
    /* 可清空 */
    clearable: {
      type: Boolean,
      default: () => { return true }
    },
    placeholder: {
      type: String,
      default: () => { return '请选择' }
    },
    /* props属性 */
    // 禁用
    disabled: {
      type: Boolean,
      default: () => { return false }
    },
    // 可选任意级
    checkStrictly: {
      type: Boolean,
      default: () => { return true }
    }
  },
  data() {
    return {
      loading: false,
      USER_LEVEL: JSON.parse(sessionStorage.getItem('user')).LEVEL || '2',
      options: [],
      props: {
        checkStrictly: this.checkStrictly
      }
    }
  },
  mounted() {
    this.initHandle()
  },
  methods: {
    clearNodes() {
      this.$refs.cascader.clearCheckedNodes()
    },
    // 初始化值
    initHandle() {
      this.loading = true
      const url = '/dictionaries/getDictTreeMoreLevel'
      return new Promise((resolve) => {
        requestFN(
          url,
          {
            DICTIONARIES_ID: this.dictId // 字典ID
          }
        ).then((data) => {
          if (data.list.length > 0) {
            this.options = data.list
          }
          this.loading = false
          resolve()
        }).catch((e) => {
        })
      })
    },
    cascaderChange(e) {
      const value = e
      this.$emit('input', value)
      this.$emit('cascaderNames', this.$refs.cascader.getCheckedNodes()[0].pathLabels ? this.$refs.cascader.getCheckedNodes()[0].pathLabels.join(',') : '')
      this.$nextTick(() => {
        const dom = document.getElementsByClassName('el-radio is-checked')
        const radioDom = dom[dom.length - 1]
        const brother = radioDom.nextElementSibling
        if (radioDom.getElementsByClassName('el-radio__original')[0].value.split(',').length < 5) {
          brother.click()
        }
        this.$refs.cascader.dropDownVisible = false
      })
    }
  }
}
</script>
