/**
* @author: HXF
* @date: 2022/4/24 14:06
* @Description: 字典字段过滤组件
*/
<template>
  <div>
    <el-select
      v-model.trim="dataValue"
      :placeholder="getPlaceholder"
      style="width:100%"
      :disabled="disabled"
      :readonly="readonly"
      :size="size"
      :filterable="filterable"
      :multiple="multiple"
      :clearable="clearable"
      @change="dictChange"
    >
      <el-option v-if="!isRequired" :label="getPlaceholder" value="" />
      <el-option
        v-for="item in public_dict[code]"
        :key="item.id"
        :label="item[labelKey]"
        :value="numberCode ? Number(item.mycode) : item.mycode"
      />
    </el-select>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'DictSelect',
  components: {},
  props: {
    /**
     * 双向绑定
     */
    value: [String, Number, Boolean, Array, Object],
    /**
     * 字典编码
     */
    code: {
      type: String,
      required: true
    },
    /**
     * 描述
     */
    placeholder: {
      type: String,
      default: undefined
    },
    /**
     * 是否显示请选择
     */
    isRequired: {
      type: Boolean,
      default: false
    },
    /**
     * 是否禁用
     */
    disabled: {
      type: Boolean,
      default: false
    },
    /**
     * 是否只读
     */
    readonly: {
      type: Boolean,
      default: false
    },
    /**
     * 组件大小
     */
    size: {
      type: String,
      default: 'small'
    },
    /**
     * 是否支持多选
     */
    multiple: {
      type: Boolean,
      default: false
    },
    /**
     * 是否支持搜索
     */
    filterable: {
      type: Boolean,
      default: false
    },
    /**
     * 是否可清空
     */
    clearable: {
      type: Boolean,
      default: false
    },
    labelKey: {
      type: String,
      default: 'myname'
    },
    valueKey: {
      type: String,
      default: 'mycode'
    },
    numberCode: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dataValue: ''
    }
  },
  computed: {
    getPlaceholder() {
      return this.placeholder != undefined &&
      this.placeholder != 'undefined' &&
      this.placeholder != ''
        ? this.placeholder
        : '请选择'
    },
    ...mapGetters(['public_dict'])
  },
  watch: {
    value(val, oldValue) {
      if (val !== this.dataValue) {
        this.dataValue = val
      }
    },
    dataValue(val, oldValue) {
      if (val !== this.value) {
        this.$emit('input', val)
      }
    }
  },
  created: function() {
    this.dataValue = this.value
  },
  mounted: function() {
    this.getData()
  },
  methods: {
    dictChange(value) {
      this.$emit('dictChange', value)
    },
    async getData() {
      await this.$store.dispatch('dict/dict', this.code)
      // 没有全选默认选择第一项
      if (this.isRequired && !this.dataValue && this.dataValue != 0) {
        const code = this.public_dict[this.code]?.[0]?.mycode
        this.dataValue = this.numberCode ? Number(code) : code
      }
    }
  }
}
</script>
<style lang="scss" scoped>
//::v-deep .el-input .el-input__inner::-webkit-input-placeholder,.el-input .el-input__inner::-moz-input-placeholder,.el-input .el-input__inner::-ms-input-placeholder{color:#b4bccc}
::v-deep .el-input .el-input__inner::placeholder {}
</style>
