<template>
  <div class="weather-warning">
    <div class="panel-header">
      <span class="title">气象预警</span>
    </div>

    <!-- 预警等级展示 -->
    <div class="warning-levels">
      <div
        v-for="level in warningLevels"
        :key="level.id"
        class="warning-level-item"
      >
        <!-- 六边形徽章容器 -->
        <div class="badge-container">
          <!-- 六边形徽章 -->
          <div class="level-badge" :style="{ backgroundImage: `url(${level.warningIcon})` }">
            <!-- <img
              src="../assets/img/weather-badge-hexagon.png"
              alt="badge"
              class="badge-bg"
            /> -->
            <span class="level-count" :style="{ color: level.color }">{{ level.count }}</span>
          </div>

          <!-- 底座光圈（双背景图） -->
          <!-- <div class="glow-base"></div> -->
        </div>

        <!-- 底部文字 -->
        <span class="level-name">{{ level.name }}</span>
      </div>
    </div>

    <!-- 海拔800米以上气象情况 -->
    <div class="altitude-section">
      <div class="altitude-header">
        <img src="../assets/img/weather-altitude-icon.png" alt="icon" class="altitude-icon" />
        <span>海拔800米以上气象情况</span>
      </div>
    </div>

    <!-- 区县列表 -->
    <div class="district-table">
      <div class="table-header">
        <span>所属区县</span>
        <span>公里数</span>
        <span>预警情况</span>
      </div>
      <div
        v-for="(district, index) in districts"
        :key="district.id"
        class="table-row"
        :class="{ 'row-alt': index % 2 === 0 }"
      >
        <div class="row-indicator" :style="{ backgroundColor: district.warningColor }"></div>
        <span class="district-name">{{ district.name }}</span>
        <span class="district-km">{{ district.km }}</span>
        <span class="district-warning" :style="{ color: district.warningColor }">
          {{ district.warning }}
        </span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { getWeatherWarningStatistics } from '@/views/cockpit/api/commonHttp.js'

// 导入图片
import glowTopIcon from '../assets/img/weather-badge-glow-top.png'
import glowBottomIcon from '../assets/img/weather-badge-glow-bottom.png'
import blueWarningIcon from '../assets/img/weather-badge-blue-warning.png'
import yellowWarningIcon from '../assets/img/weather-badge-yellow-warning.png'
import orangeWarningIcon from '../assets/img/weather-badge-orange-warning.png'
import redWarningIcon from '../assets/img/weather-badge-red-warning.png'

const warningLevels = ref([
  {
    id: 1,
    name: '蓝色预警',
    key: 'blueWarningCount',
    count: 0,
    color: 'rgba(132, 199, 255, 1)',
    glowTopIcon: glowTopIcon,
    glowBottomIcon: glowBottomIcon,
    warningIcon: blueWarningIcon
  },
  {
    id: 2,
    name: '黄色预警',
    key: 'yellowWarningCount',
    count: 0,
    color: 'rgba(215, 209, 38, 1)',
    glowTopIcon: glowTopIcon,
    glowBottomIcon: glowBottomIcon,
    warningIcon: yellowWarningIcon
  },
  {
    id: 3,
    name: '橙色预警',
    key: 'orangeWarningCount',
    count: 0,
    color: 'rgba(255, 114, 0, 1)',
    glowTopIcon: glowTopIcon,
    glowBottomIcon: glowBottomIcon,
    warningIcon: orangeWarningIcon
  },
  {
    id: 4,
    name: '红色预警',
    key: 'redWarningCount',
    count: 0,
    color: 'rgba(255, 32, 0, 1)',
    glowTopIcon: glowTopIcon,
    glowBottomIcon: glowBottomIcon,
    warningIcon: redWarningIcon
  }
])

const districts = ref([
  { id: 1, name: '万州区', km: 32, warning: '红色预警', warningColor: 'rgba(229, 37, 42, 1)' },
  { id: 2, name: '城口区', km: 11, warning: '橙色预警', warningColor: 'rgba(255, 114, 0, 1)' },
  { id: 3, name: '长寿区', km: 136, warning: '黄色预警', warningColor: 'rgba(215, 209, 38, 1)' },
  { id: 4, name: '涪陵区', km: 35, warning: '蓝色预警', warningColor: 'rgba(47, 156, 246, 1)' },
  { id: 5, name: '合川区', km: 46, warning: '蓝色预警', warningColor: 'rgba(47, 156, 246, 1)' }
])

