<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"
      style="height: 36px"
    >
<!--      <el-tooltip  :content="$parent.model[prop]" effect="light">
        <span>

        </span>
      </el-tooltip>-->
      <el-select
        @change="handleChange"
        v-model="$parent.model[prop]"
        :multiple="multiple"
        :multiple-limit="multipleLimit"
        :clearable="clearable"
        @clear="val => handleClear(val)"
        filterable
        :disabled="disabled"
        :allow-create="allowCreate"
        :size="size"
        :collapse-tags="collapseTags"
        :style="{ width }"
      >
        <el-option
          v-for="item in data"
          :key="item[`${valueProp}`]"
          :value="StringValue?String(item[`${valueProp}`]):item[`${valueProp}`]"
          :label="item[`${labelProp}`]"
          :disabled="item.disabled"
          :title="item[`${labelProp}`]"
        />
      </el-select>
      <el-button ref="icon" :icon="icon" :style="{'background-color': buttonColor,'color': buttonLabelColor}"
                 v-if="showButton" :size="size" :disabled="iconDisable" @click="clickIcon">{{ buttonLabel }}
      </el-button>
    </el-form-item>
  </el-col>

</template>

<script>
import mixin from '../../mixin'
import {isBlank} from "@/utils/common";

/**
 * 下拉框组件
 */
export default {
  name:"CustomSelect",
  mixins: [mixin],
  props: {
    multiple: {
      type: Boolean,
      default: false
    },
    multipleLimit: {
      type: Number,
      default: 10
    },
    icon: {
      type: String,
    },
    size: {
      type: String,
      default: "small"
    },
    showButton: {
      type: Boolean,
      default: false
    },
    buttonColor: {
      type: String,
      default: '#C6000B'
    },
    buttonLabelColor: {
      type: String,
      default: '#fff'
    },
    width: {
      type: String,
      default: ''
    },
    buttonLabel: {
      type: String,
      default: ''
    },
    iconDisable: {
      type: Boolean,
      default: false
    },
    data: {
      type: Array,
      default: () => []
    },
    valueProp: {
      type: String,
      default: 'value'
    },
    labelProp: {
      type: String,
      default: 'label'
    },
    span: {
      type: Number,
      default: 6
    },
    allowCreate: {
      type: Boolean,
      default: false
    },
    collapseTags: {
      type: Boolean,
      default: false
    },
    StringValue: {
      type: Boolean,
      default: false
    },
    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
    }


  },
  methods: {
    handleChange(cellValue) {
      let res = null
      let arr = []
      if (!this.multiple) {
        this.data.some((item) => {
          if (item[this.valueProp] == cellValue) {
            res = item
            if (!isBlank(this.setLabelProp)) {
              this.$set(this.$parent.model, this.setLabelProp, item[this.labelProp])
            }
          }
        })
      } else {
        this.data.some((item) => {
          if (cellValue.includes(String(item[this.valueProp]))) {
            arr.push(String(item[this.valueProp]))
          }
        })
      }

      this.$emit('change', this.multiple ? arr : res)
    },
    handleClear(cellValue) {
      this.$set(this.$parent.model, this.prop, "");
      if (!isBlank(this.setLabelProp)) {
        this.$set(this.$parent.model, this.setLabelProp, "");
      }
      // this.$emit('clear',)
    },
    clickIcon() {
      this.$emit("icon-clicked");
    },
  }
}
</script>
