<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { traduction } from '@/utils/language';
import { showElMessage } from '@/utils/utils';
import { logServices } from '../alarm.services';
import { hasDetails, dealDetails, sort, dealDate } from '../utils/utils';
import UrgentIcon from './UrgentIcon.vue';
import SeriousIcon from './SeriousIcon.vue';
import LightIcon from './SlightIcon.vue';
import TableNoData from '@/components/TableNoData/TableNoData.vue';
import { getGenericInfo } from '@/services/header/header.service';
import { loading } from '@/utils/composition';

const tableData: any = reactive({
  value: [],
});
const errorMsg = traduction('COMMON_FAILED');
const dialogVisible = ref(false);
let eventDetails: string[] = reactive([]);
const alarmCount = reactive({
  serious: 0,
  urgent: 0,
  slight: 0,
});

const currentPage = ref(1);
let pageSizeCount = ref(10);
const total = ref(0);
const preData: any = ref([]);

// 打开dialog框
function handleClick(content: string[]) {
  content.forEach(item => {
    eventDetails.push(item);
  });
  dialogVisible.value = true;
}
// 关闭dialog框
function dialogClose() {
  dialogVisible.value = false;
  eventDetails.length = 0;
}

// 框内页码范围
const handleSizeChange = (pageCount: number) => {
  pageSizeCount.value = pageCount;
  currentPage.value = 1;
  pageChange();
};

// 第几页点击
const handleCurrentChange = (pageNumber: number) => {
  pageChange();
};

function pageChange() {
  tableData.value = preData.value.slice(
    (currentPage.value - 1) * pageSizeCount.value,
    pageSizeCount.value * currentPage.value,
  );
}

