<template>
  <PageContainer title="气象预警" @click-back="handleClickBack">
    <SearchInput v-model="searchValue" />

    <CurrentSite />

    <div class="list-panel">
      <CardItem v-for="(item, index) in list" :key="index" :title="item.area" @click="handleClickItem(item)">
        <template #headerExtra>
          <span class="red-ball"></span>
        </template>

        <!-- 发布时间 block -->
        <div class="time-block">
          <div class="time-box">
            <span class="time-label-text">发布时间：</span>
            <span class="time-value-text">{{ item.publishTime }}</span>
          </div>
          <van-icon class="jump-icon" name="arrow" />
        </div>
      </CardItem>

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

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

const router = useRouter()

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

// 搜索关键词
const searchValue = ref('')

watch(
  () => searchValue.value,
  (newVal, oldVal) => {
    if (newVal !== oldVal) {
      getData(newVal)
    }
  }
)



// 预警列表数据
const list = ref([
  {
    area: '合川区',
    level: '红色气象预警',
    publishTime: '2026/01/10 20:29'
  },
  {
    area: '万州区',
    level: '红色气象预警',
    publishTime: '2025/10/10 20:29'
  },
  {
    area: '涪陵区',
    level: '红色气象预警',
    publishTime: '2025/10/10 20:29'
  }
])

const getData = async () => {

}

const handleClickItem = (item) => {
  router.push({
    path: '/warningMessage-detail',
    
  })
}

const handleClickBack = () => {
  router.push('/')
}
</script>

<style lang="scss" scoped>
/* ==================== Panel 层级 ==================== */
.list-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card-item {
  padding-right: 15px;
}

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

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

/* ==================== Text / Num 层级 ==================== */
.red-ball {
  display: inline-block;
  width: 13px;
  height: 13px;
  background: linear-gradient(180deg, #fd4646 0%, #fb2222 100%);
  box-shadow: 0px 1px 4px 0px rgba(91, 8, 8, 0.34);
  border-radius: 100%;
}

.jump-icon {
  font-size: 16px;
  color: rgb(102, 102, 102, .4);
}

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

.time-value-text {
  font-weight: 400;
  font-size: 14px;
  color: #666666;
}
</style>