<!--
 * @Description: 
 * @Autor: Heloise
 * @Date: 2022-07-14 15:57:02
 * @LastEditors: Heloise
 * @LastEditTime: 2022-08-11 11:49:00
-->
<template>
  <div class="el-single-form-item">
    <el-form-item
      :key="propKey"
      :prop="propKey"
      :label="label"
      :rules="getRules(formType)"
    >
      <el-input
        v-if="formType === 'input' || formType === 'inputNumberArr'"
        v-model="value"
        :placeholder="
          formType === 'inputNumberArr'
            ? '请输入数值（数组用逗号隔开）'
            : '请输入'
        "
        clearable
        v-bind="$attrs"
      ></el-input>
      <el-input
        v-if="formType === 'inputNumber'"
        v-model="value"
        placeholder="请输入"
        v-bind="$attrs"
      >
        <template slot="append">{{ unit }}</template>
      </el-input>
      <el-input-number
        v-if="formType === 'number'"
        v-model="value"
        placeholder="请输入"
        controls-position="right"
        v-bind="$attrs"
      ></el-input-number>
      <el-select
        v-if="formType === 'select' || formType === 'multSelect'"
        v-model="value"
        clearable
        v-bind="$attrs"
        v-on="$listeners"
      >
        <slot></slot>
      </el-select>
      <el-select
        v-if="formType === 'remoteSelect' || formType === 'multRemoteSelect'"
        v-model="value"
        remoteSelect
        filterable
        reserve-keyword
        clearable
        v-bind="$attrs"
        v-on="$listeners"
      >
        <slot></slot>
      </el-select>
      <el-cascader
        v-if="formType === 'cascader'"
        v-model="value"
        outFilterable
        clearable
        v-bind="$attrs"
        v-on="$listeners"
      ></el-cascader>
      <el-date-picker
        v-if="formType === 'date'"
        v-model="value"
        type="date"
        placeholder="请选择日期"
        v-bind="$attrs"
      >
      </el-date-picker>
      <el-date-picker
        v-if="formType === 'dateRange'"
        v-model="value"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        v-bind="$attrs"
      >
      </el-date-picker>
    </el-form-item>
  </div>
</template>

<script>
export default {
  name: 'ElSingleFormItem',
  props: {
    formType: {
      type: String,
      default: ''
    },
    label: {
      type: String,
      default: ''
    },
    propKey: {
      type: String,
      default: ''
    },
    required: {
      type: Boolean,
      default: true
    },
    bindValue: [String, Number, Array, Date],
    unit: String,
    precisionVal: {
      type: Number,
      default: 0
    }
  },
  computed: {
    value: {
      get() {
        return this.bindValue;
      },
      set(value) {
        this.$emit('getFormVal', value, this.propKey);
      }
    }
  },
  methods: {
    getRules(type) {
      let obj = {};
      switch (type) {
        case 'input':
          obj = {
            required: this.required,
            message: '请输入',
            trigger: 'blur'
          };
          break;
        case 'number':
          obj = {
            type: 'number',
            required: this.required,
            message: '请输入',
            trigger: 'blur'
          };
          break;
        case 'inputNumber':
          obj = {
            required: this.required,
            validator: this.numberValid,
            trigger: 'blur'
          };
          break;
        case 'inputNumberArr':
          obj = {
            required: this.required,
            validator: this.numberArrValid,
            trigger: 'blur'
          };
          break;
        case 'select':
        case 'remoteSelect':
          obj = {
            required: this.required,
            message: '请选择',
            trigger: 'change'
          };
          break;
        case 'multSelect':
        case 'multRemoteSelect':
        case 'cascader':
          obj = {
            type: 'array',
            required: this.required,
            message: '请选择',
            trigger: 'change'
          };
          break;
        case 'date':
          obj = {
            type: 'date',
            required: this.required,
            message: '请选择日期',
            trigger: 'change'
          };
          break;
        case 'dateRange':
          obj = {
            type: 'array',
            required: this.required,
            trigger: 'change',
            message: '请选择日期',
            fields: {
              0: {
                type: 'date',
                required: this.required,
                message: '请选择日期'
              },
              1: {
                type: 'date',
                required: this.required,
                message: '请选择日期'
              }
            }
          };
          break;
        default:
          break;
      }
      return obj;
    },
    numberValid(rule, value, callback) {
      if (this.precisionVal === 2) {
        if (/^-?[0-9]+\.[0-9]{2}$/.test(this.value)) {
          callback();
        } else {
          callback(new Error('请输入数字并保留两位小数'));
        }
      } else {
        if (/^(0|[1-9][0-9]*|-[1-9][0-9]*)$/.test(this.value)) {
          callback();
        } else {
          callback(new Error('请输入整数'));
        }
      }
    },
    numberArrValid(rule, value, callback) {
      let dealValue = this.value;
      let arr = dealValue.replace(/，/gi, ',').split(',');
      const flag = arr.every((val) => {
        return /^[0-9]+.?[0-9]*$/.test(val);
      });
      if (flag) {
        callback();
      } else {
        callback(new Error('请输入正确的数字数组'));
      }
    }
  }
};
</script>
