<template>
  <div class="ya-bg">
    <!-- 内容区 -->
    <YaPageContent
      :stripe="true"
      ref="multipleTableRef"
      :tableData="tableData"
      :tableColumns="column"
      searchLabelWidth="83px"
      @init="search"
      @tableBtnClick="tableBtnClick"
      :total="total"
    >
      <!-- 最新事件 -->
      <template #lastestEventName="{ item }">
        <div
          v-if="item.lastestEventName"
          class="latestEvents ellipsis"
          @click="openDraw('eventdetail', item)"
        >
          {{ item.lastestEventName }}
        </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 :origin="origin" :info="detailInfo" :showBtn="false" ></DetailTab>
      </template>
    </ya-drawer>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, defineProps } from "vue";
import { Right } from "@element-plus/icons-vue";
import { ElMessageBox, ElMessage, FormRules } from "element-plus";
import { downLoadAllFile } from "../../utils/utils";
import { useRouter } from "vue-router";
import { getDictTypeList } from "../../api/common";
import {
  getPage,
  getEventCategoryTop10,
  getEventNameTop10,
  getAttackResults,
  getAttackeredTop10,
} from "../../api/attackPerspective/attackPerspective";
import DetailTab from "../threatAlarms/detailTab.vue";
const {
  path = "../analysisCenter/attackPerspective/attackDetail",
  origin = "situation",
} = defineProps({
  path: String,
  origin: String, // flow--探针  situation--感知平台
});
const router = useRouter();
const tableData = ref([]);
// 表格数据定义
const column = ref([
  {
    prop: "time",
    label: "时间范围",
    fixed: "left",
    minWidth: "150px",
    search: true,
    tableHide: true,
    type: "daterange",
    valueFormat: "YYYY-MM-DD",
    startPlaceholder: "开始时间",
    endPlaceholder: "结束时间",
  },
  {
    prop: "attackIp",
    label: "攻击者IP",
    fixed: "left",
    minWidth: "150px",
    search: true,
    type: "input",
  },
  {
    prop: "attackCount",
    label: "攻击次数",
    minWidth: "100px",
  },
  {
    prop: "attackerCount",
    label: "被攻击者数量",
    minWidth: "100px",
  },
  {
    prop: "eventTypeCount",
    label: "攻击手段统计",
    minWidth: "120px",
  },
  {
    label: "最新事件",
    slotName: "lastestEventName",
    minWidth: "200px",
  },
  {
    label: "操作",
    width: "60px",
    fixed: "right",
    buttons: [
      {
        title: "详情",
        eventName: "detail",
      },
    ],
  },
]);
const total = ref(0);
const searchForm = ref({});
// 列表数据获取
const search = async (data) => {
  let _data = JSON.parse(JSON.stringify(data.value));
  searchForm.value = _data;
  if (_data.time) {
    _data.startTime = _data.time[0];
    _data.endTime = _data.time[1];
    delete _data.time;
  }
  let res = await getPage(_data);
  if (res.code == 200) {
    tableData.value = res.data.records;
    total.value = res.data.total;
  }
};

// 表格点击事件
const tableBtnClick = (btn, row) => {
  const { eventName } = btn;
  switch (eventName) {
    case "detail":
      router.push({
        path: path,
        query: {
          startTime: searchForm.value.startTime,
          endTime: searchForm.value.endTime,
          attackIp: row.attackIp,
          location: row.location,
        },
      });
      break;
  }
};
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const detailInfo = ref({});
/**
 * @description
 */
const openDraw = (type, row) => {
  switch (type) {
    case "eventdetail":
    detailInfo.value = {
        id: row.lastestEventId,
        alarmTime: row.createAt?row.createAt:''
      };
      drawerProps.showDrawer = true;
      break;
  }
};
/**
 * @description 查询字典列表
 */
const threatTypeList = ref([]);
const getDict = () => {
  getDictTypeList("threatType").then((res) => {
    threatTypeList.value = res;
  });
};

// 弹窗
const drawerProps = reactive({
  showDrawer: false,
  title: "事件详情",
  size: "small",
});
// 关闭抽屉
const handleCloseDrawer = async () => {
  drawerProps.title = "事件详情";
  drawerProps.showDrawer = false;
};


onMounted(() => {
  // getDict();
});
</script>
<style lang="scss" scoped>
::v-deep .el-drawer__body {
  padding-top: 0;
}
.latestEvents {
  font-size: 14px;
  font-weight: 400;
  color: var(--el-color-primary);
  text-decoration: underline;
  cursor: pointer;
}
</style>
