<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue';
import useStore from '@/stores';
import { traduction } from '@/utils/language';
import { _caculateTimeGap, _dateToStr } from '../utils/utils';
import {
  sysLogServices,
  getSubjectType,
  downloadLog,
  getTaskStatus,
  clearData,
  downLoadSystemEvents,
  getRecordTypeEvent,
  setRecordTypeEvent,
} from '../alarm.services';
import { IconCaretUp, IconXSolid, IconDelete, IconDownload } from '@computing/opendesign-icons';
import { showElMessage, compareObjectEqual, deepClone, formattingTime } from '@/utils/utils';
import { hasDetails, dealDetails } from '../utils/utils';
import GlobalStoreService from '@/services/gloabal-store-service';
import TableNoData from '@/components/TableNoData/TableNoData.vue';
import ErrorIcon from '@/components/ErrorIcon/ErrorIcon.vue';
import ClearableIcon from '@/components/ClearableIcon/ClearableIcon.vue';
import Dialog from '@/components/Dialog/Dialog.vue';
import { loading } from '@/utils/composition';
import { downloadFileWithResponse } from '@/utils/common-service';
import { UserPrivil } from '@/model/base-enum';
import { checkPrivil } from '@/apps/app-bmc/router/routes';

const store = useStore();
// 系统锁定状态
const isSystemLock = computed(() => {
  return store.state.glob.systemLocked;
});
const globalStoreService = new GlobalStoreService();
const errorMsg = traduction('COMMON_FAILED');
let total = ref(0);
let pageSize = ref(10);
let currentPage = ref(1);
const dialogRef = ref();
const loadingShow = ref(false);
const recordType = ref('');
const preRecordType = ref('');
const canSave = ref(false);

// 表格数据
const tableData: any = reactive([]);

// 告警级别可选列表
const conditionsList = reactive([
  {
    id: -1,
    label: traduction('ALARM_EVENT_ALL'),
  },
  {
    id: 'Critical',
    label: traduction('ALARM_EVENT_CRITICAL'),
  },
  {
    id: 'Major',
    label: traduction('ALARM_EVENT_MAJOR'),
  },
  {
    id: 'Minor',
    label: traduction('ALARM_EVENT_MINOR'),
  },
  {
    id: 'Informational',
    label: traduction('ALARM_EVENT_NORMAL'),
  },
]);

// 主体类型可选列表
const objectTypeList: any = reactive([]);

const hasBasicConfig = checkPrivil(UserPrivil.baseConfig);

const options: any = reactive([
  {
    label: traduction('LINEAR_RECORD'),
    value: 'NeverOverWrites',
    disable: false,
    id: 1,
  },
  {
    label: traduction('CIRCULAR_RECORD'),
    value: 'WrapsWhenFull',
    disable: false,
    id: 2,
  },
]);

// 产生时间可选列表
const generationTimeList: any = reactive([
  {
    id: -1,
    label: traduction('ALARM_EVENT_ALL'),
  },
  {
    id: 2,
    label: traduction('ALARM_EVENT_DATE1'),
  },
  {
    id: 3,
    label: traduction('ALARM_EVENT_DATE2'),
  },
  {
    id: 4,
    label: traduction('ALARM_EVENT_DATE3'),
  },
  {
    id: 5,
    label: traduction('ALARM_EVENT_DATE4'),
  },
]);

// 是否展示筛选区域
const collapsed = ref(false);
// 查询按钮的diabled状态
const searchBtnState = ref(true);
// 重置按钮的diabled状态
const resetBtnState = ref(true);

// 主体类型的初始搜索值
const entityType = traduction('ALARM_EVENT_ALL');

const searchCheckList: any = reactive([]);

// 上一次搜索的条件
const preSearchData: any = {
  alarmLevel: -1,
  entityType: -1,
  generationTime: -1,
  searchTime: '',
  searchStr: '',
};

const searchData: any = reactive({
  // 告警级别
  alarmLevel: -1,
  // 主体类型
  entityType: entityType,
  // 产生时间
  generationTime: -1,
  // 自定义产生时间-日期选择器的时间
  searchTime: [new Date(new Date().setDate(new Date().getDate() - 7)), new Date()],
  // 输入查询的输入框文本
  searchStr: '',
});

