<template>
  <div class="yaVictimDetail">
    <div class="assetMonitorDetail-header">
      <div class="assetMonitorDetail-header-top">
        <div class="assetMonitorDetail-header-top-left">
          <span class="top-name">受害者IP</span>
          <span class="top-ip">{{ router.query.victimIp }}</span>
          <span class="top-img">
            <img src="../../assets/image/bottom/line.png" alt="" />
          </span>
          <span class="top-location">
            <img src="../../assets/image/location.png" alt="" />
            <span>{{ router.query.location }}</span>
          </span>
          <span class="top-img" v-if="router.query.victimStatus">
            <img src="../../assets/image/bottom/line.png" alt="" />
          </span>
          <span
          v-if="router.query.victimStatus"
            class="top-status"
            :class="
              router.query.victimStatus == 1
                ? 'status-blue'
                : router.query.victimStatus == 3
                ? 'status-green'
                : router.query.victimStatus == 4
                ? 'status-red'
                : ''
            "
          >
            <span class="top-status-cil"></span>
            <span>{{ router.query.victimStatusDesc }}</span>
          </span>
        </div>
        <div class="assetMonitorDetail-header-top-right" @click="reset">
          <el-icon><Refresh /></el-icon>
        </div>
      </div>
      <div class="assetMonitorDetail-header-nav" v-if="origin == 'flow'">
        <div
          class="nav-item"
          :class="
            item.active && index == 0
              ? 'nav-item-begin-active'
              : item.active && index == 6
              ? 'nav-item-end-active'
              : item.active && index != 0 && index != 6
              ? 'nav-item-custom-active'
              : ''
          "
          v-for="(item, index) in navList"
          @click="choseNav(item)"
        >
          <div class="nav-item-item">
            <div class="nav-item-icon">
              <img v-if="!item.active" :src="item.baseImg" alt="" />
              <img v-else :src="item.activeImg" alt="" />
            </div>
            <div>
              <div>{{ item.label }}</div>
              <div>
                {{ bigNumberTransform(item.value)}}<span class="nav-item-until">{{ item.until }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="line"></div>
    <div class="assetMonitorDetail-center">
      <div class="assetMonitorDetail-center-item">
        <YaCard title="事件类型统计TOP10">
          <template #content>
            <div v-if="typeList.length > 0">
              <div class="com-height">
                <div
                  v-for="(item, index) in typeList"
                  class="mb-22"
                  :class="
                    item.disabled ? 'assetMonitorDetail-center-item-warp2' : ''
                  "
                  @click="choseItem('type', item)"
                >
                  <NavProgressBar
                    :color="'#1C92D0'"
                    :percentage="item.rate"
                    :number="page1 > 1 ? 5 + index : index"
                    :label="item.name"
                    :value="bigNumberTransform(item.count)"
                    backgroundColor="#F5F5F5"
                  ></NavProgressBar>
                </div>
              </div>
              <div class="assetMonitorDetail-center-item-bottom mt-0">
                <span
                  :class="page1 > 1 ?'assetMonitorDetail-center-item-bottom-btn':''"
                  @click="page1 > 1 ? checkPage('type', 'subtract') : ''"
                >
                  <el-icon :class="page1 == 1 ? 'base-icon' : ''"
                    ><CaretLeft
                  /></el-icon>
                </span>
                <span class="assetMonitorDetail-center-item-bottom-page"
                  >{{ page1 }} / {{ pages1 }}</span
                >
                <span
                  :class="page1 != pages1 ?'assetMonitorDetail-center-item-bottom-btn':''"
                  @click="page1 != pages1 ? checkPage('type', 'add') : ''"
                >
                  <el-icon :class="page1 != pages1 ? '' : 'base-icon'"
                    ><CaretRight
                  /></el-icon>
                </span>
              </div>
            </div>
            <ya-empty class="ya-no-length" v-else></ya-empty
          ></template>
        </YaCard>
      </div>
      <div class="assetMonitorDetail-center-item">
        <YaCard title="事件名称统计TOP10">
          <template #content>
            <div v-if="nameList.length > 0">
              <div class="com-height">
                <div
                  v-for="(item, index) in nameList"
                  class="mb-22"
                  :class="
                    item.disabled ? 'assetMonitorDetail-center-item-warp2' : ''
                  "
                  @click="choseItem('name', item)"
                >
                  <NavProgressBar
                    :color="'#1C92D0'"
                    :percentage="item.rate"
                    :number="page2 > 1 ? 5 + index : index"
                    :label="item.name"
                    :value="bigNumberTransform(item.count)"
                    backgroundColor="#BAC8CD"
                  ></NavProgressBar>
                </div>
              </div>
              <div class="assetMonitorDetail-center-item-bottom mt-0">
                <span
                  :class="page2 > 1 ?'assetMonitorDetail-center-item-bottom-btn':''"
                  @click="page2 > 1 ? checkPage('name', 'subtract') : ''"
                >
                  <el-icon :class="page2 == 1 ? 'base-icon' : ''"
                    ><CaretLeft
                  /></el-icon>
                </span>
                <span class="assetMonitorDetail-center-item-bottom-page"
                  >{{ page2 }} / {{ pages2 }}</span
                >
                <span
                  :class="page2 != pages2 ?'assetMonitorDetail-center-item-bottom-btn':''"
                  @click="page2 != pages2 ? checkPage('name', 'add') : ''"
                >
                  <el-icon :class="page2 != pages2 ? '' : 'base-icon'"
                    ><CaretRight
                  /></el-icon>
                </span>
              </div>
            </div>
            <ya-empty class="ya-no-length" v-else></ya-empty>
          </template>
        </YaCard>
      </div>
      <div class="assetMonitorDetail-center-item padding12">
        <YaCard title="攻击者TOP10">
          <template #content>
            <div v-if="ipList.length > 0">
              <div class="com-height">
                <div
                  v-for="(item, index) in ipList"
                  class="mb-8 assetMonitorDetail-center-item-warp"
                  :class="
                    item.disabled ? 'assetMonitorDetail-center-item-warp1' : ''
                  "
                  @click="choseItem('ip', item)"
                >
                  <div class="flex-bt">
                    <div class="flex-st">
                      <div class="assetMonitorDetail-center-item-label"></div>
                      <div class="assetMonitorDetail-center-item-ip">
                        {{ item.name }}
                      </div>
                    </div>
                    <div class="assetMonitorDetail-center-item-value">
                      <span>{{ bigNumberTransform(item.count) }}</span>
                      <span>次</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="assetMonitorDetail-center-item-bottom">
                <span
                  :class="page3 > 1 ?'assetMonitorDetail-center-item-bottom-btn':''"
                  @click="page3 > 1 ? checkPage('ip', 'subtract') : ''"
                >
                  <el-icon :class="page3 == 1 ? 'base-icon' : ''"
                    ><CaretLeft
                  /></el-icon>
                </span>
                <span class="assetMonitorDetail-center-item-bottom-page"
                  >{{ page3 }} / {{ pages3 }}</span
                >
                <span :class=" page3 != pages3 ? 'assetMonitorDetail-center-item-bottom-btn':''"
                  @click="page3 != pages3 ? checkPage('ip', 'add') : ''"
                >
                  <el-icon :class="page3 != pages3 ? '' : 'base-icon'"
                    ><CaretRight
                  /></el-icon>
                </span>
              </div>
            </div>
            <ya-empty class="ya-no-length" v-else></ya-empty>
          </template>
        </YaCard>
      </div>
    </div>
    <div class="line"></div>
    <div class="assetMonitorDetail-bottom">
      <DetailTable :detailInfo="router.query" :origin="origin" attackType="victim" ref="DetailTableRef" :searchInfo="searchInfo" type="victim"></DetailTable>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, nextTick, onMounted, defineProps, unref } from "vue";