// 获取表格数据
function getData() {
  tableData.value.splice(0);
  loading(true);
  logServices()
    .then((res: any) => {
      if (res?.data?.List) {
        const arr: any = [];
        total.value = res.data.TotalCount;
        res.data.List.forEach((item: any) => {
          arr.push({
            level: item.Level,
            subjectType: item.Subject,
            eventDetails: dealDetails(item.HandlingSuggestion),
            eventDescription: item.Content,
            eventCode: item.EventCode,
            isDetails: hasDetails(item.HandlingSuggestion),
            createTime: dealDate(item.CreatedTime),
          });
        });
        preData.value = sort(arr);
        pageChange();
      }
    })
    .finally(() => {
      loading(false);
    });
}
// 获取告警数
function getAlramCount() {
  getGenericInfo().then(res => {
    alarmCount.urgent = res.healthSummary.critical;
    alarmCount.serious = res.healthSummary.major;
    alarmCount.slight = res.healthSummary.minor;
  });
}
onMounted(() => {
  getData();
  getAlramCount();
});
</script>
<template>
  <div class="current-alarm">
    <div class="statistics">
      <div id="eventCritical" class="item urgent">
        <div class="left">
          <el-icon size="24px">
            <UrgentIcon />
          </el-icon>
          <span>{{ $t('ALARM_EVENT_CRITICAL') }}</span>
        </div>
        <div class="right">{{ alarmCount.urgent }}</div>
      </div>
      <div id="eventMajor" class="item serious">
        <div class="left">
          <el-icon size="24px">
            <SeriousIcon />
          </el-icon>
          <span>{{ $t('ALARM_EVENT_MAJOR') }}</span>
        </div>
        <div class="right">{{ alarmCount.serious }}</div>
      </div>
      <div id="eventMinor" class="item slight">
        <div class="left">
          <el-icon size="24px">
            <LightIcon />
          </el-icon>
          <span>{{ $t('ALARM_EVENT_MINOR') }}</span>
        </div>
        <div class="right">{{ alarmCount.slight }}</div>
      </div>
    </div>
    <el-table v-addId.table="'alarmTable'" :data="tableData.value" border>
      <el-table-column width="80px" :label="$t('EVENT_ORDER')">
        <template #default="scope">
          <span class="number">{{ scope.row.orderNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('EVENT_LEVEL')">
        <template #default="scope">
          <el-tag
            v-if="scope.row.level === 'Critical'"
            v-addTooltip.elTag
            class="alarm-level"
            type="danger"
          >
            {{ $t('ALARM_EVENT_CRITICAL') }}
          </el-tag>
          <el-tag
            v-if="scope.row.level === 'Minor'"
            v-addTooltip.elTag
            class="alarm-level"
            type="warning"
          >
            {{ $t('ALARM_EVENT_MINOR') }}
          </el-tag>
          <el-tag
            v-if="scope.row.level === 'Major'"
            v-addTooltip.elTag
            class="alarm-level"
            type="major"
          >
            {{ $t('ALARM_EVENT_MAJOR') }}
          </el-tag>
          <el-tag
            v-if="scope.row.level === 'Informational'"
            v-addTooltip.elTag
            class="alarm-level"
            type="primary"
          >
            {{ $t('ALARM_EVENT_NORMAL') }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column :label="$t('EVENT_MAIN_TYPE')">
        <template #default="scope">
          <span class="subject-type">{{ scope.row.subjectType }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('EVENT_CODE')">
        <template #default="scope">
          <span class="event-code">{{ scope.row.eventCode }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('EVENT_ENGENDER_TIME')">
        <template #default="scope">
          <span class="create-time">{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column width="400" show-overflow-tooltip :label="$t('EVENT_DESC')">
        <template #default="scope">
          <span class="event-description">{{ scope.row.eventDescription }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('EVENT_SUGGESTION')">
        <template #default="scope">
          <el-button
            v-if="scope.row.eventDetails"
            class="suggestion-btn"
            type="text"
            @click="handleClick(scope.row.eventDetails)"
          >
            {{ $t('ALARM_DETAILS') }}
          </el-button>
        </template>
      </el-table-column>

      <template #empty>
        <TableNoData />
      </template>
    </el-table>
    <div v-if="total > 0" class="pagination">
      <el-pagination
        v-model:currentPage="currentPage"
        v-addId.pagination="'alarmPageNation'"
        :page-sizes="[10, 15, 30, 50]"
        :page-size="pageSizeCount"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
    <!-- 处理建议dialog -->
    <div v-if="dialogVisible" v-reqKeepAlive.dialog>
      <el-dialog
        v-model="dialogVisible"
        :close-on-click-modal="false"
        width="432px"
        :title="$t('EVENT_SUGGESTION')"
        @close="dialogClose"
      >
        <div id="handlingSuggestion">
          <div v-for="item in eventDetails" :key="item">{{ item }}</div>
        </div>
        <template #footer>
          <el-button id="saveBtn" size="small" type="primary" @click="dialogClose">
            {{ $t('ALARM_OK') }}
          </el-button>
        </template>
      </el-dialog>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.current-alarm {
  flex: 1;
  background-color: var(--o-bg-color-base);
  border-radius: 4px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  .el-tag {
    width: 64px;
    height: 16px;
    padding: 0;
  }
  .statistics {
    display: flex;
    margin-bottom: 16px;
    .item {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 56px;
      font-size: 14px;
      border-radius: var(--o-border-radius);
      &:nth-child(n):not(:last-child) {
        margin-right: 16px;
      }
    }
    .urgent {
      color: var(--o-color-danger);
      background-color: var(--o-color-danger-background, rgba(227, 32, 32, 0.15));
    }
    .serious {
      color: var(--o-color-major);
      background-color: var(--o-color-major-background, rgba(249, 118, 17, 0.15));
    }
    .slight {
      color: var(--o-color-warning);
      background-color: var(--o-color-warning-background, rgba(235, 175, 0, 0.15));
    }

    .left {
      display: inline-flex;
      align-items: center;
      margin-left: 16px;
      .el-icon {
        margin-right: 4px;
      }
    }
    .right {
      display: inline-flex;
      font-size: 24px;
      font-weight: 900;
      color: var(--o-text-color-primary);
      margin-right: 16px;
    }
  }
  .pagination {
    margin-top: 16px;
  }
}
</style>
