<!-- Created by henian.xu on 2018/7/27. -->

<template>
    <el-select
        v-bind="$attrs"
        v-model="model"
        filterable
        :clearable="clearable"
        :disabled="disabled"
        :placeholder="placeholder"
        v-on='$listeners'
        @blur="onBlur"
    >
        <el-option
            v-for="(item) in listData"
            :key="item.id"
            :label="item.name"
            :value="item.id + ''"
        />
    </el-select>
</template>

<script>
import emitter from 'element-ui/src/mixins/emitter';
import { Utils, GlobalVar } from 'vmf';

export default {
    name: 'DictionariesPicker',
    mixins: [emitter],
    data() {
        return {
            rawListData: [],
        };
    },
    props: {
        value: {
            type: [String, Number],
            required: true,
        },
        placeholder: {
            type: String,
            default() {
                return this.$$t('vmf_placeholder', '请选择');
            },
        },
        data: {
            type: [Array, String],
            default: null,
        },
        // 这个值是字典值的 Code
        type: {
            type: String,
            default: '',
        },
        // 排除不显示的的 id, 如果包含 value.id 依然可选
        exclude: {
            type: Array,
            default() {
                return [];
            },
        },
        clearable: {
            type: Boolean,
            default: true,
        },
        queryParams: {
            type: Object,
            default: () => ({}),
        },
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    computed: {
        model: {
            get() {
                return `${this.value}`;
            },
            set(val) {
                this.$emit('input', val);
                this.dispatch('ElFormItem', 'el.form.change', [val]);
            },
        },
        dictionary() {
            const { data, type } = this;
            if (type) return type;
            if (!Utils.isString(data)) return '';
            if (!/\[DICTIONARY\]/.test(data)) return '';
            const [, dic] = data.split(':');
            return dic;
        },
        listData() {
            const rawListData = this.rawListData || [];
            const exclude = this.exclude || [];
            return rawListData.filter(item => !exclude.includes(item.id));
        },
        listMap() {
            const res = {};
            this.listData.forEach(item => {
                res[item.id] = item;
            });
            return res;
        },
    },
    watch: {
        data: {
            handler(val) {
                if (Array.isArray(val)) {
                    this.rawListData = val;
                }
            },
            immediate: true,
        },
        dictionary: {
            handler(val) {
                if (val) this.getListData();
            },
            immediate: true,
        },
    },
    methods: {
        async getListData() {
            const apiUrl = GlobalVar.appConfig.DICTIONARY_API || '/rs/dic/entry/';
            const res = await this.$http.get(
                `${apiUrl}/${this.dictionary}`,
                {
                    ...this.queryParams,
                },
                {
                    isAxiosResponseData: true,
                    isRepeat: true,
                },
            );
            this.rawListData = res.data;
            return res;
        },
        getNameById(id) {
            const item = this.listMap[id];
            if (!item) return '';
            return item.name;
        },
        onBlur(event) {
            this.$emit('blur', event);
            this.dispatch('ElFormItem', 'el.form.blur', [this.currentValue]);
        },
    },
    created() {
        const { data, type } = this;
        if (!data && !type) throw new Error('[DictionariesPicker]:组件的 data 或 type 属性至少传值一个。');
        // console.log(this.data);
    },
};
</script>

<style lang="scss">
</style>
