<!--
 * @Description: 异常特征样本
 * @Author: tqh
 * @Date: 2022-08-31 17:00
-->

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import {
  getList,
  exportRequest,
} from "../../../api/monitoring/maliciousFile/SpreadThelog";
import { downLoadFile, deepCopy } from "../../../utils/utils";
import { useRouter } from 'vue-router'
onMounted(() => {
  init();
});

// 分页参数
const page = ref(1);
const total = ref(0);
const size = ref(20);

/**
 * @description: 初始化方法
 * @param {*}
 * @return {*}
 * @author: xuch
 */
const init = () => {
  if (sessionStorage.getItem("handleDetail")) {
    let obj = JSON.parse(sessionStorage.getItem("handleDetail"));
    resetObj(obj);
  }
  getTableData("init", "loading");
  getLeftButtons();
};
const resetObj = (e) => {
  let key = Object.keys(e);
  let value = Object.values(e);
  for (var i = 0; i < key.length; i++) {
    queryFormData[key[i]] = value[i];
  }
  page.value = e.page;
  size.value = e.size;
};
/**
 * @description: 获取按钮
 * @param {*}
 * @return {*}
 * @author: xuch
 */
const buttons = ref([]) as any;
const getLeftButtons = () => {
  buttons.value = [
    {
      plain: true,
      text: "批量导出",
    },
  ];
};

// 查询参数
const queryColumns = reactive([
  {
    key: "time",
    type: "daterange",
    label: "时间范围",
    col: 6,
    valueFormat: "YYYY-MM-DD",
    startPlaceholder: "开始时间",
    endPlaceholder: "结束时间",
  },
  {
    key: "fileMd5",
    type: "input",
    label: "文件MD5",
    placeholder: "请输入文件MD5",
    col: 6,
  },
  {
    key: "url",
    type: "input",
    label: "URL",
    col: 6,
    placeholder: "请输入URL",
  },
  {
    key: "fileName",
    type: "input",
    label: "文件名",
    placeholder: "请输入文件名",
    col: 6,
  },
  {
    key: "fileType",
    type: "input",
    label: "文件类型",
    col: 6,
    placeholder: "请输入文件类型",
  },
  {
    key: "identificationResults",
    type: "input",
    label: "鉴定结果",
    placeholder: "请输入鉴定结果",
    col: 6,
  },
  {
    key: "srcPort",
    type: "input",
    label: "源端口",
    placeholder: "请输入源端口",
    col: 6,
  },
  {
    key: "srcRegion",
    type: "input",
    label: "源地域",
    placeholder: "请输入源地域",
    col: 6,
  },
  {
    key: "srcIp",
    type: "input",
    label: "源IP",
    placeholder: "请输入源IP",
    col: 6,
  },
  {
    key: "destIp",
    type: "input",
    label: "目的IP",
    placeholder: "请输入目的IP",
    col: 6,
  },
  {
    key: "destPort",
    type: "input",
    label: "目的端口",
    col: 6,
    placeholder: "请输入目的端口",
  },
  {
    key: "destRegion",
    type: "input",
    label: "目的地域",
    placeholder: "请输入目的地域",
    col: 6,
  },
  {
    key: "agreementType",
    type: "input",
    label: "协议类型",
    placeholder: "请输入协议类型",
    col: 6,
  },
  // {
  //   key: 'maliciousProgramType',
  //   type: 'input',
  //   label: '恶意程序类型',
  //   placeholder: '请输入恶意程序类型',
  //   col: 6
  // },
  // {
  //   key: 'dataSource',
  //   type: 'input',
  //   label: '数据源',
  //   placeholder: '请输入数据源',
  //   col: 6
  // },
]);
const queryFormData = reactive({
  time: [],
  fileMd5: "",
  url: "",
  maliciousProgramType: "",
  familyName: "",
  fileName: "",
  fileType: "",
  identificationResults: "",
  srcIp: "",
  destIp: "",
  srcPort: "",
  destPort: "",
  srcRegion: "",
  destRegion: "",
  dataSource: "",
  agreementType: "",
});

