<!--
 * @Author: 李佐宁
 * @Description: 
 * @Date: 2023-03-14 09:58:57
 * @LastEditTime: 2023-09-01 18:27:13
 * @LastEditors: 曹文丽
-->
<template>
  <div class="yaBox attackTopThree">
    <div class="ya-item" v-for="(item, i) in topData" :key="i">
      <div class="ya-item-top">TOP{{ i + 1 }}</div>
      <div class="ya-item-num">{{ item.count || "暂无数据" }}</div>
      <div class="ya-item-name">{{ item.region }}</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue'
import {
  getProvinceVisitObject,
  getAttackTop,
} from "../../../api/screen/attackSituationScreen";
import { useGlobalAttackMap } from "../logic/useGlobalAttackMap";
import { bigNumberTransform } from "../../../utils/utils";
const { attackData, currentCity } = useGlobalAttackMap();
import { mapMapping } from "../../../assets/map/provinceData";
const mapData = mapMapping();
const topData = ref([{}, {}, {}]);
const getData = async () => {
  // demo接口联调
  getAttackTop({
    attackDestRegion:
      currentCity.value === mapData?.name ? null : currentCity.value,
  }).then((res) => {
    const { code, data = [] } = res || {};
    topData.value = [{}, {}, {}];
    if (code === 200 && data) {
      data.forEach((item, index) => {
        item.count = bigNumberTransform(item.count);
        if (index < 3) {
          topData.value[index] = item;
        }
      });
    }
  });
  // const res = attackData.value;
  // res.forEach((item, index) => {
  //   item.count = bigNumberTransform(item.count);
  //   if (index < 3) {
  //     // data.value.push(item);
  //     data.value[index] = item;
  //   }
  // });
};
onMounted(() => {
  getData();
});
// 监听城市变化
watch(currentCity, () => {
  getData();
});
</script>

<style lang="scss" scoped>
.yaBox {
  padding-top: 40px;

  .ya-item {
    text-align: center;
    background-image: url("../../../assets/image/screen/icon_cyclinder.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding-bottom: 50px;
    margin-bottom: 70px;
    padding-top: 20px;
    height: 80px;

    &:nth-last-child(1) {
      margin-bottom: 0;
    }

    .ya-item-top {
      font-size: 20px;
      line-height: 1;
      font-family: Arial;
      font-weight: bold;
      font-style: italic;
      color: #c8d2df;
      background: linear-gradient(0deg,
          #ade9ff 0%,
          #7bdbef 50.1220703125%,
          #ade9ff 98.681640625%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .ya-item-num {
      line-height: 1;
      font-size: 30px;
      font-family: PangMenZhengDao;
      font-weight: 400;
      color: #fefefe;
      padding: 5px 0;
    }

    .ya-item-name {
      line-height: 1;
      font-size: 20px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #ffffff;
    }
  }
}
</style>
