<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/Received.png",
    name: "已收到",
    num: 5,
    color: "#0095FF",
  },
]);
const formColumn = {
  img: "./resource/images/emergencyn.png",
  num: 5,
  title: "通报任务总数（个）",
  bgimg: "./resource/images/emergencyn-bg.png",
  color: "#0095FF",
};

const serchColumns = reactive([
  {
    key: "ip",
    type: "input",
    label: "预警名称",
    col: 8,
  },
  {
    key: "opetateUser",
    type: "select",
    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: "黑客攻击服务器",
    logType: "青岛市通信管理局",
    remark: "中国移动",
    level: "高",
    img: "./resource/images/h-icon.png",
    operateType: "浙江御安",
    name: "演练预案一",
    status: "待演练",
  },
  {
    ip: "病毒感染应急演练",
    opetateUser: "黑客攻击服务器",
    logType: "青岛市通信管理局",
    remark: "中国移动",
    level: "中",
    img: "./resource/images/m-icon.png",
    operateType: "浙江御安",
    name: "演练预案二",
    status: "待上报",
  },
  {
    ip: "病毒感染应急演练",
    opetateUser: "病毒感染服务器",
    logType: "青岛市通信管理局",
    remark: "青岛电信",
    level: "低",
    img: "./resource/images/d-icon.png",
    operateType: "浙江御安",
    name: "演练预案三",
    status: "待上报",
  },
  {
    ip: "网络攻击应急演练",
    opetateUser: "病毒感染服务器",
    logType: "青岛市通信管理局",
    remark: "青岛电信",
    operateType: "浙江御安",
    name: "演练预案四",
    status: "待上报",
  },
  {
    ip: "病毒感染应急演练",
    opetateUser: "病毒感染服务器",
    logType: "青岛市通信管理局",
    remark: "青岛电信",
    operateType: "浙江御安",
    name: "演练预案五",
    status: "已结束",
  },
]);
const column: any[] = [
  {
    prop: "ip",
    label: "预警名称",
  },
  {
    prop: "opetateUser",
    label: "预警描述",
    // headerSlotName: 'Link'
  },

  {
    prop: "levelStr",
    label: "预警等级",
    width: "110px",
  },

  {
    prop: "logType",
    label: "创建人",
  },

  {
    prop: "operateType",
    label: "创建时间",
  },
  {
    prop: "name",
    label: "下发时间",
  },
  {
    label: "操作",
    width: "100px",
    align: "center",
    buttons: [
      {
        title: "详情",
        hide: false,
        eventName: function (row) {
          // edit(row);
        },
      },
    ],
  },
];
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" @search="search" @reset="reset" @tableBtnClick="tableBtnClick" :currentPage="page"
      :pageSize="pageSize" :total="total" @sizeChange="sizeChange" @currentChange="currentChange">
      <!-- icon_address -->

      <template #level="{ item }">
        <img :src="item.img" style="position: absolute; top: 10px; width: 16px; height: 16px" />
        <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>
