<template>
  <div class="header">
    <div class="top" :class="!isShow ? 'border-bototm-0' : ''" @click="down">
      <div>威胁统计</div>
      <div class="down">
        <svg
          t="1684144305706"
          class="icon downicon"
          :class="isShow ? 'spread-icon-spread' : ''"
          viewBox="0 0 1031 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="1235"
          width="11"
          height="11"
        >
          <path
            d="M514.312135 494.709466l-428.163563-476.138516C68.609342-1.547579 38.689479-4.126878 18.57095 12.896493s-22.697827 47.459094-5.674457 67.577622c0.51586 1.031719 1.547579 1.547579 2.063439 2.063439l456.019987 506.574239c8.253755 16.507511 25.277126 26.824705 43.848076 26.308846 18.57095 0.51586 35.59432-9.801335 43.848075-26.308846L1014.180198 82.537554c16.507511-20.634389 13.412353-50.554252-7.222036-67.577622-19.086809-15.475791-46.943234-13.928212-63.966605 3.095158L514.312135 494.709466z"
            p-id="1236"
            fill="#ffffff"
          ></path>
          <path
            d="M514.312135 902.754499l-428.163563-475.622656c-17.023371-20.118529-47.459094-22.697827-67.577622-5.674457C-1.547579 438.480757-4.126878 468.91648 12.896493 489.035009c0.51586 1.031719 1.547579 1.547579 2.063439 2.063439l456.019987 506.574239c8.253755 16.507511 25.277126 26.824705 43.848076 26.308845 18.57095 0.51586 35.59432-9.801335 43.848075-26.308845l456.019987-506.05838c18.57095-18.57095 18.57095-49.006673 0-67.577622s-49.006673-18.57095-67.577622 0c-1.031719 1.031719-2.063439 2.579299-3.095158 3.611018L514.312135 902.754499z"
            p-id="1237"
            fill="#ffffff"
          ></path>
        </svg>
      </div>
    </div>
    <div class="content" v-if="isShow">
      <el-row>
        <el-col :span="8" class="content-item">
          <div class="content-top">
            <div>
              <span class="left"></span>
              <span>源IPTOP10</span>
            </div>
            <div class="until">单位:次</div>
          </div>
          <div v-if="headerObjList.srcIpList.length > 0">
            <div class="com-height">
              <div
                v-for="(item, index) in headerObjList.srcIpList"
                class="mb-8 assetMonitorDetail-center-item-warp"
              >
                <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>
                  </div>
                </div>
              </div>
            </div>
            <div class="content-item-item-bottom mt-10">
              <span :class="page1 > 1?'content-item-item-bottom-btn':''" @click="page1 > 1?checkPage('srcIp','subtract'):''">
                <el-icon :class="page1 == 1 ? 'base-icon': ''"><CaretLeft /></el-icon>
              </span>
              <span class="content-item-item-bottom-page">{{ page1 }} / {{ pages1 }}</span>
              <span :class="page1 != pages1?'content-item-item-bottom-btn':''" @click="page1 != pages1?checkPage('srcIp','add'):''">
                <el-icon :class="page1 != pages1 ? '': 'base-icon'"><CaretRight /></el-icon>
              </span>
            </div>
          </div>
          <ya-empty class="ya-no-length" v-else></ya-empty>

        </el-col>
        <el-col :span="8" class="content-item">
          <div class="content-top">
            <div>
              <span class="left"></span>
              <span>目的IPTOP10</span>
            </div>
            <div class="until">单位:次</div>
          </div>
          <div v-if="headerObjList.destIpList.length > 0">
            <div class="com-height">
              <div
                v-for="(item, index) in headerObjList.destIpList"
                class="mb-8 assetMonitorDetail-center-item-warp"
              >
                <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>
                  </div>
                </div>
              </div>
            </div>
            <div class="content-item-item-bottom mt-10">
              <span :class="page2 > 1?'content-item-item-bottom-btn':''" @click="page2 > 1?checkPage('destIp','subtract'):''">
                <el-icon :class="page2 == 1 ? 'base-icon': ''"><CaretLeft /></el-icon>
              </span>
              <span class="content-item-item-bottom-page">{{ page2 }} / {{ pages2 }}</span>
              <span :class="page2 != pages2?'content-item-item-bottom-btn':''" @click="page2 != pages2?checkPage('destIp','add'):''">
                <el-icon :class="page2 != pages2 ? '': 'base-icon'"><CaretRight /></el-icon>
              </span>
            </div>
          </div>
          <ya-empty class="ya-no-length" v-else></ya-empty>
        </el-col>
        <el-col :span="8" class="content-item border-right-0">
          <div class="content-top">
            <div>
              <span class="left"></span>
              <span>事件名称TOP10</span>
            </div>
            <div class="until">单位:个</div>
          </div>
          <div v-if="headerObjList.eventNameList.length > 0">
            <div class="com-height1">
              <div v-for="(item, index) in headerObjList.eventNameList" class="content-item-item">
                <NavProgressBar
                  :color="'#1C92D0'"
                  :percentage="item.rate"
                  :number="page3 > 1 ? index + 5 : index"
                  :label="item.name || '-' "
                  :value="bigNumberTransform(item.count)"
                  backgroundColor="#BAC8CD"
                ></NavProgressBar>
              </div>
            </div>
            <div class="content-item-item-bottom mt-0">
              <span :class="page3 > 1?'content-item-item-bottom-btn':''" @click="page3 > 1?checkPage('name','subtract'):''">
                <el-icon :class="page3 == 1 ? 'base-icon': ''"><CaretLeft /></el-icon>
              </span>
              <span class="content-item-item-bottom-page">{{ page3 }} / {{ pages3 }}</span>
              <span :class="page3 != pages3?'content-item-item-bottom-btn':''" @click="page3 != pages3?checkPage('name','add'):''">
                <el-icon :class="page3 != pages3 ? '': 'base-icon'"><CaretRight /></el-icon>
              </span>
            </div>
          </div>
          <ya-empty class="ya-no-length" v-else></ya-empty>
        </el-col>
        <el-col :span="8" class="content-item border-bototm-0">
          <div class="content-top">
            <div>
              <span class="left"></span>
              <span>事件类型TOP10</span>
            </div>
            <div class="until">单位:个</div>
          </div>
          <div v-if="headerObjList.eventTypeList.length > 0">
            <div class="com-height1">
              <div v-for="(item, index) in headerObjList.eventTypeList" class="content-item-item">
                <NavProgressBar
                  :color="'#1C92D0'"
                  :percentage="item.rate"
                  :number="page4 > 1 ? index + 5 : index"
                  :label="item.name || '-' "
                  :value="bigNumberTransform(item.count)"
                  backgroundColor="#BAC8CD"
                ></NavProgressBar>
              </div>
            </div>
            <div class="content-item-item-bottom mt-0">
              <span :class="page4 > 1?'content-item-item-bottom-btn':''" @click="page4 > 1?checkPage('type','subtract'):''">
                <el-icon :class="page4 == 1 ? 'base-icon': ''"><CaretLeft /></el-icon>
              </span>
              <span class="content-item-item-bottom-page">{{ page4 }} / {{ pages4 }}</span>
              <span :class="page4 != pages4?'content-item-item-bottom-btn':''" @click="page4 != pages4?checkPage('type','add'):''">
                <el-icon :class="page4 != pages4 ? '': 'base-icon'"><CaretRight /></el-icon>
              </span>
            </div>
          </div>
          <ya-empty class="ya-no-length" v-else></ya-empty>
        </el-col>
        <el-col :span="8" class="content-item border-bototm-0">
          <div class="content-top">
            <div>
              <span class="left"></span>
              <span>威胁等级分布</span>
            </div>
            <div class="until">单位:个</div>
          </div>
          <div class="event-content">
            <div class="event-content-top">
              <div class="event-content-img">
                <img src="../../../assets/image/event.png" alt="" />
              </div>
              <div>
                <div class="event-value">{{ bigNumberTransform(eventTotal) }}</div>
                <div class="event-label">威胁事件总数</div>
              </div>
            </div>
            <div style="height: 180px; margin-right: 50px">
              <CircularDiagram
                :pieCenter="['50%', '50%']"
                :chartWidth="'50%'"
                :otherType="'three'"
                :chartData="headerObjList.threatLevelList"
                legendTop="auto"
                :colorBg="colorBg"
                :legendFormatter="legendFormatter"
                :tooltipFormatter="tooltipFormatter"
                :tooltipBgColor="'#fff'"
              />
            </div>
          </div>
        </el-col>
        <el-col :span="8" class="content-item border-bototm-0">
          <div class="content-top">
            <div>
              <span class="left"></span>
              <span>攻击链分布</span>
            </div>
            <div class="until">单位:个</div>
          </div>
          <div class="attack-content">
            <div>
              <el-row>
                <el-col :span="12" v-for="(item, index) in attackList">
                  <div class="attack-content-item">
                    <div>
                      <img :src="item.baseImg" alt="" />
                    </div>
                    <div>
                      <div class="attack-content-label">{{ item.label }}</div>
                      <div class="attack-content-value">
                        {{ bigNumberTransform(item.value)}}
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script setup lang="ts">
import NavProgressBar from "../../../components/ProgressBar/navProgressBar.vue";
import { CaretLeft, CaretRight, Refresh } from "@element-plus/icons-vue";
import { ref, reactive, nextTick, Ref, onMounted, unref, defineProps, defineExpose } from "vue";
import CircularDiagram from "../../../components/chart/CircularDiagram/CircularDiagram.vue";
import { getThemeColor } from "@/components/chart/options/index";
import { bigNumberTransform } from "../../../utils/utils";
import {
  getSrcIpTop10,
  getDestIpTop10,
  getEventNameTop10,
  getEventTypeTop10,
  getThreatLevel,
  getKillChain,
} from "../../../api/threatAlarms/threatAlarms";
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";

