<!--
数据字典的优化
新增级联字典
type:cascader,
dictCode: '一级字典code值'
dictCodeName:['二级字典code值'，'三级字典code值'] // 目前只做到三级级联字典
-->
<template>
  <!-- 下拉框 -->
  <el-select
    v-if="tagType == 'select'"
    @change="handleInput"
    :value="getValue"
    :placeholder="placeholder"
    :disabled="disabled"
    :clearable="clearable"
    :validate="validate"
    :size="size"
    :readonly="readonly"
    :permission="permission"
    :filterable="filterable"
  >
    <el-option
      v-for="item in dictOptions"
      :key="item.value"
      :label="item.name"
      :value="item.value"
    >
    </el-option>
  </el-select>
  <!-- <ht-select
        v-if="tagType == 'select'"
        :value="getValue"
        :disabled="disabled"
        :props="{key: 'value', value: 'name'}"
        @change="handleInput"
        :options="dictOptions"
        :placeholder="placeholder"
        :validate="validate"
        :clearable="clearable"
        :size="size"
        :readonly="readonly"
        :permission="permission"
    /> -->
  <!-- 单选框 -->
  <ht-radio
    v-else-if="tagType == 'radio'"
    :value="value"
    @input="val => (value = val)"
    :disabled="disabled"
    :props="{key: 'value', value: 'name'}"
    @change="handleInput"
    :options="dictOptions"
    :validate="validate"
  />
  <!-- <a-radio-group
        v-if="tagType=='radio'"
        @change="handleInput"
        :value="getValue"
        :disabled="disabled"
    >
        <a-radio v-for="(item, key) in dictOptions" :key="key" :value="item.value">{{ item.name }}</a-radio>
    </a-radio-group> -->

  <!-- <a-radio-group
        v-else-if="tagType=='radioButton'"
        @change="handleInput"
        :value="getValue"
        :disabled="disabled"
    >
        <a-radio-button
            v-for="(item, key) in dictOptions"
            :key="key"
            :value="item.value"
        >{{ item.name }}</a-radio-button>
    </a-radio-group>

    <a-select
        v-else-if="tagType=='select'"
        :getPopupContainer="isShowInbody?null:triggerNode => triggerNode.parentNode"
        @focus="reloadDict"
        :placeholder="placeholder"
        :disabled="disabled"
        :value="getValue"
        ref='selectDict'
        @change="handleInput"
    >
        <a-select-option :value="undefined" v-if='!deletePlaceholder'>请选择</a-select-option>
        <a-select-option v-for="(item, key) in dictOptions" :key="key" :value="needLabel?item.value+'-'+item.name || item.label:item.value">
            <span
                style="display: inline-block;width: 100%"
                :title=" item.name || item.label "
            >{{ item.name || item.label }}</span>
        </a-select-option>
    </a-select>

    <a-cascader
        :getPopupContainer="isShowInbody?null:triggerNode => triggerNode.parentNode"
        :field-names="{ label: 'name', value: 'value', children: 'children' }"
        v-else-if="tagType=='cascader'"
        ref='selectDict'
        :options="dictOptions"
        :value="getValue"
        placeholder="请选择"
        @change="handleInput"
    /> -->
</template>

<script>
import dictUtils from './DictSelectUtils'
export default {
  name: 'DictSelect',
  props: {
    filterable: Boolean,
    dictCode: String,
    placeholder: String,
    triggerChange: Boolean,
    value: [String, Number, Array],
    type: String,
    dictCodeName: Array,
    isShowInbody: {
      type: Boolean,
      default: false
    },
    needLabel: Boolean, // 将值和文本都返回
    hasDefaultOption: {
      type: Boolean,
      default: false
    }, // 请选择的默认项,
    validate: [String, Object],
    clearable: Boolean,
    size: String,
    readonly: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    permission: {
      type: String,
      default: 'w',
      validator: function(value) {
        return ['b', 'w', 'r', 'n'].indexOf(value) !== -1
      }
    }
  },
  data() {
    return {
      dictOptions: [],
      tagType: ''
    }
  },
  watch: {
    dictCode: {
      immediate: true,
      handler() {
        this.initDictData()
      }
    }
  },
  created() {
    if (!this.type || this.type === 'list') {
      this.tagType = 'select'
    } else {
      this.tagType = this.type
    }
  },
  computed: {
    getValue() {
      // debugger
      if (this.type != 'cascader') {
        return this.value != null ? this.value.toString() : null
      } else {
        return this.value
      }
    }
  },
  methods: {
    focus() {
      this.$refs.selectDict.focus()
    },
    reloadDict() {
      this.initDictData()
    },
    initDictData() {
      if (dictUtils.getDictItemsFromCache(this.dictCode)) {
        let dictItems = dictUtils.getDictItemsFromCache(this.dictCode)
        if (this.type == 'cascader') {
          // 级联
          this.dictOptions = this.formatDictOptions(
            dictItems,
            this.dictCodeName[0]
          )
        } else {
          this.dictOptions = dictItems
          if (this.hasDefaultOption && this.tagType == 'select') {
            this.dictOptions.unshift({
              value: '请选择',
              key: undefined
            })
          }
        }
      }
    },
    // 如果是级联字典,处理字典数据结构
    formatDictOptions(options, dictName) {
      let tempOpt = [...options]
      tempOpt.forEach(item => {
        if (item.lowerDic && item.lowerDic[dictName]) {
          item.children = item.lowerDic[dictName]
          this.formatDictOptions(item.children, this.dictCodeName[1])
        }
      })
      // console.log(tempOpt, "tempOpt");
      return tempOpt
    },
    handleInput(val) {
      let selectObj = null
      let data = this.dictOptions
      data && data.forEach(item => {
        if (item.value == val) {
          selectObj = item
        }
      })
      this.$emit('input', val, selectObj)
      this.$emit('select', val, selectObj)
    },
    setCurrentDictOptions(dictOptions) {
      this.dictOptions = dictOptions
    },
    getCurrentDictOptions() {
      return this.dictOptions
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/.el-select-dropdown__item.hover {
  background: #4d89f1 !important;
  color: #fff !important;
}
</style>
