<script setup lang="ts">
import { ref } from 'vue';

import Event from './components/Event.vue';
import Alarm from './components/Alarm.vue';
import Sensor from './components/Sensor.vue';
import RightTabs from '@/components/RightTabs/RightTabs.vue';

const currentIdx = ref('0');
const tabList: any[] = [
  {
    index: '0',
    label: 'CURRENT_ALARM',
    id: 'alarmEvent0',
  },
  {
    index: '1',
    label: 'SYSTEM_EVENT',
    id: 'alarmEvent1',
  },
  {
    index: '2',
    label: 'SEL_EVENT',
    id: 'alarmEvent2',
  },
];

const handleSelect = (key: any) => {
  currentIdx.value = key;
};
</script>
<template>
  <div id="alarmEventviewID" class="alarmEvent">
    <RightTabs
      :id="'alarmEvent'"
      :check-tab-index="currentIdx"
      :tab-list="tabList"
      @handle-select="handleSelect"
    />
    <Alarm v-show="currentIdx === '0'" />
    <Event v-show="currentIdx === '1'" />
    <Sensor v-show="currentIdx === '2'" />
  </div>
</template>
<style lang="scss" scoped>
.alarmEvent {
  flex: 1;
  margin-right: 24px;
  display: flex;
  flex-direction: column;

  :deep(.el-table+.el-pagination) {
    margin-top: 16px;
  }
}
</style>
