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

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

const faqManagementDetail = shallowRef<null | FaqManagementVO>(null);

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

<template>
  <BasicModal :footer="false" :fullscreen-button="false" title="工单类型信息" class="w-[70%]">
    <Descriptions v-if="faqManagementDetail" size="small" :column="2" bordered :labelStyle="{width:'120px'}">
      <DescriptionsItem label="标题">
        {{ faqManagementDetail.head }}
      </DescriptionsItem>
      <DescriptionsItem label="分类">
        <component
          :is="renderDict(faqManagementDetail.type,'consultation_type')"
        />
      </DescriptionsItem>
      <DescriptionsItem label="浏览量">
        {{ faqManagementDetail.pageView }}
      </DescriptionsItem>
      <DescriptionsItem label="发布状态">
        <component
          :is="renderDict(faqManagementDetail.status,'publish_status')"
        />
      </DescriptionsItem>
      <DescriptionsItem label="创建时间">
        {{ faqManagementDetail.createTime }}
      </DescriptionsItem>
      <DescriptionsItem label="更新时间">
        {{ faqManagementDetail.updateTime }}
      </DescriptionsItem>
      <DescriptionsItem label="内容编辑">
        <div v-html="faqManagementDetail.contents"></div>
      </DescriptionsItem>
    </Descriptions>
  </BasicModal>
</template>