// 表格数据
const tableData = ref([]) as any;
const tableColumn: any[] = [
  {
    type: "selection",
    width: "65px",
    fixed: "left",
  },
  {
    prop: "collectionTime",
    label: "传播时间",
    width: "190px",
  },
  {
    prop: "srcRegion",
    label: "源地域",
    width: "110px",
  },
  {
    prop: "destRegion",
    label: "目的地域",
    width: "110px",
  },
  {
    prop: "srcIp",
    label: "源IP",
    width: "170px",
  },
  {
    prop: "srcOperator",
    label: "源IP运营商",
    width: "120px",
  },
  {
    prop: "srcEnterprise",
    label: "源IP单位",
    minWidth: "180px",
  },
  {
    prop: "destIp",
    label: "目的IP",
    minWidth: "180px",
  },
  {
    prop: "destOperator",
    label: "目的IP运营商",
    width: "140px",
  },
  {
    prop: "destEnterprise",
    label: "目的IP单位",
    minWidth: "180px",
  },
  {
    prop: "srcPort",
    label: "源端口",
    width: "110px",
  },
  {
    prop: "destPort",
    label: "目的端口",
    width: "110px",
  },
  {
    prop: "url",
    label: "URL",
    minWidth: "200px",
  },
  {
    prop: "fileMd5",
    label: "文件MD5",
    minWidth: "200px",
  },
  {
    prop: "fileName",
    label: "文件名",
    minWidth: "150px",
  },
  {
    prop: "fileType",
    label: "文件类型",
    width: "110px",
  },
  {
    prop: "agreementType",
    label: "协议类型",
    width: "120px",
  },
  // {
  //   prop: 'maliciousProgramType',
  //   label: '恶意程序类型',
  //   width:'140px'
  // },
  // {
  //   prop: 'dataSource',
  //   label: '数据源',
  //   width:'110px'
  // },
  {
    prop: "identificationResults",
    label: "鉴定结果",
    width: "110px",
  },
  {
    prop: "type",
    label: "操作",
    buttons: [
      {
        title: "详情",
        eventName: function (row) {
          handleDetail(row);
        },
      },
    ],
  },
];
/**
 * @description: 详情操作
 * @param {*}
 * @return {*}
 * @author: tqh
 */
const handleDetail = async (row) => {
  let _row = row; // handle data row
  //
  console.log(_row);
};
/**
 * @description: 表格多选操作
 * @param {*}
 * @return {*}
 * @author: xuch
 */
const selectData = ref([]);
const handleSelect = (data) => {
  selectData.value = data;
};

/**
 * @description: 查询操作
 * @param {*}
 * @return {*}
 * @author: xuch
 */
const search = () => {
  getTableData("init");
};

/**
 * @description: 重置操作
 * @param {*}
 * @return {*}
 * @author: xuch
 */
const reset = () => {
  console.log("调用 reset");
  getTableData("init");
};

/**
 * @description: 获取表格数据
 * @param {*}
 * @return {*}
 * @author: xuch
 */
const getTableData = async (type, loading?) => {
  console.log("调用 search", type);
  let dataObj = deepCopy(queryFormData);
  if (type === "init") {
    page.value = 1;
  }
  if (queryFormData.time) {
    if (queryFormData.time.length > 0) {
      dataObj.startTime = queryFormData.time[0] + " 00:00:00";
      dataObj.endTime = queryFormData.time[1] + " 23:59:59";
    }
    delete dataObj.time;
  }

  try {
    const params = {
      pageNum: page.value,
      pageSize: size.value,
      ...dataObj,
    };
    let obj = {
      ...queryFormData,
      page: page.value,
      size: size.value,
    };
    console.log(obj, "obj====");
    sessionStorage.setItem("handleDetail", JSON.stringify(obj));
    params.yaLoading = loading;
    const res = await getList(params);
    if (res.code !== 200) return;
    if (res.data) {
      tableData.value = res.data.rows || [];
      total.value = res.data.total;
    }
  } catch (error) {
    console.log(error);
  }
};

/**
 * @description: 页面容量切换
 * @param {*}
 * @return {*}
 * @author: xuch
 */
const sizeChange = function (val: number) {
  size.value = val;
  page.value = 1;
  getTableData("page");
};

/**
 * @description: 分页切换
 * @param {*}
 * @return {*}
 * @author: xuch
 */
const currentChange = function (val: number) {
  page.value = val;
  getTableData("page");
};

/**
 * @description: 批量 / 全部 导出
 * @param {*} type batch | all
 * @return {*}
 * @author: xuch
 */
const handleExport = async (type, val) => {
  console.log("调用 handleExport", type, val);

  if (type.text == "批量导出") {
    if (selectData.value.length === 0) {
      ElMessage.warning("请选择要批量导出的数据");
      return;
    }
    // @ts-ignore
    const data = selectData.value.map((item) => item.id);
    handleExportRequest(data);
  } else {
    router.push("./SpreadThelogDetail?id=" + val.id);
  }
};

/**
 * @description: 批量 / 全部 导出请求
 * @param {*} data
 * @return {*}
 * @author: xuch
 */
const handleExportRequest = async (data) => {
  console.log(data);
  try {
    const params = {
      ids: data.toString(),
    };
    const res = await exportRequest(params);
    if (res) {
      downLoadFile(res, `传播日志`);
      getTableData("");
    }
  } catch (error) {
    console.log(error);
  }
};

const router = useRouter();
const tableBtnClick = (btn, row) => {
  console.log(btn);
};
</script>

<template>
  <div>
    <YaPageContent :formData="queryFormData" :formColumns="queryColumns" :tableData="tableData"
      :tableColumns="tableColumn" searchLabelWidth="110px" @search="search" @reset="reset" :currentPage="page"
      :pageSize="size" :total="total" @sizeChange="sizeChange" @selectionChange="handleSelect"
      @currentChange="currentChange" :leftButtons="buttons" @tableBtnClick="handleExport"></YaPageContent>
  </div>
</template>

<style scoped lang="scss">
::v-deep .ya-table-search .ya-search-spread {
  max-height: 300px;
}
</style>
