<script setup lang="ts">
import {shallowRef} from 'vue';
import {useVbenModal} from '@vben/common-ui';
import {Descriptions, DescriptionsItem} from 'ant-design-vue';
import dayjs from 'dayjs';
import duration from 'dayjs/plugin/duration';
import relativeTime from 'dayjs/plugin/relativeTime';
import {renderDict} from "#/utils/render";
dayjs.extend(duration);
dayjs.extend(relativeTime);
import {CheckboxGroup} from 'ant-design-vue'
import {getDictOptions} from "#/utils/dict";
import {machineInfo} from "#/api/property/equipmentManagement/machine";
import type {MachineVO} from "#/api/property/equipmentManagement/machine/model";

const [BasicModal, modalApi] = useVbenModal({
  onOpenChange: handleOpenChange,
  onClosed() {
    machineDetail.value = null;
  },
});

const machineDetail = shallowRef<null | MachineVO>(null);

async function handleOpenChange(open: boolean) {
  if (!open) {
    return null;
  }
  modalApi.modalLoading(true);
  const {id} = modalApi.getData() as { id: number | string };
  machineDetail.value = await machineInfo(id);
  modalApi.modalLoading(false);
}
</script>

<template>
  <BasicModal :footer="false" :fullscreen-button="false" title="设备详情" class="w-[70%]">
    <Descriptions v-if="machineDetail" size="small" :column="2" bordered
                  :labelStyle="{width:'120px'}">
      <DescriptionsItem label="设备名称">
        {{ machineDetail.machineName }}
      </DescriptionsItem>
      <DescriptionsItem label="设备编码">
        {{ machineDetail.machineCode }}
      </DescriptionsItem>
      <DescriptionsItem label="设备品牌">
        {{ machineDetail.machineBrand }}
      </DescriptionsItem>
      <DescriptionsItem label="设备类型">
        {{ machineDetail.machineTypeId }}
      </DescriptionsItem>
      <DescriptionsItem label="位置详情">
        {{ machineDetail.locationId }}
      </DescriptionsItem>
      <DescriptionsItem label="采购价格">
        {{ machineDetail.purchasePrice }}
      </DescriptionsItem>
      <DescriptionsItem label="启用时间">
        {{ machineDetail.activationTime }}
      </DescriptionsItem>
      <DescriptionsItem label="保修截至时间">
        {{ machineDetail.deadline }}
      </DescriptionsItem>
      <DescriptionsItem label="使用年限(年)">
        {{ machineDetail.serviceLife }}
      </DescriptionsItem>

      <DescriptionsItem label="保修周期" v-if="machineDetail.maintenanceCycle!=null">
        <component
          :is="renderDict(machineDetail.maintenanceCycle,'wy_sbbxzq')"
        />
      </DescriptionsItem>
      <DescriptionsItem label="使用状态" v-if="machineDetail.state!=null">
        <component
          :is="renderDict(machineDetail.state,'wy_sbsyzt')"
        />
      </DescriptionsItem>
      <DescriptionsItem label="责任人" >
       {{ machineDetail.personId }}
      </DescriptionsItem>
    </Descriptions>
  </BasicModal>
</template>
