<script lang="ts" setup>
import { ref, reactive } from "vue";
import type { TabsPaneContext } from "element-plus";
import searchForm from "../../../components/sechdata/searchForm.vue";
const style = "width:14%";
const tablist = ref([
  {
    img: "./resource/images/allimg.png",
    name: "全部",
    num: 5,
    color: "#0095FF",
  },
  {
    img: "./resource/images/Created.png",
    name: "已创建",
    num: 0,
    color: "#E65857",
  },
  {
    img: "./resource/images/judge.png",
    name: "待研判",
    num: 1,
    color: "#FE7F09",
  },

  {
    img: "./resource/images/disposal.png",
    name: "待处置",
    num: 0,
    color: "#4E9B40",
  },
  {
    img: "./resource/images/icon_user.png",
    name: "待审核",
    num: 1,
    color: "#677DFF",
  },
  {
    img: "./resource/images/Ended.png",
    name: "已结束",
    num: 3,
    color: "#9E7AFE",
  },
]);
const formColumn = {
  img: "./resource/images/emergencyn.png",
  num: 5,
  title: "通报任务总数（个）",
  bgimg: "./resource/images/emergencyn-bg.png",
  color: "#0095FF",
};

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: "10%",
      value: 10,
      textStyle: { color: "#F84A51" },
    },

    {
      name: "待研判",
      per: "10%",
      value: 10,
      textStyle: { color: "#FF7700" },
    },
    {
      name: "待处置",
      per: "10%",
      value: 10,
      textStyle: { color: "#249F2F" },
    },

    {
      name: "待审核",
      per: "10%",
      value: 10,
      textStyle: { color: "#6678FF" },
    },
    {
      name: "已结束",
      per: "60%",
      value: 60,
      textStyle: { color: "#A772FF" },
    },
  ],
};
const serchColumns = reactive([
  {
    key: "ip",
    type: "input",
    label: "任务名称",
    col: 8,
  },
  {
    key: "opetateUser",
    type: "input",
    label: "企业名称",
    col: 8,
  },
  {
    key: "ip",
    type: "input",
    label: "支撑单位",
    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,
  },
  {
    key: "ip",
    type: "input",
    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: "黑客攻击服务器",
    level: "高",
    color: "transparent transparent #D90808 transparent",
    logType: "青岛市通信管理局",
    remark: "中国移动",
    operateType: "浙江御安",
    name: "演练预案一",
    status: "待演练",
  },
  {
    ip: "病毒感染应急演练",
    opetateUser: "黑客攻击服务器",
    logType: "青岛市通信管理局",
    remark: "中国移动",
    level: "中",
    color: "transparent transparent #F18301 transparent",
    operateType: "浙江御安",
    name: "演练预案二",
    status: "待上报",
  },
  {
    ip: "病毒感染应急演练",
    opetateUser: "病毒感染服务器",
    logType: "青岛市通信管理局",
    level: "低",
    color: "transparent transparent #0095FF transparent ",
    remark: "青岛电信",
    operateType: "浙江御安",
    name: "演练预案三",
    status: "待上报",
  },
  {
    ip: "网络攻击应急演练",
    opetateUser: "病毒感染服务器",
    logType: "青岛市通信管理局",
    remark: "青岛电信",
    operateType: "浙江御安",
    name: "演练预案四",
    status: "待上报",
  },
  {
    ip: "病毒感染应急演练",
    opetateUser: "病毒感染服务器",
    logType: "青岛市通信管理局",
    remark: "青岛电信",
    operateType: "浙江御安",
    name: "演练预案五",
    status: "已结束",
  },
]);
const column: any[] = [
  {
    prop: "ip",
    label: "任务名称",
    width: "200px",
    fixed: "left",
  },
  {
    prop: "opetateUser",
    label: "通报描述",
    width: "200px",
    // headerSlotName: 'Link'
  },

  {
    prop: "levelStr",
    label: "通报等级",
    width: "110px",
  },

  {
    prop: "logType",
    label: "企业名称",
    width: "200px",
  },
  {
    prop: "remark",
    label: "创建人",
    width: "200px",
  },
  {
    prop: "operateType",
    label: "创建时间",
    width: "200px",
  },
  {
    prop: "name",
    label: "下发时间",
    width: "200px",
  },
  {
    prop: "name",
    label: "是否研判",
    width: "200px",
  },
  {
    prop: "name",
    label: "支撑单位",
    width: "200px",
  },
  {
    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) {
          // deletedata(row);
        },
      },
      {
        title: "编辑",
        hide: false,
        eventName: function (row) {
          // deletedata(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">
      <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 #level="{ item }">
        <span v-if="item.level" style="
            position: absolute;
            top: 12px;
            width: 0;
            height: 0;
            border-width: 6px;
            border-style: solid;
          " :style="{ borderColor: item.color }"></span>
        <span style="margin-left: 20px">{{ item.level }}</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>