const { headerObj = {} } = defineProps({
  headerObj: Object,
});
delete headerObj.pageIndex;
delete headerObj.pageSize;
const colorBg = ['#1C92D0','#E8C15D','#EC7777'];
const chartData = ref([
  {
    name: "存在敏感词",
    value: 10123,
    percentage: "100%",
  },
  {
    name: "存在黑链",
    value: 2012,
    percentage: "10%",
  },
  {
    name: "存在篡改",
    value: 30,
    percentage: "20%",
  },
]) as any;
const legendFormatter = (name) => {
  const findItem = unref(chartData1).findIndex((item) => item.name === name);
  const _item = unref(chartData1)[findItem] as any;
  const _name = `{title|${name}}`;
  const percentage = `{subtitle|${_item.value}}`;
  return _name + percentage;
};
const tooltipFormatter = (params) => {
  const { color, name, value } = params;
  return `<div style='display:flex;align-items:center;justify-content: space-between;font-size:12px;font-weight: 400;'>
        <div style='display:flex;align-items:center;'>
          <div style="background: ${color};width: 6px;height: 6px;border-radius: 6px;"></div>
			    <div style='margin-left:5px;color: #174659;'>${name}</div>
        </div>
        <div style='margin-left:15px;color: #819BA5;'>${value}</div>
		</div>`;
};
const attackList = ref([
  {
    label: "侦察目标",
    value: 0,
    baseImg: img1,
  },
  {
    label: "武器构建",
    value: 0,
    baseImg: img2,
  },
  {
    label: "载荷投递",
    value: 0,
    baseImg: img3,
  },
  {
    label: "漏洞利用",
    value: 0,
    baseImg: img4,
  },
  {
    label: "安装植入",
    value: 0,
    baseImg: img5,
  },
  {
    label: "命令与控制",
    value: 0,
    baseImg: img6,
  },
  {
    label: "目标达成",
    value: 0,
    baseImg: img7,
  },
]);
const isShow = ref(false);
const down = () => {
  isShow.value = !isShow.value;
};