const loadData = async (areaCode) => { 
  const param = {
    areaCode: areaCode || ''
  }
  const res = await getWeatherWarningStatistics(param)
  if(res.success) {
    for(const item of warningLevels.value) {
      item.count = res.data[item.key]
    }
  }

}

defineExpose({
  loadData
})

</script>

<style scoped lang="scss">
@use '@/styles/mixins.scss' as *;

.weather-warning {
  background: url(../assets/img/weather-panel-bg.png) no-repeat;
  background-size: 100% 100%;
  padding: vw(20) vw(30);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.panel-header {
  position: relative;
  width: 100%;
  height: vh(49);
  background: url(../assets/img/common-panel-header-bg.png) no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  padding-left: vw(44);
  margin-bottom: vh(20);

  .title {
    color: rgba(255, 255, 255, 1);
    font-size: fs(22);
    font-family: SourceHanSansCN-Medium, sans-serif;
    font-weight: 500;
  }
}

.warning-levels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: vw(20);
  padding: 0 vw(27);
}

.warning-level-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  // gap: vh(10);

  // 徽章和光圈容器
  .badge-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  // 六边形徽章
  .level-badge {
    position: relative;
    width: vw(80);
    height: vh(70);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 2;
    background: url(../assets/img/weather-badge-bg.png) center center / 100% 100% no-repeat;

    .badge-bg {
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .level-count {
      position: relative;
      font-size: fs(32);
      font-family: DISPLAYFREETFB, sans-serif;
      font-weight: normal;
      z-index: 1;
      line-height: 1;
      margin-top: vh(-18);
    }
  }

  // 底座光圈（双背景图）
  .glow-base {
    width: vw(72);
    height: vh(65);
    margin-top: vh(-10);
    z-index: 1;

    // 双背景图实现
    background-image:
      url('../assets/img/weather-badge-glow-top.png'),  // 上层
      url('../assets/img/weather-badge-glow-bottom.png');   // 下层（更宽）

    background-position:
      center 0px,        // 上层：紧贴顶部
      center vh(10);       // 下层：稍微偏下

    background-size:
      100% auto,         // 上层：正常宽度
      120% auto;         // 下层：更宽 20%

    background-repeat: no-repeat, no-repeat;
  }

  // 底部文字标签
  .level-name {
    color: rgba(255, 255, 255, 1);
    font-size: fs(14);
    font-family: SourceHanSansCN-Bold, sans-serif;
    font-weight: 700;
    text-align: center;
    margin-top: vh(4);
  }
}

.altitude-section {
  margin: vh(20) 0;

  .altitude-header {
    width: 100%;
    height: vh(38);
    background: url(../assets/img/weather-altitude-bar-bg.png) no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    gap: vw(10);
    padding: 0 vw(10);

    .altitude-icon {
      width: vw(39);
      height: vh(35);
    }

    span {
      color: rgba(255, 255, 255, 1);
      font-size: fs(16);
      font-family: PingFangSC-Semibold, sans-serif;
      font-weight: 600;
    }
  }
}

.district-table {
  flex: 1;
  display: flex;
  flex-direction: column;

  .table-header {
    height: vh(35);
    background: url(../assets/img/weather-table-header-bg.png) no-repeat;
    background-size: 100% 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    text-align: center;
    color: rgba(255, 255, 255, 1);
    font-size: fs(14);
    font-family: SourceHanSansCN-Medium, sans-serif;
    font-weight: 500;
    margin-bottom: vh(5);
  }

  .table-row {
    height: vh(35);
    display: grid;
    grid-template-columns: vw(9) 1fr 1fr 1fr;
    align-items: center;
    gap: vw(10);
    padding: 0 vw(10);
    color: rgba(255, 255, 255, 1);
    font-size: fs(14);
    font-family: PingFangSC-Medium, sans-serif;
    font-weight: 500;

    &.row-alt {
      background: url(../assets/img/common-table-row-bg.png) no-repeat;
      background-size: 100% 100%;
    }

    &:not(.row-alt) {
      background: url(../assets/img/common-table-row-bg-alt.png) no-repeat;
      background-size: 100% 100%;
    }

    .row-indicator {
      width: vw(9);
      height: vh(33);
      border-radius: vw(1);
    }

    .district-name {
      text-align: left;
    }

    .district-km {
      text-align: center;
      font-family: PingFangSC-Semibold, sans-serif;
      font-weight: 600;
    }

    .district-warning {
      text-align: center;
    }
  }
}
</style>
