<template>
  <el-col :xl="span" :lg="lgSpan" :md="mdSpan" :sm="smSpan" :xs="xsSpan">
    <el-form-item
      :label="label"
      :rules="[...requireRule(!disabled &&required, label, validate,trigger), ...rules]"
      :prop="prop"
    >
      <el-select
        ref="select"
        v-model="$parent.model[prop]"
        @change="handleChange"
        :multiple="multiple"
        :clearable="clearable"
        filterable
        v-if="!showTip"
        :disabled="disabled"
      >
        <el-option
          v-if="showEmpty"
          :label="emptyLabel"
          :value="undefined"
          key="select"
          :title="emptyLabel"
        />
        <el-option
          v-for="item in dict[dictType]"
          :key="item.value"
          :value="item.value"
          :label="item.label"
          :title="item.label"
        />
      </el-select>
<!--      <el-tooltip v-else :content="selectedLabel" effect="light">
        <span>
            </span>
      </el-tooltip>-->
          <el-select
            ref="select"
            v-model="$parent.model[prop]"
            @change="handleChange"
            :multiple="multiple"
            :clearable="clearable"
            filterable
            :disabled="disabled"
          >
            <el-option
              v-if="showEmpty"
              :label="emptyLabel"
              :value="undefined"
              key="select"
              :title="emptyLabel"
            />
            <el-option
              v-for="item in dict[dictType]"
              :key="item.value"
              :value="item.value"
              :label="item.label"
              :title="item.label"
            />
          </el-select>

    </el-form-item>
  </el-col>
</template>

<script>
import mixin from "../../mixin";
import {mapGetters} from "vuex";
import {isBlank} from "../../../../utils/common";

/**
 * 下拉框组件
 */
export default {
  name:'CustomDictSelect',
  mixins: [mixin],
  props: {
    multiple: {
      type: Boolean,
      default: false,
    },
    dictType: {
      type: String,
      required: true,
    },
    showEmpty: {
      type: Boolean,
      default: false,
    },
    emptyLabel: {
      type: String,
      default: "",
    },
    span: {
      type: Number,
      default: 6
    },
    validate: {
      type: String
    },
    trigger: {
      type: String,
      default: 'change'
    },
    rules: {
      type: Array,
      default: () => []
    },
    /**
     * 是否需要同步存储 label值
     * 存储label 字段名
     * */
    setLabelProp: {
      type: String,
      default: ""
    },

    lgSpan: {
      type: Number,
      default: 8
    },
    mdSpan: {
      type: Number,
      default: 8
    },
    smSpan: {
      type: Number,
      default: 12
    },
    xsSpan: {
      type: Number,
      default: 24
    }
  },
  data(){
    return {
      isMounted: false
    }
  },
  computed: {
    ...mapGetters(["dict"]),
    selectedLabel() {
      if (!this.isMounted) {
        return
      }
      return this.$refs.select && this.$refs.select.selectedLabel;
    },
    showTip() {
      return this.disabled
    }
  },
  mounted() {
    this.isMounted = true
  },
  methods: {
    handleChange(cellValue) {
      const dicts = this.dict[this.dictType] || [];
      const target = dicts.filter(
        ({value}) => String(value) === String(cellValue)
      );
      let res = target && target.length > 0 ? target[0] : "";
      if (!isBlank(this.setLabelProp)) {
        if (target.length>0){
          this.$set(this.$parent.model, this.setLabelProp, target[0].label)
        }

      }

      this.$emit("change", res);
    },
  },
};
</script>
