<script setup lang="ts">
import type {
  MeetVO,
} 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";
import {ossInfo} from "#/api/system/oss";

dayjs.extend(duration);
dayjs.extend(relativeTime);

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

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

async function handleOpenChange(open: boolean) {
  if (!open) {
    return null;
  }
  modalApi.modalLoading(true);
  const {id} = modalApi.getData() as { id: number | string };
  conferenceSettingsDetail.value = await meetInfo(id);
  if (conferenceSettingsDetail.value?.picture) {
    let imgIds = conferenceSettingsDetail.value.picture.split(',');
    const res = await ossInfo(imgIds);
    if (res) {
      let imgArr = [] as string[];
      res.forEach(item => {
        imgArr.push(item.url)
      })
      conferenceSettingsDetail.value.pictureArr = imgArr;
    }
  }

  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:'120px'}">
      <DescriptionsItem label="会议室名称">
        {{ conferenceSettingsDetail.name }}
      </DescriptionsItem>
      <DescriptionsItem label="会议室类型">
        <component
          :is="renderDict(conferenceSettingsDetail.meetingRoomType,'meeting_room_type')"
        />
      </DescriptionsItem>
      <DescriptionsItem label="可容纳人数">
        {{ conferenceSettingsDetail.personNumber }}
      </DescriptionsItem>
      <DescriptionsItem label="会议室地址" :span="2">
        {{ conferenceSettingsDetail.locationName }}
      </DescriptionsItem>
      <DescriptionsItem label="配套设备" :span="2">
        {{ conferenceSettingsDetail.baseService }}
      </DescriptionsItem>
      <DescriptionsItem label="负责人" :span="2">
        {{ conferenceSettingsDetail.principalsName + '-' + conferenceSettingsDetail.phoneNo }}
      </DescriptionsItem>
      <DescriptionsItem label="费用模式" :span="conferenceSettingsDetail.expenseType=='2'?1:2">
        <component
          :is="renderDict(conferenceSettingsDetail.expenseType,'wy_fyms')"
        />
      </DescriptionsItem>
      <DescriptionsItem label="付费金额(元)" v-if="conferenceSettingsDetail.expenseType=='2'">
        {{ conferenceSettingsDetail.basePrice }}
      </DescriptionsItem>
      <DescriptionsItem label="会议室图片" :span="2">
        <div v-if="conferenceSettingsDetail.pictureArr">
          <img v-for="item in conferenceSettingsDetail.pictureArr"  style="width: 100px;margin: 5px 10px;display: inline-block" :src="item" alt="图片加载失败">
        </div>
      </DescriptionsItem>
      <DescriptionsItem label="预约是否审核">
        <component
          :is="renderDict(conferenceSettingsDetail.isCheck,'wy_sf')"
        />
      </DescriptionsItem>
      <DescriptionsItem label="开放时段" :span="2">
        {{ conferenceSettingsDetail.openStartHours + '-' + conferenceSettingsDetail.openEndHours }}
      </DescriptionsItem>
      <DescriptionsItem label="会议室描述" :span="2">
        {{ conferenceSettingsDetail.descs }}
      </DescriptionsItem>
    </Descriptions>
  </BasicModal>
</template>
