<template>
  <main class="safety-platform-container__main">
    <div class="info-container" v-if="drillDetailData">
      <DrillActivity :drill-plan-item-detail="drillDetailData" />
      <DrillImplementation :drill-plan-item-detail="drillDetailData" />
    </div>
  </main>
  <footer class="safety-platform-container__footer" v-if="status === CONFIRM_STATUS_TYPE.WAIT_CONFIRM">
    <el-button type="primary" @click="openDialog">确认演练脚本</el-button>
    <BasicDialog ref="basicDialogRef" title="演练确认" @refresh="refreshFromData">
      <template #form>
        <div class="form">
          <span>请提交你的部门参与人数</span>
          <BasicForm ref="basicFormRef" :formData="ruleFormData" :formRules="formRules" :formConfig="ruleFormConfig">
            <template #planToParticipateCount>
              <el-input
                v-model="ruleFormData.planToParticipateCount"
                placeholder="请输入参与人数"
                @input="handleInputNumber"
              />
            </template>
          </BasicForm>
        </div>
      </template>
      <template #footer>
        <el-button type="primary" @click="handleSumbit">提交</el-button>
        <el-button @click="basicDialogRef?.closeDialog">取消</el-button>
      </template>
    </BasicDialog>
  </footer>
</template>

<script lang="ts" setup>
  import { useRouter } from 'vue-router';
  import { onMounted, ref } from 'vue';
  import { ElMessage } from 'element-plus';
  import BasicDialog from '@/components/BasicDialog.vue';
  import BasicForm from '@/components/BasicForm.vue';
  import DrillActivity from './DrillActivity.vue';
  import DrillImplementation from './DrillImplementation.vue';
  import { useFormConfigHook } from '@/hooks/useFormConfigHook';
  import type { DrillPlanItemDetail } from '../types';
  import { queryEmergencyDrillPlanDetail, signDrillScript } from '@/api/emergency-drill/emergency-drill';
  import { DRILL_SIGN_FROM_CONFIG, DRILL_SIGN_FROM_DATA, DRILL_SIGN_FROM_RULES } from '../configs/sign';
  import { CONFIRM_STATUS_TYPE } from '../constants';

  const props = defineProps<{
    id: number;
    status: number;
  }>();
  const router = useRouter();
  const { ruleFormConfig, ruleFormData, formRules } = useFormConfigHook<{ planToParticipateCount: number | null }>(
    DRILL_SIGN_FROM_CONFIG,
    DRILL_SIGN_FROM_DATA,
    DRILL_SIGN_FROM_RULES,
  );
  const basicDialogRef = ref<InstanceType<typeof BasicDialog>>();
  const basicFormRef = ref<InstanceType<typeof BasicForm>>();
  const drillDetailData = ref<DrillPlanItemDetail>();
  const getDetailData = async () => {
    drillDetailData.value = await queryEmergencyDrillPlanDetail(props.id);
  };
  const openDialog = () => {
    basicDialogRef.value?.openDialog();
  };
  const refreshFromData = () => {
    basicFormRef.value?.clearValidate();
  };
  const handleInputNumber = (value: string) => {
    const onlyNumber = value.replace(/[^\d]/g, '');
    const num = onlyNumber === '' ? null : Number(onlyNumber);
    ruleFormData.planToParticipateCount = num;
  };
  const handleSumbit = async () => {
    const validate = await basicFormRef.value?.validateForm();
    if (!validate) return;
    await signDrillScript({ drillPlanId: props.id, planToParticipateCount: ruleFormData.planToParticipateCount! });
    basicDialogRef.value?.closeDialog();
    ElMessage.success('确认演练脚本成功');
    router.back();
  };
  onMounted(async () => {
    getDetailData();
  });
</script>

<style lang="scss" scoped>
  @use '@/styles/page-details-layout.scss' as *;
  .info-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 80px;
  }
</style>