/**
 * @description 分页
 */
 const checkPage = (name, type) => {
  switch (name) {
    case "type":
      if (type == "add") {
        page4.value++;
      } else {
        page4.value--;
      }
      getList4();
      break;
    case "name":
      if (type == "add") {
        page3.value++;
      } else {
        page3.value--;
      }
      getList3();
      break;
    case "destIp":
      if (type == "add") {
        page2.value++;
      } else {
        page2.value--;
      }
      getList2();
      break;
    case "srcIp":
      if (type == "add") {
        page1.value++;
      } else {
        page1.value--;
      }
      getList1();
      break;
  }
};

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 page4 = ref(1);
const pages4 = ref(1);
const total4 = ref(0);
const pageSize4 = ref(5);


const headerObjList = ref({
  srcIpList: [],
  destIpList: [],
  eventNameList: [],
  eventTypeList: [],
  threatLevelList: []
})

const eventTotal = ref(0)
const resetSearch = (e) => {
  let obj = unref(headerObj);
  let data = JSON.parse(JSON.stringify(unref(obj)));
  if(unref(data).time) {
    unref(data).startTime = unref(data).time[0];
    unref(data).endTime = unref(data).time[1];
    delete unref(data).time
  }
  return unref(data)
}
/**
 * @description: 获取源IP TOP10数据
 */
 const getList1 = async () => {
  let res = await getSrcIpTop10({
    ...resetSearch(unref(headerObj)),
    pageIndex: page1.value,
    pageSize: pageSize1.value,
  });
  if(res.code == 200) {
    total1.value = res.data.total;
    pages1.value = res.data.total > 5 ? 2 : 1;
    headerObjList.value.srcIpList = res.data.records
  }
}
/**
 * @description: 获取目的IP TOP10数据
 */
