<template>
  <div>
    <YaPageContent
    v-model="searchForm"
    :stripe="true"
    :tableData="tableData"
    :tableColumns="column"
    :total="total"
    @init="initData"
  >
    <template #name="{ item }">
      <!-- <el-tooltip placement="top">
        <template #content>
          {{ item.eventName }}
        </template>
        <div class="name text-decoration">
          {{ item.eventName }}
        </div>
      </el-tooltip> -->
      <div class="name text-decoration" @click="toDetail(item)">
          {{ item.eventName }}
        </div>
    </template>
    <template #level="{ item }">
      <div
        class="level-content"
        :class="
          item.threatLevel == '高危'
            ? 'level-heigh'
            : item.threatLevel == '中危'
            ? 'level-center'
            : 'level-low'
        "
      >
        <svg
          t="1679909150644"
          class="icon level level-svg"
          viewBox="0 0 1110 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="5101"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          width="216.796875"
          height="200"
        >
          <path
            d="M377.186816 739.199128L546.728412 446.029965a11.157723 11.157723 0 0 1 19.470226 0l169.262653 293.169163a11.157723 11.157723 0 0 1-9.707219 16.736584H386.949823a11.157723 11.157723 0 0 1-9.763007-16.736584zM882.743231 432.640697l2.845219 62.204304a16.011332 16.011332 0 0 0 7.419886 12.719804l51.437101 32.301607a11.157723 11.157723 0 0 1-3.570471 20.362844l-235.762681 51.325525a5.578861 5.578861 0 0 1-5.578861-9.205122l163.906946-176.682538a11.157723 11.157723 0 0 1 19.302861 6.973576zM615.459984 1022.661073l-54.393898-29.567965a15.843966 15.843966 0 0 0-14.672406 0l-54.282321 27.336421a11.157723 11.157723 0 0 1-15.565023-13.556633l78.104059-228.398584a5.578861 5.578861 0 0 1 10.599837 0L631.415527 1009.773904a11.157723 11.157723 0 0 1-15.955543 12.887169zM407.256878 614.4l-238.496322-51.939199a10.04195 10.04195 0 0 1-3.23574-18.298665l53.836012-33.8079a15.6766 15.6766 0 0 0 7.308308-12.775593l2.84522-61.367474a11.157723 11.157723 0 0 1 19.414437-7.085154l163.572215 176.23623a5.578861 5.578861 0 0 1-5.24413 9.037755z"
            p-id="5102"
          ></path>
          <path
            d="M1043.247072 1016.412749h-334.731681a66.946336 66.946336 0 1 1 0-133.892673h210.82517l-113.808771-173.725742a66.951915 66.951915 0 0 1 112.023536-73.362027L1099.035685 912.924871a66.946336 66.946336 0 0 1-55.788613 103.487878zM401.678017 1016.412749H66.946336a66.946336 66.946336 0 0 1-55.788613-103.487878l181.703514-277.325198a66.951915 66.951915 0 0 1 112.023536 73.362027l-114.031926 173.558376H401.678017a66.946336 66.946336 0 0 1 0 133.892673zM722.016235 428.177608a66.946336 66.946336 0 0 1-59.414873-36.095233l-95.789049-184.102424-103.208935 183.600327a66.946336 66.946336 0 0 1-116.765568-65.495832L510.744756 34.19842A66.946336 66.946336 0 0 1 569.043857 0h1.115773a66.946336 66.946336 0 0 1 58.299101 36.039444l152.916589 294.173359a66.946336 66.946336 0 0 1-59.359085 97.853228z"
            p-id="5103"
          ></path>
        </svg>
        <span>{{ item.threatLevel }}</span>
      </div>
    </template>
    <template #result="{ item }">
      <div
        v-if="item.attackResult"
        class="attackResult"
        :class="
          item.attackResult == '企图'
            ? 'attackResult-warning'
            : item.attackResult == '成功'
            ? 'attackResult-success'
            : 'attackResult-error'
        "
      >
        {{ item.attackResult }}
      </div>
      <div v-else>-</div>
    </template>
  </YaPageContent>
  <ya-drawer
      v-if="drawerProps.showDrawer"
      :drawerProps="drawerProps"
      :size="'calc(100vw - 200px)'"
      destroy-on-close
      :before-close="handleCloseDrawer"
      :hiddenFooter="true"
    >
      <template #content>
        <DetailTab :showBtn="false" :info="detailInfoObj" :origin="origin"></DetailTab>
      </template>
    </ya-drawer>
  </div> 
 
