<!--
 * @Author: 曹文丽 caowenli@yuan-info.com
 * @Date: 2022-11-01 19:28:04
 * @LastEditors: 曹文丽 caowenli@yuan-info.com
 * @LastEditTime: 2023-02-22 10:13:18
 * @FilePath: \yuan-huoling-browser\src\views\digitalAssets\assetRisk\vulnerabilityAddition.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <YaPageContent
      :formData="serchformData"
      :formColumns="serchColumns"
      :tableData="tableData"
      :rightButtons="rightButtons"
      :leftButtons="leftButtons"
      :tableColumns="column"
      @selectionChange="handleSelectionChange"
      searchLabelWidth="90px"
      @search="initData('init')"
      @reset="reset"
      @tableBtnClick="tableBtnClick"
      :currentPage="pageIndex"
      :pageSize="pageSize"
      :total="total"
      @sizeChange="sizeChange"
      @currentChange="currentChange"
    >
      <template v-slot:level="{ item }">
        <div v-if="item.level == 3">
          <img src="../../../assets/imgs/diwei.png" alt="" />
          <span>{{ item.levelStr }}</span>
        </div>
        <div v-else-if="item.level == 2">
          <img src="../../../assets/imgs/middle.png" alt="" />
          <span>{{ item.levelStr }}</span>
        </div>
        <div v-else-if="item.level == 1">
          <img src="../../../assets/imgs/gaowei.png" alt="" />
          <span>{{ item.levelStr }}</span>
        </div>
        <div>-</div>
      </template>
      <template v-slot:state="{ item }">
        <div v-if="item.importStatus == 2">
          <div class="ya-importPoint ya-progress"></div>
          <span>{{ item.importStatusStr }}</span>
        </div>
        <div v-else-if="item.importStatus == 3">
          <div class="ya-importPoint ya-success"></div>
          <span>{{ item.importStatusStr }}</span>
        </div>
        <div v-else-if="item.importStatus == 4">
          <div class="ya-importPoint ya-faild"></div>
          <span>{{ item.importStatusStr }}</span>
        </div>
        <div v-else-if="item.importStatus == 1">
          <div class="ya-importPoint ya-wait"></div>
          <span>{{ item.importStatusStr }}</span>
        </div>
        <div v-else>-</div>
      </template>
      <template v-slot:done="{ item }">
        <span @click="singleAdd(item)">
          <TableBtns title="加入漏洞库" type="9"></TableBtns>
        </span>
        <span @click="handleBtn(item)">
          <TableBtns title="编辑" type="14"></TableBtns>
        </span>
      </template>
    </YaPageContent>
    <!-- 添加/编辑漏洞抽屉 -->
    <vulnerAddDrawer
      :pageIndex="pageIndex"
      :initData="initData"
      ref="childRef"
    ></vulnerAddDrawer>
  </div>
</template>
<script setup lang="ts">
import vulnerAddDrawer from "./components/vulnerAddDrawer.vue";
import { ref, reactive, onMounted, nextTick } from "vue";
import { usePermissions } from "../../../composables/usePermissions";

import {
  queryVul,
  addInVul,
} from "../../../api/digitalAssets/assetRisk/vulnerabilityAddition";
import { getDictList } from "../../../utils/utils";
import { yaMessage } from "../../../utils/message";
const childRef = ref(null);
const { permissionsButtons } = usePermissions();
const flawTypeArr = ref([]);
const riskLevelArr = ref([]);
const initDict = async () => {
  flawTypeArr.value = (await getDictList("flawType")) as [];
  riskLevelArr.value = (await getDictList("flawLevel")) as [];
};
const serchColumns = reactive([
  {
    key: "type",
    type: "select",
    label: "漏洞类型",
    options: flawTypeArr,
  },
  {
    key: "level",
    type: "select",
    label: "漏洞等级",
    options: riskLevelArr,
  },
]);
const serchformData = ref({});
let tableData = ref([]);
let rightButtons: any = ref([]);
let leftButtons: any = ref([]);
let butomData: any = ref([]);

//点击多选框选中的行的数据
let selectData = ref([]);
const column: any[] = [
  {
    type: "selection",
    width: "65px",
  },
  {
    prop: "name",
    label: "漏洞名称",
    minWidth: "130px",
  },
  {
    prop: "networkArea",
    label: "漏洞域",
    minWidth: "120px",
  },
  {
    prop: "sourceStr",
    label: "漏洞来源",
    minWidth: "130px",
  },
  {
    prop: "level",
    label: "漏洞等级",
    width: "130px",
    slotName: "level",
  },
  {
    prop: "typeStr",
    label: "漏洞类型",
    minWidth: "120px",
  },
  {
    prop: "importStatus",
    label: "导入状态",
    width: "130px",
    slotName: "state",
  },
  {
    label: "操作",
    slotName: "done",
    width: "130px",
    fixed: "right",
  },
];

