<template>
  <BasicModal v-bind="$attrs" @register="registerModal" title="查看告警">
    <a-row>
      <a-col :span="24">处理人：{{ alarmtInfo?.dealUserNames }}</a-col>
      <a-col :span="24">故障等级：{{ alarmtInfo?.levelName }}</a-col>
      <a-col :span="24">故障描述：{{ alarmtInfo?.remark }}</a-col>
      <a-col :span="24">处理方法：{{ alarmtInfo?.dealWay }}</a-col>
      <a-col :span="24">处理日期：{{ alarmtInfo?.date }}</a-col>
    </a-row>
    <a-divider />
    <div class="img-box">
      附件：
      <a-image-preview-group v-if="imgList.length">
        <a-image v-for="(item, index) in imgList" :key="index" :src="item.url" />
      </a-image-preview-group>
      <span v-else>暂无附件</span>
    </div>
    <div class="img-title">
      <img :src="`/src/assets/erp/${imgSrc}.png`" />
    </div>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { getDeviceAlarmCheck } from '/@/api/erp/device/alarm';
  import { getFileList } from '/@/api/system/file';
  import { getFileUrl } from '/@/utils/event/design';

  const rowId = ref('');
  const alarmtInfo = ref();
  const imgList = ref<any>([]);
  const imgSrc = ref('');
  defineEmits(['register']);

  const [registerModal, { setModalProps }] = useModalInner(async (data) => {
    setModalProps({
      confirmLoading: false,
      destroyOnClose: true,
      showCancelBtn: false,
      showOkBtn: false,
      footer: null,
      width: 500,
    });

    rowId.value = data.id;
    alarmtInfo.value = await getDeviceAlarmCheck(data.id);
    imgSrc.value = alarmtInfo.value?.state === 0 ? 'check_tip_no1' : 'check_tip_pass1';
    if (alarmtInfo.value.filePath) {
      imgList.value = await getFileList({ folderId: alarmtInfo.value.filePath });
      imgList.value?.forEach((x) => {
        x.url = getFileUrl(x);
      });
    }
  });
</script>
<style lang="less" scoped>
  .ant-col {
    margin-bottom: 15px;
  }

  .img-title {
    position: absolute;
    top: 10px;
    right: 30px;
    width: 100px;
  }

  .img-box {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }

  :deep(.ant-image) {
    width: 100px;
    height: 75px;
    padding: 5px;
    border: 1px solid silver;
    border-radius: 4px;
    margin-right: 10px;
  }

  :deep(.ant-image-img) {
    height: 100%;
  }
</style>