const getList2 = async () => {
  let res = await getDestIpTop10({
    ...resetSearch(unref(headerObj)),
    pageIndex: page2.value,
    pageSize: pageSize2.value,
  });
  if(res.code == 200) {
    total2.value = res.data.total;
    pages2.value = res.data.total > 5 ? 2 : 1;
    headerObjList.value.destIpList = res.data.records;
  }
}
/**
 * @description: 获取事件名称TOP10数据
 */
 const getList3 = async () => {
  let res = await getEventNameTop10({
    ...resetSearch(unref(headerObj)),
    pageIndex: page3.value,
    pageSize: pageSize3.value,
  });
  if(res.code == 200) {
    total3.value = res.data.total;
    pages3.value = res.data.total > 5 ? 2 : 1;
    headerObjList.value.eventNameList = res.data.records;
  }
}
/**
 * @description: 获取事件类型TOP10数据
 */
 const getList4 = async () => {
  let res = await getEventTypeTop10({
    ...resetSearch(unref(headerObj)),
    pageIndex: page4.value,
    pageSize: pageSize4.value,
  });
  if(res.code == 200) {
    total4.value = res.data.total;
    pages4.value = res.data.total > 5 ? 2 : 1;
    headerObjList.value.eventTypeList = res.data.records;
  }
}
/**
 * @description 初始化数据
 */
const resetData = () => {
  page1.value = 1;
  page2.value = 1;
  page3.value = 1;
  page4.value = 1;
}
/**
 * @description 初始化
 */
const init = () => {
  resetData()
  getList1()
  getList2()
  getList3()
  getList4()
  // 威胁等级分布
  getThreatLevel(resetSearch(unref(headerObj))).then(res=>{
    if(res.code == 200) {
      headerObjList.value.threatLevelList = res.data.map((item)=>{
        return {
          name: item.name,
          value: item.count,
          percentage: item.rate>0?item.rate+'%':item.rate
        }
      });
      headerObjList.value.threatLevelList.shift()
      res.data.forEach((item)=>{
        if(item.name == '总计') {
          eventTotal.value = item.count;
        }
      })
    }
  })
  // 攻击链分布
  getKillChain(resetSearch(unref(headerObj))).then(res=>{
    if(res.code == 200) {
      attackList.value.forEach((item,index)=>{
        item.value = res.data[index].count
      })
    }
  })
}
defineExpose({init})
</script>

