<!--
 * @Author: 曹文丽 caowenli@yuan-info.com
 * @Date: 2022-11-01 19:31:04
 * @LastEditors: 曹文丽 caowenli@yuan-info.com
 * @LastEditTime: 2023-04-18 16:21:44
 * @FilePath: \yuan-huoling-browser\src\views\digitalAssets\assetRisk\abnormalRisk.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="global-statistics-container">
    <abnormalRisk
      :initData="initData"
      :assetRiskId="assetRiskId"
      :activeNum="activeNum"
      :drawerProps="drawerProps"
      ref="childRef"
    ></abnormalRisk>
    <YaPageContent
      ref="multipleTableRef"
      :formData="serchformData"
      :formColumns="serchColumns"
      :leftButtons="leftButtons"
      :tableData="tableData"
      :tableColumns="column"
      searchLabelWidth="90px"
      @search="initData('init')"
      @reset="reset"
      @selectionChange="handleSelectionChange"
      @tableBtnClick="tableBtnClick"
      :currentPage="serchformData.pageIndex"
      :pageSize="serchformData.pageSize"
      :total="total"
      @sizeChange="sizeChange"
      @currentChange="currentChange"
    >
      <template #pageContentTop>
        <div class="ya-tabs">
          <YaTabs
            style="margin-bottom: 12px"
            class="custom-common-tabs"
            :tabs="tabs"
            v-model="serchformData.handleStatus"
            @tabChange="handleTabChange"
          ></YaTabs></div
      ></template>
      <template v-slot:level="{ item }">
        <div v-if="item.riskLevel == 3">
          <img src="../../../assets/imgs/diwei.png" alt="" /> <span>低危</span>
        </div>
        <div v-else-if="item.riskLevel == 2">
          <img src="../../../assets/imgs/middle.png" alt="" /> <span>中危</span>
        </div>
        <div v-else-if="item.riskLevel == 1">
          <img src="../../../assets/imgs/gaowei.png" alt="" /> <span>高危</span>
        </div>
        <div v-else>-</div>
      </template>
      <template v-slot:state="{ item }">
        <div class="ya-stateColor1" v-if="item.handleStatus == 1">
          {{ item.handleStatusStr }}
        </div>
        <div class="ya-stateColor2" v-else-if="item.handleStatus == 2">
          {{ item.handleStatusStr }}
        </div>
        <div class="ya-stateColor3" v-else-if="item.handleStatus == 3">
          {{ item.handleStatusStr }}
        </div>
        <div class="ya-stateColor4" v-else-if="item.handleStatus == 4">
          {{ item.handleStatusStr }}
        </div>
        <div class="ya-stateColor5" v-else-if="item.handleStatus == 5">
          {{ item.handleStatusStr }}
        </div>
        <div v-else>-</div>
      </template>
      <template v-slot:done="{ item }">
        <span v-if="bottomData.has(200038)" @click="goToDetail(item)">
          <TableBtns :title="bottomData.get(200038).label" type="8"></TableBtns>
        </span>
        <span
          v-if="bottomData.has(200033) && item.handleStatus == 1"
          @click="toBeDelivered(item, 1)"
        >
          <TableBtns :title="bottomData.get(200033).label" type="9"></TableBtns>
        </span>
        <span
          v-if="bottomData.has(200034) && item.handleStatus == 1"
          @click="toDelect(item)"
        >
          <TableBtns
            :title="bottomData.get(200034).label"
            type="10"
          ></TableBtns>
        </span>
        <span
          v-if="bottomData.has(200035) && item.handleStatus == 2"
          @click="toBeDelivered(item, 2)"
        >
          <TableBtns
            :title="bottomData.get(200035).label"
            type="11"
          ></TableBtns>
        </span>
        <span
          v-if="bottomData.has(200036) && item.handleStatus == 3"
          @click="toBeDelivered(item, 3)"
        >
          <TableBtns
            :title="bottomData.get(200036).label"
            type="12"
          ></TableBtns>
        </span>
        <span
          v-if="bottomData.has(200037) && item.handleStatus == 4"
          @click="toBeDelivered(item, 4)"
        >
          <TableBtns
            :title="bottomData.get(200037).label"
            type="13"
          ></TableBtns>
        </span>
      </template>
    </YaPageContent>
    <ya-dialog
      v-if="dialogProps.showDialog"
      :dialogProps="dialogProps"
      @open="handleDialogOpen()"
      title="选择格式"
    >
      <template #content>
        <ya-form
          @handleEvent="handleDialogEvent"
          :formColumns="formColumns"
          labelWidth="100px"
          :formData="formData"
          :rules="rules"
          :ref="
            (el) => {
              if (el) dialogForm = el;
            }
          "
        >
        </ya-form>
      </template>
      <template #footer>
        <ya-button @click="handleCancel">取消</ya-button>
        <ya-button type="primary" @click="handleConfirm">确定</ya-button>
      </template>
    </ya-dialog>
  </div>
