<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/views/screen/SafeComponents/NetEventScopeTop10.vue
 * @Date: 2022-09-07 09:38:52
 * @Description: 
 * @LastEditTime: 2023-09-01 17:37:39
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import { reactive, ref, onMounted, watch, unref } from 'vue'
import { useGetChartData } from "../../../components/chart/logic";
import { useGlobalSafeScreen } from "../logic/useGlobalSafeScreen";
import ProgressBar from "../../../components/ProgressBar/ProgressBar.vue";
import { riskLevelIcon } from "../constants";
import { mapMapping } from "../../../assets/map/provinceData";
import { getThemeColor } from "../../../components/chart/options/theme";
import { bigNumberTransform } from "../../../utils/utils";
const mapData = mapMapping();
const { currentCity, currentDate } = useGlobalSafeScreen();

const list = ref([]) as any;
const getData = async () => {
  const params = {
    type: unref(currentDate),
  } as any;
  if (unref(currentCity) !== mapData?.name) {
    params.region = unref(currentCity);
  }
  const res = await useGetChartData(
    "largeScreen/comprehensiveSituation/queryInfluenceRange",
    (res) => res,
    params
  );

  list.value = res || [];
  list.value.forEach((item) => {
    item.num = bigNumberTransform(item.influenceIpNum);
  });
};

const init = () => {
  getData();
};

onMounted(() => {
  init();
});

watch(currentDate, () => {
  getData();
});

watch(currentCity, () => {
  getData();
});
</script>

<template>
  <div class="block" :class="mapData?.en == 'anhui' ? 'safe-block-height4' : ''">
    <div class="scope-box" v-if="list.length">
      <div class="scope-box-item" v-for="(item, index) in list"
        :key="`${item.eventTypeName}-${index}-${item.influenceIpNum}`">
        <div class="top">
          <div class="level" :class="`level-${index + 1}`">
            <span>TOP{{ index + 1 }}</span>
          </div>
          <img :src="riskLevelIcon[item.importantLevel]" alt="" class="icon-tip" />
          <div class="name">
            <CustomTooltip :show="true" :text="item.eventTypeName"></CustomTooltip>
          </div>
          <div class="count">{{ item.num }}</div>
        </div>
        <div class="bottom">
          <ProgressBar :color="getThemeColor().progressColor || 'rgba(88, 180, 213, 1)'" :percentage="item.ratio"
            backgroundColor="rgba(15, 37, 66, 1)"></ProgressBar>
        </div>
      </div>
    </div>
    <ya-empty v-else></ya-empty>
  </div>
</template>

<style lang="scss" scoped>
.block {
  width: 100%;
  flex: 1;
  // height: 470px;
  // padding-top: 16px;

  .scope-box {
    width: 100%;
    height: 100%;
    // margin-top: 10px;
    display: flex;
    flex-direction: column;
    padding: 0 10px;
    box-sizing: border-box;

    .scope-box-item {
      width: 100%;
      display: flex;
      flex-direction: column;
      height: 10%;
      justify-content: end;
      // padding-top: 18px;
      box-sizing: border-box;

      .top {
        display: flex;
        align-items: center;
        padding-bottom: 3px;

        .level {
          width: 38px;
          height: 18px;
          background: rgba(37, 160, 202, 0.3);
          color: #ffffff;
          font-size: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0 5px;
          transform: skewX(45deg);

          span {
            transform: skewX(-45deg);
          }
        }

        .level-1,
        .level-2,
        .level-3 {
          background: rgba(37, 160, 202, 0.6);
        }

        .icon-tip {
          width: 22px;
          height: 22px;
          flex-shrink: 0;
          margin-left: 10px;
          margin-right: 5px;
          margin-top: 2px;
        }

        .name {
          cursor: default;
          flex: 1;
          min-width: 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 16px;
          color: #8cecff;
          font-weight: 400;
        }

        .count {
          min-width: 50px;
          font-family: "DIN";
          text-align: right;
          font-size: 16px;
          font-family: PangMenZhengDao;
          font-weight: 400;
          color: #93e5f6;
        }
      }
    }
  }
}
</style>
