<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 {feedbacksInfo} from "#/api/property/customerService/feedbacks";
import type {FeedbacksVO} from "#/api/property/customerService/feedbacks/model";

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

const feedbacksDetail = shallowRef<null | FeedbacksVO>(null);

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

<template>
  <BasicModal :footer="false" :fullscreen-button="false" title="意见反馈详情" class="w-[70%]">
    <Descriptions v-if="feedbacksDetail" size="small" :column="2" bordered
                  :labelStyle="{width:'120px'}">
      <DescriptionsItem label="反馈类型">
        {{ feedbacksDetail.feedbackType }}
      </DescriptionsItem>
      <DescriptionsItem label="反馈人">
        {{ feedbacksDetail.feedbackPersion+'-'+feedbacksDetail.feedbackPersionPhone }}
      </DescriptionsItem>
      <DescriptionsItem label="反馈内容" :span="2">
        {{ feedbacksDetail.feedbackContent }}
      </DescriptionsItem>
      <DescriptionsItem label="反馈位置" :span="2">
        {{ feedbacksDetail.feedbackLocation }}
      </DescriptionsItem>
      <DescriptionsItem label="反馈图片" :span="2">
        {{feedbacksDetail.feedbackImg}}
      </DescriptionsItem>
      <DescriptionsItem label="转至工单">
        <component
          :is="renderDict(feedbacksDetail.isWorkOrder,'wy_sf')"
        />
      </DescriptionsItem>
      <DescriptionsItem label="处理状态">
        <component
          :is="renderDict(feedbacksDetail.status,'wy_yjclzt')"
        />
      </DescriptionsItem>
      <DescriptionsItem label="客服电话">
        {{ feedbacksDetail.serviceName }}
      </DescriptionsItem>
    </Descriptions>
  </BasicModal>
</template>
