<script setup lang="ts">
import { onMounted, ref, useTemplateRef } from 'vue';
import { message } from 'ant-design-vue';
import dayjs, { Dayjs } from 'dayjs';

import ConfirmModal from '@/components/ConfirmModal.vue';
import SvgIcon from '@/components/SvgIcon.vue';
import { useDictData } from '@/hooks/dict-data';
import { useRequest } from '@/hooks/request';
import { useUserInfoStore } from '@/stores/user-info';
import { t } from '@/i18n';
import {
  addAlarmEvent,
  alarmEventChangeState,
  deleteAlarmEvent,
  getAlarmEventGetPageList,
  getAlarmEventInfo,
  getAlarmHistoryList,
  getOrgUsers,
  updateAlarmEvent,
} from '@/api';
import { OperatePermission } from '@/utils/permission-type';
import { DictCode } from '@/constants';

import AlarmConditions from './AlarmConditions.vue';
import AlarmExecution from './AlarmExecution.vue';

import type { FormInstance, Rule } from 'ant-design-vue/es/form';
import type {
  AlarmEventHistoryItem,
  AlarmEventItem,
  AlarmForm,
  AlarmHistory,
  AlarmPageParams,
  DictValue,
  EventTrigger,
  ExecutionAction,
  TriggerConditionItem,
  UserPageItem,
} from '@/types';

const { handleRequest } = useRequest();
const { dictData: alarmCondition, getDictData: getAlarmCondition } = useDictData(DictCode.AlarmCondition);
const { dictData: executionAction, getDictData: getExecutionAction } = useDictData(DictCode.ExecutionAction);
const { dictData: alarmRepeatTime, getDictData: getAlarmRepeatTime } = useDictData(DictCode.AlarmRepeatTime);
const { dictData: alarmAlgOperator, getDictData: getAlarmAlgOperator } = useDictData(DictCode.AlarmAlgOperator);
const { dictData: alarmDeviceState, getDictData: getAlarmDeviceState } = useDictData(DictCode.AlarmDeviceState);
const { dictData: alarmNotifyMethod, getDictData: getAlarmNotifyMethod } = useDictData(DictCode.AlarmNotifyMethod);
const { booleanPermission } = useUserInfoStore();
const modalComponentRef = useTemplateRef('modalComponent');
const formRef = ref<FormInstance>();
const triggerConditionRefs = ref<InstanceType<typeof AlarmConditions>[]>([]);
const judgmentConditionRefs = ref<InstanceType<typeof AlarmConditions>[]>([]);
const executionActionRefs = ref<InstanceType<typeof AlarmConditions>[]>([]);
const alarmConditionList = ref<DictValue[]>([]);
const orgUsersList = ref<UserPageItem[]>([]);
const alarmPageParams = ref<AlarmPageParams>({
  pageIndex: 1,
  pageSize: 10,
  searchContent: '',
});

const triggerConditionList = ref<TriggerConditionItem[]>([
  {
    type: 0,
    subType: undefined,
    groupId: undefined,
    childGroupId: undefined,
    deviceId: undefined,
    paramCode: '',
    alarmAlgOperator: undefined,
    alarmThreshold: undefined,
    alarmDeviceState: undefined,
    alarmScheduledTime: undefined,
    alarmRepeatTime: undefined,
    paramName: '',
    deviceName: '',
  },
]);

const judgmentConditionList = ref<TriggerConditionItem[]>([
  {
    type: 1,
    subType: undefined,
    groupId: undefined,
    childGroupId: undefined,
    deviceId: undefined,
    paramCode: '',
    alarmAlgOperator: undefined,
    alarmThreshold: undefined,
    alarmDeviceState: undefined,
    alarmScheduledTime: undefined,
    alarmRepeatTime: undefined,
    paramName: '',
    deviceName: '',
  },
]);