import NavProgressBar from "../../components/ProgressBar/navProgressBar.vue";
import { CaretLeft, CaretRight, Refresh } from "@element-plus/icons-vue";
import {
  getEventCategoryTop10,
  getEventNameTop10,
  getAttackerTop10,
  getKillChainDistribution
} from "../../api/victimPerspective/victimPerspective";
import { bigNumberTransform } from "../../utils/utils";
import DetailTable from "../analysisCenter/DetailTable.vue";
import { getPage } from "../../api/threatAlarms/threatAlarms";
import { useRoute } from "vue-router";
import img1 from "../../assets/image/nav/nav-base-1.png";
import img2 from "../../assets/image/nav/nav-base-2.png";
import img3 from "../../assets/image/nav/nav-base-3.png";
import img4 from "../../assets/image/nav/nav-base-4.png";
import img5 from "../../assets/image/nav/nav-base-5.png";
import img6 from "../../assets/image/nav/nav-base-6.png";
import img7 from "../../assets/image/nav/nav-base-7.png";

import imgA1 from "../../assets/image/nav/nav-active-1.png";
import imgA2 from "../../assets/image/nav/nav-active-2.png";
import imgA3 from "../../assets/image/nav/nav-active-3.png";
import imgA4 from "../../assets/image/nav/nav-active-4.png";
import imgA5 from "../../assets/image/nav/nav-active-5.png";
import imgA6 from "../../assets/image/nav/nav-active-6.png";
import imgA7 from "../../assets/image/nav/nav-active-7.png";
const router = useRoute();
// flow--探针  situation--感知平台
const { origin = "situation" } = defineProps({
  origin: String,
});
const navList = ref([
  {
    label: "侦察目标",
    value: 0,
    until: "条",
    active: false,
    baseImg: img1,
    activeImg: imgA1,
  },
  {
    label: "武器构建",
    value: 0,
    until: "条",
    active: false,
    baseImg: img2,
    activeImg: imgA2,
  },
  {
    label: "载荷投递",
    value: 0,
    until: "条",
    active: false,
    baseImg: img3,
    activeImg: imgA3,
  },
  {
    label: "漏洞利用",
    value: 0,
    until: "条",
    active: false,
    baseImg: img4,
    activeImg: imgA4,
  },
  {
    label: "安全植入",
    value: 0,
    until: "条",
    active: false,
    baseImg: img5,
    activeImg: imgA5,
  },
  {
    label: "命令与控制",
    value: 0,
    until: "条",
    active: false,
    baseImg: img6,
    activeImg: imgA6,
  },
  {
    label: "目标达成",
    value: 0,
    until: "条",
    active: false,
    baseImg: img7,
    activeImg: imgA7,
  },
]);
const ipList = ref([]);
const nameList = ref([]);
const typeList = ref([]);
/**
 * @description 导航切换
 */
