<template>
  <div class="box">
    <a-tabs default-active-key="1">
      <a-tab-pane key="1" tab="通知管理">
        <ns-view-list-table v-bind="notificationConfig" ref="mainRef">
          <template #bodyCell="{ record, column }">
            <template v-if="column.dataIndex === 'enableNotifications'">
              <a-switch
                :checked="record.enableNotifications === 1 ? true : false"
                :class="{
                  'blue-background': record.enableNotifications === 1 ? true : false,
                  'grey-background': record.enableNotifications === 1 ? false : true,
                }"
                @change="
                  clickSwitch({ type: 1, enableRules: record.enableRules, record: record })
                " />
            </template>
            <template v-if="column.dataIndex === 'prioritys'">
              {{ record.priority ? record.priority.label : '' }}
            </template>
            <template v-if="column.dataIndex === 'notificationMethod'">
              {{ getNotificationMethod(record.notificationMethod) }}
            </template>
          </template>
        </ns-view-list-table>
        <!-- 联系方式 -->
        <notificationManagement ref="notificationManagements" @updNotification="updNotification" />
      </a-tab-pane>
      <a-tab-pane key="2" tab="设备告警" force-render>
        <ns-view-list-table
          v-show="equipmentAlarm"
          ref="mainRefEquipmentAlarm"
          class="table"
          v-bind="equipmentAlarmConfig">
          <template #bodyCell="{ record, column }">
            <template v-if="column.dataIndex === 'enableRules'">
              <a-switch
                :checked="record.enableRules === 1 ? true : false"
                :class="{
                  'blue-background': record.enableRules === 1 ? true : false,
                  'grey-background': record.enableRules === 1 ? false : true,
                }"
                @change="
                  clickSwitch({ type: 2, enableRules: record.enableRules, record: record })
                " />
            </template>
            <template v-if="column.dataIndex === 'monitor'">
              {{
                record.monitorTime && record.monitorTimeUnit
                  ? record.monitorTime + '' + record.monitorTimeUnit.label
                  : ''
              }}
            </template>
            <template v-if="column.dataIndex === 'prioritys'">
              {{ record.priority ? record.priority.label : '' }}
            </template>
            <template v-if="column.dataIndex === 'alarmFrequency'">
              {{ record.alarmFrequency ? record.alarmFrequency.label : '' }}
            </template>
            <template v-if="column.dataIndex === 'repetitions'">
              {{
                record.repetitions && record.alarmFrequency.value === 2 ? record.repetitions : '-'
              }}
            </template>
            <template v-if="column.dataIndex === 'interval'">
              {{
                record.intervalDuration &&
                (record.alarmFrequency.value === 2 || record.alarmFrequency.value === 3)
                  ? record.intervalDuration + '' + record.intervalDurationUnit.label
                  : '-'
              }}
            </template>
          </template>
        </ns-view-list-table>
        <a-button
          v-if="!equipmentAlarm"
          type="primary"
          style="position: absolute; right: 130px; z-index: 3; top: 80px; height: 30px"
          @click="backequipmentAlarm"
          >返回</a-button
        >
        <!-- 新增 或 编辑 设备告警 -->
        <editeEquipmentAlarm ref="editEquipmentAlarm" @editObject="editObject" />
        <!-- 配置设备告警-->
        <configureDeviceAlarms v-show="!equipmentAlarm" ref="configureDeviceAlarms" />
      </a-tab-pane>
      <a-tab-pane key="3" tab="能耗告警">
        <ns-view-list-table
          v-bind="energyAlarmConfig"
          v-show="energyAlarm"
          ref="mainEnergyAlarmConfig"
          class="table">
          <template #bodyCell="{ record, column }">
            <template v-if="column.dataIndex === 'enableRules'">
              <a-switch
                :checked="record.enableRules === 1 ? true : false"
                :class="{
                  'blue-background': record.enableRules === 1 ? true : false,
                  'grey-background': record.enableRules === 1 ? false : true,
                }"
                @click="
                  clickSwitch({ type: 3, enableRules: record.enableRules, record: record })
                " />
            </template>
            <template v-if="column.dataIndex === 'monitorFrequency'">
              {{ record.monitorFrequency.label }}
            </template>
            <template v-if="column.dataIndex === 'alarmFrequency'">
              {{ record.alarmFrequency ? record.alarmFrequency.label : '' }}
            </template>
            <template v-if="column.dataIndex === 'priority'">
              {{ record.priority ? record.priority.label : '' }}
            </template>
            <template v-if="column.dataIndex === 'repetitions'">
              {{
                record.repetitions && record.alarmFrequency.value === 2 ? record.repetitions : '-'
              }}
            </template>
            <template v-if="column.dataIndex === 'interval'">
              {{
                record.intervalDuration && record.alarmFrequency.value !== 1
                  ? record.intervalDuration + '' + record.intervalDurationUnit.label
                  : '-'
              }}
            </template>
          </template>
        </ns-view-list-table>
        <a-button
          v-if="!energyAlarm"
          type="primary"
          style="position: absolute; right: 130px; z-index: 3; top: 80px; height: 30px"
          @click="backenergyAlarm"
          >返回</a-button
        >
        <!-- 新增 或 编辑 能耗告警 -->
        <editeEnergyAlarm ref="editeEnergyAlarm" @editObject="editeEnergyAlarmInfo" />
        <!-- 配置能源告警-->
        <configureEnergyAlarms v-show="!energyAlarm" ref="configureEnergyAlarms" />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script lang="ts">
  import { notificationtableConfig } from './ts/notificationManagementConfig';
  import { equipmentAlarmTableConfig } from './ts/equipmentAlarmConfig';
  import { energyAlarmConfigs } from './ts/energyAlarmConfig';
  import { ref, createVNode } from 'vue';
  import { http } from '/nerv-lib/util';
  import { NsMessage, NsModal } from '/nerv-lib/component';
  import editeEquipmentAlarm from './equipmentAlarm/editeEquipmentAlarm.vue';
  import editeEnergyAlarm from './energyAlarm/editeEnergyAlarm.vue';
  import notificationManagement from './notificationManagement/index.vue';
  import configureEnergyAlarms from './energyAlarm/configureEnergyAlarms.vue';
  import configureDeviceAlarms from './equipmentAlarm/configureDeviceAlarms.vue';
  import { deviceAlarms } from '/@/api/alarmManagement/alarmSettings/deviceAlarms';
  import { energyAlarms } from '/@/api/alarmManagement/alarmSettings/energyAlarm';
  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
  import { notificationManagementApi } from '/@/api/alarmManagement/alarmSettings/notificationManagements';

  export default {
    name: 'AlarmSettingsIndex',
    components: {
      editeEquipmentAlarm,
      configureDeviceAlarms,
      configureEnergyAlarms,
      notificationManagement,
      editeEnergyAlarm,
    },
    setup() {
      const mainRef = ref();
      const mainRefEquipmentAlarm = ref();
      const mainEnergyAlarmConfig = ref();
      const editEquipmentAlarm = ref();
      const notificationManagements = ref();
      const editeEnergyAlarm = ref();
      const configureDeviceAlarms = ref();
      const configureEnergyAlarms = ref();
      const equipmentAlarm = ref(true);
      const energyAlarm = ref(true);
      const notificationConfig = notificationtableConfig(notificationManagements);
      //获取 通知方式
      const getNotificationMethod = (data: any) => {
        if (!data) return '';
        const methods: any = [];
        const notifications = data.split(',');

        notifications.forEach((notification: any) => {
          if (notification === '1') {
            methods.push('站内信息');
          } else if (notification === '2') {
            methods.push('短信');
          }
        });

        return methods.join('/');
      };
      //能源告警配置
      const energyAlarmConfig = energyAlarmConfigs(
        editeEnergyAlarm,
        mainEnergyAlarmConfig,
        energyAlarm,
        configureEnergyAlarms,
        mainRef,
      );
      //设备告警配置
      const equipmentAlarmConfig = equipmentAlarmTableConfig(
        editEquipmentAlarm,
        mainRefEquipmentAlarm,
        equipmentAlarm,
        configureDeviceAlarms,
        mainRef,
      );
      //返回设备告警
      const backequipmentAlarm = () => {
        equipmentAlarm.value = !equipmentAlarm.value;
        configureDeviceAlarms.value.show = false;
      };
      const backenergyAlarm = () => {
        energyAlarm.value = !energyAlarm.value;
        configureEnergyAlarms.value.show = false;
      };
      //通知 修改成功
      const updNotification = () => {
        mainRef.value?.nsTableRef.reload();
      };
      const clickSwitch = (data: any) => {
        NsModal.confirm({
          title: '启用状态',
          icon: createVNode(ExclamationCircleOutlined),
          content:
            '确定' +
            (data.record.enableRules === 1 ? '关闭' : '启用') +
            (data.type === 1 ? '通知' : '告警') +
            '吗?',
          onOk: () => {
            if (data.type === 1) {
              //通知方式
              http
                .post(notificationManagementApi.upData, {
                  id: data.record.id,
                  orgId: data.record.orgId,
                  enableNotifications: data.record.enableNotifications === 1 ? 0 : 1,
                })
                .then(() => {
                  NsMessage.success(
                    data.record.enableNotifications === 1 ? '通知已关闭' : '通知已启用',
                  );
                  mainRef.value?.nsTableRef.reload();
                });
            }
            //设备告警
            if (data.type === 2) {
              http
                .post(deviceAlarms.addOrUpNewData, {
                  id: data.record.id,
                  orgId: data.record.orgId,
                  enableRules: data.record.enableRules === 1 ? 0 : 1,
                })
                .then(() => {
                  NsMessage.success(data.record.enableRules === 1 ? '告警已关闭' : '告警已启用');
                  mainRefEquipmentAlarm.value?.nsTableRef.reload();
                });
            }
            //能源告警
            if (data.type === 3) {
              http
                .post(energyAlarms.addOrUpNewData, {
                  id: data.record.id,
                  orgId: data.record.orgId,
                  enableRules: data.record.enableRules === 1 ? 0 : 1,
                })
                .then(() => {
                  NsMessage.success(data.record.enableRules === 1 ? '告警已关闭' : '告警已启用');
                  mainEnergyAlarmConfig.value?.nsTableRef.reload();
                });
            }
          },
        });
      };
      // 设备告警 编辑或添加成功 刷新列表
      const editObject = () => {
        mainRefEquipmentAlarm.value?.nsTableRef.reload();
        mainRef.value?.nsTableRef.reload();
      };
      // 能源告警 编辑或添加成功 刷新列表
      const editeEnergyAlarmInfo = () => {
        mainEnergyAlarmConfig.value?.nsTableRef.reload();
        mainRef.value?.nsTableRef.reload();
      };
      return {
        notificationConfig,
        energyAlarmConfig,
        equipmentAlarmConfig,
        editObject,
        editeEnergyAlarm,
        updNotification,
        getNotificationMethod,
        clickSwitch,
        editEquipmentAlarm,
        notificationManagements,
        editeEnergyAlarmInfo,
        configureDeviceAlarms,
        configureEnergyAlarms,
        equipmentAlarm,
        energyAlarm,
        backequipmentAlarm,
        backenergyAlarm,
        mainRef,
        mainRefEquipmentAlarm,
        mainEnergyAlarmConfig,
      };
    },
  };
</script>
<style lang="less" scoped>
  .box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .full-height {
    height: 100%; /* 设置高度为父容器高度 */
  }
  .blue-background.ant-switch-checked {
    background-color: linear-gradient(
      180deg,
      rgba(1, 206, 255, 1) 0%,
      rgba(57, 215, 187, 1) 100%
    ) !important;
  }

  .grey-background.ant-switch {
    background-color: rgba(238, 238, 238, 1) !important;
  }

  .blue-background.ant-switch-checked .ant-switch-handle {
    background-color: linear-gradient(
      180deg,
      rgba(1, 206, 255, 1) 0%,
      rgba(57, 215, 187, 1) 100%
    ) !important;
  }
  .ant-switch-checked {
    background-color: rgba(57, 215, 187, 1) !important;
  }
  .grey-background.ant-switch .ant-switch-handle {
    background-color: rgba(238, 238, 238, 1) !important;
  }
</style>
