<template>
  <div class="emergency-plan-container">
    <BasicForm ref="formRef" :formData="ruleFormData" :formRules="formRules" :formConfig="ruleFormConfig">
      <template #planType>
        <el-select v-model="ruleFormData.planType" placeholder="请选择预案类型" filterable>
          <el-option v-for="item in planTypeDice" :key="item.itemCode" :label="item.itemValue" :value="item.itemCode" />
        </el-select>
      </template>
      <template #eventType>
        <el-select v-model="ruleFormData.eventType" placeholder="请选择事件类型" filterable>
          <el-option
            v-for="item in emergencyEventDice"
            :key="item.itemCode"
            :label="item.itemValue"
            :value="item.itemCode"
          />
        </el-select>
      </template>
      <template #deptId>
        <el-cascader
          ref="cascaderRef"
          popper-class="cascader-popper--custom"
          v-model="ruleFormData.deptId"
          :options="deptTree"
          :props="cascaderProp"
          :show-all-levels="false"
          placeholder="请选择制定部门"
          filterable
          @change="handleChangeDept"
        />
      </template>
      <template #approvalTemplateId>
        <el-select
          v-model="ruleFormData.approvalTemplateId"
          placeholder="请选择审批流程"
          filterable
          popper-class="el-scrollbar--custom"
        >
          <el-option v-for="item in approvalList" :key="item.id" :label="item.templateName" :value="item.id" />
        </el-select>
      </template>
      <template #uploadFile>
        <UploadFiles label="上传附件" :maxCount="1" @uploadSuccess="handleUploadSuccess" />
      </template>
    </BasicForm>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import BasicForm from '@/components/BasicForm.vue';
  import UploadFiles from '@/components/UploadFiles/UploadFiles.vue';
  import { useFormConfigHook } from '@/hooks/useFormConfigHook';
  import { useEmergencyHook } from '@/views/emergency/src/hoos';
  import { useEmergencyPlanHook } from '../hook';
  import type { AddEmergencyPlanForm } from '@/types/emergency-plan';
  import type { FileItem } from '@/components/UploadFiles/types.ts';
  import { PLAN_MANAGEMENT_FORM_CONFIG, PLAN_MANAGEMENT_FORM_DATA, PLAN_MANAGEMENT_FORM_RULES } from '../config';

  const formRef = ref();
  const cascaderRef = ref();
  const cascaderProp = {
    checkStrictly: true,
    expandTrigger: 'hover',
    value: 'id',
    label: 'deptName',
    emitPath: false,
  };
  const { ruleFormConfig, ruleFormData, formRules, cloneRuleFormData, beforeRouteLeave } =
    useFormConfigHook<AddEmergencyPlanForm>(
      PLAN_MANAGEMENT_FORM_CONFIG,
      PLAN_MANAGEMENT_FORM_DATA,
      PLAN_MANAGEMENT_FORM_RULES,
    );

  const { emergencyEventDice, getEmergencyEventDict, deptTree, getDeptTreeData, approvalList, getApprovalList } =
    useEmergencyHook();
  const { planTypeDice, getPlanTypeDict } = useEmergencyPlanHook();
  const handleChangeDept = () => {
    const deptInfo = cascaderRef.value?.getCheckedNodes();
    ruleFormData.deptName = deptInfo[0].label;
  };
  const handleUploadSuccess = (fileList: FileItem[]) => {
    ruleFormData.uploadFile = fileList;
    formRef.value?.validateField('uploadFile');
  };
  const handleValidate = async () => {
    if (!formRef.value) return;
    const validateResult = await formRef.value.validateForm();
    return validateResult;
  };
  const getFormData = () => {
    cloneRuleFormData();
    return ruleFormData;
  };
  onMounted(() => {
    getPlanTypeDict();
    getEmergencyEventDict();
    getDeptTreeData();
    getApprovalList();
    cloneRuleFormData();
    beforeRouteLeave();
  });
  defineExpose({
    handleValidate,
    getFormData,
  });
</script>

<style lang="scss" scoped>
  @use '../styles/info.scss' as *;
</style>
