<!--数据字典选择框-->
<template>
  <div>
    <el-select
      style="width: 100%"
      :value="value"
      :clearable="clearable"
      :disabled="disabled"
      :filterable="filterable"
      :filter-method="selectFilterMethod"
      @change="change"
      :size="size"
      :placeholder="placeholder"
      @input="emitChange($event)"
      v-if="editable">
      <el-option
        v-for="item in optionList"
        :key="item.key"
        :label="item.text"
        :value="item.key"
        :disabled="item.disabled">
        <span style="float: left">{{ item.text }}</span>
        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.remark }}</span>
      </el-option>
    </el-select>
    <span v-if="!editable">{{dictText}}</span>
  </div>
</template>

<script>
  export default {
    name: 'DictSelect',
    props: {
      placeholder: {
        type: String,
        default: '请选择'
      },
      dictName: {
        type: String,
        default: undefined
      },
      filterable: {
        type: Boolean,
        default: false
      },
      sizeLimit: {
        type: Number,
        default: 0
      },
      clearable: {
        type: Boolean,
        default: true
      },
      disabled: {},
      editable: {
        type: Boolean,
        default: true
      },
      change: {
        type: Function,
        default: function (value) {
        }
      },
      size: {
        type: String,
        default: 'mini'
      },
      value: {}
    },
    computed: {
      dictText () {
        for (let item of this.options) {
          if (this.value === item.key) {
            return item.text;
          }
        }
        return ''
      },
      optionList () {
        let list = this.options;
        if (this.filterable) {
          list = this.options.filter(t => {
            return t.text.indexOf(this.searchText) >= 0
          });
        }
        if (this.sizeLimit > 0) {
          list = list.splice(0, this.sizeLimit);
        }
        return list;
      }
    },
    data () {
      return {
        options: [],
        searchText: ''
      }
    },
    mounted () {
      if (this.dictName === undefined) {
        return;
      }
      this.$store.dispatch(this.$actionType.PlatformStateAction.GetDict, [this.dictName]).then(res => {
        this.options = res[this.dictName];
        this.searchText = this.dictText;
      })
    },
    methods: {
      emitChange (val) {
        this.$emit('input', val)
        this.$emit('change', val)
        this.$nextTick(() => {
          this.searchText = this.dictText;
        });
      },
      selectFilterMethod (val) {
        this.searchText = val;
      }
    }
  }
</script>

<style scoped>

</style>