</template>
<script setup lang="ts">
import CommonTabs from "../../../components/CommonTabs/CommonTabs.vue";
import { ref, reactive, nextTick, onMounted } from "vue";
import {
  queryRisk,
  exportRisk,
  riskDelect,
  getDeptData,
} from "../../../api/digitalAssets/assetRisk/abnormalRisk";
import { usePermissions } from "../../../composables/usePermissions";
import { getDictList, downLoadFile } from "../../../utils/utils";
import { useRouter } from "vue-router";
import abnormalRisk from "./components/abnormalRiskDrawer.vue";
import { yaMessage, yaConfirmMessage } from "../../../utils/message";
import { ElTable } from "element-plus";
const { permissionsButtons } = usePermissions();
const router = useRouter();
//字典
const riskTypeArr = ref([]);
const riskLevelArr = ref([]);
const networkAreaArr = ref([]);
const fileTypeArr = ref([]);

const initDict = async () => {
  riskLevelArr.value = (await getDictList("flawLevel")) as [];
  networkAreaArr.value = (await getDictList("networkArea")) as [];
  riskTypeArr.value = (await getDictList("riskType")) as [];
  fileTypeArr.value = (await getDictList("excelType")) as [];
};

// tabs
const tabs = ref([
  {
    title: "待下发",
    value: 1,
  },
  {
    title: "待整改",
    value: 2,
  },
  {
    title: "整改中",
    value: 3,
  },
  {
    title: "待核验",
    value: 4,
  },
  {
    title: "已完成",
    value: 5,
  },
]);

const deptArr = ref([]);
const serchColumns = reactive([
  {
    key: "networkAreaCode",
    type: "select",
    label: "网络域",
    options: networkAreaArr,
  },
  {
    key: "riskType",
    type: "select",
    label: "异常类型",
    options: riskTypeArr,
  },
  {
    key: "riskLevel",
    type: "select",
    label: "风险等级",
    options: riskLevelArr,
  },
  {
    key: "deptId",
    type: "select",
    label: "所属部门",
    options: deptArr,
  },
  {
    key: "findTime",
    type: "date",
    label: "发现时间",
    valueFormat: "YYYY-MM-DD",
  },
]);
const serchformData = ref({
  handleStatus: 1,
  pageIndex: 1,
});
let tableData = ref([]);
let bottomData: any = new Map();
const column: any[] = [
  {
    type: "selection",
    width: "65px",
  },
  {
    prop: "ip",
    label: "资产IP",
    minWidth: "160px",
  },
  {
    prop: "networkArea",
    label: "网络域",
    minWidth: "110px",
  },
  {
    prop: "name",
    label: "域名",
    minWidth: "150px",
  },
  {
    prop: "url",
    label: "URL地址",
    minWidth: "150px",
  },
  {
    prop: "port",
    label: "端口",
    minWidth: "100px",
  },
  {
    prop: "classification",
    label: "异常类型",
    minWidth: "120px",
  },
  {
    prop: "riskLevel",
    label: "风险等级",
    width: "120px",
    slotName: "level",
  },
  {
    prop: "detail",
    label: "异常说明",
    width: "150px",
  },
  {
    prop: "deptName",
    label: "所属部门",
    minWidth: "120px",
  },
  {
    prop: "handleStatusStr",
    label: "处理状态",
    minWidth: "110px",
    slotName: "state",
  },
  // {
  //   prop: "executionWayStr",
  //   label: "执行方式",
  //   minWidth: "80px",
  // },
  {
    prop: "findTime",
    label: "发现时间",
    width: "190px",
  },
  {
    width: "170px",
    label: "操作",
    slotName: "done",
    fixed: "right",
  },
];