// 点击重置按钮
function reset() {
  Object.assign(searchData, {
    alarmLevel: -1,
    entityType: entityType,
    generationTime: -1,
    searchTime: '',
    searchStr: '',
  });
  currentPage.value = 1;
  searchCheckList.splice(0);
  setBtnState();
}

// 点击查询按钮
function search() {
  // 重置上一次的搜索条件
  Object.assign(preSearchData, searchData);
  currentPage.value = 1;
  searchBtnState.value = true;
  getTableData();
}

// 输入框发生修改
function input() {
  change('searchStr', searchData.searchStr);
}

// 清除搜索条件的 单个去除
function clearSearchItem(index: number) {
  const checkItem = searchCheckList[index];
  const type = checkItem.type;
  switch (type) {
    case 'alarmLevel': {
      searchData.alarmLevel = -1;
      break;
    }
    case 'entityType': {
      searchData.entityType = entityType;
      break;
    }
    case 'generationTime': {
      searchData.generationTime = -1;
      searchData.searchTime = '';
      break;
    }
    case 'searchStr': {
      searchData.searchStr = '';
      break;
    }
    default: {
      break;
    }
  }

  searchCheckList.splice(index, 1);
  Object.assign(preSearchData, searchData);
  setBtnState();
  getTableData();
}

// 清空搜索条件
function clearSearch() {
  searchCheckList.splice(0);
  Object.assign(preSearchData, {
    alarmLevel: -1,
    entityType: entityType,
    generationTime: -1,
    searchTime: '',
    searchStr: '',
  });
  reset();
  getTableData();
}

function changeSearchCheckList(list: any, value: any, key: string, searchItem: any, type: string) {
  const checkItem = list.find((item: any) => {
    return item[key] === value;
  });
  if (searchItem) {
    Object.assign(searchItem, checkItem);
  } else {
    searchCheckList.push({
      ...deepClone(checkItem),
      type: type,
    });
  }
}

function searchCheckListFoctory(key: string, value: any, searchItem: any) {
  switch (key) {
    // 告警级别
    case 'alarmLevel': {
      changeSearchCheckList(conditionsList, value, 'id', searchItem, 'alarmLevel');
      break;
    }
    // 主体类型
    case 'entityType': {
      changeSearchCheckList(objectTypeList, value, 'label', searchItem, 'entityType');
      break;
    }
    // 产生时间
    case 'generationTime': {
      changeSearchCheckList(generationTimeList, value, 'id', searchItem, 'generationTime');
      break;
    }
    // 产生时间 - 自定义时间
    case 'searchTime': {
      const checkItem = searchCheckList.find((item: any) => {
        return item.type === 'generationTime';
      });
      checkItem.label = traduction('ALARM_EVENT_DATE4');
      break;
    }
    // 输入查询
    case 'searchStr': {
      if (searchItem) {
        searchItem.label = value;
      } else {
        searchCheckList.push({
          label: value,
          type: 'searchStr',
        });
      }
      break;
    }
    default: {
      break;
    }
  }
}

// 按钮组发生修改、日期选择器发生修改、输入框发生修改
function change(key: string, value: any) {
  const searchItem: any = searchCheckList.find((item: any) => {
    return item.type === key;
  });

  searchCheckListFoctory(key, value, searchItem);

  if (key === 'generationTime' && value !== 5) {
    searchData.searchTime = '';
  }

  const res = searchCheckList.filter((item: any) => {
    return item.id !== -1 && item.label !== '';
  });

  searchCheckList.splice(0);
  searchCheckList.push(...res);

  setBtnState();
}