const choseNav = (e) => {
  navList.value.forEach((item) => {
    if (item.label == e.label) {
      item.active = true;
      searchInfo.value.killChain = item.type;
    } else {
      item.active = false;
    }
  });
};
const searchInfo = ref({
  srcIp: "",
  eventName: "",
  eventType: "",
  killChain: ""
})
/**
 * @description 点击事件
 */
const choseItem = (name, e) => {
  switch (name) {
    case "ip":
      ipList.value.forEach((item) => {
        if (e.id == item.id) {
          searchInfo.value.srcIp = item.name;
          item.disabled = !item.disabled;
        } else {
          item.disabled = false;
        }
      });
      break;
    case "name":
      nameList.value.forEach((item) => {
        if (e.id == item.id) {
          searchInfo.value.eventName = item.name;
          item.disabled = !item.disabled;
        } else {
          item.disabled = false;
        }
      });
      break;
    case "type":
      typeList.value.forEach((item) => {
        if (e.id == item.id) {
          searchInfo.value.eventType = item.type;
          item.disabled = !item.disabled;
        } else {
          item.disabled = false;
        }
      });
      break;
  }
};
/**
 * @description 分页
 */
const checkPage = (name, type) => {
  switch (name) {
    case "ip":
      if (type == "add") {
        page3.value++;
      } else {
        page3.value--;
      }
      getList3();
      break;
    case "name":
      if (type == "add") {
        page2.value++;
      } else {
        page2.value--;
      }
      getList2();
      break;
    case "type":
      if (type == "add") {
        page1.value++;
      } else {
        page1.value--;
      }
      getList1();
      break;
  }
};
/**
 * @description 重置
 */
const DetailTableRef = ref(null)
const reset = () => {
  searchInfo.value.srcIp = "";
  searchInfo.value.eventName = "";
  searchInfo.value.eventType = "";
  searchInfo.value.killChain = "";
  page1.value = 1;
  page2.value = 1;
  page3.value = 1;
  DetailTableRef.value.reset()
  init()
  ipList.value.forEach((item) => {
    item.disabled = false;
  });
  nameList.value.forEach((item) => {
    item.disabled = false;
  });
  typeList.value.forEach((item) => {
    item.disabled = false;
  });
  navList.value.forEach((item) => {
    item.active = false;
  });
};
const page1 = ref(1);
const pages1 = ref(1);
const total1 = ref(0);
const pageSize1 = ref(5);

const page2 = ref(1);
const pages2 = ref(1);
const total2 = ref(0);
const pageSize2 = ref(5);

const page3 = ref(1);
const pages3 = ref(1);
const total3 = ref(0);
const pageSize3 = ref(5);

const dataOne = JSON.parse(JSON.stringify(router.query));
delete dataOne.location;
delete dataOne.victimStatus;
delete dataOne.victimStatusDesc;
/**
 * @description 事件类型统计
 */
