<template>
  <div>
    <div class="box" style="width:100%;height: 80vh">
      <div class="top-box" @click="toPage('/overdueEventWarn?status=1')">
        <img src="@/assets/contradictionImgs/warn3-1.png" alt="">
        <div class="num">{{ warningData.overdueEvent || 0 }}</div>
        <div class="title">矛盾超期预警</div>
      </div>
      <div class="top-box" @click="toPage('/riskFactorWarn?type=4&status=1')">
        <img src="@/assets/contradictionImgs/warn3-2.png" alt="">
        <div class="num">{{ warningData.eventRiskFactor || 0 }}</div>
        <div class="title">风险因子预警</div>
      </div>
      <div class="top-box" @click="toPage('/keyAreaWarnList?status=1')">
        <img src="@/assets/contradictionImgs/warn3-4.png" alt="">
        <div class="num">{{ warningData.involveEveryone || 0 }}</div>
        <div class="title">涉众预警</div>
      </div>
      <div class="top-box" @click="toPage('/groupEventWarn?type=2')">
        <img src="@/assets/contradictionImgs/warn3-3.png" alt="">
        <div class="num">{{ warningData.groupEvent || 0 }}</div>
        <div class="title">群体性事件预警</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getWarningStatisticsCount } from '@/api/contradiction.js'

export default {
  data () {
    return {
      warningData: {
        overdueEvent: 0, // 历史矛盾超期预警
        eventRiskFactor: 0, // 历史风险因子预警
        involveEveryone: 0, // 历史涉众预警
        groupEvent: 0 // 历史群体性事件预警
      },
      loading: false
    }
  },
  mounted () {
    this.getWarningData()
  },
  methods: {
    // 获取预警数据
    async getWarningData () {
      this.loading = true
      try {
        const res = await getWarningStatisticsCount({
          importantEventStatus: 2 // 传递 importantEventStatus=2 表示获取历史数据
        })
        if (res.data.errcode === 0) {
          this.warningData = {
            overdueEvent: res.data.data.overdueEvent || 0,
            eventRiskFactor: res.data.data.eventRiskFactor || 0,
            involveEveryone: res.data.data.involveEveryone || 0,
            groupEvent: res.data.data.groupEvent || 0
          }
        } else {
          this.$Message.error(res.data.errmsg || '获取历史预警数据失败')
        }
      } catch (error) {
        console.error('获取历史预警数据失败:', error)
        this.$Message.error('获取历史预警数据失败')
      } finally {
        this.loading = false
      }
    },
    toPage (url) {
      this.$router.push({
        path: url
      })
    }
  }
}
</script>

<style scoped lang="less">
.box{
  display: flex;
  justify-content: space-around;
  align-items: flex-start;

  .top-box{
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    width: 24%;
    height: 200px;
    border-radius: 16px;
    background: #ffeeec;
    border: 1px solid #c53535;
    cursor: pointer;
    .title{
      font-family: "PingFang SC";
      font-weight: 400;
      font-size: 14px;
      text-align: center;
      color: #2e3038;
    }
    .num{
      font-family: "Montserrat";
      font-weight: 500;
      font-size: 36px;
      text-align: center;
      color: #c53535;
    }
  }
}
</style>