// 设置查询和重置按钮的disabled状态
function setBtnState() {
  const startSearchData = {
    alarmLevel: -1,
    entityType: entityType,
    generationTime: -1,
    searchStr: '',
  };
  resetBtnState.value = compareObjectEqual(searchData, startSearchData, 'searchTime');

  // 产生时间-自定义
  if (searchData.generationTime === 5) {
    // 选择时间的时候
    if (searchData.searchTime) {
      searchBtnState.value = compareObjectEqual(searchData, preSearchData);
    } else {
      searchBtnState.value = true;
    }
  } else {
    searchBtnState.value = compareObjectEqual(searchData, preSearchData, 'searchTime');
  }
}

// 二次确认弹框
const confirmConfig = reactive({
  id: 'clearDialog',
  content: traduction('COMMON_ASK_OK'),
  title: traduction('ALARM_OK'),
});

function clearDialog() {
  if (isSystemLock.value) {
    return;
  }
  dialogRef.value.show();
}

function dialogClose(reason: boolean) {
  dialogRef.value.hide();
  if (reason) {
    loading(true);
    clearData()
      .then(res => {
        showElMessage('success', traduction('COMMON_SUCCESS'));
      })
      .catch(error => {
        showElMessage('error', errorMsg);
      })
      .finally(() => {
        getTableData();
        getEntityTypeData();
        loading(false);
      });
  }
}

// 点击下载图标
function download() {
  loadingShow.value = true;
  downloadLog()
    .then(res => {
      const url = res.data.url;
      queryTask(url);
    })
    .catch(error => {
      showElMessage('error', errorMsg);
    })
    .finally(() => {
      loadingShow.value = false;
    });
}

// 查询下载进度
function queryTask(url: string) {
  getTaskStatus(url)
    .then(res => {
      const data = res.data;
      if (data) {
        if (data.prepare_progress === 100 && data.state === 'Completed') {
          beginDownLoad();
        } else if (data.prepare_progress <= 100) {
          queryTask(url);
        }
      }
    })
    .catch(() => {
      showElMessage('error', traduction('COMMON_FAILED'));
    });
}
// 开始下载
function beginDownLoad() {
  downLoadSystemEvents()
    .then((res: any) => {
      const fileName = res.headers['content-disposition'].split('=')[1];
      downloadFileWithResponse(res.data, fileName);
      showElMessage('success', traduction('COMMON_SUCCESS'));
    })
    .catch(() => {
      showElMessage('error', traduction('COMMON_FAILED'));
    });
}

// 查看处理建议
const dialogConfig = reactive({
  visible: false,
  content: [] as string[],
  show: (val: string) => {
    dealDetails(val)?.forEach((item: any) => {
      dialogConfig.content.push(item);
    });
    dialogConfig.visible = true;
  },
  close: () => {
    dialogConfig.content = [];
    dialogConfig.visible = false;
  },
});

function handleSizeChange(val: number) {
  pageSize.value = val;
  currentPage.value = 1;
  getTableData();
}

// 获取主体类型
function getEntityTypeData() {
  objectTypeList.splice(0);
  getSubjectType().then((subjectType: any) => {
    const list = subjectType.data.List;
    const resList = list.map((item: { Label: string; ID: number }) => {
      return {
        label: item.Label,
        id: item.ID,
      };
    });

    // 排序
    resList.sort((a: any, b: any) => {
      return a.label.localeCompare(b.label);
    });

    objectTypeList.push(...resList);
    // 全部
    objectTypeList.unshift({
      label: traduction('ALARM_EVENT_ALL'),
      id: -1,
    });
    setSubject();
  });
}

// 获取请求参数
function getParams() {
  const params: any = {
    Skip: pageSize.value * (currentPage.value - 1),
    Top: pageSize.value,
  };
  if (searchData.alarmLevel !== -1) {
    params.Level = searchData.alarmLevel;
  }
  if (searchData.entityType !== entityType) {
    params.Subject = searchData.entityType;
  }
  if (searchData.generationTime !== -1) {
    const { generationTime, searchTime } = searchData;
    if (generationTime === 2) {
      const { start, end } = _caculateTimeGap(1);
      params.BeginTime = start;
      params.EndTime = end;
    } else if (generationTime === 3) {
      const { start, end } = _caculateTimeGap(7);
      params.BeginTime = start;
      params.EndTime = end;
    } else if (generationTime === 4) {
      const { start, end } = _caculateTimeGap(30);
      params.BeginTime = start;
      params.EndTime = end;
    } else if (generationTime === 5 && searchTime) {
      params.BeginTime = _dateToStr(searchTime[0], 1);
      params.EndTime = _dateToStr(searchTime[1], 0);
    }
  }
  if (searchData.searchStr) {
    params.SearchString = searchData.searchStr;
  }

  return params;
}

