<template>
  <el-table-column :label="label" :prop="prop" :min-width="minWidth">
    <template #header="{row,$index}">
      <slot name="header">
        <span style="color: red" v-if="required">*</span>
        <span>{{ label }}</span>
      </slot>
    </template>
    <template #default="{row,$index}">
      <el-form-item :prop="`${prop}${$index}`" :rules="required?  [{
                  required,
                  trigger: 'change',
                  message: label + '不能为空',
                  validator: (rule, value, callback) => valueRequired(rule, value, callback, row)
        }]:[]">
<!--        <el-tooltip :content="returnContent(row)" effect="light">
          <span>
          </span>

        </el-tooltip>-->
        <el-select
          @change="val => handleChange(val,row,$index)"
          @clear="val=>handleClear(val,row,$index)"
          v-model="row[prop]"
          :multiple="multiple"
          :multiple-limit="multipleLimit"
          collapse-tags
          :clearable="clearable"
          filterable
          :disabled="disabled"
          :allow-create="allowCreate"
          size="small"
        >
          <el-option
            v-for="item in data"
            :key="item[`${valueProp}`]"
            :value="item[`${valueProp}`]"
            :label="item[`${labelProp}`]"
          />
        </el-select>


      </el-form-item>
    </template>
  </el-table-column>
</template>

<script>

import {isBlank} from "@/utils/common";

export default {
  name: "CustomSelectColumn",
  props: {
    label: {
      type: String,
      default: "",
    },
    prop: {
      type: String,
    },
    minWidth: {
      type: Number,
      default: 150,
    },

    multiple: {
      type: Boolean,
      default: false
    },
    multipleLimit: {
      type: Number,
      default: 10
    },
    data: {
      type: Array,
      default: () => []
    },
    valueProp: {
      type: String,
      default: 'value'
    },
    labelProp: {
      type: String,
      default: 'label'
    },
    span: {
      type: Number,
      default: 8
    },
    allowCreate: {
      type: Boolean,
      default: false
    },
    clearable: {
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    required: {
      type: Boolean,
      default: false
    },
    validateMsg: {
      type: String,
    },
    /**
     * 是否需要同步存储 label值
     * 存储label 字段名
     * */
    setLabelProp: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      errorShow: false,
      errorMsg: "",
      cellRow: {},
    }
  },
  computed: {
    returnContent() {
      return function (row) {
        if (!this.data || this.data.length === 0) return;
        let item = this.data.find(it => it[this.valueProp] == row[this.prop]);
        return !isBlank(item) ? item[this.labelProp] : "";
      }

    }
  },
  methods: {
    valueRequired(rule, value, callback, item) {
      let formValue = item[this.prop];
      if (!isBlank(formValue)) {
        callback()
      } else {
        callback(new Error(rule.message))
      }
    },
    handleChange(cellValue, row, index) {
      let res = null
      this.data.some((item) => {
        if (item[this.valueProp] === cellValue) {
          res = item
          this.$set(this.cellRow, this.prop, cellValue);
          this.$set(this.$parent.$parent.model, (this.prop + `${index}`), cellValue);
          this.$set(row, this.prop, cellValue)
          if (!isBlank(this.setLabelProp)) {
            this.$set(row, this.setLabelProp, item[this.labelProp]);
          }
        }
      })
      let operationFlag = isBlank(row.id) ? '1' : '2'
      this.$set(row, 'operationFlag', operationFlag)
      this.$emit('change', {val: res, row: row})
    },
    handleClear(cellValue, row, index) {
      let operationFlag = isBlank(row.id) ? '1' : '2'
      this.$set(row, 'operationFlag', operationFlag)
      this.$set(this.cellRow, this.prop, "");
      this.$set(this.$parent.$parent.model, (this.prop + `${index}`), "");
      this.$set(row, this.prop, "")
      if (!isBlank(this.setLabelProp)) {
        this.$set(row, this.setLabelProp, "");
      }
      this.$emit('clear',)
    },



  }
};
</script>


<style scoped>
.msg__error {
  color: #ff4949;
  font-size: 12px;
  line-height: 1;
  padding-top: 4px;
  margin: 0;
}
</style>
