<script setup lang="ts">
import type {ActivityVO} from '#/api/property/customerService/activity/model';
import {shallowRef} from 'vue';
import {useVbenModal} from '@vben/common-ui';
import {Descriptions, DescriptionsItem} from 'ant-design-vue';
import {activityInfo} from '#/api/property/customerService/activity';
import {renderDict} from "#/utils/render";
import {ossInfo} from "#/api/system/oss";

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

const activityDetail = shallowRef<null | ActivityVO>(null);

async function handleOpenChange(open: boolean) {
  if (!open) {
    return null;
  }
  modalApi.modalLoading(true);
  const {id} = modalApi.getData() as { id: number | string };
  const response = await activityInfo(id);
  activityDetail.value = response;
  if(activityDetail.value.activityImgUrl){
    try {
      const res = await ossInfo([activityDetail.value.activityImgUrl]);
      activityDetail.value.activityImgUrl = res?.[0]?.url;
    } catch (e) {
      activityDetail.value.activityImgUrl = '';
    }
  }
  modalApi.modalLoading(false);
}
</script>

<template>
  <BasicModal :footer="false" :fullscreen-button="false" title="详情" class="w-[70%]">
    <Descriptions v-if="activityDetail" size="small" :column="2" bordered :labelStyle="{width:'120px'}">
      <DescriptionsItem label="活动ID">
        {{ activityDetail.id }}
      </DescriptionsItem>
      <DescriptionsItem label="标题">
        {{ activityDetail.title }}
      </DescriptionsItem>
      <DescriptionsItem label="开始时间">
        {{ activityDetail.startTime }}
      </DescriptionsItem>
      <DescriptionsItem label="结束时间">
        {{ activityDetail.endTime }}
      </DescriptionsItem>
      <DescriptionsItem label="发布状态" v-if="activityDetail.status!=null">
        <component
          :is="renderDict(activityDetail.status,'pro_release_status')"
        />
      </DescriptionsItem>
      <DescriptionsItem label="发布人">
        {{ activityDetail.issuersText }}
      </DescriptionsItem>
      <DescriptionsItem label="活动图片" :span="2" v-if="activityDetail.activityImgUrl">
        <img style="width: 100px" :src="activityDetail.activityImgUrl" alt="图片加载失败"/>
      </DescriptionsItem>
      <DescriptionsItem label="活动内容" :span="2">
        <div v-html="activityDetail.activityContent"></div>
      </DescriptionsItem>
    </Descriptions>
  </BasicModal>
</template>
