bxztApp/packages/mobile/src/views/DisasterManagement/DisasterReport.vue

<template>
  <PageContainer :title="title" @click-back="handleClickBack" class="page-container">
    <!-- 当前站点信息 -->
    <CurrentSite />

    <!-- 事件类型 -->
    <PanelItem title="事件类型" style="margin-bottom: 10px" v-if="!isContinue">
      <van-radio-group v-model="eventType" direction="horizontal" class="event-type-group">
        <van-radio name="water">水毁灾害</van-radio>
        <van-radio name="ice">冰雪灾害</van-radio>
      </van-radio-group>
    </PanelItem>

    <!-- 根据事件类型渲染不同表单 -->
    <WaterDisaster v-if="eventType === 'water'" ref="waterDisasterRef" />

    <!-- 冰雪灾害表单（待实现） -->
    <div v-else class="coming-soon">
      <van-empty description="冰雪灾害表单开发中..." />
    </div>

    <!-- 提交按钮 -->
    <van-button type="primary" class="footer-btn" @click="handleSubmit" :loading="submitting"> 提交 </van-button>
  </PageContainer>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showToast, showSuccessToast, showFailToast } from 'vant'
import PageContainer from '@/components/PageContainer.vue'
import CurrentSite from '@/components/CurrentSite.vue'
import PanelItem from '@/components/PanelItem.vue'
import WaterDisaster from './WaterDisaster/WaterDisaster.vue'
import { request } from '@shared/utils/request'
import mockFormData from './waterDisasterFormData.json'

const router = useRouter()
const route = useRoute()

// 是否为续报
const isContinue = computed(() => route.query.isContinue)

const title = ref(!isContinue ? '灾毁填报' : '灾毁续报')

// 事件类型
const eventType = ref('water')

// 表单数据
const formData = ref(route.query.mock ? mockFormData : {})
const waterDisasterRef = ref(null)
const submitting = ref(false)

// 返回上一页
const handleClickBack = () => {
  router.replace('/disasterManagement')
}

// 提交表单
const handleSubmit = async () => {
  // 验证表单
  if (eventType.value === 'water') {
    if (!waterDisasterRef.value.validate()) {
      return
    }
  }

  submitting.value = true
  try {
    // 获取表单数据
    let formData = {}
    if (eventType.value === 'water') {
      formData = waterDisasterRef.value.getFormData()
    }

    // 添加事件类型和站点信息
    const submitData = {
      ...formData
      // 可以在这里添加站点信息等其他数据
    }

    const res = await request({
      url: '/snow-ops-platform/water-damage/addOrUpdate',
      method: 'post',
      data: submitData
    })

    if (res?.code === '00000') {
      showSuccessToast('提交成功')
      // 提交成功后返回列表页
      setTimeout(() => {
        router.replace('/disasterManagement')
      }, 1000)
    } else {
      showFailToast(res.message)
    }
  } catch (error) {
    showFailToast('提交失败，请重试')
    console.error('提交失败:', error)
  } finally {
    submitting.value = false
  }
}

// 获取灾毁详情
const getDisasterDetail = async () => {
  const id = route.query.id
  if (!id) {
    return
  }

  try {
    const result = await request({
      url: `/snow-ops-platform/water-damage/getById`,
      method: 'get',
      params: { id }
    })

    if (result?.data) {
      // 接口返回 Data 结构
      const data = result.data
      const newFormData = {
        ...data,
        lossList: null,
        report: formData.value.report,
        fileList: null
      }
      waterDisasterRef.value.initFormData(newFormData)
    } else {
      showToast(result.message || '获取详情失败')
    }
  } catch (error) {
    console.error('获取灾毁详情失败:', error)
    showToast('获取详情失败，请稍后重试')
  }
}

onMounted(() => {
  if (route.query?.id) {
    getDisasterDetail()
  } else {
    waterDisasterRef.value.initFormData(formData.value)
  }
})
</script>

<style lang="scss" scoped>
.page-container {
  padding-bottom: 80px;
  background-color: #f5f7fa;
}

.event-type-group {
  display: flex;
  gap: 24px;
  :deep(.van-radio) {
    margin-right: 0;
  }
}

.coming-soon {
  padding: 40px 20px;
}

.footer-btn {
  position: fixed;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 340px;
  border-radius: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  z-index: 10;

  &:active {
    opacity: 0.9;
    transform: translateX(-50%) scale(0.98);
  }
}
</style>