const executionActionList = ref<ExecutionAction[]>([
  {
    type: 2,
    subType: undefined,
    groupId: undefined,
    childGroupId: undefined,
    deviceId: undefined,
    paramCode: '',
    alarmAdjustmentValue: undefined,
    alarmContact: undefined,
    alarmAlertContent: undefined,
    alarmWaitTime: undefined,
    alarmNotifyMethod: undefined,
    paramName: '',
  },
]);
const historyOpen = ref<boolean>(false);
const alarmOpen = ref<boolean>(false);
const titleShow = ref<boolean>(true);
// 日期时间格式
const dateFormat = 'HH:mm';
const alarmForm = ref<AlarmForm>({
  eventName: '',
  time: [dayjs(), dayjs()],
  conditionLogic: 0,
  enabled: true,
});
const alarmIdData = ref<EventTrigger[]>([]);
const alarmTotal = ref<number>(0);
const alarmId = ref<number | undefined>(undefined);
const historyData = ref<AlarmEventHistoryItem[]>([]);
const historyTotal = ref<number>(0);
const historyQuery = ref<AlarmHistory>({
  pageIndex: 1,
  pageSize: 10,
  eventId: 0,
});

const rules: Record<string, Rule[]> = {
  eventName: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
  time: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
};
const historyColumns = [
  {
    title: '',
    dataIndex: 'index',
    key: 'index',
    width: 40,
  },
  {
    title: t('alarmManage.faultInformAtion'),
    dataIndex: 'errorMsg',
    key: 'errorMsg',
    ellipsis: true,
  },
  {
    title: t('alarmManage.type'),
    dataIndex: 'type',
    key: 'type',
    ellipsis: true,
  },
  {
    title: t('alarmManage.dateOccurrence'),
    dataIndex: 'createTime',
    key: 'createTime',
    ellipsis: true,
    sorter: (a: { state1: string | number | Date }, b: { state1: string | number | Date }) => {
      const timeA = new Date(a.state1).getTime();
      const timeB = new Date(b.state1).getTime();
      return timeA - timeB;
    },
  },
  // {
  //   title: t('alarmManage.settlementDate'),
  //   dataIndex: 'recoveryTime',
  //   key: 'recoveryTime',
  //   ellipsis: true,
  // },
];
const alarmColumns = [
  {
    title: t('alarmManage.eventName'),
    dataIndex: 'eventName',
    key: 'eventName',
    ellipsis: true,
  },
  {
    title: t('navigation.device'),
    dataIndex: 'deviceName',
    key: 'deviceName',
    ellipsis: true,
  },
  {
    title: t('alarmManage.triggerCount'),
    dataIndex: 'triggerTimes',
    key: 'triggerTimes',
    ellipsis: true,
    width: 100,
  },
  {
    title: t('alarmManage.recentlyTriggered'),
    dataIndex: 'lastTriggerTime',
    key: 'lastTriggerTime',
    ellipsis: true,
    width: 220,
  },
  {
    title: t('common.updateTime'),
    dataIndex: 'updateTime',
    key: 'updateTime',
    ellipsis: true,
    width: 220,
    sorter: (a: { state4: string | number | Date }, b: { state4: string | number | Date }) => {
      const timeA = new Date(a.state4).getTime();
      const timeB = new Date(b.state4).getTime();
      return timeA - timeB;
    },
  },
  {
    title: t('alarmManage.enable'),
    dataIndex: 'enabled',
    key: 'enabled',
    ellipsis: true,
    width: 80,
  },
  {
    title: t('common.operation'),
    dataIndex: 'action',
    key: 'action',
    width: 152,
  },
];

const getAlarmEventGetPageData = () => {
  handleRequest(async () => {
    const { records, total } = await getAlarmEventGetPageList(alarmPageParams.value);
    alarmTotal.value = total;
    alarmIdData.value = records;
  });
};
const addAlarm = () => {
  alarmOpen.value = true;
  titleShow.value = true;
};
const alarmSearch = () => {
  alarmPageParams.value.pageIndex = 1;
  getAlarmEventGetPageData();
};
const alarmReset = () => {
  alarmPageParams.value.searchContent = '';
  alarmPageParams.value.pageSize = 10;
  alarmSearch();
};

