<!--
 * @Author: Devin
 * @Date: 2022-11-15 11:23:35
 * @LastEditors: Devin
 * @LastEditTime: 2023-01-11 14:34:53
 * @Description: ts工程开发
-->
<template>
  <el-form ref="ruleFormRef" :inline="true" label-width="auto">
    <!--form-->
    <template v-if="formType === 'form'">
      <el-row class="row" :gutter="20">
        <el-col
          v-for="(form, index) in forms"
          :key="index"
          :span="form?.['span'] || 12"
        >
          <form-item
            :form-item="form"
            @change-event="changeEvent"
            @input-event="inputEvent"
          ></form-item>
        </el-col>
        <el-col></el-col>
      </el-row>
    </template>
    <!--
      1. 搜索项 forms.length < 4, 展示搜索和重置按钮
      2. 搜索项forms.length >= 4, 按钮展示更多，并首行只展示3个搜索项，其余收起；

    -->
    <!-- search -->
    <template v-else>
      <el-row :gutter="20">
        <template v-if="showSearch">
          <el-col
            v-for="formItem in forms"
            :key="formItem['name']"
            :span="formItem['col']"
          >
            <form-item
              :form-item="formItem"
              @change-event="changeEvent"
              @input-event="inputEvent"
            ></form-item>
          </el-col>
          <el-col :span="6" class="form-last-btn-col">
            <el-form-item class="form-last-btns">
              <slot name="btns"></slot>
            </el-form-item>
          </el-col>
        </template>

        <template v-else>
          <!-- 收起 -->
          <el-col
            v-for="formItem in forms.slice(0, 3)"
            :key="formItem['name']"
            :span="formItem['col']"
          >
            <form-item
              :form-item="formItem"
              @change-event="changeEvent"
              @input-event="inputEvent"
            ></form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item class="form-last-btns">
              <slot name="btns"></slot>
            </el-form-item>
          </el-col>
        </template>
      </el-row>
    </template>
  </el-form>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import type { FormInstance } from 'element-plus';
import FormItem from './FormItem.vue';

defineProps({
  forms: {
    type: Array,
    default: () => []
  },
  formType: {
    type: String,
    default: () => 'form'
  },
  // 是否隐藏筛选项
  showSearch: {
    type: Boolean,
    default: () => false
  }
});
const emits = defineEmits(['changeEvent', 'blurEvent']);
const enteredNum = ref(0);
const isTextarea = ref(false);
const surplusNum = ref(0);

// 触发change事件
const changeEvent = (form: any) => {
  emits('changeEvent', form);
};

function inputEvent(form: any) {
  if (form?.type === 'input') {
    if (form?.attrs?.type === 'textarea' && form?.attrs?.maxlength > 0) {
      enteredNum.value = form.value?.length || 0;
      isTextarea.value = true;
      surplusNum.value =
        Number(form.attrs?.maxlength) - Number(enteredNum.value);
    }
  }
}

// 校验规则
const ruleFormRef = ref<FormInstance>();

function checkRules() {
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      return true;
    }
    return false;
  });
}

defineExpose({
  ruleFormRef,
  checkRules
});
</script>

<style lang="scss" scoped>
.row {
  margin-bottom: 20px;
}
.el-form-item {
  width: calc(100% - 24px);
  margin-top: 18px;
}
.form-last-btn-col {
  margin-left: auto;
}
</style>