<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}`" :key="keySort" :rules="required?  [{
                  required,
                  trigger: 'change',
                  message: label + '不能为空',
                  validator: (rule, value, callback) => valueRequired(rule, value, callback, row)
        }]:[]">
        <template v-if="showInput">
<!--          <el-tooltip  :content="row[prop]" effect="light">
          </el-tooltip>-->
            <el-input :maxlength="maxlength"
                      @input="val => change(val, row, $index)" clearable
                      @clear="$emit('clear', row,$index)"
                      :readonly="readonly" :size="size" :placeholder="placeholder || '请输入'"
                      v-model="row[prop]"
                      :disabled="disabled || columnDisabledFunction(row,$index)">
              <template slot="append" v-if="append">
                <slot name="appendSlot" :row="row" :index="$index"></slot>
              </template>
            </el-input>

        </template>

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

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

export default {
  name: "CustomInputColumn",
  props: {
    label: {
      type: String,
      default: "",
    },
    prop: {
      type: String,
    },
    keySort: {
      type: String,
    },
    minWidth: {
      type: Number,
      default: 150,
    },
    showInput: {
      type: Boolean,
      default: true
    },
    required: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    disabledFunction: {
      type: Function,
      default: (row) => !row
    },
    trigger: {
      type: String,
      default: 'change'
    },
    rules: {
      type: Array,
      default: () => []
    },
    validate: {
      type: String
    },
    size: {
      type: String,
      default: 'small'
    },
    placeholder: {
      type: String,
    },
    icon: {
      type: String
    },
    append: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    },
    maxlength: {
      type: Number,
      default: 20
    },

  },
  data() {
    return {
      cellRow: {},
    }
  },
  methods: {
    columnDisabledFunction(row, $index) {
      return this.disabledFunction(row, $index);
    },
    change(val, row, index) {
      val = val.trim()
      this.cellRow = row
      this.$set(this.cellRow, this.prop, val);
      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})
    },
    clickIcon() {
      this.$emit('icon-clicked')
    },
    valueRequired(rule, value, callback, item) {
      let formValue = item[this.prop];
      if (item.operationFlag === 2) {
        callback()
      } else if (!isBlank(formValue)) {
        callback()
      } else {
        callback(new Error(rule.message))
      }
    },
  }
};
</script>

<style scoped></style>
