<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/views/screen/AttackComponents/realTimeAttackSituation.vue
 * @Date: 2022-09-05 11:26:18
 * @Description: 
 * @LastEditTime: 2023-09-01 15:16:17
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import { ref, reactive, watch, nextTick, onMounted, onUnmounted } from 'vue'
import { ElScrollbar } from "element-plus";
import { getWholeDayAttackList } from "../../../api/screen/attackSituationScreen";
import { getContryItemIcon } from "../../../assets/js/countryFlagBase64";
import { useGlobalAttackMap } from "../logic/useGlobalAttackMap";

import { Swiper, SwiperSlide } from "swiper/vue";
import { Autoplay } from "swiper";
import "swiper/css";
import { dataScreen } from "../../../router/routes";
import { mapMapping } from "../../../assets/map/provinceData";
const mapData = reactive(mapMapping());
const { currentCity } = useGlobalAttackMap();
let timer = null;
const swiperModules = [Autoplay];
const autoplayProps = {
  delay: 100,
  disableOnInteraction: false,
  pauseOnMouseEnter: true,
};
watch(currentCity, () => {
  getData("init");
});
const tabWidth = ref("13%");
const tableTitleList = ref([
  {
    title: "攻击时间",
    width: "200px",
  },
  {
    title: "攻击源IP",
    width: tabWidth.value,
  },
  {
    title: "源IP运营商",
    width: "9%",
  },
  // {
  //   title:'源IP单位'
  // },
  {
    title: "源IP所属地",
    width: "20%",
  },
  {
    title: "目的IP",
    width: tabWidth.value,
  },
  {
    title: "目的IP运营商",
    width: tabWidth.value,
  },
  // {
  //   title:'目的IP单位'
  // },
  {
    title: "目的IP所属地",
    width: tabWidth.value,
  },
  {
    title: "攻击事件",
    width: tabWidth.value,
  },
]);
const tableList = ref([]);
const current = ref(1);
let randomNum = 0;
const getData = async (state?) => {
  try {
    if (state === "init") {
      randomNum = Math.random();
      current.value = 1;
      tableList.value = [];
    }
    if (state !== randomNum && state !== "init") {
      return;
    }
    let params = {
      pageNum: current.value,
      pageSize: 30,
    };
    const res = await getWholeDayAttackList(params);
    if (res.code == 200 && res.data) {
      current.value++;
      let data: [] = res.data || [];
      tableList.value.push(...data);
      // demo测试代码
      handleAddData(randomNum);
    }
  } catch (error) { }
};

// 定时插入数据
const handleAddData = (randomNum) => {
  timer = setTimeout(() => {
    getData(randomNum);
  }, 10000);
};

const data = ref({
  list2: [],
  modules: [Autoplay],
});
onMounted(() => {
  tableList.value = [];
  getData("init");
});
onUnmounted(() => {
  timer && clearTimeout(timer);
});
</script>

<template>
  <div class="block-con" :class="mapData?.en == 'anhui' ? 'block-con-height1' : ''">
    <div class="block-con-table">
      <div class="block-con-table-title">
        <div class="block-con-table-title-item" v-for="item in tableTitleList" :style="{ width: item.width }">
          {{ item.title }}
        </div>
      </div>
      <div v-if="tableList.length">
        <swiper :autoplay="autoplayProps" :slides-per-view="5" :speed="500" :direction="'vertical'"
          :observe-parents="true" :loop="true" :modules="swiperModules"
          :style="{ height: mapData?.en == 'anhui' ? '197px' : '180px' }">
          <swiper-slide class="block-con-table-list-center" v-for="(item, index) in tableList" :key="index">
            <div class="block-con-table-list">
              <div class="block-con-table-list-center">
                <div class="table-list-width" style="padding-left: 24px; width: 200px">
                  {{ item.discoveryTime }}
                </div>
                <div class="attackIp table-list-width" :style="{ width: tabWidth }">
                  <!-- <div class="source">源</div> -->
                  <div>{{ item.attackIp }}</div>
                </div>
                <div class="table-list-width" style="width: 9%">
                  {{ item.attackOperator }}
                </div>

                <div class="table-list-width attackIp" style="width: 20%">
                  <div class="table-list-img">
                    <img :src="getContryItemIcon(index, item.attackCountry)" />
                  </div>
                  <div>{{ item.attackCountry }}</div>
                </div>
                <div class="table-list-width attackIp" :style="{ width: tabWidth }">
                  <!-- <div class="table-list-goal">目的</div> -->
                  <div>{{ item.attackedIp }}</div>
                </div>
                <div class="table-list-width" :style="{ width: tabWidth }">
                  {{ item.attackedOperator }}
                </div>
                <div class="table-list-width" :style="{ width: tabWidth }">
                  {{ item.attackedCity }}
                </div>
                <div class="table-list-width" :style="{ width: tabWidth }">
                  {{ item.eventType }}
                </div>
              </div>
            </div>
          </swiper-slide>
        </swiper>
      </div>
      <ya-empty v-else></ya-empty>
    </div>
  </div>
</template>

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

  .block-con-table-title {
    display: flex;
    background: rgba(31, 137, 198, 0.14);
    height: 32px;
    line-height: 32px;
    padding-left: 24px;

    .block-con-table-title-item {
      color: #fff;
      font-weight: 400;
      font-size: 16px;
    }
  }

  .block-con-table-list {
    width: 100%;

    // height: 160px;
    .block-con-table-list-center {
      width: 100%;
      display: flex;
      align-items: center;
      // padding-left: 24px;
      height: 32px;

      // line-height: 32px;
      .table-list-width {
        color: rgba(128, 217, 236, 1);
      }

      .table-list-img {
        width: 22px;
        height: 17px;
        margin-right: 9px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .attackIp {
        display: flex;
        align-items: center;

        .source {
          color: #fff;
          font-size: 12px;
          text-align: center;
          width: 25px;
          height: 17px;
          line-height: 17px;
          margin-right: 9px;
          border: 1px solid #f84548;
          border-radius: 2px;
          background: rgba(248, 69, 72, 0.39);
        }
      }

      .table-list-goal {
        color: #fff;
        font-size: 12px;
        text-align: center;
        width: 36px;
        height: 17px;
        line-height: 17px;
        margin-right: 9px;
        border: 1px solid #53ccfb;
        border-radius: 2px;
        background: rgba(83, 204, 251, 0.39);
      }
    }
  }

  // .block-con-table-list-center:nth-child(even) {
  //     background: rgba(137,153,165,0.14);
  //   }
}

::v-deep .swiper-wrapper .swiper-slide {
  width: 100%;
  background: rgba(5, 37, 65, 1);
}

::v-deep .swiper-wrapper .swiper-slide:nth-child(odd) {
  background: rgba(10, 50, 81, 1);
}
</style>
