<template>
  <div class="box">
    <a-tabs default-active-key="1" @change="callback">
      <a-tab-pane key="1" tab="通知管理">
        <ns-view-list-table v-bind="notificationConfig" ref="mainRef" @switch="changeUse" />
      </a-tab-pane>
      <a-tab-pane key="2" tab="设备告警" force-render>
        <ns-view-list-table v-show="equipmentAlarm" class="table" v-bind="equipmentAlarmConfig" />
        <a-button
          v-if="!equipmentAlarm"
          type="primary"
          style="position: absolute; right: 130px; z-index: 99; top: 75px"
          @click="backequipmentAlarm"
          >返回</a-button
        >
        <!-- 新增 或 编辑 设备告警 -->
        <editeEquipmentAlarm ref="editEquipmentAlarm" @editObject="editObject" />
        <!-- 配置设备告警-->
        <configureDeviceAlarms v-show="!equipmentAlarm" ref="configureDeviceAlarms" />
      </a-tab-pane>
      <a-tab-pane key="3" tab="能源告警">
        <energyAlarm class="full-height" />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script lang="ts">
  import { notificationtableConfig } from './ts/notificationManagementConfig';
  import { equipmentAlarmTableConfig } from './ts/equipmentAlarmConfig';
  import { ref } from 'vue';
  import energyAlarm from './components/energyAlarm.vue';
  import editeEquipmentAlarm from './equipmentAlarm/editeEquipmentAlarm.vue';
  import configureDeviceAlarms from './equipmentAlarm/configureDeviceAlarms.vue';
  export default {
    name: 'AlarmSettings',
    components: { energyAlarm, editeEquipmentAlarm, configureDeviceAlarms },
    setup() {
      const mainRef = ref();
      const editEquipmentAlarm = ref();
      const configureDeviceAlarms = ref();
      const equipmentAlarm = ref(true);
      const notificationConfig = notificationtableConfig(null, null, null);
      const equipmentAlarmConfig = equipmentAlarmTableConfig(
        editEquipmentAlarm,
        null,
        equipmentAlarm,
        configureDeviceAlarms,
      );
      const callback = (key: any) => {
        console.log(key);
      };
      //返回设备告警
      const backequipmentAlarm = () => {
        equipmentAlarm.value = !equipmentAlarm.value;
        configureDeviceAlarms.value.show = false;
      };
      const changeUse = () => {
        console.log(mainRef.value);
        mainRef.value?.nsTableRef.reload();
        // console.log(newList.value.formFinish, '数据');
      };
      // 编辑或添加成功 刷新列表
      const editObject = () => {
        console.log('添加成功 刷新列表');
        mainRef.value?.nsTableRef.reload();
        // console.log(newList.value.formFinish, '数据');
      };
      return {
        callback,
        notificationConfig,
        equipmentAlarmConfig,
        changeUse,
        editObject,
        editEquipmentAlarm,
        configureDeviceAlarms,
        equipmentAlarm,
        backequipmentAlarm,
        mainRef,
      };
    },
  };
</script>
<style lang="less" scoped>
  /deep/ .ant-tabs-nav {
    width: 100%;
  }
  .box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .full-height {
    height: 100%; /* 设置高度为父容器高度 */
  }
</style>
