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-row gutter="10">
        <van-col v-for="(item, index) in eventTypeOptions" :span="24 / eventTypeOptions.length" :key="index">
          <van-button block plain :type="item.value === eventType ? 'primary' : 'default'" @click="eventType = item.value"> {{ item.label }} </van-button>
        </van-col>
      </van-row>
    </PanelItem>

    <!-- 根据事件类型渲染不同表单 -->
    <WaterDisaster v-if="eventType === 'water'" />
    <IceDisaster v-if="eventType === 'ice'" />
  </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 IceDisaster from './IceDisaster.vue'
import { request } from '@shared/utils/request'

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

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

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

// 事件类型
const eventType = ref('water')
const eventTypeOptions = [
  {
    label: '水毁灾害',
    value: 'water'
  },
  {
    label: '冰雪灾害',
    value: 'ice'
  }
]

// 返回上一页
const handleClickBack = () => {
  router.go(-1)
}
</script>

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

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

.coming-soon {
  padding: 40px 20px;
}
</style>