onMounted(() => {
  permissionsButtons.map((item) => {
    butomData.value.push(item.label);
  });
  initData();
  getButton();
  initDict();
});
const initData = (type?) => {
  if (type === "init") {
    pageIndex.value = 1;
  }
  let _data = JSON.parse(JSON.stringify(serchformData.value)) || {};
  _data.pageSize = pageSize.value;
  _data.pageIndex = pageIndex.value;
  queryVul(_data).then((res) => {
    const { code, data = {} } = res || {};
    if (code === 200) {
      data.records.forEach((item) => {
        item.level = item.level ? String(item.level) : item.level;
        item.type = item.type ? String(item.type) : item.type;
        item.source = item.source ? String(item.source) : item.source;
      });
      tableData.value = data.records;
      total.value = data.total;
    }
  });
};
const handleBtn = function (data?) {
  nextTick(() => {
    childRef.value.handleToggleDrawer(data);
  });
};
// 重置
const reset = () => {
  initData("init");
};
//按钮
let getButton = () => {
  if (butomData.value.indexOf("添加漏洞") > -1) {
    rightButtons.value.push({
      text: "添加漏洞",
      type: "primary",
      eventName: function () {
        handleBtn();
      },
    });
  }
  if (butomData.value.indexOf("加入") > -1) {
    leftButtons.value.push({
      custom: "dropdown",
      title: "加入漏洞库",
      customData: [
        {
          name: "批量加入",
          eventName: function () {
            batchImport(true);
          },
        },
        {
          name: "全部加入",
          eventName: function () {
            batchImport(false);
          },
        },
      ],
    });
  }
};

//批量加入或全部加入事件
const batchImport = function (type) {
  if (type) {
    if (selectData.value.length == 0) {
      yaMessage("请选择需要加入的漏洞", "warning");
    } else {
      let selectedList = [];
      selectData.value.forEach((item) => {
        selectedList.push(item.id);
      });
      addVul(selectedList);
    }
  } else {
    addVul();
  }
};
//单个加入漏洞库
const singleAdd = function (val) {
  addVul([val.id]);
};
//加入漏洞库事件
const addVul = function (params?) {
  if (params) {
    addInVul(params).then((res) => {
      if (res.code == 200) {
        initData();
        yaMessage(res.message, "success");
      }
    });
  } else {
    addInVul().then((res) => {
      if (res.code == 200) {
        initData();
        yaMessage(res.message, "success");
      }
    });
  }
};

//选中的行的信息
const handleSelectionChange = function (val) {
  selectData.value = val;
};

//分页start
// 分页
const pageIndex = ref(1);
const total = ref(0);
const pageSize = ref(20);
const sizeChange = function (val: number) {
  pageSize.value = val;
  pageIndex.value = 1;
  initData();
};

const currentChange = function (val: number) {
  pageIndex.value = val;
  initData();
};
//分页end
const tableBtnClick = (btn, row) => {
  btn.eventName(row);
};
</script>
<style lang="scss" scoped>
img {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  margin-right: 8px;
}

.yaTop {
  width: 334px;
  height: 120px;
  background: rgba(73, 223, 152, 0.05);
  border-radius: 2px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #595959;
  line-height: 20px;
  // letter-spacing: 3px;
  padding: 19px 18px;
  box-sizing: border-box;
  .yaTop-item:not(:first-child) {
    margin-top: 12px;
    margin-left: 30px;
  }
  img {
    width: 17px;
    height: 18px;
    vertical-align: middle;
    margin-right: 14px;
  }
  .ya-download {
    color: #31a1f0;
  }
}
.yaContent {
  height: 158px;
  background: rgba(250, 250, 250, 0.5);
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.09);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 18px;
  img {
    width: 77px;
    height: 58px;
    margin-top: 26px;
  }
  .ya-text {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #a3aeba;
    line-height: 20px;
    margin-top: 23px;
  }
}
.ya-importPoint {
  width: 8px;
  height: 8px;
  display: inline-block;
  vertical-align: middle;
  border-radius: 50%;
  margin-right: 4px;
}
.ya-progress {
  background-color: #2fcb96;
}
.ya-success {
  background-color: #0095ff;
}
.ya-wait {
  background-color: #000000;
  opacity: 20%;
}
.ya-faild {
  background-color: #ec3f3f;
}
.ya-hand {
  cursor: pointer;
}
</style>
