<template>
  <a-form-model
    ref="iForm"
    class="i-form"
    :model="searchForm"
    :disabled="formDisable"
    layout="vertical"
    label-align="right"
  >
    <a-row class="form-row">
      <a-col
        v-for="(key, index) in allFormItems"
        :key="index"
        :span="formItem[key].span ? 24 / formItem[key].span : 24 / span"
      >
        <a-form-model-item
          :ref="key"
          :auto-link="formItem[key].itemType !== 'select'"
          :rules="formItem[key].isRequired ? formItem[key].rule : {}"
          :label="formItem[key].i18n ? $t(formItem[key].i18n) : ''"
          :prop="key"
        >
          <slot :name="key">
            <!-- 表单类型为 select -->
            <i-table-select
              v-if="formItem[key].itemType === 'select'"
              v-model="searchForm[key]"
              :field="key"
              :multiple="formItem[key].multiple"
              :disabled="formItem[key].disabled"
              :allow-create="formItem[key].allowCreate"
              :remote="formItem[key].needRemote"
              :dict-code="formItem[key].dictCode"
              :loading="formItem[key].loading"
              :options="formItem[key].options"
              :remote-method="
                formItem[key].remoteMethod ? formItem[key].remoteMethod : null
              "
              :is-option-string="formItem[key].isString"
              :filterable="formItem[key].filterable"
              :options-props="formItem[key].optionsProps"
              @change="change(key)"
            />
            <!-- 表单类型为年月 -->
            <a-month-picker
              v-else-if="formItem[key].itemType === 'month'"
              v-model="searchForm[key]"
              value-format="yyyy-MM"
              class="monthDate"
              allow-clear
              :placeholder="$t('PLACESELECT')"
            />

            <!-- 表单类型为date -->
            <a-date-picker
              v-else-if="formItem[key].itemType === 'date'"
              v-model="searchForm[key]"
              value-format="yyyy-MM-dd"
              allow-clear
              :placeholder="$t('PLACESELECT')"
            />

            <!-- 表单类型为 daterange -->
            <a-range-picker
              v-else-if="formItem[key].itemType === 'daterange'"
              v-model="searchForm[key]"
              allow-clear
              type="daterange"
              :value-format="
                formItem[key].isHourMinuteSecond
                  ? 'yyyy-MM-dd HH:mm:ss'
                  : 'yyyy-MM-dd'
              "
              :separator="$t('TIPS:COMMON:DATERANGE:TO')"
              :placeholder="[$t('START_TIME'), $t('END_TIME')]"
            />

            <!-- 表单类型为checkGroup -->
            <a-checkbox-group
              v-else-if="formItem[key].itemType === 'checkboxGroup'"
              v-model="searchForm[key]"
            >
              <a-checkbox
                v-for="item in formItem[key].options"
                :key="item.code"
                :value="item[formItem[key].optionsProps.value]"
              >
                {{ $t(item[formItem[key].optionsProps.label]) }}
              </a-checkbox>
            </a-checkbox-group>

            <!-- 表单类型为radioGroup -->
            <a-radio-group
              v-else-if="formItem[key].itemType === 'radioGroup'"
              v-model="searchForm[key]"
            >
              <a-radio
                v-for="item in formItem[key].options"
                :key="item.type"
                :value="item[formItem[key].optionsProps.value]"
                class="mr-10"
              >
                {{ $t(item[formItem[key].optionsProps.label]) }}
              </a-radio>
            </a-radio-group>

            <!-- 单选框 按钮样式 -->
            <a-radio-group
              v-else-if="formItem[key].itemType === 'buttonGroup'"
              v-model="searchForm[key]"
              @change="
                formItem[key].change ? formItem[key].change($event) : () => {}
              "
            >
              <a-radio-button
                v-for="item in formItem[key].options"
                :key="item.type"
                :value="item[formItem[key].optionsProps.value]"
              >
                {{ $t(item[formItem[key].optionsProps.label]) }}
              </a-radio-button>
            </a-radio-group>

            <!-- 表单类型为input-number -->
            <a-input-number
              v-else-if="formItem[key].itemType === 'input-numer'"
              v-model.trim="searchForm[key]"
              :precision="formItem[key].precision"
              :min="formItem[key].min"
              :max="formItem[key].max"
              allow-clear
              style="width: 100%"
              :placeholder="$t('PLACEENTER')"
            />
            <!-- 表单类型为input -->
            <a-input
              v-else-if="
                !formItem[key].itemType || formItem[key].itemType === 'input'
              "
              v-model="searchForm[key]"
              :type="formItem[key].inputType ? formItem[key].inputType : ''"
              :class="{ active: formItem[key].span === 1 }"
              allow-clear
              :placeholder="$t('PLACEENTER')"
              :disabled="formItem[key].disabled"
              @input="iptChange"
            />
          </slot>
        </a-form-model-item>
      </a-col>
    </a-row>
  </a-form-model>
</template>

<script>
export default {
  name: "IForm",
  props: {
    labelWidth: {
      type: Number,
      default: 100,
    },
    span: {
      type: Number,
      default: 2,
    },
    formDisable: {
      type: Boolean,
      default: false,
    },
    formItem: {
      type: Object,
      default: () => ({
        factoryId: {
          i18n: "",
          isRequired: false,
          allowCreate: false,
          disabled: false,
          loading: false,
          needRemote: false,
          dictCode: "",
          options: [],
          remoteMethod: null,
          optionsProps: null,
        },
      }),
    },
    searchForm: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {};
  },
  computed: {
    // 若form表单字段个数大于4个,则截取前4个作为第一行展示的内容
    allFormItems() {
      return Object.keys(this.searchForm).filter(
        (item) => this.formItem[item] && !this.formItem[item].hidden
      );
    },
  },
  created() {
    this.generateRules();
  },
  methods: {
    change(key) {
      this.$nextTick(() => {
        this.$refs[key][0].onFieldChange();
      });
      return this.formItem[key].change
        ? this.formItem[key].change($event)
        : () => {};
    },
    // 根据表单字段生成校验规则
    generateRules() {
      if (!this.searchForm) return;
      // eslint-disable-next-line
      for (const key in this.searchForm) {
        // 若是必填且未自定义校验规则时,自动生成校验规则
        if (
          this.formItem[key] &&
          this.formItem[key].isRequired &&
          !this.formItem[key].rule
        ) {
          const changeItemKeys = [
            "select",
            "month",
            "date",
            "buttonGroup",
            "radioGroup",
            "daterange",
            "checkboxGroup",
          ];
          this.formItem[key].rule = {
            required: true,
            // 判断是输入框还是选择框
            message:
              this.formItem[key].itemType &&
              changeItemKeys.includes(this.formItem[key].itemType)
                ? this.$t("PLACESELECT")
                : this.$t("PLACEENTER"),
            trigger:
              this.formItem[key].itemType &&
              changeItemKeys.includes(this.formItem[key].itemType)
                ? "change"
                : ["change", "blur"],
          };
        }
      }
    },
    // 解决偶发的input框无法输入的问题
    iptChange() {
      this.$forceUpdate();
    },
  },
};
</script>

<style lang="less">
.i-form {
  .form-row {
    padding: 15px;
  }
  .a-row {
    .a-col-24 {
      display: flex;
      justify-content: center;
      .a-form-model-item__content {
        margin-left: 0 !important;
      }
      .a-form-model-item {
        display: flex;
        justify-content: center;
      }
    }
    .a-col-12,
    .a-col-24 {
      .a-form-model-item {
        width: 100%;
        .a-form-model-item__content {
          width: 100%;
        }
      }
    }
  }
}
</style>