const getList1 = async () => {
  let res = await getEventCategoryTop10({
    ...dataOne,
    pageIndex: page1.value,
    pageSize: pageSize1.value,
  });
  if (res.code == 200) {
    total1.value = res.data.total;
    pages1.value = res.data.pages;
    typeList.value = res.data.records.map((item, index) => {
      item.id = index + 1;
      item.disabled = false;
      return item;
    });
  }
};
/**
 * @description 事件类型统计
 */
const getList2 = async () => {
  let res = await getEventNameTop10({
    ...dataOne,
    pageIndex: page2.value,
    pageSize: pageSize2.value,
  });
  if (res.code == 200) {
    total2.value = res.data.total;
    pages2.value = res.data.pages;
    nameList.value = res.data.records.map((item, index) => {
      item.id = index + 1;
      item.disabled = false;
      return item;
    });
  }
};
/**
 * @description 攻击者TOP10
 */
const getList3 = async () => {
  let res = await getAttackerTop10({
    ...dataOne,
    pageIndex: page3.value,
    pageSize: pageSize3.value,
  });
  if (res.code == 200) {
    total3.value = res.data.total;
    pages3.value = res.data.pages;
    ipList.value = res.data.records.map((item, index) => {
      item.id = index + 1;
      item.disabled = false;
      return item;
    });
  }
};
/**
 * @description 攻击链阶段分布
 */
const getList4 = async () => {
  let res = await getKillChainDistribution({
    ...dataOne
  });
  if (res.code == 200) {
    navList.value.forEach((item,index)=>{
      item.value = res.data[index].count;
      item.type = res.data[index].type;
    })
  }
};
/**
 * @description 初始化
 */