// 转换方法
const convertBtoA = (arr: AlarmEventItem[]): TriggerConditionItem[] | ExecutionAction[] => {
  return arr.map((item) => {
    // 基础字段
    const baseFields = {
      type: item.type,
      subType: String(item.subType),
      groupId: item.groupId,
      childGroupId: item.childGroupId,
      deviceId: item.deviceId,
      paramCode: item.paramCode,
      paramName: item.paramName,
      deviceName: item.deviceName,
    };

    // 处理动态字段
    const dynamicFields = item.dataList.reduce(
      (acc, { code, value }) => {
        if (code === 'alarmContact') {
          if (value) {
            acc[code] = Number(value);
          } else {
            acc[code] = undefined;
          }
          return acc;
        }
        // 特殊处理时间字段
        if (code === 'alarmScheduledTime') {
          const timeStr = dayjs(value, 'HH:mm');
          if (timeStr) acc[code] = timeStr;
          return acc;
        }

        if (code === 'alarmWaitTime') {
          const timeStr = dayjs(value, 'mm:ss');
          if (timeStr) acc[code] = timeStr;
          return acc;
        }

        // 自动类型转换逻辑
        if (value === '') return acc; // 过滤空字符串
        if (/^\d+$/.test(value)) {
          acc[code] = String(parseInt(value, 10));
        } else if (/^\d+\.\d+$/.test(value)) {
          acc[code] = String(parseFloat(value));
        } else {
          acc[code] = String(value);
        }
        return acc;
      },
      {} as Record<string, unknown>,
    );

    return { ...baseFields, ...dynamicFields };
  });
};

const alarmEditor = (id: number) => {
  alarmId.value = id;
  handleRequest(async () => {
    const {
      eventName,
      startTime,
      endTime,
      enabled,
      conditionLogic,
      triggerConditionList: triggerList,
      judgmentConditionList: judgmentList,
      executionActionList: executionList,
    } = await getAlarmEventInfo(id);
    titleShow.value = false;
    alarmOpen.value = true;
    alarmForm.value = {
      eventName,
      time: [dayjs(startTime, 'HH:mm'), dayjs(endTime, 'HH:mm')],
      conditionLogic: conditionLogic ? 1 : 0,
      enabled,
    };

    triggerConditionList.value = convertBtoA(triggerList);
    judgmentConditionList.value = convertBtoA(judgmentList);
    executionActionList.value = convertBtoA(executionList);
  });
};

const getAlarmHistory = () => {
  handleRequest(async () => {
    const { records, total } = await getAlarmHistoryList(historyQuery.value);
    historyData.value = records;
    historyTotal.value = total;
  });
};

const alarmHistory = (id: number) => {
  historyQuery.value.eventId = id;
  getAlarmHistory();
  historyOpen.value = true;
};
const alarmDelete = (id: number) => {
  alarmId.value = id;
  modalComponentRef.value?.showView();
};
const confirm = () => {
  handleRequest(async () => {
    if (alarmId.value) {
      await deleteAlarmEvent(alarmId.value);
      getAlarmEventGetPageData();
      modalComponentRef.value?.hideView();
    }
  });
};
const switchalarm = (item: EventTrigger) => {
  handleRequest(async () => {
    await alarmEventChangeState({
      id: item.id,
      enabled: item.enabled,
    });
  });
};
const switchPages = () => {
  getAlarmEventGetPageData();
};
const switchHistoryPages = () => {
  getAlarmHistory();
};
const addTriggerConditions = () => {
  triggerConditionList.value.push({
    type: 0,
    subType: undefined,
    groupId: undefined,
    childGroupId: undefined,
    deviceId: undefined,
    paramCode: '',
    alarmAlgOperator: undefined,
    alarmThreshold: undefined,
    alarmDeviceState: undefined,
    alarmScheduledTime: undefined,
    alarmRepeatTime: undefined,
    paramName: '',
    deviceName: '',
  });
};