<style lang="scss" scoped>
.header {
  border: 1px solid #bac8cd;
  border-radius: 2px;
  margin-bottom: 16px;

  .top {
    height: 40px;
    display: flex;
    align-items: center;
    background: #f6f9fa;
    padding: 0 16px;
    font-size: 16px;
    font-weight: 600;
    color: #174659;
    border-bottom: 1px solid #bac8cd;
    justify-content: space-between;
    cursor: pointer;
    .down {
      width: 20px;
      height: 20px;
      background: rgba(28, 146, 208, 0.5);
    }
  }
  .border-bototm-0 {
    border-bottom: 0 !important;
  }
  .border-right-0 {
    border-right: 0 !important;
  }
  .content {
    .content-item {
      border-right: 1px solid #bac8cd;
      padding: 16px;
      height: 350px;
      border-bottom: 1px solid #bac8cd;
      .content-item-item {
        height: 53px;
      }
      .mt-10 {
        margin-top: 14px;
      }
      .content-item-item-bottom {
        display: flex;
        justify-content: flex-end;
        .content-item-item-bottom-btn {
          cursor: pointer;
        }
        .content-item-item-bottom-page {
          font-size: 12px;
          color: #174659;
          position: relative;
          top: 1px;
        }
      }
    }

    .content-item:last-child {
      border-right: none;
    }
    .content-top {
      font-size: 16px;
      font-weight: 500;
      display: flex;
      align-items: center;
      color: #174659;
      margin-bottom: 14px;
      justify-content: space-between;
      .left {
        display: inline-block;
        width: 4px;
        height: 16px;
        background: var(--el-color-primary);
        border-radius: 1px;
        margin-right: 3px;
        position: relative;
        top: 2px;
      }
      .until {
        font-size: var(--el-font-size-base);
        color: var(--el-text-color-disabled);
      }
    }
    .flex-st {
      display: flex;
      align-items: center;
    }
    .flex-bt {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .assetMonitorDetail-center-item-warp {
      background: #f9fafb;
      border-radius: 2px;
      margin-bottom: 8px;
      height: 44px;
      .assetMonitorDetail-center-item-label {
        width: 4px;
        height: 40px;
        background: #1c92d0;
        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: #ebf2f5;
        border-radius: 4px;
        color: var(--el-text-color-primary);
      }
    }
    .assetMonitorDetail-center-item-warp:last-child {
      margin-bottom: 0;
    }
    .event-content {
      .event-content-top {
        display: flex;
        height: 76px;
        background: #f6f9fa;
        border-radius: 2px;
        align-items: center;
      }
      .event-content-img {
        width: 44px;
        height: 44px;
        background: linear-gradient(
          180deg,
          rgba(28, 146, 208, 0.54) 1%,
          #1c92d0 100%
        );
        border-radius: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 24px;
        margin-left: 16px;
      }
      .event-value {
        font-size: 20px;
        font-weight: bold;
        color: #174659;
      }
      .event-label {
        font-weight: 400;
        color: #819ba5;
        font-size: 16px;
      }
    }
    .attack-content {
      .attack-content-item {
        border: 1px solid #bac8cd;
        border-radius: 2px;
        display: flex;
        align-items: center;
        height: 62px;
        margin-bottom: 8px;
        margin-right: 8px;
        img {
          margin-left: 16px;
          margin-right: 10px;
          margin-top: 5px;
        }
        .attack-content-label {
          font-weight: 400;
          color: #174659;
          font-size: 14px;
        }
        .attack-content-value {
          font-weight: 600;
          color: #174659;
          font-size: 18px;
        }
        .attack-content-until {
          font-weight: 400;
          color: #819ba5;
          font-size: 13px;
        }
      }
      .attack-content-item:nth-of-type(even) {
        margin-right: 0;
      }
    }
  }
}
.downicon {
  position: relative;
  left: 4px;
  top: 1px;
  cursor: pointer;
}
.spread-icon-spread {
  transform: rotate(-180deg);
}
.ya-no-length {
  position: relative;
  top: -30px;
}
.ya-table-empty-slot {
  height: 100%;
}

.base-icon {
  color: var(--el-text-color-disabled);
}
.com-height {
  height: 260px;
}
.com-height1 {
  height: 270px;
}
</style>
