<!-- 动态表单组件 -->
<!-- 新功能禁止使用该组件 -->
<template>
  <div class="form-container">
    <el-form ref="formRef" label-width="82px" :model="props.formModel" :rules="dFormRules">
      <el-row :gutter="props.gutter">
        <template v-for="(value, key, index) in props.formModel">
          <el-col class="ab-p-b-5" v-if="'section'===fieldConfigMap.get(key)?.type" :span="24" v-show="isShow(fieldConfigMap.get(key))">
            <AbSection :title="fieldConfigMap.get(key).name"></AbSection>
          </el-col>
          <el-col v-else :span="fieldConfigMap.get(key)?.span ? fieldConfigMap.get(key).span : props.span"  v-show="isShow(fieldConfigMap.get(key))">
            <template v-if="fieldConfigMap.get(key)?.slot">
              <el-form-item :label-width="fieldConfigMap.get(key)?.labelWidth" :label="fieldConfigMap.get(key)?.name" :prop="fieldConfigMap.get(key)?.key" :required="fieldConfigMap.get(key)?.required">
                <slot :name="fieldConfigMap.get(key)?.slot"></slot>
              </el-form-item>
            </template>
            <template v-else>
              <AbFormItem :formModel="props.formModel" :fieldSet="fieldConfigMap.get(key)"></AbFormItem>
            </template>
          </el-col>
        </template>
        <template #title>
        </template>
        <el-col :span="24" class="ab-text-right ab-m-b-18">
          <slot v-if="$slots['button']" name="button"></slot>
          <template v-else>
            <el-button type="primary" @click="executeSave(formRef)">保存</el-button>
            <el-button type="default" @click="formReset()">重置</el-button>
          </template>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
  
  
<script setup lang="ts">
import AbFormItem from "@/framework/components/standard/FormDynamic/abFormItem.vue";
import AbSection from "@/framework/components/standard/AbSection/index.vue";
const formRef = ref<FormInstance>() //表单引用
const dFormRules = reactive<FormRules>({})  //验证规则
const fieldConfigMap = ref(new Map()) //表单明细配置，Map<表单函数key,表单函数key对应配置>
//组件传参
let props = defineProps({
  formModel: { type: Object },//表单绑定数据
  fieldConfigs: { type: Array },//表单明细配置
  gutter: { type: Number, default: 0 },//栅格间隔
  span: { type: Number, default: 6 },//栅格占据的列数
  saveEvent: { type: Function },//保存事件
  resetEvent: { type: Function },//重置事件
})

// 外部使用响应式函数，不需要监听
// watch(() => props.fieldConfigs,(newValue, oldValue) => { 
//   console.log(newValue);
// },{ deep: true }
// )

/**是否显示 */
const isShow = (fieldConfig) => {
  if(fieldConfig&&undefined!==fieldConfig.show&&!fieldConfig.show)
    return false
  return true
}
/**数据处理 */
const dataHandle = (fieldConfigs) => {
  for (let fc of fieldConfigs) {
    //转换map，方便获取数据
    fieldConfigMap.value.set(fc.key, fc)
    //设置表单验证规则
    if (undefined !== fc.rules) {
      dFormRules[fc.key] = fc.rules
    }
    //绑定表单默认数据
    if(!props.formModel[fc.key])
      props.formModel[fc.key] = (undefined !== fc.value ? fc.value : '')
  }
}

dataHandle(props.fieldConfigs)

/**执行查询 */
const executeSave = async (formEl: FormInstance | undefined) => {
  if (!formEl || !await formEl.validate((valid, fields) => { return valid })) {
    return
  }

  if (props.saveEvent) props.saveEvent()
}

/**重置查询条件 */
const formReset = () => {
  if (props.resetEvent) {
    props.resetEvent()
    return
  }
  for (let fc of props.fieldConfigs) {
    props.formModel[fc.key] = (undefined !== fc.value ? fc.value : '')
  }
}
</script>
<style lang="scss" scoped></style>
  