<template>
  <BasicDrawer
    v-bind="$attrs"
    :title="t('monitor.alarm.log.table.detail')"
    @register="registerDrawer"
    width="30%"
  >
    <BasicForm @register="registerForm" />
    <div class="flex justify-end">
      <!-- [
      '激活未确认: 可以处理，清除',
      '激活已确认: 只可清除，已经处理',
      '清除未确认: 只可处理，已经清除',
      '清除已确认: 不需要做处理和清除',
    ] -->
      <Authority value="api:yt:alarm:single:handle">
        <a-button type="primary" class="mr-4" @click="handleAlarm" v-if="!status.acknowledged">
          {{ t('common.handleText') }}
        </a-button>
      </Authority>
      <Authority value="api:yt:alarm:single:clear">
        <a-button danger type="primary" @click="clearAlarm" v-if="!status.cleared">
          {{ t('common.clearText') }}
        </a-button>
      </Authority>
    </div>
  </BasicDrawer>
</template>

<script lang="ts">
  import { defineComponent, ref, unref } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form';
  import { alarmSchemasForm, getAlarmStatus } from '../config/detail.config';
  import { clearOrAckAlarm } from '/@/api/device/deviceManager';
  import { alarmLevel } from '/@/views/device/list/config/detail.config';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { Authority } from '/@/components/Authority';
  import { reactive } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  export default defineComponent({
    name: 'AlarmDetailDrawer',
    components: {
      BasicForm,
      BasicDrawer,
      Authority,
    },
    emits: ['success', 'register'],
    setup(_, { emit }) {
      const { t } = useI18n();
      const [registerForm, { setFieldsValue, resetFields }] = useForm({
        showActionButtonGroup: false,
        schemas: alarmSchemasForm,
        labelCol: {
          span: 5,
        },
      });
      const alarmId = ref('');

      const status = reactive({
        cleared: false,
        acknowledged: false,
      });

      const [registerDrawer, { closeDrawer }] = useDrawerInner(async (data) => {
        await resetFields();
        const { deviceAlias, deviceName, severity, details, id, cleared, acknowledged } =
          data || {};
        Object.assign(status, { cleared, acknowledged });
        await setFieldsValue({
          ...data,
          deviceName: deviceAlias || deviceName,
          severity: alarmLevel(severity),
          status: getAlarmStatus({ cleared, acknowledged }),
          details: JSON.stringify(details),
        });

        alarmId.value = id;
      });
      // 处理报警
      const handleAlarm = async () => {
        await clearOrAckAlarm(unref(alarmId), false);
        emit('success');
        closeDrawer();
      };
      // 清除报警
      const clearAlarm = async () => {
        await clearOrAckAlarm(unref(alarmId), true);
        emit('success');
        closeDrawer();
      };
      return {
        status,
        registerDrawer,
        registerForm,
        clearAlarm,
        handleAlarm,
        t,
      };
    },
  });
</script>

<style lang="less" scoped></style>