//选择文件格式的弹窗是否要显示
const dialogVisible = ref(false);
//调接口时的参数
const data: any = ref({});
//选择的文件类型
const fileType = ref("");
//点击多选框选中的行的数据
let selectData = ref([]);
//左边按钮
let leftButtons: any = ref([]);

onMounted(() => {
  permissionsButtons.map((item) => {
    bottomData.set(item.menuId, item);
  });
  initData();
  getButton();
  initDict();
  getDeptData().then((res) => {
    const { data = {} } = res;
    data.forEach((item) => {
      let obj = ref({});
      obj.value.label = item.deptName;
      obj.value.value = item.id;
      deptArr.value.push(obj.value);
    });
  });
});

//页面初始化
const initData = (type?) => {
  if (type == "init") {
    serchformData.value.pageIndex = 1;
  }
  // 保存筛选条件
  if (type) {
    sessionStorage.setItem("YA_FORM_DATA", JSON.stringify(serchformData.value));
  }
  if (sessionStorage.getItem("YA_FORM_DATA")) {
    let obj = JSON.parse(sessionStorage.getItem("YA_FORM_DATA"));
    Object.keys(obj).forEach((item) => {
      serchformData.value[item] = obj[item];
    });
  }
  let _data = JSON.parse(JSON.stringify(serchformData.value));
  queryRisk(_data).then((res) => {
    const { code, data = {} } = res;
    if (code == 200) {
      tableData.value = data.records;
      total.value = data.total;
    }
  });
};

const tableBtnClick = (btn, row) => {
  btn.eventName(row);
};
//选中的行的信息
const handleSelectionChange = function (val) {
  selectData.value = val;
};
let getButton = () => {
  if (bottomData.has(200022)) {
    leftButtons.value.push({
      custom: "dropdown",
      title: bottomData.get(200022).label,
      customData: [
        {
          name: "批量" + bottomData.get(200022).label,
          eventName: function () {
            batchExport("part");
          },
        },
        {
          name: "全部" + bottomData.get(200022).label,
          eventName: function () {
            batchExport("all");
          },
        },
      ],
    });
  }
};
//导出
const batchExport = function (type) {
  if (type == "part") {
    if (selectData.value.length == 0) {
      yaMessage("请选择要批量导出的数据", "warning");
      return;
    } else {
      dialogProps.showDialog = true;
      formData.value.fileType = "";
      let selectedList = [];
      selectedList = selectData.value.map((item) => item.id);
      let selectIds = selectedList.toString();
      data.value.id = selectIds;
    }
  } else {
    dialogProps.showDialog = true;
    formData.value.fileType = "";
    data.value = JSON.parse(JSON.stringify(serchformData.value));
  }
};
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
//导出接口
const exportEvent = function (params) {
  exportRisk(params).then((res) => {
    downLoadFile(res, "异常风险信息", formData.value.fileType);
    yaMessage("导出成功", "success");
    clearSelect();
  });
};
// 清空选择的值
const clearSelect = () => {
  multipleTableRef.value.$refs["ya-table"].$refs["ya-table"].$refs[
    "ya-table"
  ].clearSelection();
};
const handleConfirm = function () {
  dialogForm.value.submitForm(dialogForm.value.ruleFormRef);
};
// 重置
const reset = () => {
  initData("init");
};
//弹框 start
const rules = ref({
  fileType: [
    {
      required: true,
      message: "请选择文件格式",
      trigger: "blur",
    },
  ],
});
const formData = ref({});
let dialogForm = ref();
const formColumns = reactive([
  {
    key: "fileType",
    type: "select",
    label: "选择格式",
    col: 24,
    options: fileTypeArr,
  },
]);
//弹框
let dialogProps = reactive({
  showDialog: false,
  title: "",
  size: "",
});
let handleDialogOpen = () => {
  nextTick(() => {
    dialogForm.value.resetForm();
  });
};