// 获取表格数据
function getTableData() {
  tableData.splice(0);
  globalStoreService.setValue('isLoading', true);
  sysLogServices(getParams())
    .then((res: any) => {
      if (res?.data?.List) {
        tableData.push(...res.data.List);
        total.value = res.data.TotalCount;
        setSubject();
      }
      globalStoreService.setValue('isLoading', false);
    })
    .catch(() => {
      globalStoreService.setValue('isLoading', false);
    });
}
function getRecord() {
  globalStoreService.setValue('isLoading', true);
  getRecordTypeEvent()
    .then((res: any) => {
      if (res?.data?.EventMode) {
        canSave.value = false;
        recordType.value = res.data.EventMode;
        preRecordType.value = res.data.EventMode;
      }
      globalStoreService.setValue('isLoading', false);
    })
    .catch(() => {
      globalStoreService.setValue('isLoading', false);
    });
}

function saveRecord() {
  globalStoreService.setValue('isLoading', true);
  setRecordTypeEvent({EventMode: recordType.value})
    .then((res: any) => {
      if (res?.data?.EventMode) {
        canSave.value = false;
        recordType.value = res.data.EventMode;
        preRecordType.value = res.data.EventMode;
      }
      globalStoreService.setValue('isLoading', false);
      showElMessage('success', traduction('COMMON_SUCCESS'));
    })
    .catch(() => {
      globalStoreService.setValue('isLoading', false);
      showElMessage('error', traduction('COMMON_FAILED'));
    });
}

// 根据两次请求的数据进行 主体类型 的设置
function setSubject() {
  if (objectTypeList.length) {
    tableData.forEach((item: any) => {
      const checkItem = objectTypeList.find((subjectItem: any) => {
        return subjectItem.id === item.Subject;
      });

      if (checkItem) {
        item.Subject = checkItem.label;
      }
    });
  }
}

function setCanSave(value: any) {
  if (value !== preRecordType.value) {
    canSave.value = true;
  } else {
    canSave.value = false;
  }
}