const addJudgmentConditions = () => {
  judgmentConditionList.value.push({
    type: 1,
    subType: undefined,
    groupId: undefined,
    childGroupId: undefined,
    deviceId: undefined,
    paramCode: '',
    alarmAlgOperator: undefined,
    alarmThreshold: undefined,
    alarmDeviceState: undefined,
    alarmScheduledTime: undefined,
    alarmRepeatTime: undefined,
    paramName: '',
    deviceName: '',
  });
};

const addExecutionConditions = () => {
  executionActionList.value.push({
    type: 2,
    subType: undefined,
    groupId: undefined,
    childGroupId: undefined,
    deviceId: undefined,
    paramCode: '',
    alarmAdjustmentValue: undefined,
    alarmContact: undefined,
    alarmAlertContent: undefined,
    alarmWaitTime: undefined,
    alarmNotifyMethod: undefined,
    paramName: '',
  });
};

const closeModal = () => {
  alarmForm.value = {
    eventName: '',
    time: [dayjs(), dayjs()],
    conditionLogic: 0,
    enabled: true,
  };
  triggerConditionList.value = [
    {
      type: 0,
      subType: undefined,
      groupId: undefined,
      childGroupId: undefined,
      deviceId: undefined,
      paramCode: '',
      alarmAlgOperator: undefined,
      alarmThreshold: undefined,
      alarmDeviceState: undefined,
      alarmScheduledTime: undefined,
      alarmRepeatTime: undefined,
      paramName: '',
      deviceName: '',
    },
  ];
  judgmentConditionList.value = [
    {
      type: 1,
      subType: undefined,
      groupId: undefined,
      childGroupId: undefined,
      deviceId: undefined,
      paramCode: '',
      alarmAlgOperator: undefined,
      alarmThreshold: undefined,
      alarmDeviceState: undefined,
      alarmScheduledTime: undefined,
      alarmRepeatTime: undefined,
      paramName: '',
      deviceName: '',
    },
  ];
  executionActionList.value = [
    {
      type: 2,
      subType: undefined,
      groupId: undefined,
      childGroupId: undefined,
      deviceId: undefined,
      paramCode: '',
      alarmAdjustmentValue: undefined,
      alarmContact: undefined,
      alarmAlertContent: undefined,
      alarmWaitTime: undefined,
      alarmNotifyMethod: undefined,
      paramName: '',
    },
  ];

  const allComponents = [...triggerConditionRefs.value, ...judgmentConditionRefs.value, ...executionActionRefs.value];

  formRef.value?.resetFields();
  allComponents.map((child) => child.formResetFields());
};

// 添加格式转换
const formatDate = (date: Dayjs) => date.format('HH:mm');

const deleteTriggerClick = (index: number) => {
  if (triggerConditionList.value.length === 1) {
    return message.warning(t('alarmManage.triggerConditionEmpty'));
  }
  triggerConditionList.value.splice(index, 1);
};

const deleteJudgmentClick = (index: number) => {
  judgmentConditionList.value.splice(index, 1);
};

const deleteExecutionClick = (index: number) => {
  if (executionActionList.value.length === 1) {
    return message.warning(t('alarmManage.performActionEmpty'));
  }
  executionActionList.value.splice(index, 1);
};

