<template>
  <div class="safety-platform-container">
    <header class="safety-platform-container__header">
      <BreadcrumbBack />
      <span class="breadcrumb-title">{{ headerTitle }}</span>
    </header>
    <TaskInfoSection
      :task-name="taskName"
      :overview-loss-record-info="overviewInfo"
      @export-loss-detail="exportLossDetail"
      v-if="!operate"
    />
    <main class="safety-platform-container__main">
      <component
        :is="dynamicComponent"
        :id="id"
        ref="dynamicComponentRef"
        @overviewLossRecordInfo="getOverviewLossRecordInfo"
      />
    </main>
    <footer class="safety-platform-container__footer" v-if="operate">
      <el-button @click="router.back()">取消</el-button>
      <el-button type="primary" @click="submit">提交</el-button>
    </footer>
    <UploadLoading :form-loading="formLoading" v-if="formLoading" />
  </div>
</template>

<script lang="ts" setup>
  import { useRoute, useRouter } from 'vue-router';
  import { ref, computed, defineAsyncComponent } from 'vue';
  import { ElMessage } from 'element-plus';
  import UploadLoading from '@/components/UploadLoading.vue';
  import { exportLossRecord } from '@/views/disaster/disaster-control/src/util';
  import TaskInfoSection from '@/views/disaster/disaster-control/src/components/TaskInfoSection.vue';
  import { OverviewLossRecordInfo } from '@/types/disaster-control';
  import { createDisasterHandleTask } from '@/api/disaster-control';

  const router = useRouter();
  const route = useRoute();
  const operate = route.query.operate;
  const id = Number(route.query.id);
  const taskName = String(route.query.taskName);
  const overviewInfo = ref<OverviewLossRecordInfo>();
  const headerTitle = computed(() => {
    const fixedTitle = '灾害处置任务';
    if (operate === 'create') {
      return `创建${fixedTitle}`;
    }
    return '灾害损失记录明细';
  });
  const dynamicComponent = computed(() => {
    if (operate === 'create') {
      return defineAsyncComponent(() => import('./src/components/CreateDisposalManagementTaskItem.vue'));
    } else {
      return defineAsyncComponent(() => import('./src/components/ViewDisposalControlTaskItem.vue'));
    }
  });
  const dynamicComponentRef = ref();
  const formLoading = ref(false);
  const submit = async () => {
    if (!dynamicComponentRef.value) return;
    const res = await dynamicComponentRef.value.handleValidate();
    if (!res) return;
    formLoading.value = true;
    const formData = dynamicComponentRef.value.getFormData();
    try {
      await createDisasterHandleTask(formData);
      ElMessage.success('提交成功');
      router.back();
    } finally {
      formLoading.value = false;
    }
  };
  const getOverviewLossRecordInfo = (overviewLossRecordInfo: OverviewLossRecordInfo) => {
    overviewInfo.value = overviewLossRecordInfo;
  };
  const exportLossDetail = async () => {
    await exportLossRecord({ handleTaskId: id }, taskName);
    ElMessage.success(`导出${taskName}损失明细成功`);
  };
</script>

<style lang="scss" scoped>
  @use '@/styles/page-details-layout.scss' as *;
  @use './src/style/common.scss' as *;
</style>
