<template>
  <div class="ya-bg">
    <!-- 内容区 -->
    <YaPageContent
      :stripe="true"
      ref="multipleTableRef"
      :tableData="tableData"
      :tableColumns="column"
      @init="initData"
      @tableBtnClick="tableBtnClick"
      :total="total"
    >
      <!-- 受害者状态 -->
      <template #status="{ item }">
        <div class="status" v-if="item.victimStatusDesc">
          <div
            class="status-label"
            :class="
              item.victimStatus == 1
                ? 'status-green'
                : item.victimStatus == 3
                ? 'status-blue'
                : ''
               
            "
          ></div>
          <div class="status-value">{{ item.victimStatusDesc }}</div>
        </div>
        <div v-else>-</div>
      </template>
      <!-- 最新事件 -->
      <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 :showBtn="false" :info="detailInfoObj" :origin="origin"></DetailTab>
      </template>
    </ya-drawer>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, defineProps, unref } from "vue";
import { Right } from "@element-plus/icons-vue";
import { ElMessageBox, ElMessage, FormRules } from "element-plus";
import { downLoadAllFile } from "../../utils/utils";
import { getDictTypeList } from "../../api/common";
import { useRouter } from "vue-router";
import {
  getPage,
  getEventCategoryTop10,
  getEventNameTop10,
  getAttackerTop10,
} from "../../api/victimPerspective/victimPerspective";
import DetailTab from "../threatAlarms/detailTab.vue";
const {
  path = "../analysisCenter/victimPerspective/victimDetail",
  origin = "situation",
} = defineProps({
  path: String,
  origin: String, // flow--探针  situation--感知平台
});
const router = useRouter();
const tableData = ref([]);
const victimStatusList = ref([]);
// 表格数据定义
const column = ref([
  {
    prop: "time",
    label: "时间范围",
    valueFormat: "YYYY-MM-DD",
    startPlaceholder: "开始时间",
    endPlaceholder: "结束时间",
    search: true,
    type: "daterange",
    tableHide: true,
  },
  {
    prop: "victimIp",
    label: "受害者IP",
    fixed: "left",
    minWidth: "150px",
    search: true,
    type: "input",
  },
  {
    prop: "victimStatus",
    label: "受害者状态",
    minWidth: "100px",
    search: true,
    type: "select",
    tableHide: true,
    options: victimStatusList,
  },
  {
    prop: "victimStatusDesc",
    label: "受害者状态",
    minWidth: "100px",
    slotName: 'status'
  },
  {
    prop: "attackedCount",
    label: "被攻击次数",
    minWidth: "100px",
  },
  {
    prop: "attackerCount",
    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 initData = 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,
          victimIp: row.victimIp,
          location: row.location,
          victimStatus: row.victimStatus,
          victimStatusDesc: row.victimStatusDesc,
        },
      });
      break;
  }
};
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const detailInfoObj = ref({})
/**
 * @description 点击最新事件
 * @param { type = 'detail': 详情, 'study': 研判, 'down': 下载}
 */
const openDraw = (type, row) => {
  switch (type) {
    case "eventdetail":
      drawerProps.showDrawer = true;
      detailInfoObj.value = {
        id: row.lastestEventId,
        alarmTime: row.createAt?row.createAt:''
      };
      break;
  }
};
/**
 * @description 查询字典列表
 */
const getDict = () => {
  getDictTypeList("victimStatusType").then((res) => {
    console.log(res);
    column.value[2].options = res;
    // victimStatusList.value = res
  });
};
// 弹窗
const drawerProps = reactive({
  showDrawer: false,
  title: "事件详情",
  size: "small",
});
// 关闭抽屉
const handleCloseDrawer = async () => {
  drawerProps.title = "事件详情";
  drawerProps.showDrawer = false;
};
onMounted(() => {
  if(unref(origin) == 'flow') {
    column.value.splice(2,2)
  } else {
    getDict();
  }
});
</script>
<style lang="scss" scoped>
::v-deep .el-drawer__body {
  padding-top: 0;
}
.status {
  font-size: 14px;
  color: #174659;
  font-weight: 400;
  display: flex;
  align-items: center;
  .status-label {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--el-color-warning);
  }
  .status-green {
    background: var(--el-color-success);
  }
  .status-red {
    background: var(--el-color-danger);
  }
  .status-blue {
    background: var(--el-color-primary);
  }
  .status-value {
    margin-left: 4px;
  }
}
.latestEvents {
  font-size: 14px;
  font-weight: 400;
  color: var(--el-color-primary);
  text-decoration: underline;
  cursor: pointer;
}
</style>
