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

const list = ref([]) as any;

/**
 * @describtion 获取颜色渐变
 * @param count 颜色个数
 * @param color 颜色
 */
function getGradientColorList(count, color) {
  if (!count) {
    return ["rgba(110, 200, 236"];
  }
  return Array.from({ length: count }, (item, index) => {
    if (index === 0) return `rgba(${color}`;
    return `rgba(${color}, ${((20 - index) / 20 + 1) / 2})`;
  });
}

// 获取颜色添加
const handleInterFaceData = (res) => {
  return res.map((item) => {
    const maxCount = 20;
    const itemCount = Math.floor((item.ratio * maxCount) / 100);
    const colors = getGradientColorList(
      itemCount,
      getThemeColor().LinearGradientColor || "110, 200, 236"
    );
    return {
      ...item,
      colors,
    };
  });
};
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/queryAttacksNum",
    handleInterFaceData,
    params
  );
  if (res?.length) {
    res.forEach((item) => {
      item.attackNums = `${item.attackNum || 0}（${item.unit}） `;
    });
    list.value = res || [];
  }
};

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

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

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

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

<template>
  <div class="block" :class="mapData?.en == 'anhui' ? 'safe-block-height6' : ''">
    <div class="attack-box" v-if="list.length">
      <div class="attack-box-item" v-for="(item, index) in list" :key="index">
        <img :src="riskLevelIcon[item.importantLevel]" alt="" class="icon" />
        <div class="name">
          <CustomTooltip :show="true" :text="item.eventTypeName"></CustomTooltip>
        </div>
        <div class="progress-box">
          <div class="progress-item" v-for="color in item.colors" :style="{ background: color }"></div>
        </div>
        <div class="count">
          <CustomTooltip :show="true" :text="item.attackNums"></CustomTooltip>
        </div>
      </div>
    </div>
    <ya-empty v-else></ya-empty>
  </div>
</template>

<style lang="scss" scoped>
.block {
  width: 100%;
  height: 295px;
  display: flex;
  flex-direction: column;
  padding: 10px 10px;
  box-sizing: border-box;

  .attack-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 275px;
    // justify-content: space-between;

    .attack-box-item {
      display: flex;
      align-items: center;
      height: 10%;

      .icon {
        width: 12px;
        height: 12px;
        flex-shrink: 0;
        margin-right: 3px;
      }

      .name {
        cursor: default;
        font-size: 14px;
        font-weight: 400;
        color: #b3b3b3;
        flex: 1;
        text-align: left;
        margin-right: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 96px;
        max-width: 95px;
      }

      .progress-box {
        flex: 1;
        display: flex;

        .progress-item {
          height: 10px;
          flex-shrink: 0;
          background: rgba(53, 125, 146, 1);
          flex: 1;
          max-width: 2px;
        }

        .progress-item+.progress-item {
          margin-left: 3px;
        }
      }

      .count {
        // min-width: 50px;
        text-align: right;
        margin-left: 10px;
        font-size: 14px;
        font-family: "DIN";
        font-weight: 400;
        color: #b3b3b3;
      }
    }
  }
}
</style>
