<!--
 * @Description: 
 * @Autor: chengq
 * @Date: 2022-08-01 09:25:01
 * @LastEditors: 曹文丽
 * @LastEditTime: 2023-08-31 20:52:59
 * @Author: 程迁
-->
<script lang="ts" setup>
import { ref, reactive } from "vue";
import type { TabsPaneContext } from "element-plus";
import sechdata from "../../components/sechdata/index.vue";
import searchForm from "../../components/sechdata/searchForm.vue";
const style = "width:14%";
const tablist = ref([
  {
    img: "./resource/images/allimg.png",
    name: "全部",
    num: 30,
    color: "#0095FF",
  },

  {
    img: "./resource/images/icon_user.png",
    name: "待审核",
    num: 9,
    color: "#677DFF",
  },

  {
    img: "./resource/images/Ended.png",
    name: "已结束",
    num: 21,
    color: "#9E7AFE",
  },
]);
const formColumn = {
  img: "./resource/images/emergencyc.png",
  num: 30,
  title: "接收事件总数",
  bgimg: "./resource/images/emergencyc-bg.png",
  color: "#259F2F",
};

const linedata = {
  title: "近7日信息上报任务趋势",
  series: [
    {
      name: "近7日信息上报任务趋势",
      type: "line",
      symbolSize: 9,
      data: [38, 28, 18, 38, 38, 58, 48],
    },
  ],
  xdata: ["07-28", "07-29", "07-30", "07-31", "08-01", "08-02", "08-03"],
};
const pieData = {
  title: "任务状态分布",
  series: [
    {
      name: "待审核",
      per: "70%",
      value: 70,
      textStyle: { color: "#677DFF" },
    },
    {
      name: "已结束",
      per: "30%",
      value: 30,
      textStyle: { color: "#9E7AFE" },
    },
  ],
};
const serchColumns = reactive([
  {
    key: "ip",
    type: "input",
    label: "任务名称",
    placeholder: "请输入任务名称",
    col: 8,
  },
  {
    key: "opetateUser",
    type: "input",
    label: "企业名称",
    placeholder: "请输入企业名称",

    col: 8,
  },
  {
    key: "ip",
    type: "input",
    label: "支撑单位",
    placeholder: "请输入支撑单位",
    col: 8,
  },
  {
    key: "logType",
    type: "select",
    label: "任务状态",
    options: [
      {
        value: 1,
        label: "已创建",
      },
      {
        value: 2,
        label: "待演练",
      },
      {
        value: 3,
        label: "待研判定性",
      },
      {
        value: 4,
        label: "待处置",
      },
      {
        value: 5,
        label: "待上报",
      },
      {
        value: 6,
        label: "已结束",
      },
    ],
    col: 8,
  },
]);
const serchformData = reactive({
  ip: "",
  opetateUser: "",
  logType: "",
  time: [],
});
const page = ref(1);
const total = ref(5);
const pageSize = ref(20);
const tableData = ref([
  {
    ip: "漏洞上报",
    opetateUser: "发现0-day漏洞",
    logType: "青岛市通信管理局",
    remark: "中国移动",
    value: "受管单位",
    time: "2022-08-02 14:55:06",
    status: "待演练",
  },
  {
    ip: "漏洞上报",
    opetateUser: "发现系统病毒",
    logType: "青岛市通信管理局",
    remark: "中国移动",
    value: "受管单位",
    time: "2022-08-01 19:31:46",
    status: "待上报",
  },
  {
    ip: "漏洞上报",
    opetateUser: "发现0-day漏洞",
    logType: "青岛市通信管理局",
    remark: "青岛电信",
    value: "受管单位",
    time: "2022-08-01 16:31:46",
    status: "待上报",
  },
  {
    ip: "病毒上报",
    opetateUser: "发现木马病毒",
    logType: "青岛市通信管理局",
    remark: "青岛电信",
    value: "受管单位",
    time: "2022-08-01 16:28:46",
    status: "待上报",
  },
  {
    ip: "病毒上报",
    opetateUser: "发现SQL注入漏洞",
    logType: "青岛市通信管理局",
    remark: "青岛电信",
    value: "受管单位",
    time: "2022-08-01 10:31:46",
    status: "已结束",
  },
]);
const column: any[] = [
  {
    prop: "ip",
    label: "任务名称",
  },
  {
    prop: "opetateUser",
    label: "上报信息描述",
    // headerSlotName: 'Link'
  },
  {
    prop: "remark",
    label: "企业名称",
  },
  {
    prop: "value",
    label: "单位属性",
  },
  {
    prop: "time",
    label: "上报时间",
  },
  {
    prop: "status",
    label: "状态",
    width: "110px",
  },

  {
    label: "操作",
    width: "285px",
    align: "center",
    buttons: [
      {
        title: "详情",
        hide: false,
        eventName: function (row) {
          // edit(row);
        },
      },
      {
        title: "通过",
        hide: false,
        eventName: function (row) {
          // edit(row);
        },
      },
      {
        title: "驳回",
        hide: false,
        eventName: function (row) {
          // edit(row);
        },
      },
      {
        title: "附件下载",
        hide: false,
        eventName: function (row) {
          // deletedata(row);
        },
      },
    ],
  },
];
const rightButtons = ref([
  {
    text: "新增上报信息任务",
    type: "primary",
    // eventName: function () {
    //   addData();
    // }
  },
]);