onMounted(() => {
  getTableData();
  getRecord();
  getEntityTypeData();
});
</script>
<template>
  <div class="system-event">
    <!-- 折叠板 -->
    <div class="collapse">
      <div v-if="hasBasicConfig" class="collapse-header">
        <div class="left">
          <el-form>
            <el-form-item :label="$t('SENSOR_RECORD')">
              <el-radio-group
                id="recordLevelEvent"
                v-model="recordType"
                :disabled="isSystemLock"
              >
                <el-radio
                  v-for="(item, index) in options"
                  :key="item.id"
                  v-addId.radio="'recordLevelEvent' + index"
                  :label="item.value"
                  @change="setCanSave"
                >
                  {{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <el-button
            id="saveRecordEvent" type="primary" class="saveRecord" :disabled="!canSave || isSystemLock"
            @click="saveRecord"
          >
            {{ $t('COMMON_SAVE') }}
          </el-button>
        </div>
        
        <div class="right">
          <el-tooltip effect="dark" :content="$t('COMMON_DELETE')" placement="top">
            <el-button
              id="clear"
              v-privil.base.baseConfig
              class="del isIcon"
              :class="isSystemLock && 'locking'"
              trigger-keys
              @click="clearDialog"
            >
              <template #icon>
                <IconDelete />
              </template>
            </el-button>
          </el-tooltip>
          <el-tooltip
            v-if="!loadingShow"
            effect="dark"
            :content="$t('COMMON_DOWN')"
            placement="top"
            trigger-keys
          >
            <el-button
              id="download"
              :disabled="loadingShow"
              :class="loadingShow ? 'disLoading' : ''"
              class="download isIcon"
              @click="download"
            >
              <template #icon>
                <!-- 下载 -->
                <IconDownload />
              </template>
            </el-button>
          </el-tooltip>
          <el-button
            v-else
            id="downLoading"
            :disabled="loadingShow"
            :class="loadingShow ? 'disLoading' : ''"
            class="download isIcon"
          >
            <template #icon>
              <!-- 加载中 -->
              <Loading :state="true" />
            </template>
          </el-button>
          <Dialog ref="dialogRef" :config="confirmConfig" @close="dialogClose"></Dialog>
        </div>
      </div>
      <div class="collapse-header">
        <div class="left">
          <el-button id="filterBtn" @click="collapsed = !collapsed">
            <span class="screen-text">{{ $t('WARN_FILTER_BTN') }}</span>
            <el-icon :class="collapsed ? 'caret-down' : 'caret-up'">
              <IconCaretUp></IconCaretUp>
            </el-icon>
          </el-button>

          <div v-if="searchCheckList.length" class="search-check-list">
            <div class="text search-res">{{ $t('WARN_FILTER_RESULTS') }}:</div>
            <div v-for="(item, index) in searchCheckList" :key="index" class="item">
              <span class="text">{{ item.label }}</span>
              <el-icon @click="clearSearchItem(index)">
                <IconXSolid />
              </el-icon>
            </div>
            <div class="clear" @click="clearSearch">{{ $t('WARN_CLEAR_ALL') }}</div>
          </div>
        </div>

        <div v-if="!hasBasicConfig" class="right">
          <el-tooltip effect="dark" :content="$t('COMMON_DELETE')" placement="top">
            <el-button
              id="clear"
              v-privil.base.baseConfig
              class="del isIcon"
              :class="isSystemLock && 'locking'"
              trigger-keys
              @click="clearDialog"
            >
              <template #icon>
                <IconDelete />
              </template>
            </el-button>
          </el-tooltip>
          <el-tooltip
            v-if="!loadingShow"
            effect="dark"
            :content="$t('COMMON_DOWN')"
            placement="top"
            trigger-keys
          >
            <el-button
              id="download"
              :disabled="loadingShow"
              :class="loadingShow ? 'disLoading' : ''"
              class="download isIcon"
              @click="download"
            >
              <template #icon>
                <!-- 下载 -->
                <IconDownload />
              </template>
            </el-button>
          </el-tooltip>
          <el-button
            v-else
            id="downLoading"
            :disabled="loadingShow"
            :class="loadingShow ? 'disLoading' : ''"
            class="download isIcon"
          >
            <template #icon>
              <!-- 加载中 -->
              <Loading :state="true" />
            </template>
          </el-button>
          <Dialog ref="dialogRef" :config="confirmConfig" @close="dialogClose"></Dialog>
        </div>
      </div>

      <!-- 筛选条件 -->
      <el-form v-show="collapsed" label-width="auto" @submit.prevent>
        <!-- 告警级别 -->
        <el-form-item :label="$t('ALARM_EVENT_ALARM_LEVEL')">
          <el-radio-group
            id="alarmLevel"
            v-model="searchData.alarmLevel"
            @change="change('alarmLevel', $event)"
          >
            <el-radio-button
              v-for="(item, index) in conditionsList"
              :key="item.id"
              v-addId.radio="'alarmLevel' + index"
              :label="item.id"
            >
              {{ item.label }}
            </el-radio-button>
          </el-radio-group>
        </el-form-item>
        <!-- 主体类型 -->
        <el-form-item :label="$t('ALARM_EVENT_TYPE')">
          <el-radio-group
            id="eventType"
            v-model="searchData.entityType"
            @change="change('entityType', $event)"
          >
            <el-radio-button
              v-for="(item, index) in objectTypeList"
              :key="item.id"
              v-addId.radio="'eventType' + index"
              :label="item.label"
            >
              {{ item.label }}
            </el-radio-button>
          </el-radio-group>
        </el-form-item>
        <!-- 产生时间 -->
        <el-form-item :label="$t('ALARM_EVENT_ALERT_TIME')">
          <el-radio-group
            id="generationTime"
            v-model="searchData.generationTime"
            @change="change('generationTime', $event)"
          >
            <el-radio-button
              v-for="(item, index) in generationTimeList"
              :key="item.id"
              v-addId.radio="'generationTime' + index"
              :label="item.id"
            >
              {{ item.label }}
            </el-radio-button>
          </el-radio-group>
          <el-date-picker
            v-if="searchData.generationTime === 5"
            :id="['dateRangeStart', 'dateRangeEnd']"
            v-model="searchData.searchTime"
            type="daterange"
            popper-class="daterange-popper"
            :start-placeholder="$t('IBMC_START_DATA')"
            :end-placeholder="$t('IBMC_END_DATA')"
            @change="change('searchTime', $event)"
          />
        </el-form-item>
        <!-- 输入查询 -->
        <el-form-item :label="$t('ALARM_EVENT_INPUT_QUERY')">
          <el-input
            v-model="searchData.searchStr"
            v-addId.input="'searchInput'"
            v-clearable
            clearable
            maxlength="20"
            :input-style="{ width: '496px' }"
            :placeholder="$t('ALARM_EVENT_SEARCH_PALCEHOLDER')"
            @input="input"
          >
            <template #suffix>
              <ErrorIcon />
              <ClearableIcon />
            </template>
          </el-input>
        </el-form-item>
        <!-- 查询、重置 -->
        <el-form-item label=" ">
          <el-button id="search" :disabled="searchBtnState" type="primary" @click="search">
            {{ $t('ALARM_EVENT_SEARCH') }}
          </el-button>
          <el-button id="reset" :disabled="resetBtnState" type="default" @click="reset">
            {{ $t('ALARM_EVENT_RESET') }}
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <!--  表格数据 -->
    <el-table v-addId.table="'eventTable'" :data="tableData" border resizable>
      <el-table-column min-width="5%" :label="$t('EVENT_ORDER')">
        <template #default="scope">
          <span class="id">{{ scope.row.ID }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="10%" :label="$t('EVENT_LEVEL')">
        <template #default="scope">
          <span>
            <el-tag
              v-if="scope.row.Level === 'Critical'"
              v-addTooltip.elTag
              class="event-level"
              type="danger"
            >
              {{ $t('ALARM_EVENT_CRITICAL') }}
            </el-tag>
            <el-tag
              v-if="scope.row.Level === 'Minor'"
              v-addTooltip.elTag
              class="event-level"
              type="warning"
            >
              {{ $t('ALARM_EVENT_MINOR') }}
            </el-tag>
            <el-tag
              v-if="scope.row.Level === 'Major'"
              v-addTooltip.elTag
              class="event-level"
              type="major"
            >
              {{ $t('ALARM_EVENT_MAJOR') }}
            </el-tag>
            <el-tag
              v-if="scope.row.Level === 'Informational'"
              v-addTooltip.elTag
              class="event-level"
              type="primary"
            >
              {{ $t('ALARM_EVENT_NORMAL') }}
            </el-tag>
          </span>
        </template>
      </el-table-column>
      <el-table-column min-width="10%" :label="$t('EVENT_MAIN_TYPE')">
        <template #default="scope">
          <span class="subject">{{ scope.row.SubjectName }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="10%" :label="$t('EVENT_STATUS')">
        <template #default="scope">
          <span class="status">{{ scope.row.Status }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="10%" :label="$t('EVENT_CODE')">
        <template #default="scope">
          <span class="event-code">{{ scope.row.EventCode }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="15%" :label="$t('EVENT_ENGENDER_TIME')">
        <template #default="scope">
          <span class="created-time">{{ scope.row.CreatedTime }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="30%" show-overflow-tooltip :label="$t('EVENT_DESC')">
        <template #default="scope">
          <span class="content">{{ scope.row.Content }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="10%" :label="$t('EVENT_SUGGESTION')">
        <template #default="scope">
          <el-button
            v-if="scope.row.HandlingSuggestion && scope.row.HandlingSuggestion !== 'N/A.' && hasDetails(scope.row.HandlingSuggestion, scope.row.Status)"
            class="suggestion-btn"
            type="text"
            @click="dialogConfig.show(scope.row.HandlingSuggestion)"
          >
            {{ $t('ALARM_DETAILS') }}
          </el-button>
        </template>
      </el-table-column>
      <template #empty>
        <TableNoData />
      </template>
    </el-table>
    <!-- 处理建议dialog -->
    <div v-if="dialogConfig.visible" v-reqKeepAlive.dialog>
      <el-dialog
        v-model="dialogConfig.visible"
        :close-on-click-modal="false"
        width="432px"
        :title="$t('EVENT_SUGGESTION')"
        @close="dialogConfig.close"
      >
        <div id="handlingSuggestion">
          <div v-for="item in dialogConfig.content" :key="item">{{ item }}</div>
        </div>
        <template #footer>
          <el-button id="saveBtn" size="small" type="primary" @click="dialogConfig.close">
            {{ $t('ALARM_OK') }}
          </el-button>
        </template>
      </el-dialog>
    </div>
    <el-pagination
      v-if="tableData.length > 0"
      v-model:currentPage="currentPage"
      v-addId.pagination="'eventPagination'"
      :page-sizes="[10, 15, 30, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="getTableData"
    />
  </div>
</template>
<style lang="scss" scoped>
.system-event {
  flex: 1;
  background-color: var(--o-bg-color-base);
  border-radius: 4px;
  padding: 16px;
  display: flex;
  flex-direction: column;

  .el-table {
    flex: 1;
    .el-tag {
      width: 64px;
      height: 16px;
      padding: 0;
    }
  }

  .collapse-header {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
      display: flex;
      align-items: center;
      .saveRecord{
        margin-left: 32px;
        :deep(span){
          min-width: 0px !important;
        }
      }
      .screen-text {
        margin-right: 8px;
      }
      .search-check-list {
        display: flex;
        align-items: center;

        .search-res {
          margin-left: 16px;
          margin-right: 16px;
        }

        .text {
          color: var(--o-text-color-primary);
        }

        .item {
          margin-right: 8px;
          padding: 4px 8px;
          border-radius: var(--i-button-border-radius);
          background-color: var(--o-border-color-light);
          display: flex;
          align-items: center;

          .el-icon {
            margin-left: 8px;
            font-size: 16px;
            color: #8b98aa;
            cursor: pointer;
          }
        }

        .clear {
          color: var(--o-color-primary);
          cursor: pointer;
        }
      }
    }

    .right {
      display: flex;
      align-items: center;
      .locking {
        cursor: not-allowed !important;
      }
      .el-icon {
        font-size: 16px;
        cursor: pointer;
        color: var(--o-text-color-tertiary);
        &:hover {
          color: var(--o-color-primary);
        }
      }
      .disLoading {
        background-color: var(--o-bg-color-placeholder);
      }
      .isIcon {
        width: 32px;
        min-width: auto;
        padding: 7px;
        &:hover {
          svg {
            color: var(--o-color-primary-secondary);
          }
        }
        .loading {
          background: rgba(0, 0, 0, 0);
          :deep(.circular) {
            position: absolute;
            left: 100%;
            width: 16px;
            height: 16px;
            margin-top: -8px;
            margin-left: -16px;
          }
        }
      }

      .del {
        margin-right: 8px;
      }
    }

    .el-form-item {
      margin-bottom: 0;
    }
  }

  :deep(.el-radio-button__inner) {
    font-weight: normal;
  }
  :deep(.el-date-editor) {
    height: 32px;
    margin-bottom: 4px;
    max-width: 240px;
  }
  .caret-down {
    transform: rotate(0deg);
    transition: transform 0.2s;
  }
  .caret-up {
    transform: rotate(180deg);
    transition: transform 0.2s;
  }

  :deep(.el-form-item) {
    margin-bottom: 8px;
  }
  :deep(.el-input__wrapper){
    width: auto;
  }
}
</style>
