<template>
  <el-table-column :label="label" :prop="prop"
                   :min-width="minWidth" :show-overflow-tooltip="showOverflow"
                   :align="align" :fixed="fixed" :sortable="sortable">
    <slot name="otherColumn"></slot>
    <template #header="{row,$index}">
      <slot name="header">
        <span style="color: red" v-if="required">*</span>
        <span>{{ label }}</span>
      </slot>
    </template>
    <template #default="{ row, $index }">
      <!-- 输入方式（00：Input 01：InputNumber 02：Select）     -->
      <el-form-item :prop="`${prop}${$index}`" v-if="showItemFunction(row,$index)"  :rules="required?  [{
                  required,
                  trigger: 'change',
                  message: label + '不能为空',
                  validator: (rule, value, callback) => valueRequired(rule, value, callback, row)
        }]:[]">
<!--        <el-tooltip :content="returnContent(row)" effect="light">
        </el-tooltip>-->
          <el-input v-if="row[inputType]==='00'" :maxlength="maxlength"
                    @input="val => inputChange(val, row, $index)" clearable
                    @clear="$emit('clear', row,$index)"
                    :readonly="readonly" :size="size" :placeholder="placeholder || '请输入'"
                    v-model="row[prop]"
                    :disabled="disabled || columnDisabledFunction(row,$index)">
          </el-input>

          <el-input-number v-if="row[inputType]==='01'" class="leftClass" style="width: 100%;" v-model="row[prop]" :min="min" :max="max"
                           :precision="precision"
                           :disabled="disabled || columnDisabledFunction(row,$index)"
                           @change="val=>inputNumberChange(val,row,$index)"
                           :controls="false"/>


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

          <el-switch v-if="row[inputType]==='05'" v-model="row[prop]" active-value="Yes" inactive-value="No"
          @change="val => inputChange(val, row, $index)"
          :disabled="disabled || columnDisabledFunction(row,$index)" :readonly="readonly" :size="size"/>

      </el-form-item>
      <div v-else style="cursor: pointer;color:#E60012 " @click="$emit('click',row)"> {{ row[prop] }}</div>

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

<script>
import {isBlank} from "@/utils";
import yid from "yid";