const reset = () => {
  Object.assign(serchformData, initFromData());
  search();
};
let initFromData = () => {
  page.value = 1;
  return {
    ip: "",
    logType: "",
    opetateUser: "",
    time: [],
  };
};
const tableBtnClick = (btn, row) => {
  btn.eventName(row);
};
const sizeChange = function (val: Number) {
  pageSize.value = val;
  page.value = 1;
  search();
};
const currentChange = function (val: Number) {
  page.value = val;
  search();
};
const search = () => { };
</script>

<template>
  <div>
    <div style="background: #f4f4f4">
      <sechdata :formColumn="formColumn" :linedata="linedata" :pieData="pieData"></sechdata>
      <searchForm :tablist="tablist" :style="style"></searchForm>
    </div>
    <YaPageContent :formData="serchformData" :formColumns="serchColumns" :tableData="tableData" :tableColumns="column"
      searchLabelWidth="100px" :rightButtons="rightButtons" @search="search" @reset="reset" @tableBtnClick="tableBtnClick"
      :currentPage="page" :pageSize="pageSize" :total="total" @sizeChange="sizeChange" @currentChange="currentChange">
      <!-- icon_address -->
      <template #logType="{ item }">
        <img src="/resource/images/icon_address.png" style="margin-top: 10px; width: 16px; height: 16px" />
        <span style="margin-left: 6px">{{ item.logType }}</span>
      </template>
      <template #status="{ item }">
        <div style="
            width: 73px;
            height: 24px;
            background: rgba(0, 0, 0, 0.05);
            border-radius: 12px;
            line-height: 24px;
            margin-top: 10px;
          ">
          <span style="
              width: 8px;
              height: 8px;
              background: #f7c424;
              display: inline-block;
              margin-left: 6px;
            " v-if="item.status == '待演练'"></span>
          <span style="
              width: 8px;
              height: 8px;
              background: #f481ff;
              display: inline-block;
              margin-left: 6px;
            " v-if="item.status == '待上报'"></span>
          <span style="
              width: 8px;
              height: 8px;
              background: #9e7afe;
              display: inline-block;
              margin-left: 6px;
            " v-if="item.status == '已结束'"></span>
          <span style="margin-left: 6px">{{ item.status }}</span>
        </div>
      </template>
    </YaPageContent>
  </div>
</template>
<style scoped lang="scss"></style>