const init = () => {
  getList1();
  getList2();
  getList3();
  if (unref(origin) == 'flow') {
    getList4();
  }
};
onMounted(() => {
  init();
});
</script>
<style scoped lang="scss">
.yaVictimDetail {
  font-weight: 400;
  color: #174659;
  padding: 16px 16px 0px;
  overflow-y: scroll;
  overflow-x: hidden;
  box-sizing: border-box;
  .assetMonitorDetail-header {
    margin-bottom: 16px;
    .assetMonitorDetail-header-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-weight: 500;
      color: #174659;
      font-size: 18px;
      .assetMonitorDetail-header-top-left {
        display: flex;
        align-items: center;
      }
      .assetMonitorDetail-header-top-right {
        box-sizing: border-box;
        width: 32px;
        height: 32px;
        border-radius: 2px;
        border: 1px solid #bac8cd;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        .el-icon {
          color: #bac8cd;
          font-size: 20px;
        }
      }
      .top-name {
        margin-right: 15px;
      }
      .top-ip {
        margin-right: 10px;
      }
      .top-location {
        font-size: 13px;
        font-weight: 400;
        color: #1c92d0;
        img {
          position: relative;
          top: 3px;
        }
      }
      .top-img {
        margin: 0 16px 0 24px;
        img {
          width: 2px;
          height: 34px;
        }
      }
      .top-status {
        display: block;
        height: 24px;
        background: rgba(232, 193, 93, 0.05);
        border-radius: 4px;
        border: 1px solid #e8c15d;
        font-weight: 400;
        color: #e8c15d;
        font-size: 14px;
        text-align: center;
        line-height: 24px;
        padding: 0 8px;
        .top-status-cil {
          display: inline-block;
          width: 8px;
          height: 8px;
          background: #e8c15d;
          border-radius: 50%;
          position: relative;
          top: -1px;
          margin-right: 4px;
        }
      }
      .status-green {
        background: rgba(37, 159, 47, 0.05);
        border: 1px solid var(--el-color-success);
        color: var(--el-color-success);
        .top-status-cil {
          background: var(--el-color-success);
        }
      }
      .status-red {
        background: rgba(236, 119, 119, 0.05);
        border: 1px solid var(--el-color-danger);
        color: var(--el-color-danger);
        .top-status-cil {
          background: var(--el-color-danger);
        }
      }
      .status-blue {
        background: rgba(28, 146, 208, 0.05);
        border: 1px solid var(--el-color-primary);
        color: var(--el-color-primary);
        .top-status-cil {
          background: var(--el-color-primary);
        }
      }
    }
    .assetMonitorDetail-header-nav {
      display: flex;
      align-items: center;
      margin-top: 15px;
      .nav-item {
        background: url("@/assets/image/nav/nav_base_custom.png") no-repeat;
        background-size: 100% 100%;
        width: 14.2%;
        height: 60px;
        font-size: 14px;
        font-weight: 400;
        color: #174659;
        cursor: pointer;
        display: flex;
        align-items: center;
        .nav-item-item {
          position: relative;
          left: 46px;
          display: flex;
          align-items: center;
          .nav-item-icon {
            margin-right: 10px;
          }
          .nav-item-until {
            font-size: 13px;
          }
        }
      }
      .nav-item:nth-child(1) {
        background: url("@/assets/image/nav/nav_base_begin.png") no-repeat;
        background-size: 100% 100%;
        .nav-item-item {
          position: relative;
          left: 16px;
        }
      }
      .nav-item:last-child {
        background: url("@/assets/image/nav/nav_base_end.png") no-repeat;
        background-size: 100% 100%;
      }
      .nav-item-begin-active {
        background: url("@/assets/image/nav/nav_active_begin.png") no-repeat !important;
        background-size: 100% 100% !important;
        color: #ffffff;
      }
      .nav-item-custom-active {
        background: url("@/assets/image/nav/nav_active_custom.png")
          no-repeat !important;
        background-size: 100% 100% !important;
        color: #ffffff;
      }
      .nav-item-end-active {
        background: url("@/assets/image/nav/nav_active_end.png") no-repeat !important;
        background-size: 100% 100% !important;
        color: #ffffff;
      }
    }
  }
  .line {
    border-top: 1px solid #bac8cd;
    position: relative;
    left: -16px;
    width: calc(100vw - 203px);
  }
  .assetMonitorDetail-center {
    display: flex;
    // padding: 24px;
    .assetMonitorDetail-center-item {
      width: 33.33%;
      padding: 12px;
      border-right: 1px solid #bac8cd;
      min-height: 340px;
      .assetMonitorDetail-center-item-title {
        margin-bottom: 16px;
        font-weight: 500;
        color: #174659;
        font-size: 16px;
        padding: 0 12px;
        padding-top: 12px;
      }
      .com-height {
        height: 270px;
      }
      .assetMonitorDetail-center-item-warp {
        background: #f9fafb;
        border-radius: 2px;
        cursor: pointer;
        .assetMonitorDetail-center-item-label {
          width: 4px;
          height: 44px;
          background: #bac8cd;
          border-radius: 2px 0px 0px 2px;
        }
        .assetMonitorDetail-center-item-ip {
          margin-left: 16px;
        }
        .assetMonitorDetail-center-item-value {
          margin-right: 16px;
          height: 24px;
          line-height: 24px;
          padding: 0 10px;
          background: rgba(186, 200, 205, 0.25);
          border-radius: 4px;
          color: #174659;
        }
      }
      .assetMonitorDetail-center-item-bottom {
        display: flex;
        justify-content: flex-end;
        .assetMonitorDetail-center-item-bottom-btn {
          cursor: pointer;
        }
        .assetMonitorDetail-center-item-bottom-page {
          font-size: 12px;
          color: #174659;
          position: relative;
          top: -2px;
        }
      }
      .assetMonitorDetail-center-item-warp:hover,
      .assetMonitorDetail-center-item-warp1 {
        background: rgba(28, 146, 208, 0.05);
        .assetMonitorDetail-center-item-label {
          background: #1c92d0;
        }
        .assetMonitorDetail-center-item-ip {
          color: #1c92d0;
        }
        .assetMonitorDetail-center-item-value {
          background: rgba(28, 146, 208, 0.7);
          color: #fff;
        }
      }
      .flex-st {
        display: flex;
        align-items: center;
      }
      .flex-bt {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
    .assetMonitorDetail-center-item:last-child {
      border-right: 0;
    }
  }
  .mb-22 {
    margin-bottom: 6px;
    height: 48px;
    box-sizing: border-box;
    padding: 12px;
    padding-top: 9px;
    cursor: pointer;
  }
  .mb-22:hover,
  .assetMonitorDetail-center-item-warp2 {
    border-radius: 4px;
    background: rgba(28, 146, 208, 0.05);
  }
  .mb-8 {
    margin-bottom: 8px;
  }
  .padding12 {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
 
  .ya-no-length {
    margin-top: 10%;
  }
  .mt-0 {
    margin-top: 2px !important;
  }
  .assetMonitorDetail-bottom {
    margin-top: 24px;
    .ya-layout-content-table {
      padding: 0;
    }
    .data-name {
      color: #1c92d0;
      text-decoration: underline;
      cursor: pointer;
    }
    .data-result {
      font-size: 14px;
      color: rgba(23, 70, 89, 0.55);
    }
    .yellow {
      color: #e8c15d;
    }
    .violet {
      color: #877adb;
    }
    .red {
      color: #ec7777;
    }
    .data-level-img {
      width: 16px;
      height: 14px;
      position: relative;
      top: 2px;
    }
  }
}
.base-icon {
  color: var(--el-text-color-disabled);
}
</style>