const convertAtoB = (arr: TriggerConditionItem[] | ExecutionAction[]): AlarmEventItem[] => {
  return arr.map((item) => {
    // 解构固定字段和剩余属性
    const { type, subType, groupId, childGroupId, deviceId, paramCode, paramName, deviceName, ...dynamicFields } = item;
    // 转换动态字段到 dataList
    const dataList = Object.entries(dynamicFields)
      .map(([code, value]) => {
        // 特殊处理时间字段
        if (code === 'alarmScheduledTime') {
          if (value) {
            return { code, value: dayjs(value).format('HH:mm') };
          }
        }

        if (code === 'alarmWaitTime') {
          if (value) {
            return { code, value: dayjs(value).format('mm:ss') };
          }
        }

        return { code, value: String(value) };
      }) // 过滤空值（空字符串、null、undefined）
      .filter(({ value }) => value !== '' && value != null && value != 'undefined' && value != undefined);

    // 返回符合 AlarmEventItem 结构的对象
    return {
      type,
      subType,
      groupId,
      childGroupId,
      deviceId,
      paramCode,
      paramName,
      deviceName,
      dataList,
    };
  });
};

const okConfirm = async () => {
  try {
    // 创建校验任务队列（包含所有子组件+父组件自身）
    const allTasks = [
      // 所有子组件校验
      ...triggerConditionRefs.value.map((c) => c.formRefSubmit()),
      ...judgmentConditionRefs.value.map((c) => c.formRefSubmit()),
      ...executionActionRefs.value.map((c) => c.formRefSubmit()),
      // 父组件自身校验（核心新增点）
      formRef.value?.validate() || Promise.resolve(),
    ];
    // 并行执行所有校验（父+子）
    await Promise.all(allTasks);

    handleRequest(async () => {
      const { eventName, time, enabled, conditionLogic } = alarmForm.value;
      const data = time.map(formatDate) || [];
      const triggerList = convertAtoB(triggerConditionList.value);
      const judgmentList = convertAtoB(judgmentConditionList.value);
      const executionList = convertAtoB(executionActionList.value);

      if (titleShow.value) {
        await addAlarmEvent({
          eventName,
          startTime: data[0],
          endTime: data[1],
          enabled,
          conditionLogic: conditionLogic === 1 ? true : false,
          triggerConditionList: triggerList,
          judgmentConditionList: judgmentList,
          executionActionList: executionList,
        });
      } else {
        await updateAlarmEvent({
          id: alarmId.value,
          eventName,
          startTime: data[0],
          endTime: data[1],
          enabled,
          conditionLogic: conditionLogic === 1 ? true : false,
          triggerConditionList: triggerList,
          judgmentConditionList: judgmentList,
          executionActionList: executionList,
        });
      }

      alarmOpen.value = false;
      getAlarmEventGetPageData();
    });
  } catch {
    console.log('存在验证未通过的表单');
  }
};

const getOrgUsersList = () => {
  handleRequest(async () => {
    orgUsersList.value = await getOrgUsers();
  });
};

onMounted(() => {
  handleRequest(async () => {
    await getAlarmCondition();
    alarmConditionList.value = alarmCondition.value.filter((item, index) => index !== 2);
    await getExecutionAction();
    await getAlarmRepeatTime();
    await getAlarmAlgOperator();
    await getAlarmDeviceState();
    await getAlarmNotifyMethod();
  });
  getAlarmEventGetPageData();
  getOrgUsersList();
});
</script>