export default {
  name: 'CustomFormItemColumn',
  props: {
    openReserve: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      default: '',
    },
    selectable: {
      type: Function,
    },
    label: {
      type: String,
      default: '',
    },
    prop: {
      type: String,
    },
    minWidth: {
      type: Number,
      default: 0,
    },
    fixed: {
      type: String,
    },
    sortable: {
      type: Boolean,
      default: false,
    },
    align: {
      type: String,
      default: 'center',
    },
    showOverflow: {
      type: Boolean,
      default: false,
    },
    required: {
      type: Boolean,
      default: false
    },
    multiple: {
      type: Boolean,
      default: false
    },
    collapseTags: {
      type: Boolean,
      default: false
    },
    multipleLimit: {
      type: Number,
      default: 0
    },
    //外部选项值
    data: {
      type: Array,
      default: () => []
    },
    //行内选项值 字段名
    rowOptionProp: {
      type: String,
      default: 'options'
    },

    valueProp: {
      type: String,
      default: 'value'
    },
    labelProp: {
      type: String,
      default: 'label'
    },
    allowCreate: {
      type: Boolean,
      default: false
    },
    clearable: {
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    validateMsg: {
      type: String,
    },
    inputType: {
      type: String,
      default: 'inputType'
    },
    readonly: {
      type: Boolean,
      default: false
    },
    maxlength: {
      type: Number,
      default: 20
    },
    size: {
      type: String,
      default: 'small'
    },
    placeholder: {
      type: String,
    },
    min: {
      type: Number,
      default: 0,
    },
    max: {
      type: Number,
      default: 99999999,
    },
    precision: {
      type: Number,
      default: 0,
    },
    splitFlag: {
      type: String,
      default: ";",
    },
    disabledFunction: {
      type: Function,
      default: (row) => !row
    },
    showFunction: {
      type: Function,
      default: () => true,
    }

  },
  computed: {
    returnContent() {
      return function (row) {

        if (row[this.inputType] === '02') {
          let data = row[this.rowOptionProp] || this.data;
          if (!data || data.length === 0) {
            return row[this.prop]
          }
          if (this.multiple) {
            let res = []
            let dataProp = null;
            if (Array.isArray(row[this.prop])) {
              dataProp = row[this.prop];
            } else {
              if(isBlank(row[this.prop])){
                return "";
              }
              dataProp = row[this.prop].split(this.splitFlag);
            }
            dataProp.forEach((item) => {
              let searchItem = data.find(it => it[this.valueProp] == item);
              if (!isBlank(searchItem)) {
                res.push(searchItem[this.labelProp])
              }
            })
            return res.join(',');
          } else {
            let item = data.find(it => it[this.valueProp] == row[this.prop]);
            if (data && data.length > 0) {
              return !isBlank(item) ? item[this.labelProp].toString() : "";
            }
          }
        } else {
          return row[this.prop]
        }
      }
    }
  },
  methods: {
    valueRequired(rule, value, callback, item) {
      let formValue = item[this.prop];
      if (!isBlank(formValue)) {
        callback()
      } else {
        callback(new Error(rule.message))
      }
    },
    yid,
    handleChange(cellValue, row, index) {
      let res = null
      let findOptions = row[this.rowOptionProp] || this.data;
      if (!this.multiple) {
        findOptions.some((item) => {
          if (item[this.valueProp] === cellValue) {
            res = item
            let operationFlag = isBlank(row.id) ? '1' : '2'
            this.$set(row, 'operationFlag', operationFlag)
            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]);
            }
          }
        })
      } else {
        res = []
        if (!isBlank(cellValue)) {
          cellValue.forEach((item) => {
            findOptions.some((it) => {

              if (it[this.valueProp] === item) {
                res.push(it)
              }
            })
          })
          let operationFlag = isBlank(row.id) ? '1' : '2'
          this.$set(row, 'operationFlag', operationFlag)
          this.$set(this.$parent.$parent.model, (this.prop + `${index}`), cellValue);
          this.$set(row, this.prop, cellValue)
        }

      }


      this.$emit('change', {val: res, row: row})
    },
    handleClear(cellValue, row, index) {
      this.$set(this.$parent.$parent.model, (this.prop + `${index}`), "");
      this.$set(row, this.prop, "")
      if (!isBlank(this.setLabelProp)) {
        this.$set(row, this.setLabelProp, "");
      }
      let operationFlag = isBlank(row.id) ? '1' : '2'
      this.$set(row, 'operationFlag', operationFlag)
      this.$emit('clear', row)
    },
    showItemFunction(row, $index) {
      return this.showFunction(row, $index);
    },

    columnDisabledFunction(row, $index) {
      return this.disabledFunction(row, $index);
    },
    inputChange(val, row, index) {
      val = val.trim()
      this.$set(this.$parent.$parent.model, (this.prop + `${index}`), val);
      let operationFlag = isBlank(row.id) ? '1' : '2'
      this.$set(row, 'operationFlag', operationFlag)
      this.$set(row, this.prop, val)
      this.$emit('change', {val: val, row: row, index: index})
    },
    inputNumberChange(val, row, index) {
      this.$set(this.$parent.$parent.model, (this.prop + `${index}`), val);
      let operationFlag = isBlank(row.id) ? '1' : '2'
      this.$set(row, 'operationFlag', operationFlag)
      this.$set(row, this.prop, val)
      this.$emit('inputNumberChange', {val: val, row: row, index: index})
    }

  }

}
</script>

<style scoped>
.leftClass >>> .el-input__inner {
  text-align: left;
}
</style>
