<!--
数据字典的优化
新增级联字典
type:cascader,
dictCode: '一级字典code值'
dictCodeName:['二级字典code值'，'三级字典code值'] // 目前只做到三级级联字典
-->
<template>
    <!-- 下拉框 -->
    <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: {
        dictCode: String,
        placeholder: String,
        triggerChange: Boolean,
        disabled: 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,
        },
        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, selectObj) {
            this.$emit('input', val, selectObj)
            this.$emit('select', val, selectObj)
        },
        setCurrentDictOptions(dictOptions) {
            this.dictOptions = dictOptions
        },
        getCurrentDictOptions() {
            return this.dictOptions
        },
    },
}
</script>

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