<template>
  <div>
    <AFlex justify="space-between">
      <div class="text-top">{{ $t('navigation.alarmManage') }}</div>
      <div>
        <AButton
          v-if="booleanPermission(OperatePermission.新增事件响应)"
          type="primary"
          class="icon-button"
          @click="addAlarm"
        >
          <AFlex align="center">
            <SvgIcon name="plus" />
            <span> {{ $t('common.addNew') }} </span>
          </AFlex>
        </AButton>
      </div>
    </AFlex>
    <div class="content">
      <AFlex justify="space-between" class="content-header">
        <div>
          <span class="query-text">{{ $t('common.search') }}</span>
          <AInput
            v-model:value="alarmPageParams.searchContent"
            :placeholder="t('alarmManage.pleaseEnterAlarm')"
            class="query-input button-margin"
          />
        </div>
        <div>
          <AButton type="primary" @click="alarmSearch"> {{ $t('common.query') }} </AButton>
          <AButton class="button-margin" @click="alarmReset">{{ $t('common.reset') }}</AButton>
        </div>
      </AFlex>

      <ATable :columns="alarmColumns" :data-source="alarmIdData" :pagination="false">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'enabled'">
            <ASwitch @change="switchalarm(record as EventTrigger)" v-model:checked="record.enabled" />
          </template>
          <template v-else-if="column.key === 'action'">
            <SvgIcon
              v-if="booleanPermission(OperatePermission.编辑事件响应)"
              @click="alarmEditor(record.id)"
              class="icon-style"
              name="edit-o"
            />
            <SvgIcon @click="alarmHistory(record.id)" class="icon-style" name="clock-circle-o" />
            <SvgIcon
              v-if="booleanPermission(OperatePermission.删除事件响应)"
              @click="alarmDelete(record.id)"
              class="icon-style"
              name="delete"
            />
          </template>
        </template>
      </ATable>
      <br />
      <br />
      <AFlex justify="flex-end" class="gateway-left-footer">
        <APagination
          v-model:current="alarmPageParams.pageIndex"
          v-model:page-size="alarmPageParams.pageSize"
          :total="alarmTotal"
          :show-size-changer="true"
          @change="switchPages"
          show-quick-jumper
          :show-total="(total) => $t('common.pageTotal', { total })"
        />
      </AFlex>
    </div>
    <AModal
      v-model:open="alarmOpen"
      :title="titleShow ? t('alarmManage.addWarningConditions') : t('alarmManage.editWarningConditions')"
      width="920px"
      :mask-closable="false"
      @ok="okConfirm"
      :after-close="closeModal"
    >
      <AForm ref="formRef" class="alarm-modal" :model="alarmForm" label-align="left" layout="vertical" :rules="rules">
        <AFormItem :label="t('alarmManage.eventName')" name="eventName">
          <AInput
            v-model:value="alarmForm.eventName"
            :placeholder="t('common.pleaseEnter')"
            class="query-input query-bottom"
          />
        </AFormItem>
        <AFormItem :label="t('alarmManage.effectiveTime')" name="time">
          <ATimeRangePicker
            :format="dateFormat"
            v-model:value="alarmForm.time"
            :separator="$t('common.to')"
            show-time
          />
        </AFormItem>
        <div class="alarm-text">{{ $t('alarmManage.inAnySituations') }}</div>

        <div v-for="(item, index) in triggerConditionList" :key="index">
          <AlarmConditions
            ref="triggerConditionRefs"
            @deleteClick="deleteTriggerClick"
            :index="index"
            :form="item"
            :alarm-condition="alarmCondition"
            :alarm-repeat-time="alarmRepeatTime"
            :alarm-alg-operator="alarmAlgOperator"
            :alarm-device-state="alarmDeviceState"
          />
        </div>

        <AButton type="primary" ghost class="icon-button button-top" @click="addTriggerConditions">
          <AFlex align="center">
            <SvgIcon name="plus" />
            <span> {{ $t('alarmManage.addTriggerConditions') }} </span>
          </AFlex></AButton
        >
        <br />

        <ASelect class="status-style" v-model:value="alarmForm.conditionLogic">
          <ASelectOption :value="0">{{ $t('alarmManage.satisfyAnyState') }}</ASelectOption>
          <ASelectOption :value="1">{{ $t('alarmManage.satisfyAllStates') }}</ASelectOption>
        </ASelect>
        <br />
        <div v-for="(item, index) in judgmentConditionList" :key="index">
          <AlarmConditions
            ref="judgmentConditionRefs"
            @deleteClick="deleteJudgmentClick"
            :index="index"
            :form="item"
            :alarm-condition="alarmConditionList"
            :alarm-repeat-time="alarmRepeatTime"
            :alarm-alg-operator="alarmAlgOperator"
            :alarm-device-state="alarmDeviceState"
          />
        </div>

        <AButton type="primary" ghost class="icon-button button-top" @click="addJudgmentConditions">
          <AFlex align="center">
            <SvgIcon name="plus" />
            <span> {{ $t('alarmManage.addJudgmentConditions') }} </span>
          </AFlex></AButton
        >
        <br />

        <div class="execute-text">{{ $t('alarmManage.just') }}</div>
        <div v-for="(item, index) in executionActionList" :key="index">
          <AlarmExecution
            ref="executionActionRefs"
            @deleteClick="deleteExecutionClick"
            :index="index"
            :form="item"
            :execution-action="executionAction"
            :alarm-notify-method="alarmNotifyMethod"
            :org-users-list="orgUsersList"
          />
        </div>

        <AButton type="primary" ghost class="icon-button button-top" @click="addExecutionConditions">
          <AFlex align="center">
            <SvgIcon name="plus" />
            <span> {{ $t('alarmManage.addExecutionAction') }} </span>
          </AFlex></AButton
        >
      </AForm>
      <AFlex align="center" class="enable-style">
        <div class="enable-text">{{ $t('alarmManage.enable') }}</div>
        <ASwitch v-model:checked="alarmForm.enabled" />
      </AFlex>
    </AModal>
    <AModal v-model:open="historyOpen" :title="t('alarmManage.historicalAlarm')" width="920px" :footer="null">
      <ATable :columns="historyColumns" :data-source="historyData" :pagination="false">
        <template #bodyCell="{ column, index, record }">
          <template v-if="column.key === 'index'">
            {{ index + 1 }}
          </template>
          <template v-if="column.key === 'type'">
            {{
              record.type === 0
                ? $t('alarmManage.equipmentFailureAlert')
                : $t('alarmManage.intelligentControlformAtion')
            }}
          </template>
        </template>
      </ATable>
      <br />
      <br />
      <AFlex justify="flex-end" class="gateway-left-footer">
        <APagination
          v-model:current="historyQuery.pageIndex"
          v-model:page-size="historyQuery.pageSize"
          :total="historyTotal"
          :show-size-changer="true"
          @change="switchHistoryPages"
          show-quick-jumper
          :show-total="(total) => $t('common.pageTotal', { total })"
        />
      </AFlex>
    </AModal>
    <ConfirmModal
      ref="modalComponent"
      :title="t('common.deleteConfirmation')"
      :description-text="t('common.confirmDeletion')"
      :icon="{ name: 'delete' }"
      :icon-bg-color="'#F56C6C'"
      @confirm="confirm"
    />
  </div>
</template>

<style lang="scss" scoped>
.enable-text {
  margin-right: 32px;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  color: #333;
  text-align: left;
}

.enable-style {
  margin-top: 40px;
}

.execute-text {
  margin-top: 40px;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  color: #333;
  text-align: left;
}

.status-style {
  width: 192px;
  margin-top: 40px;
}

.query-bottom {
  margin-bottom: 8px;
}

.alarm-modal :deep(.ant-form-item-label > label) {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  color: #666;
  text-align: left;
}

.alarm-modal :deep(.ant-form-item) {
  margin-bottom: 16px;
}

.button-top {
  margin-top: 16px;
}

.alarm-text {
  margin-top: 8px;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  color: #333;
  text-align: left;
}

.content-header {
  margin-bottom: 16px;
}

.icon-style {
  margin-right: 16px;
  font-size: 24px;
  color: var(--antd-color-primary-hover);
  cursor: pointer;
}

.button-margin {
  margin-left: 12px;
}

.query-input {
  width: 256px;
}

.content {
  padding: 24px;
  margin-top: 16px;
  background: #fff;
  border-radius: 16px;
}

.text-top {
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
  color: rgb(0 0 0 / 85%);
  text-align: left;
}
</style>
