<script setup lang="ts">
// @ts-ignore

import { ref } from 'vue';

// @ts-ignore
import { useVbenDrawer, useVbenForm } from '@vben/common-ui';

// @ts-ignore
import { getStationUserCount } from '#/api/system/user/user';
// @ts-ignore
import { submitEmergencyWy, submitEmergencyWyReport } from '#/api/task';

// @ts-ignore
import { drawerFormSchema, reportFormSchema } from './config-data';

const emit = defineEmits<{ reload: [] }>();

// 当前激活的标签页
const activeTab = ref('plan');

// 应急演练方案表单
const [PlanForm, planFormApi] = useVbenForm({
  showDefaultActions: false,
  schema: drawerFormSchema(),
});

// 应急演练报告表单
const [ReportForm, reportFormApi] = useVbenForm({
  showDefaultActions: false,
  schema: reportFormSchema(),
});

const taskParams = ref({
  taskId: '',
  taskName: '',
  taskList: [] as any,
});

const [Drawer, drawerApi] = useVbenDrawer({
  async onOpenChange(isOpen: any) {
    if (!isOpen) {
      return;
    }
    try {
      drawerApi.drawerLoading(true);
      const { taskId, taskName, taskList, stationId } = drawerApi.getData();
      taskParams.value.taskId = taskId;
      taskParams.value.taskName = taskName;
      taskParams.value.taskList = taskList;
      // 获取 stationId 下的用户数量
      const { data }: any = await getStationUserCount(stationId);
      planFormApi.setFieldValue('totalCount', data);

      // 填充计划表单
      planFormApi.setValues(taskList[0]);
      // 填充报告表单
      reportFormApi.setValues(taskList[0]);

      // 可以在这里获取任务详情并填充表单
    } catch (error) {
      console.error(error);
    } finally {
      drawerApi.drawerLoading(false);
    }
  },
  onClosed() {
    planFormApi.resetForm();
    reportFormApi.resetForm();
  },
  async onConfirm() {
    try {
      this.confirmLoading = true;

      // 判断是选中的哪个 tabs
      let params: any = {};
      if (activeTab.value === 'plan') {
        const { valid: planValid } = await planFormApi.validate();
        if (!planValid) {
          return;
        }
        params = await planFormApi.getValues();
      } else if (activeTab.value === 'report') {
        const { valid: reportValid } = await reportFormApi.validate();
        if (!reportValid) {
          return;
        }
        params = await reportFormApi.getValues();
      }

      params.id = drawerApi.getData().taskId;
      // 调用API提交数据
      if (activeTab.value === 'plan') {
        await submitEmergencyWy(params);
      } else if (activeTab.value === 'report') {
        await submitEmergencyWyReport(params);
      }
      emit('reload');
      drawerApi.close();
    } catch (error) {
      console.error(error);
    } finally {
      this.confirmLoading = false;
    }
  },
});
</script>

<template>
  <Drawer :title="drawerApi.getData().taskName">
    <div class="tabs-container">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="应急演练方案" name="plan">
          <PlanForm />
        </el-tab-pane>
        <el-tab-pane label="应急演练报告" name="report">
          <ReportForm />
        </el-tab-pane>
      </el-tabs>
    </div>
  </Drawer>
</template>

<style scoped lang="scss">
.tabs-container {
  width: 100%;
}

:deep(.el-input-number) {
  width: 100%;
}
</style>