//弹框的取消
const handleCancel = function () {
  dialogProps.showDialog = false;
};

//弹框的确认事件
const handleDialogEvent = function (params) {
  if (params.eventName == "errorSubmit") return;
  data.value.fileType = formData.value.fileType;
  exportEvent(data.value);
  dialogProps.showDialog = false;
};
//弹框end

//抽屉
const drawerProps = ref({
  showDrawer: false,
  size: "small",
  title: "",
});
//当前点击的行id
const assetRiskId = ref("");
//控制显示哪个表格
const activeNum = ref(0);

//打开抽屉
const toBeDelivered = function (val, num) {
  activeNum.value = num;
  drawerProps.value.showDrawer = true;
  assetRiskId.value = val.id;
};
//删除事件
const toDelect = function (val) {
  yaConfirmMessage(`删除该数据后无法恢复, 是否继续删除？`, `删除`).then(() => {
    riskDelect(val.id).then((res) => {
      const { code, message } = res;
      if (code == 200) {
        initData();
        yaMessage(message, "success");
      }
    });
  });
};

// 分页 start
const total = ref(0);
const sizeChange = function (val: number) {
  serchformData.value.pageSize = val;
  initData("page");
};

const currentChange = function (val: number) {
  serchformData.value.pageIndex = val;
  initData("page");
};
//分页end
const goToDetail = function (val) {
  localStorage.setItem("YA_VUL_DATA", JSON.stringify(val));
  router.push({
    path: "./hostVulnerability/fdetail",
  });
};
//tab的切换事件
const handleTabChange = (tab: number) => {
  serchformData.value.handleStatus = tab;
  sessionStorage.setItem("YA_FORM_DATA", JSON.stringify(serchformData.value));
  initData("init");
};
</script>
<style lang="scss" scoped>
::v-deep .ya-tabs-box {
  margin-bottom: 0px !important;
}
.global-statistics-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  min-width: 790px;
}
.global-statistics-container-content {
  width: 100%;
  height: calc(100vh - 80px);
}

.base-card {
  width: 100%;
  height: 80px;
  border-radius: 4px;
}

.base-table-card {
  width: 100%;
  background: #ffffff;
  border-radius: 4px;
  padding: 24px 24px 0 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

  .page-container {
    margin-top: 24px;
    margin-bottom: 16px;
    margin-left: auto;
  }
}

:deep(.global-statistics-container-table) {
  .el-table__body-wrapper {
    height: 100%;
  }

  .el-table__inner-wrapper::before {
    height: 0;
  }
}
img {
  width: 17px;
  height: 18px;
  vertical-align: middle;
}
.ya-img {
  cursor: pointer;
}
.ya-img:not(:last-child) {
  margin-right: 19px;
}
.ya-stateColor1 {
  color: #0095ff;
}
.ya-stateColor2 {
  color: #ec3f3f;
}
.ya-stateColor3 {
  color: #2fcb96;
}
.ya-stateColor4 {
  color: #f18301;
}
.ya-stateColor5 {
  color: #9b9ea1;
}

.ya-tabs {
  background-color: #fff;
  // padding-left: 18px;
}
</style>
