<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import dayjs from 'dayjs';
import { RDMS_OBJECT_DIRECTION_DICT_CODE } from '@/constants/dict';
import { fetchGetProduct } from '@/service/api';
import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
import DictText from '@/components/custom/dict-text.vue';
import { getProductStatusLabel, getProductStatusTagType } from '../../shared/product-master-data';

defineOptions({ name: 'ProductDetailDialog' });

interface Props {
  rowData?: Api.Product.Product | null;
  managerOptions: Api.SystemManage.UserSimple[];
}

const props = defineProps<Props>();

const visible = defineModel<boolean>('visible', {
  default: false
});

const detailLoading = ref(false);
const detailData = ref<Api.Product.Product | null>(null);

const title = computed(() => {
  return detailData.value?.name ? `产品详情 - ${detailData.value.name}` : '产品详情';
});

const managerLabelMap = computed(() => {
  return new Map(props.managerOptions.map(item => [String(item.id), item.nickname]));
});

function getManagerLabel(managerUserId?: string | null) {
  if (!managerUserId) {
    return '--';
  }

  return managerLabelMap.value.get(String(managerUserId)) || String(managerUserId);
}

function formatTime(value?: string | null) {
  if (!value) {
    return '--';
  }

  return dayjs(value).format('YYYY-MM-DD HH:mm:ss');
}

async function initDetail() {
  detailData.value = props.rowData ? { ...props.rowData } : null;

  if (!props.rowData) {
    return;
  }

  detailLoading.value = true;

  const { error, data } = await fetchGetProduct(props.rowData.id);

  detailLoading.value = false;

  if (!error) {
    detailData.value = data;
  }
}

watch(visible, value => {
  if (value) {
    initDetail();
  }
});
</script>

<template>
  <BusinessFormDialog
    v-model="visible"
    :title="title"
    preset="lg"
    :loading="detailLoading"
    :show-footer="false"
    :scrollbar="false"
  >
    <template v-if="detailData">
      <div class="mb-16px flex flex-wrap items-center gap-8px">
        <ElTag>{{ detailData.code }}</ElTag>
        <ElTag :type="getProductStatusTagType(detailData.statusCode)">
          {{ getProductStatusLabel(detailData.statusCode) }}
        </ElTag>
      </div>

      <ElDescriptions :column="2" border>
        <ElDescriptionsItem label="产品名称">{{ detailData.name }}</ElDescriptionsItem>
        <ElDescriptionsItem label="产品方向">
          <DictText :dict-code="RDMS_OBJECT_DIRECTION_DICT_CODE" :value="detailData.directionCode" />
        </ElDescriptionsItem>
        <ElDescriptionsItem label="产品经理">{{ getManagerLabel(detailData.managerUserId) }}</ElDescriptionsItem>
        <ElDescriptionsItem label="创建时间">{{ formatTime(detailData.createTime) }}</ElDescriptionsItem>
        <ElDescriptionsItem label="更新时间">{{ formatTime(detailData.updateTime) }}</ElDescriptionsItem>
        <ElDescriptionsItem label="最近状态原因">{{ detailData.lastStatusReason || '--' }}</ElDescriptionsItem>
        <ElDescriptionsItem label="产品描述" :span="2">
          <span class="whitespace-pre-wrap">{{ detailData.description || '--' }}</span>
        </ElDescriptionsItem>
      </ElDescriptions>
    </template>

    <ElEmpty v-else description="未获取到产品详情" />
  </BusinessFormDialog>
</template>

<style scoped></style>
