<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/views/screen/AttackComponents/attackSourceIpTop5.vue
 * @Date: 2022-09-05 11:28:18
 * @Description: 
 * @LastEditTime: 2023-09-01 18:28:18
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { bigNumberTransform } from "../../../utils/utils";
import BlockHeader from "../../../views/screen/SafeComponents/BlockHeader.vue";
import NumberProgressBarItem from "../../../components/ProgressBar/NumberProgressBarItem.vue";
import ProgressBar from "../../../components/ProgressBar/ProgressBar.vue";
import { getThemeColor } from "../../../components/chart/options/theme";
import { useGlobalAttackMap } from "../logic/useGlobalAttackMap";
import {
  getAttackIpStat,
  getVisitSrcIpStat,
} from "../../../api/screen/attackSituationScreen";
import { mapMapping } from "../../../assets/map/provinceData";
const mapData = mapMapping();
const { currentCity } = useGlobalAttackMap();
const ipType = ref(1);
const activeName = ref("攻击者IP TOP5");
const titleList = ref([
  {
    title: "攻击者IP TOP5",
    ipType: 1,
    active: true,
  },
  {
    title: "被攻击资产 TOP5",
    ipType: 2,
    active: false,
  },

  // {
  //   title: "访问源IP TOP5",
  //   ipType: 3,
  //   active: false,
  // },
]);
const list = ref([]);
const choseItem = (e) => {
  titleList.value.forEach((item) => {
    activeName.value = e.title;
    if (e.title == item.title) {
      item.active = true;
    } else {
      item.active = false;
    }
  });
  if (e.ipType < 3) {
    ipType.value = e.ipType;
    getData();
  } else {
    getVisitData();
  }
};
// 获取被攻击ip，攻击源ip
const getData = async () => {
  try {
    const params = {
      ipType: ipType.value,
      attackDestRegion: "",
    };
    if (unref(currentCity) !== mapData?.name) {
      params.attackDestRegion = unref(currentCity);
    }
    const res = await getAttackIpStat(params);
    console.log(res);
    if (res.code == 200 && res.data) {
      let resList = res.data || [];
      list.value = resList.map((item, index) => {
        let ip_component = "";
        if (ipType.value == 1) {
          if (item.attackEnterprise) {
            ip_component = `（${item.attackEnterprise}）`;
          }
        } else {
          if (item.attackedEnterprise) {
            ip_component = `（${item.attackedEnterprise}）`;
          }
        }

        return {
          rank: index + 1,
          name: item.ip,
          value: bigNumberTransform(item.count),
          percentage: item.ratio,
          name1: item.attackedOperator,
          name2: item.attackedEnterprise,
          ip_component,
        };
      });
    }
  } catch (error) { }
};
const getVisitData = async () => {
  try {
    const params = {
      visitDestRegion: "",
    };
    const res = await getVisitSrcIpStat(params);
    console.log(res);
    if (res.code == 200 && res.data) {
      let resList = res.data || [];
      list.value = resList.map((item, index) => {
        let ip_component = "";
        if (item.visitEnterprise) {
          ip_component = `（${item.visitEnterprise}）`;
        }

        return {
          rank: index + 1,
          name: item.ip,
          value: item.count,
          unit: item.unit,
          percentage: item.ratio,
          name1: item.visitOperator,
          name2: item.visitEnterprise,
          ip_component,
        };
      });
    }
  } catch (error) { }
};

// var element = urls[Math.floor((Math.random()*urls.length))];
//循环测试下随机获取一个值。
// for(var i=0;i<10;i++){
// 	var element = urls[Math.floor((Math.random()*urls.length))];
// 	console.log('第' + i +'次获取到：' + element);
// }
watch(currentCity, () => {
  getData();
});

onMounted(() => {
  getData();
});
</script>

