<template>
  <div class="traffic-warn-page">
    <!-- 顶部导航栏 -->
    <div class="nav-bar">
      <van-icon name="arrow-left" class="nav-back" @click="goBack" />
      <h1 class="nav-title">拦截预警</h1>
      <van-icon name="filter-o" class="nav-filter" />
    </div>

    <!-- 预警列表 -->
    <div class="warns-list">
      <!-- 列表内容 -->
      <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoadMore">
        <div v-for="item in warningList" :key="item.id" class="warn-card" @click="lookDetail(item)">
            <div class="warn-header" v-if="item.plateNo">{{ item.eventType }} <span class="level" :class="getLevelClass(item.eventLevel)">{{ getStatusText(item.eventLevel) }}</span></div>
            <div class="warn-text"><span><van-icon name="logistics" /></span> <span>{{ item.plateNo }}</span> | <span>{{ item.vehicleColor }}</span> | <span>{{ item.vehicleType }}</span></div>
            <div class="warn-text"><span><van-icon name="location-o" /></span> 监测点位：{{ item.siteName }}</div>
            <div class="warn-text"><span><van-icon name="clock-o" /></span> 监测时间：{{ item.passTime }}</div>
        </div>
      </van-list>

      <!-- 空状态 -->
      <van-empty v-if="warningList.length === 0 && !initLoading" description="暂无数据" class="empty-state" />
    </div>
  </div>
</template>

<script setup>
import { getInterceptWarnList } from "@/api/traffic";
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
const warningList = ref([]);
const loading = ref(false);
const initLoading = ref(false);
const finished = ref(false);

const listQuery = ref({
  page: 0,
  pageSize: 10,
  status: 0
});

// 获取列表数据
const fetchAlerts = async (isLoadMore = false) => {
  if (!isLoadMore) {
    initLoading.value = true;
    listQuery.value.page = 0;
    warningList.value = [];
    finished.value = false;
  }

  loading.value = true;

  try {
    const res = await getInterceptWarnList({
      status: listQuery.value.status,
      pageSize: listQuery.value.pageSize,
      page: listQuery.value.page + 1
    });

    if (res && res.content) {
      const records = res.content || [];
      if (listQuery.value.page === 0) {
        warningList.value = records;
      } else {
        warningList.value.push(...records);
      }
      listQuery.value.page++;

      // 判断是否还有更多数据
      if (records.length < listQuery.value.pageSize) {
        finished.value = true;
      }
    } else {
      finished.value = true;
    }
  } catch (error) {
    finished.value = true;
  } finally {
    loading.value = false;
    initLoading.value = false;
  }
};

// 加载更多
function onLoadMore() {
  fetchAlerts(true);
}

// 等级样式
function getLevelClass(level) {
  const map = {
    1: "level-red",
    2: "level-orange",
    // 3: "level-yellow",
    3: "level-blue",
  };
  return map[level] || "level-blue";
}

// 状态样式
function getStatusText(status) {
  const map = {
    1: "一级",
    2: "二级",
    3: "三级",
  };
  return map[status] || "三级";
}


function lookDetail(item) {
  router.push({
    path: "/violation-detail",
    query: { id: item.taskId, status: item.status }
  });
}

// 返回
function goBack() {
  router.back();
}


// 页面初始化
onMounted(() => {
  fetchAlerts();
});
</script>

<style lang="scss" scoped>

.traffic-warn-page {
  background: #f9fafb;
  position: relative;
  .warns-list{
    height: calc(100vh - 82px);
    margin-top: 5px;
    padding: 0 16px;
    box-sizing: border-box;
    overflow: hidden;
    overflow-y: auto;
  }
}

.nav-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: white;
  border-bottom: 1px solid #e5e5e5;
  padding: 12px 16px;

  .nav-back {
    font-size: 24px;
    color: #333;
  }

  .nav-title {
    font-size: 17px;
    font-weight: 600;
    color: #333;
  }

  .nav-filter {
    font-size: 24px;
    color: #333;
  }
}

.warn-card {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  padding: 10px;
  box-sizing: border-box;
  font-size: 13px;
  cursor: pointer;
  .warn-header{
    font-size: 16px;
    color: #333;
    letter-spacing: 1px;
    .level{
        display: inline-block;
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 13px;
        margin-left: 4px;
        &.level-red {
          background: #ffe2e2;
          color: #e8101a;
        }
        &.level-orange {
          background: #fff3e0;
          color: #ff9800;
        }
        &.level-yellow {
          background: #fffde7;
          color: #ffc107;
        }
        &.level-blue {
          background: #e3f2fd;
          color: #2196f3;
        }
    }
  }
  .warn-text{
    color: #555;
    margin-top: 6px;
    line-height: 20px;
    letter-spacing: 1px;
    color: #565c69;
  }
}


.empty-state {
  padding: 60px 0;
}
</style>