</template>
<script lang="ts" setup>
import { ref, reactive, nextTick, Ref, onMounted, defineProps, unref, defineExpose, watch } from "vue";
import { getPage } from "../../api/threatAlarms/threatAlarms";
import DetailTab from "../threatAlarms/detailTab.vue";

const { detailInfo = {}, attackType='attack',searchInfo = {},  origin = "situation", type = 'attack'} = defineProps({
  detailInfo: Object,
  searchInfo: Object,
  attackType: String,
  origin: String, // flow--探针  situation--感知平台
  type: String, // attack--攻击者 victim--受害者 
});
const tableData = ref([]);
const searchForm = ref({});
// 表格数据定义
const column = ref([
  {
    prop: "alarmTime",
    label: "生成时间",
    fixed: "left",
    minWidth: "150px",
  },
  {
    label: "事件名称",
    minWidth: "180px",
    slotName: "name",
    showOverflowTooltip: false,
  },
  {
    prop: "eventType",
    minWidth: "150px",
    label: "事件类型",
  },
  {
    prop: "destIp",
    minWidth: "120px",
    label: "被攻击者IP",
  },
  {
    prop: "attackResult",
    label: "攻击结果",
    minWidth: "100px",
    slotName: "result",
  },
  {
    label: "威胁等级",
    minWidth: "100px",
    slotName: "level",
  },
  {
    prop: "killChain",
    minWidth: "120px",
    label: "攻击链阶段",
  },
]);
if(unref(type) != 'attack') {
  column.value[3].label = '攻击者IP'
  column.value[3].prop = 'srcIp'
}
const total = ref(0)
// 列表数据获取
const initData = async (type) => {
  let pageInfo = JSON.parse(JSON.stringify(type))._value;
  let parms = {}
  if(unref(attackType) == 'attack') {
    parms.srcIp = unref(detailInfo).attackIp
  } else {
    parms.destIp = unref(detailInfo).victimIp
  }
  if(unref(detailInfo).startTime) {
    parms.startTime = unref(detailInfo).startTime;
    parms.endTime = unref(detailInfo).endTime;
  }
  let res = await getPage({
    ...parms,
    ...pageInfo,
    ...unref(searchInfo)
  });
  if (res.code == 200) {
    tableData.value = res.data.records;
    total.value = res.data.total;
  }
};
/**
 * @description 监听搜索条件
 */
watch(unref(searchInfo), () => {
  // initData('')
  searchForm.value = unref(searchInfo)
}, { deep: true })

const reset = () => {
  searchForm.value = {}
}
defineExpose({initData,reset})

// 弹窗
const drawerProps = reactive({
  showDrawer: false,
  title: "事件详情",
  size: "small",
});
// 关闭抽屉
const handleCloseDrawer = async () => {
  drawerProps.title = "事件详情";
  drawerProps.showDrawer = false;
};
const detailInfoObj = ref({})
const toDetail = (e) => {
  drawerProps.showDrawer = true;
  detailInfoObj.value = e;
}
</script>
<style lang="scss" scoped>

::v-deep .el-drawer__body {
  padding-top: 0;
}
.name {
  display: block;
  word-break: break-all;
  word-wrap: break-word;
  white-space: pre-wrap;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden; //溢出内容隐藏
  text-overflow: ellipsis; //文本溢出部分用省略号表示
  display: -webkit-box; //特别显示模式
  -webkit-line-clamp: 2; //行数
  line-clamp: 2;
  -webkit-box-orient: vertical; //盒子中内容竖直排列
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
}
.text-decoration {
  text-decoration: underline;
  color: var(--el-color-primary);
}
.level-content {
  font-weight: 400;
  display: flex;
  align-items: center;
}
.level-svg {
  width: 15px;
  height: 15px;
  margin-right: 5px;
}
.level-heigh {
  color: var(--el-color-danger);
  svg {
    fill: var(--el-color-danger);
  }
}
.level-center {
  color: var(--el-color-warning);
  svg {
    fill: var(--el-color-warning);
  }
}
.level-low {
  color: var(--el-color-primary);
  svg {
    fill: var(--el-color-primary);
  }
}
.attackResult {
  width: 44px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-weight: 400;
  font-size: 14px;
  color: #FFFFFF;
}
.attackResult-warning {
  color: var(--attack-attempt);
}
.attackResult-error {
  color: var(--attack-attempt);
}
.attackResult-success {
  color: var(--attack-success);
}
::v-deep .ya-layout-content-table {
  padding: 0;
}
::v-deep .ya-layout-content-container-right {
  padding-top: 0;
}

</style>