<template>
  <div class="custom-screen-block">
    <BlockHeader name="攻击者和被攻击资产排名" unit="次"></BlockHeader>
    <div class="block-con">
      <div class="block-con-title">
        <div class="block-con-title-item" :class="[item.active ? 'active' : '']" v-for="item in titleList"
          @click="choseItem(item)">
          <div>{{ item.title }}</div>
        </div>
      </div>
      <div class="module-block-center block-con-center">
        <!-- <div v-if="mapData.en != 'anhui'">
          <img
            src=".././../../assets/image/attackScreen/right-table.png"
            alt=""
          />
        </div> -->
        <div class="block-con-center-content">
          <div class="table-box">
            <div class="table-box-header">
              <div class="item">排名</div>
              <div class="item">
                {{ activeName === "攻击者IP TOP5" ? "攻击源IP" : "被攻击IP" }}
              </div>
              <div class="item">攻击次数</div>
            </div>
            <div class="table-box-content" v-if="list.length">
              <div class="table-box-row" v-for="(item, index) in list" :key="index">
                <div class="item">
                  <div class="rank-box" :class="index < 3 && 'rank-front-three'">
                    {{ index + 1 }}
                  </div>
                </div>
                <div class="item name">
                  <CustomTooltip :show="true" :text="item.name + item.ip_component"></CustomTooltip>
                </div>
                <div class="item count">{{ item.value }}</div>
              </div>
            </div>
            <ya-empty v-else></ya-empty>
          </div>
          <!-- <div
            class="module-block-center-flex"
            v-for="(item, index) in list"
            :key="index"
          >
            <div class="left">
              <div class="index">
                <div
                  class="index-item"
                  :class="[index < 3 ? 'index-item-first' : '']"
                >
                  {{ index + 1 }}
                </div>
              </div>
              <div class="name">
                <div class="flex-bt">
                  <span class="ya_ip">{{ item.name }}</span
                  ><span class="ya_cot"
                    ><CustomTooltip
                      :show="true"
                      :text="item.ip_component"
                    ></CustomTooltip
                  ></span>
                  <span style="padding-left: 3px"
                    >{{ item.value }}<span>（次）</span></span
                  >
                </div>
                <ProgressBar
                  :color="
                    getThemeColor().progressColor || 'rgba(88, 180, 213, 1)'
                  "
                  :percentage="item.percentage"
                  backgroundColor="rgba(15, 37, 66, 1)"
                ></ProgressBar>
              </div>
            </div>
          </div>
          <ya-empty class="ya-empty" v-if="!list.length"></ya-empty> -->
        </div>
      </div>
      <!-- <div class="block-con-center" v-if="list.length">
        <div>
          <img src=".././../../assets/image/attackScreen/right-table.png" alt="">
        </div>
        <div class="block-con-num">
          <NumberProgressBarItem v-for="(item,index) in list" :key="`${item.name}-${index}`" :name="item.name"
            :number="item.rank" :value="item.value+'（个）'" :percentage="item.percentage" :type="'other'" />
        </div>
      </div>
      <ya-empty v-else></ya-empty> -->
    </div>
  </div>
</template>

<style lang="scss" scoped>
.block-con {
  width: 100%;
  height: 310px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.41);
  margin-top: 18px;

  .block-con-title {
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;

    .block-con-title-item {
      height: 30px;
      line-height: 30px;
      width: 50%;
      cursor: pointer;
      text-align: center;
      background: url("../../../assets/image/screen/threat-event/attack-base.png") no-repeat;
      background-size: 100% 100%;
      opacity: 0.5;
      color: #4ec9ef;
      // border-right: 1px solid rgba(255, 255, 255, 0.27);
    }

    .block-con-title-item:last-child {
      margin-left: 27px;
    }

    .active {
      background: url("../../../assets/image/screen/threat-event/attacl-chose.png") no-repeat !important;
      background-size: 100% 100% !important;
      opacity: 1 !important;
      // border: 1px solid #4ec9ef;
      color: #4ec9ef;
    }
  }

  .block-con-title1 {
    border: none;
    margin-top: 10px;
    margin-left: 18px;
    margin-right: 8px;

    .block-con-title-item {
      background: #2d3b6d;
      border: 1px solid #68d9e4;
      margin-right: 10px;
      color: #74f8fd;
    }

    .active {
      box-shadow: 0px 4px 10px 0px rgba(35, 45, 123, 0.3),
        inset 0px 0px 10px 0px #68d9e4;
    }
  }

  .block-con-center {
    position: relative;
    margin-top: 18px;

    img {
      position: absolute;
      height: 245px;
      width: 100%;
      z-index: -1;
    }

    .block-con-num {
      width: 100%;
      position: absolute;
      top: 5px;
    }

    // background: url('../../../assets/image/attackScreen/right-table.png') no-repeat;
    // background-size: 100%;
  }
}

