<template>
  <div>
    <header>
      <div class="top-left">
        <div class="ip">
          {{ tab == 1 ? '源IP' : '目的IP' }}:{{
            tab == 1 ? originalInfo.srcIp : originalInfo.destIp
          }}
        </div>
        <div>
          <img class="img1" src="../../assets/image/bottom/line.png" alt="" />
        </div>
        <div>
          <img class="img2" src="../../assets/image/location.png" alt="" />
          <span class="address">{{
            tab == 1
              ? originalInfo.srcLocation || '-'
              : originalInfo.destLocation || '-'
          }}</span>
        </div>
      </div>
      <div class="top-right">
        <div
          class="top-right-item"
          :class="item.active ? 'top-right-item-active' : ''"
          v-for="item in dateList"
          @click="choseDate(item)"
        >
          {{ item.name }}
        </div>
      </div>
    </header>
    <!-- 事件总览 -->
    <div class="center">
      <div class="top">
        <div class="top-img">
          <img src="../../assets/image/icon_1.png" alt="" />
        </div>
        <div class="title">事件总览</div>
        <div>
          攻击事件共{{ numberObj.eventTotalCount || 0 }}次，攻击成功<span
            class="title-success"
            >{{ numberObj.eventTotalSuccess || 0 }}</span
          >次
        </div>
      </div>
      <div class="center-content">
        <div
          class="center-content-header"
          :class="!isShowList ? 'border-bottom-0' : ''"
        >
          <div class="center-content-top">
            <div class="center-content-top-label"></div>
            <div>
              IP作为 <span class="btn-attark">攻击者</span>，发起攻击<span
                class="title-success"
                >{{ numberObj.attackCount || 0 }}</span
              >次，成功<span class="title-success">{{
                numberObj.attackSuccessCount || 0
              }}</span
              >次，共<span class="title-success">{{
                numberObj.victimTotalCount || 0
              }}</span
              >个<span class="btn-green">受害者</span>
            </div>
          </div>
          <div class="center-content-top-down">
            <svg
              t="1684144305706"
              class="icon downicon"
              :class="isShowList ? 'spread-icon-spread' : ''"
              @click="isShowList = !isShowList"
              viewBox="0 0 1031 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="1235"
              width="11"
              height="11"
            >
              <path
                d="M514.312135 494.709466l-428.163563-476.138516C68.609342-1.547579 38.689479-4.126878 18.57095 12.896493s-22.697827 47.459094-5.674457 67.577622c0.51586 1.031719 1.547579 1.547579 2.063439 2.063439l456.019987 506.574239c8.253755 16.507511 25.277126 26.824705 43.848076 26.308846 18.57095 0.51586 35.59432-9.801335 43.848075-26.308846L1014.180198 82.537554c16.507511-20.634389 13.412353-50.554252-7.222036-67.577622-19.086809-15.475791-46.943234-13.928212-63.966605 3.095158L514.312135 494.709466z"
                p-id="1236"
                fill="#ffffff"
              ></path>
              <path
                d="M514.312135 902.754499l-428.163563-475.622656c-17.023371-20.118529-47.459094-22.697827-67.577622-5.674457C-1.547579 438.480757-4.126878 468.91648 12.896493 489.035009c0.51586 1.031719 1.547579 1.547579 2.063439 2.063439l456.019987 506.574239c8.253755 16.507511 25.277126 26.824705 43.848076 26.308845 18.57095 0.51586 35.59432-9.801335 43.848075-26.308845l456.019987-506.05838c18.57095-18.57095 18.57095-49.006673 0-67.577622s-49.006673-18.57095-67.577622 0c-1.031719 1.031719-2.063439 2.579299-3.095158 3.611018L514.312135 902.754499z"
                p-id="1237"
                fill="#ffffff"
              ></path>
            </svg>
          </div>
        </div>
        <div
          class="center-content-list"
          :class="attackList.length == 0 ? 'min-height' : ''"
          v-if="isShowList"
        >
          <div class="center-content-list-item" v-for="item in attackList">
            <div class="list-item-label"></div>
            <div>
              对<img
                class="img3"
                src="../../assets/image/location.png"
                alt=""
              /><span class="list-item-adress">{{ item.location || '-' }}</span
              ><span class="btn-info">IP:{{ item.ip || '-' }}</span
              >的<span class="btn-info">{{ item.port || '-' }}</span
              >端口发起了<span class="btn-red">{{ item.eventName || '-' }}</span
              >攻击；
            </div>
          </div>
          <YaPagination
            v-if="total1> 10"
            :current-page="pageIndex1"
            :page-size="10"
            :total="total1"
            @current-change="handleCurrentChange1"
            layout="prev,pager,next"
          ></YaPagination>
        </div>
      </div>
      <div class="center-content">
        <div
          class="center-content-header"
          :class="!isShowList1 ? 'border-bottom-0' : ''"
        >
          <div class="center-content-top">
            <div class="center-content-top-label"></div>
            <div>
              IP作为 <span class="btn-green">受害者</span>，遭受攻击<span
                class="title-success"
                >{{ numberObj.victimCount || 0 }}</span
              >次，成功<span class="title-success">{{
                numberObj.victimSuccessCount || 0
              }}</span
              >次，共<span class="title-success">{{
                numberObj.attackerCount || 0
              }}</span
              >个<span class="btn-attark">攻击者</span>
            </div>
          </div>
          <div class="center-content-top-down">
            <svg
              t="1684144305706"
              class="icon downicon"
              :class="isShowList1 ? 'spread-icon-spread' : ''"
              @click="isShowList1 = !isShowList1"
              viewBox="0 0 1031 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="1235"
              width="11"
              height="11"
            >
              <path
                d="M514.312135 494.709466l-428.163563-476.138516C68.609342-1.547579 38.689479-4.126878 18.57095 12.896493s-22.697827 47.459094-5.674457 67.577622c0.51586 1.031719 1.547579 1.547579 2.063439 2.063439l456.019987 506.574239c8.253755 16.507511 25.277126 26.824705 43.848076 26.308846 18.57095 0.51586 35.59432-9.801335 43.848075-26.308846L1014.180198 82.537554c16.507511-20.634389 13.412353-50.554252-7.222036-67.577622-19.086809-15.475791-46.943234-13.928212-63.966605 3.095158L514.312135 494.709466z"
                p-id="1236"
                fill="#ffffff"
              ></path>
              <path
                d="M514.312135 902.754499l-428.163563-475.622656c-17.023371-20.118529-47.459094-22.697827-67.577622-5.674457C-1.547579 438.480757-4.126878 468.91648 12.896493 489.035009c0.51586 1.031719 1.547579 1.547579 2.063439 2.063439l456.019987 506.574239c8.253755 16.507511 25.277126 26.824705 43.848076 26.308845 18.57095 0.51586 35.59432-9.801335 43.848075-26.308845l456.019987-506.05838c18.57095-18.57095 18.57095-49.006673 0-67.577622s-49.006673-18.57095-67.577622 0c-1.031719 1.031719-2.063439 2.579299-3.095158 3.611018L514.312135 902.754499z"
                p-id="1237"
                fill="#ffffff"
              ></path>
            </svg>
          </div>
        </div>
        <div
          class="center-content-list"
          :class="victimList.length == 0 ? 'min-height' : ''"
          v-if="isShowList1"
        >
          <div class="center-content-list-item" v-for="item in victimList">
            <div class="list-item-label"></div>
            <div>
              遭受来自<img
                class="img3"
                src="../../assets/image/location.png"
                alt=""
              /><span class="list-item-adress">{{ item.location || '-' }}</span
              ><span class="btn-info">IP:{{ item.ip || '-' }}</span
              >发起针对<span class="btn-info">{{ item.port || '-' }}</span
              >端口的<span class="btn-red">{{ item.eventName || '-' }}</span
              >攻击；
            </div>
          </div>
          <YaPagination
            v-if="total2 > 10"
            :current-page="pageIndex2"
            :page-size="10"
            :total="total2"
            @current-change="handleCurrentChange2"
            layout="prev,pager,next"
          ></YaPagination>
        </div>
      </div>
    </div>
    <!-- 时间线 -->
    <div class="center bottom">
      <div class="top">
        <div class="top-left">
          <div class="top-img">
            <img src="../../assets/image/icon_2.png" alt="" />
          </div>
          <div class="title">时间线</div>
        </div>
        <div class="top-search">
          <div class="top-search-left">
            <div class="titleOne">攻击结果</div>
            <el-select placeholder="请选择" v-model="attackResult" @change="choseSeach" clearable>
              <el-option
                v-for="item in options"
                :label="item.label"
                :value="item.value"
                :key="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="top-search-right">
            <div class="titleOne">威胁等级</div>
            <el-select placeholder="请选择" v-model="threatLevel" @change="choseSeach1" clearable>
              <el-option
                v-for="item in option"
                :label="item.label"
                :value="item.value"
                :key="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="center-content-top-down">
            <svg
              t="1684144305706"
              class="icon downicon"
              :class="isShowList2 ? 'spread-icon-spread' : ''"
              @click="isShowList2 = !isShowList2"
              viewBox="0 0 1031 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="1235"
              width="11"
              height="11"
            >
              <path
                d="M514.312135 494.709466l-428.163563-476.138516C68.609342-1.547579 38.689479-4.126878 18.57095 12.896493s-22.697827 47.459094-5.674457 67.577622c0.51586 1.031719 1.547579 1.547579 2.063439 2.063439l456.019987 506.574239c8.253755 16.507511 25.277126 26.824705 43.848076 26.308846 18.57095 0.51586 35.59432-9.801335 43.848075-26.308846L1014.180198 82.537554c16.507511-20.634389 13.412353-50.554252-7.222036-67.577622-19.086809-15.475791-46.943234-13.928212-63.966605 3.095158L514.312135 494.709466z"
                p-id="1236"
                fill="#ffffff"
              ></path>
              <path
                d="M514.312135 902.754499l-428.163563-475.622656c-17.023371-20.118529-47.459094-22.697827-67.577622-5.674457C-1.547579 438.480757-4.126878 468.91648 12.896493 489.035009c0.51586 1.031719 1.547579 1.547579 2.063439 2.063439l456.019987 506.574239c8.253755 16.507511 25.277126 26.824705 43.848076 26.308845 18.57095 0.51586 35.59432-9.801335 43.848075-26.308845l456.019987-506.05838c18.57095-18.57095 18.57095-49.006673 0-67.577622s-49.006673-18.57095-67.577622 0c-1.031719 1.031719-2.063439 2.579299-3.095158 3.611018L514.312135 902.754499z"
                p-id="1237"
                fill="#ffffff"
              ></path>
            </svg>
          </div>
        </div>
      </div>
      <div class="bottom-content" v-if="isShowList2">
        <div class="content">
          <div
            class="content-item"
            v-for="item in timeList"
          >
            <div class="time">{{ item.alarmTime }}</div>
            <div class="content-item-line"></div>
            <div
              class="content-item-right"
              :class="
                item.attackResult == '企图'
                  ? 'content-item-right1'
                  : item.attackResult == '失败'
                  ? 'content-item-right2'
                  : ''
              "
            >
              <div class="content-item-right-left">
                <div class="right-line">
                  <div class="btn-red margin-left-0">
                    {{ item.attackTypeDesc || '-' }}
                  </div>
                  <div
                    class="base-btn"
                    :class="
                      item.attackResult == '成功'
                        ? 'suceess-btn'
                        : item.attackResult == '企图'
                        ? 'warning-btn'
                        : 'fail-btn'
                    "
                  >
                    {{ item.attackResult || '-' }}
                  </div>
                </div>
                <div class="user-info right-line">
                  <div class="margin-botton-4">
                    {{ item.attackType == 1 ? '受害者信息' : '攻击者信息' }}
                  </div>
                  <div>
                    <div class="btn-info margin-left-0">IP:{{ item.ip }}</div>
                    <div class="btn-info margin-left-0">{{ item.port }}</div>
                  </div>
                </div>
                <div class="user-info">
                  <div class="margin-botton-4">事件信息</div>
                  <div class="flex-st">
                    <div class="btn-info margin-left-0">
                      {{ item.eventType }}
                    </div>
                    <div class="btn-red margin-left-0" :class="item.threatLevel == '低危'?'border-low':item.threatLevel == '中危'?'border-center':''">
                      <div
                        class="level-one"
                        :class="
                          item.threatLevel == '高危'
                            ? 'level-heigh'
                            : item.threatLevel == '中危'
                            ? 'level-center'
                            : 'level-low'
                        "
                      >
                        <svg
                          t="1679909150644"
                          class="icon level level-svg"
                          viewBox="0 0 1110 1024"
                          version="1.1"
                          xmlns="http://www.w3.org/2000/svg"
                          p-id="5101"
                          xmlns:xlink="http://www.w3.org/1999/xlink"
                          width="216.796875"
                          height="200"
                        >
                          <path
                            d="M377.186816 739.199128L546.728412 446.029965a11.157723 11.157723 0 0 1 19.470226 0l169.262653 293.169163a11.157723 11.157723 0 0 1-9.707219 16.736584H386.949823a11.157723 11.157723 0 0 1-9.763007-16.736584zM882.743231 432.640697l2.845219 62.204304a16.011332 16.011332 0 0 0 7.419886 12.719804l51.437101 32.301607a11.157723 11.157723 0 0 1-3.570471 20.362844l-235.762681 51.325525a5.578861 5.578861 0 0 1-5.578861-9.205122l163.906946-176.682538a11.157723 11.157723 0 0 1 19.302861 6.973576zM615.459984 1022.661073l-54.393898-29.567965a15.843966 15.843966 0 0 0-14.672406 0l-54.282321 27.336421a11.157723 11.157723 0 0 1-15.565023-13.556633l78.104059-228.398584a5.578861 5.578861 0 0 1 10.599837 0L631.415527 1009.773904a11.157723 11.157723 0 0 1-15.955543 12.887169zM407.256878 614.4l-238.496322-51.939199a10.04195 10.04195 0 0 1-3.23574-18.298665l53.836012-33.8079a15.6766 15.6766 0 0 0 7.308308-12.775593l2.84522-61.367474a11.157723 11.157723 0 0 1 19.414437-7.085154l163.572215 176.23623a5.578861 5.578861 0 0 1-5.24413 9.037755z"
                            p-id="5102"
                          ></path>
                          <path
                            d="M1043.247072 1016.412749h-334.731681a66.946336 66.946336 0 1 1 0-133.892673h210.82517l-113.808771-173.725742a66.951915 66.951915 0 0 1 112.023536-73.362027L1099.035685 912.924871a66.946336 66.946336 0 0 1-55.788613 103.487878zM401.678017 1016.412749H66.946336a66.946336 66.946336 0 0 1-55.788613-103.487878l181.703514-277.325198a66.951915 66.951915 0 0 1 112.023536 73.362027l-114.031926 173.558376H401.678017a66.946336 66.946336 0 0 1 0 133.892673zM722.016235 428.177608a66.946336 66.946336 0 0 1-59.414873-36.095233l-95.789049-184.102424-103.208935 183.600327a66.946336 66.946336 0 0 1-116.765568-65.495832L510.744756 34.19842A66.946336 66.946336 0 0 1 569.043857 0h1.115773a66.946336 66.946336 0 0 1 58.299101 36.039444l152.916589 294.173359a66.946336 66.946336 0 0 1-59.359085 97.853228z"
                            p-id="5103"
                          ></path>
                        </svg>
                        {{ item.threatLevel }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="content-item-right-btn" @click="toDetail(item)">查看详情</div>
            </div>
          </div>
          <div style="height: 20px" v-if="!isShowList3"></div>
        </div>
        <div class="content-bottom" v-if="timeLineList.length > 5">
          <div class="content-bottom-title" @click="openAll">
            <svg
              t="1684144305706"
              class="icon downicon"
              :class="isShowList3 ? '' : 'spread-icon-spread'"
              viewBox="0 0 1031 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="1235"
              width="11"
              height="11"
            >
              <path
                d="M514.312135 494.709466l-428.163563-476.138516C68.609342-1.547579 38.689479-4.126878 18.57095 12.896493s-22.697827 47.459094-5.674457 67.577622c0.51586 1.031719 1.547579 1.547579 2.063439 2.063439l456.019987 506.574239c8.253755 16.507511 25.277126 26.824705 43.848076 26.308846 18.57095 0.51586 35.59432-9.801335 43.848075-26.308846L1014.180198 82.537554c16.507511-20.634389 13.412353-50.554252-7.222036-67.577622-19.086809-15.475791-46.943234-13.928212-63.966605 3.095158L514.312135 494.709466z"
                p-id="1236"
                fill="#1C92D0"
              ></path>
              <path
                d="M514.312135 902.754499l-428.163563-475.622656c-17.023371-20.118529-47.459094-22.697827-67.577622-5.674457C-1.547579 438.480757-4.126878 468.91648 12.896493 489.035009c0.51586 1.031719 1.547579 1.547579 2.063439 2.063439l456.019987 506.574239c8.253755 16.507511 25.277126 26.824705 43.848076 26.308845 18.57095 0.51586 35.59432-9.801335 43.848075-26.308845l456.019987-506.05838c18.57095-18.57095 18.57095-49.006673 0-67.577622s-49.006673-18.57095-67.577622 0c-1.031719 1.031719-2.063439 2.579299-3.095158 3.611018L514.312135 902.754499z"
                p-id="1237"
                fill="#1C92D0"
              ></path>
            </svg>
            点击{{ isShowList3 ? '展开' : '收起' }}全部
          </div>
        </div>
      </div>
    </div>
    <ya-drawer
      v-if="drawerProps.showDrawer"
      :drawerProps="drawerProps"
      @handleEvent="handleEvent"
      destroy-on-close
      :size="'calc(100vw - 200px)'"
      :before-close="handleCloseDrawer"
      :hiddenFooter="true"
    >
      <template #content>
        <DetailTab :showBtn="false" :info="detailInfoObj" :origin="origin"></DetailTab>
      </template>
    </ya-drawer>
  </div>
</template>
<script setup lang="ts">
import {
  ref,
  onMounted,
  defineProps,
  reactive,
  unref,
  defineExpose,
} from 'vue';
import {
  getAttack,
  getStatistics,
  getTimeLine,
  getVictim,
} from '../../api/threatAlarms/threatAlarms';
import DetailTab from "../threatAlarms/detailTab.vue";
import { getDictTypeList } from '../../api/common';
import { time } from 'console';

interface Props {
  tab?: number;
  originalInfo?: Object; // 详情查询数据
  origin: String, // flow--探针  situation--感知平台
}
const { tab = 1, originalInfo = {}, origin='situation' } = defineProps<Props>();

const currenDate = ref(1);
const dateList = ref([
  {
    name: '近24小时',
    value: 1,
    active: true,
  },
  {
    name: '7日',
    value: 2,
    active: false,
  },
  {
    name: '30日',
    value: 3,
    active: false,
  },
  {
    name: '全部',
    value: 4,
    active: false,
  },
]);
/**
 * @description 切换日期
 */
const choseDate = (e) => {
  pageIndex1.value = 1;
  pageIndex2.value = 1;
  dateList.value.forEach((item) => {
    if (e.name == item.name) {
      item.active = true;
      currenDate.value = item.value;
      getList1();
      getList2();
      getList3();
      getList4();
    } else {
      item.active = false;
    }
  });
};
const isShowList = ref(true);
const isShowList1 = ref(true);
const isShowList2 = ref(true);
const isShowList3 = ref(true);
/**
 * 分页切换
 */
const handleCurrentChange1 = (val: number) => {
  pageIndex1.value = val;
  getList1()
};
const handleCurrentChange2 = (val: number) => {
  pageIndex2.value = val;
  getList2()
};

/**
 * @description 展开收起
 */
const openAll = () => {
  isShowList3.value = !isShowList3.value;
  if (isShowList3.value == false) {
    timeList.value = timeLineList.value;
  } else {
    timeList.value = timeLineFiveList.value;
  }
};
// 弹窗
const drawerProps = reactive({
  showDrawer: false,
  title: '详情',
  size: 'small',
});
// 关闭抽屉
const handleCloseDrawer = async () => {
  drawerProps.showDrawer = false;
};
// 抽屉事件
const handleEvent = function (data) {
  if (data.eventName == 'errorSubmit') {
    return;
  } else if (data.eventName == 'success') {
    return;
  } else if (data.eventName == 'successSubmit') {
    return;
  }
};

const option = ref([]);
const options = ref([]);
const threatLevel = ref('');
const attackResult = ref('');
/**
 * @description 字典列表
 */
const getDict = () => {
  getDictTypeList('threatLevel').then((res) => {
    option.value = res;
  });
  getDictTypeList('attackResultType').then((res) => {
    options.value = res;
  });
};
const pageIndex1 = ref(1);
const pageSize1 = ref(10);
const total1 = ref(0);
const attackList = ref([]);

const pageIndex2 = ref(1);
const pageSize2 = ref(10);
const total2 = ref(0);
const victimList = ref([]);

const numberObj = ref({
  attackCount: 0, // 发起攻击次数
  attackSuccessCount: 0, //发起攻击成功次数
  attackerCount: 0, // 攻击者数量
  eventTotalCount: 0, // 事件总次数
  eventTotalSuccess: 0, // 成功总次数
  victimCount: 0, // 遭受攻击次数
  victimSuccessCount: 0, // 遭受攻击成功次数
  victimTotalCount: 0, // 受害者数量
});

const timeList = ref([]);
const timeLineList = ref([]);
const timeLineFiveList = ref([]);
/**
 * @description 获取攻击者列表
 */
const getList1 = async () => {
  let res = await getAttack({
    pageIndex: pageIndex1.value,
    pageSize: pageSize1.value,
    ip:
      unref(tab) == 1 ? unref(originalInfo).srcIp : unref(originalInfo).destIp,
    dateType: currenDate.value,
    type: unref(tab),
  });
  if (res.code == 200) {
    attackList.value = res.data.records;
    total1.value = res.data.total;
  }
};
/**
 * @description 获取受害者列表
 */
const getList2 = async () => {
  let res = await getVictim({
    pageIndex: pageIndex2.value,
    pageSize: pageSize2.value,
    ip:
      unref(tab) == 1 ? unref(originalInfo).srcIp : unref(originalInfo).destIp,
    dateType: currenDate.value,
    type: unref(tab),
  });
  if (res.code == 200) {
    victimList.value = res.data.records;
    total2.value = res.data.total;
  }
};
/**
 * @description 获取统计值
 */
const getList3 = async () => {
  let res = await getStatistics({
    ip:
      unref(tab) == 1 ? unref(originalInfo).srcIp : unref(originalInfo).destIp,
    dateType: currenDate.value,
    type: unref(tab),
  });
  if (res.code == 200) {
    numberObj.value = res.data;
  }
};
/**
 * @description 关联事件-时间线
 */
const getList4 = async () => {
  let res = await getTimeLine({
    ip:
      unref(tab) == 1 ? unref(originalInfo).srcIp : unref(originalInfo).destIp,
    dateType: currenDate.value,
    type: unref(tab),
    threatLevel: threatLevel.value,
    attackResult: attackResult.value,
  });
  let data = res.data;
  if (res.code == 200) {
    timeLineList.value = res.data;
    if (data.length > 5) {
      timeLineFiveList.value = JSON.parse(JSON.stringify(data)).splice(0, 5);
      timeList.value = timeLineFiveList.value
    } else {
      timeList.value = res.data
    }
  }
};
/**
 * @description 攻击结果发生改变时触发
 */
const choseSeach = (e) => {
  isShowList3.value = true;
  attackResult.value = e;
  getList4()
}
/**
 * @description 威胁等级发生改变时触发
 */
 const choseSeach1 = (e) => {
  isShowList3.value = true;
  threatLevel.value = e;
  getList4()
}
/**
 * @description 数据重置
 */
const resetData = () => {
  dateList.value.forEach((item,index) => {
    if(index == 0) {
      item.active = true
    } else {
      item.active = false;
    }
  });
  currenDate.value = 1;
  pageIndex1.value = 1;
  pageIndex2.value = 1;
  attackList.value = [];
  victimList.value = [];
  timeLineList.value = [];
  timeLineFiveList.value = [];
  timeList.value = [];
  threatLevel.value = '';
  attackResult.value = '';
  isShowList.value = true;
  isShowList1.value = true;
  isShowList2.value = true;
  isShowList3.value = true;
}
/**
 * @descripiton 点击详情
 */
const detailInfoObj = ref({})
const toDetail = (e) => {
  drawerProps.showDrawer = true;
  detailInfoObj.value = {
    id: e.eventId,
    alarmTime: e.alarmTime?e.alarmTime:''
  };
}
/**
 * @description 初始化
 */
const init = () => {
  resetData()
  getList1();
  getList2();
  getList3();
  getList4();
  getDict();
};
defineExpose({ init });
</script>
<style lang="scss" scoped>
div {
  box-sizing: border-box;
}
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  border: 1px solid var(--el-border-color);
  background: #f9fafb;
  box-sizing: border-box;
  padding: 12px 25px 12px 16px;
  .top-left {
    display: flex;
    align-items: center;
    .ip {
      font-weight: 600;
      font-size: var(--el-font-size-large);
    }
    .img1 {
      width: 2px;
      height: 47px;
      margin: 0 24px;
    }
    .img2 {
      position: relative;
      top: 3px;
    }
    .address {
      color: var(--el-color-primary);
      font-size: var(--el-font-size-small);
    }
  }
  .top-right {
    display: flex;
    align-items: center;
    .top-right-item {
      text-align: center;
      font-size: var(--el-font-size-base);
      cursor: pointer;
      margin-right: 28px;
    }
    .top-right-item:last-child {
      margin-right: 0;
    }
    .top-right-item-active {
      color: var(--el-color-primary);
    }
  }
}
.center {
  margin-top: 16px;
  border: 1px solid var(--el-border-color);
  border-radius: 2px;
  box-sizing: border-box;
  padding: 11px 16px 16px 16px;
  font-size: var(--el-font-size-base);
  .top {
    display: flex;
    font-size: var(--el-font-size-base);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--el-border-color);
    .top-img {
      border-radius: 2px;
      width: 20px;
      height: 20px;
      background: var(--el-color-primary);
      margin-right: 8px;
    }
    .title {
      font-weight: 600;
      font-size: var(--el-font-size-medium);
      margin-right: 24px;
    }
  }
  .center-content {
    margin-top: 12px;
    border: 1px solid var(--el-border-color);
    border-radius: 2px;
    .center-content-header {
      border-bottom: 1px solid var(--el-border-color);
      padding: 10px 13px;
      border-radius: 2px 2px 0px 0px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .center-content-top {
        display: flex;
        align-items: center;
        .center-content-top-label {
          width: 4px;
          height: 16px;
          background: var(--el-color-primary);
          margin-right: 6px;
        }
      }
      .center-content-top-down {
        width: 20px;
        height: 20px;
        background: rgba(28, 146, 208, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .center-content-list {
      padding: 10px;
      padding-bottom: 16px;
      .center-content-list-item {
        display: flex;
        align-items: center;
        margin-bottom: 16px;
      }
      .list-item-label {
        width: 10px;
        height: 10px;
        background-color: var(--el-color-primary);
        border-radius: 50%;
        box-shadow: 0 0 0 3px var(--el-color-primary-light-8);
        margin-right: 10px;
      }
      .img3 {
        position: relative;
        top: 2px;
        margin-right: 4px;
        margin-left: 6px;
      }
      .list-item-adress {
        color: var(--el-color-primary);
      }
    }
    .min-height {
      min-height: 80px;
    }
  }
}
.bottom {
  .top {
    justify-content: space-between;
  }
  .top-left {
    display: flex;
    align-items: center;
  }
  .top-search {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .top-search-left {
      display: flex;
      width: 30%;
      align-items: center;
    }
    .top-search-right {
      display: flex;
      width: 30%;
      align-items: center;
      margin-left: 15px;
      margin-right: 24px;
    }
    .titleOne {
      width: 90px;
    }
    .center-content-top-down {
      width: 20px;
      height: 20px;
      background: rgba(28, 146, 208, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .bottom-content {
    position: relative;
    min-height: 80px;
    .content {
      margin-top: 17px;
      .content-item {
        display: flex;
        position: relative;
        padding-bottom: 16px;
        .time {
          width: 80px;
          word-break: break-all;
          text-align: right;
          position: relative;
        }
        .time::after {
          display: inline-block;
          position: absolute;
          right: -30px;
          top: 5px;
          content: '';
          width: 10px;
          height: 10px;
          background-color: var(--el-color-primary);
          border-radius: 50%;
          box-shadow: 0 0 0 3px var(--el-color-primary-light-8);
          margin-right: 10px;
        }
        .content-item-line {
          position: absolute;
          border-left: 1px dashed var(--el-border-color);
          width: 1px;
          height: 90%;
          left: 94px;
          top: 16px;
        }
        .content-item-right {
          flex: 1;
          margin-left: 30px;
          background: linear-gradient(
            90deg,
            rgba(135, 122, 219, 0.1) 0%,
            rgba(135, 122, 219, 0) 100%
          );
          border: 1px solid;
          border-image: linear-gradient(
              90deg,
              rgba(135, 122, 219, 1),
              rgba(135, 122, 219, 0.3)
            )
            1 1;
          clip-path: inset(0 round 2px);
          font-size: var(--el-font-size-small);
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10px 16px;
          .content-item-right-left {
            display: flex;
            .right-line {
              border-right: 1px solid var(--el-border-color);
              padding-right: 16px;
            }
            .user-info {
              margin-left: 16px;
            }
          }
          .content-item-right-btn {
            width: 72px;
            line-height: 24px;
            height: 24px;
            background-color: var(--el-color-primary);
            border-radius: 2px;
            text-align: center;
            color: var(--el-color-white);
            cursor: pointer;
          }
        }
        .content-item-right1 {
          background: linear-gradient(
            90deg,
            rgba(232, 193, 93, 0.1) 0%,
            rgba(232, 193, 93, 0) 100%
          );
          border-radius: 2px;
          border: 1px solid;
          border-image: linear-gradient(
              90deg,
              rgba(232, 193, 93, 1),
              rgba(232, 193, 93, 0.3)
            )
            1 1;
        }
        .content-item-right2 {
          background: linear-gradient(
            90deg,
            rgba(129, 155, 165, 0.1) 0%,
            rgba(129, 155, 165, 0) 100%
          );
          border-radius: 2px;
          border: 1px solid;
          border-image: linear-gradient(
              90deg,
              rgba(129, 155, 165, 1),
              rgba(129, 155, 165, 0.3)
            )
            1 1;
        }
      }
      .content-item:last-child {
        padding-bottom: 0;
        .content-item-line {
          border: none;
        }
      }
    }
    .content-bottom {
      height: 59px;
      line-height: 59px;
      background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0) 0%,
        #ffffff 100%
      );
      position: absolute;
      bottom: 0px;
      left: 0;
      width: 100%;
      text-align: center;
      .content-bottom-title {
        position: relative;
        top: 25px;
        cursor: pointer;
        font-size: var(--el-font-size-small);
        color: var(--el-color-primary);
      }
    }
  }
}
.title-success {
  background: var(--el-color-danger-light-8);
  color: var(--el-color-danger);
  display: inline-block;
  padding: 0 4px;
  border-radius: 2px;
  margin: 0 2px;
  position: relative;
  top: 1px;
}
.btn-green {
  display: inline-block;
  background: var(--el-color-success);
  color: var(--el-color-white);
  border-radius: 2px;
  padding: 2px 4px;
  font-size: var(--el-font-size-extra-small);
}
.btn-info {
  background: var(--el-bg-color);
  border-radius: 2px;
  border: 1px solid var(--el-border-color);
  display: inline-block;
  padding: 2px 4px;
  box-sizing: border-box;
  margin-left: 8px;
  margin-right: 4px;
}
.btn-red {
  background: rgba(236, 119, 119, 0.08);
  border-radius: 2px;
  border: 1px solid var(--el-color-error);
  display: inline-block;
  padding: 2px 4px;
  box-sizing: border-box;
  margin-left: 8px;
  margin-right: 4px;
  color: var(--el-color-error);
}
.border-low {
  background: #F3F9FC;
  border: 1px solid #1C92D0;
}
.border-center {
  background: #FEFCF7;
  border: 1px solid #E8C15D;
}
.btn-attark {
  display: inline-block;
  background: var(--el-color-danger);
  color: var(--el-color-white);
  border-radius: 2px;
  padding: 2px 4px;
  font-size: var(--el-font-size-extra-small);
}

.spread-icon-spread {
  transform: rotate(-180deg);
}
.downicon {
  cursor: pointer;
}
.border-bottom-0 {
  border-bottom: 0 !important;
}
.margin-left-0 {
  margin-left: 0;
}
.margin-botton-4 {
  margin-bottom: 4px;
}
.base-btn {
  width: 36px;
  height: 22px;
  line-height: 22px;
  color: var(--el-color-white);
  text-align: center;
  border-radius: 2px;
  margin-top: 4px;
  font-size: var(--el-font-size-base);
}
.suceess-btn {
  background: var(--attack-success);
}
.warning-btn {
  background: var(--attack-attempt);
}
.fail-btn {
  background: var(--attack-fail);
}
.level-one {
  display: flex;
  align-items: center;
}
.level-svg {
  width: 15px;
  height: 15px;
  margin-right: 2px;
}
.level-heigh {
  color: var(--el-color-danger);

  svg {
    fill: var(--el-color-danger);
  }
}

.level-center {
  color: var(--el-color-warning);

  svg {
    fill: var(--el-color-warning);
  }
}
.level-low {
  color: var(--el-color-primary);

  svg {
    fill: var(--el-color-primary);
  }
}
.flex-st {
  display: flex;
}
</style>
