<template>
  <PageContainer class="page-container" title="预警详情" @click-back="handleClickBack">
    <CurrentSite  />

    <PanelHeader title="气象预警" />
    <div class="list-panel margin">
      <CardItem class="card-item" v-for="(item, index) in list" :key="index" :title="item.area" titleGap="10">
        <template #content>
          <div class="time-block">
            <div class="time-box">
              <span class="time-label-text">发布时间：</span>
              <span class="time-value-text">{{ item.publishTime }}</span>
            </div>
          </div>
          <div class="desc-block">
            <div class="desc-text">{{ item.content }}</div>
          </div>

          <van-icon class="jump-icon" name="arrow" />
        </template>
      </CardItem>

      <!-- 空状态提示 -->
      <EmptyBox v-if="list.length === 0" placeholder="暂无相关预警信息" />
    </div>

    <PanelHeader title="防御措施" />
    <div class="list-panel">
      <CardItem v-for="(item, index) in list" :key="index" :title="item.area">
        <div class="method-block">
          <div class="method-text">{{ item.method }}</div>
        </div>
        <van-icon class="jump-icon" name="arrow" />
      </CardItem>

      <!-- 空状态提示 -->
      <EmptyBox v-if="list.length === 0" placeholder="暂无相关防御措施" />
    </div>

    <div class="footer-panel">
      <van-button block type="primary" @click="handleClickBack()">我已知晓</van-button>
      <van-button block type="primary" @click="goToHandle()">我要响应</van-button>
    </div>
  </PageContainer>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import PageContainer from '@/components/PageContainer.vue'
import CurrentSite from '@/components/CurrentSite.vue'
import PanelHeader from '@/components/PanelHeader.vue'
import CardItem from '@/components/CardItem.vue'
import EmptyBox from '@/components/EmptyBox.vue'

const router = useRouter()

onMounted(() => {
  getData()
})

// 列表数据
const list = ref([
  {
    area: '合川区',
    level: '红色气象预警',
    content: '今天，北京将进入大雪，请做好',
    publishTime: '2026/01/10 20:29',
    method: '立即启动防汛Ⅰ级应急响应，立即转移危险区'
  },
  {
    area: '万州区',
    level: '红色气象预警',
    publishTime: '2025/10/10 20:29',
    method: '立即启动防汛Ⅰ级应急响应，立即转移危险区'
  },
  {
    area: '涪陵区',
    level: '红色气象预警',
    publishTime: '2025/10/10 20:29',
    method: '立即启动防汛Ⅰ级应急响应，立即转移危险区'
  }
])

const getData = async () => {}

const handleClickBack = () => {
  router.go(-1)
}
const goToHandle = () => {
  router.push({path: '/warningMessageHandle'})
}
</script>

<style lang="scss" scoped>
.page-container {
  position: relative;
  padding-bottom: 74px;
}

/* ==================== Panel 层级 ==================== */
.list-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;

  &.margin {
    margin-bottom: 20px;
  }
}

.footer-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: #ffffff;
  box-shadow: 0px -5px 12px 0px rgba(200, 200, 200, 0.37);
  opacity: 0.97;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 16px;
}

/* ==================== Block 层级 ==================== */
.time-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ==================== Box 层级 ==================== */
.time-box {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
}

/* ==================== Text 层级 ==================== */

.jump-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 15px;
  font-size: 16px;
  color: rgb(102, 102, 102, 0.4);
}

.time-label-text {
  font-weight: 400;
  font-size: 14px;
  color: #999999;
}

.time-value-text {
  font-weight: 400;
  font-size: 14px;
  color: #999999;
}
.desc-text {
  font-weight: 400;
  font-size: 14px;
  color: #666666;
  line-height: 13px;
}
.method-text {
  font-weight: 500;
  font-size: 15px;
  color: #4a4a4a;
  line-height: 20px;
}
</style>