#anhui {
  .block-con-center-content {
    padding-top: 0;
  }

  .custom-screen-block .block-con-height {
    height: 292px !important;
  }
}

.block-con-center-content {}

::v-deep .progress-bar .background-bar {
  border-radius: 0;
  background: #75787c;
}

.module-block-center {
  margin-top: 10px;

  .name {
    flex: 1;
    width: 355px;

    .ya_ip {
      display: inline-block;
      width: 98px;
    }

    .ya_cot {
      // display: inline-block;
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: default;
      // max-width: 200px;
    }
  }

  .module-block-center-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;

    .left {
      display: flex;
      align-items: center;
      flex: 1;
    }

    .index-item {
      height: 16px;
      line-height: 16px;
      width: 25px;
      text-align: center;
      background: #565f61;
      border-radius: 2px;
      color: #fff;
      font-size: 12px;
      margin-right: 10px;
    }

    .index-item-first {
      background: #b07028;
      color: #ffffff;
    }
  }
}

.flex-bt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.name-title {
  display: inline-block;
  width: 80%;
  overflow: hidden; //超出的文本隐藏
  text-overflow: ellipsis; //溢出用省略号显示
  white-space: nowrap; // 默认不换行；
}

.table-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .table-box-header {
    width: 100%;
    height: 28px;
    // background: rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    line-height: 28px;
    font-size: 16px;
    font-weight: 400;
    color: #8ce7ff;
    box-sizing: border-box;
  }

  .table-box-content {
    width: 100%;
    display: flex;
    flex-direction: column;

    .table-box-row {
      position: relative;
      width: 100%;
      height: 29px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      // line-height: 28px;
      font-size: 14px;
      font-weight: 400;
      padding: 8px 7px 3px;
      // box-sizing: border-box;
      color: rgba(179, 179, 179, 1);
      background-image: url("../../../assets/image/screen/icon_box_line.png");
      background-size: 100% 26%;
      background-repeat: no-repeat;
      background-position: bottom;
    }

    .table-box-row::after {
      // position: absolute;
      // bottom: -1px;
      // left: 0;
      // content: "";
      // display: block;
      // width: 100%;
      // height: 1px;
      // background-size: 100%;
      // background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAtAAAAACCAMAAABG4BujAAAAOVBMVEWZwNKav9KZwNIAAACZwNOawNKZwtKZwdKZv9KZwdOZydCYwdKZwNKawtKZwNKZwNIOzv0Jz/8Iz//IHKa8AAAAEnRSTlNIRUIAPxkJDzovBR8lEzUp5uArkSxsAAAA5ElEQVQ4y+3RWW7EIBAE0K5uFrPP5P6HDdgmMphofIBB4u+pQFUkQhQtqBimLIo22YglE3whsoEoaSKdOgI5P6O4Qjwi01CoSIPCgBSpHbkD2R3RvwgDSnfEKxRPlJ+j9vmGeg0d2Q9In6iYFYo40dT6Ouk7zYNpfv6OhQiJgLVljoZRRCHLhk0ylC9QJoKtriA1hAN5BTegUFG9Se8INySuJXW0TtomhPZkuKB8QaonjUhdUBkQGooz8mVKsg0xXK/BNxTBZkZmRqWiuEQ8otZVR7fW3dz6d5oH07ze79dxLYv8AkerHcemH5XqAAAAAElFTkSuQmCC)
      //   no-repeat;
    }

    .rank-box {
      width: 26px;
      height: 26px;
      font-size: 12px;
      font-weight: 400;
      font-family: YouSheBiaoTiHei;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      background-image: url("../../../assets/image/screen/icon_round_blue.png");
    }

    .rank-front-three {
      color: #ffffff;
      background-image: url("../../../assets/image/screen/icon_round_yellow.png");
    }

    .name {
      cursor: default;
      color: #8cecff;
      font-size: 16px;
      padding-top: 6px;
    }
  }

  .item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #8cecff;
  }

  .count {
    font-family: Adobe Heiti Std;
  }

  .item:nth-of-type(1) {
    width: 50px;
    margin-right: 10px;
  }

  .item:nth-of-type(2) {
    display: inline-block !important;
    flex: 1;
    align-items: flex-start;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .item:nth-of-type(3) {
    width: 100px;
    min-width: 0;
    margin-left: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
