<script setup lang="ts">
import type {conferenceSettingsDetail} from '#/api/property/roomBooking/conferenceSettings/model';
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 {meetInfo} from '#/api/property/roomBooking/conferenceSettings';
import {renderDict} from "#/utils/render";
dayjs.extend(duration);
dayjs.extend(relativeTime);

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

const conferenceSettingsDetail = shallowRef<null | conferenceSettingsDetail>(null);

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

<template>
  <BasicModal :footer="false" :fullscreen-button="false" title="访客管理信息" class="w-[70%]">
    <Descriptions v-if="conferenceSettingsDetail" size="small" :column="2" bordered :labelStyle="{width:'100px'}">
      <DescriptionsItem label="产品名称">
        {{ conferenceSettingsDetail.projectName}}
      </DescriptionsItem>
      <DescriptionsItem label="单价（元）">
        {{ conferenceSettingsDetail.price }}
      </DescriptionsItem>
      <DescriptionsItem label="单位">
        {{ conferenceSettingsDetail.unit }}
      </DescriptionsItem>
      <DescriptionsItem label="类型" v-if="conferenceSettingsDetail.type!=null">
        <component
          :is="renderDict(conferenceSettingsDetail.type,'wy_parking_spot')"
        />
      </DescriptionsItem>
      <DescriptionsItem label="状态" v-if="conferenceSettingsDetail.state!=null">
        <component
          :is="renderDict(conferenceSettingsDetail.state,'wy_appointment_tatus')"
        />
      </DescriptionsItem>
    </Descriptions>
  </BasicModal>
</template>
