<script setup lang="ts">
import { computed } from 'vue';
import dayjs from 'dayjs';
import { RDMS_OBJECT_DIRECTION_DICT_CODE, RDMS_PROJECT_TYPE_DICT_CODE } from '@/constants/dict';
import { useDict } from '@/hooks/business/dict';
import { getProjectStatusLabel, getProjectStatusTagType } from '../../../shared/project-master-data';
import { isProjectBaseInfoEditable } from '../shared';

defineOptions({ name: 'ProjectSettingBaseInfoCard' });

interface Props {
  baseInfo: Api.Project.ProjectSettingBaseInfo | null;
  readonly?: boolean;
}

interface Emits {
  (e: 'edit'): void;
}

const props = withDefaults(defineProps<Props>(), {
  readonly: false
});
const emit = defineEmits<Emits>();

const editDisabled = computed(() => {
  if (!props.baseInfo) {
    return true;
  }

  return props.readonly || !isProjectBaseInfoEditable(props.baseInfo.statusCode);
});

const { getLabel: getDirectionLabel } = useDict(RDMS_OBJECT_DIRECTION_DICT_CODE);
const { getLabel: getProjectTypeLabel } = useDict(RDMS_PROJECT_TYPE_DICT_CODE);

function formatDate(date: string | null | undefined) {
  if (!date) {
    return '--';
  }
  return dayjs(date).format('YYYY-MM-DD');
}

function formatActualStartDate(date: string | null | undefined) {
  return date ? dayjs(date).format('YYYY-MM-DD') : '未开始';
}

function formatActualEndDate(date: string | null | undefined) {
  return date ? dayjs(date).format('YYYY-MM-DD') : '未结束';
}
</script>

<template>
  <ElCard class="card-wrapper">
    <template #header>
      <div class="flex items-center justify-between gap-12px">
        <div>
          <h3 class="text-16px text-[#0f172a] font-700">基础信息</h3>
        </div>
        <ElButton type="primary" plain :disabled="editDisabled" @click="emit('edit')">编辑基础信息</ElButton>
      </div>
    </template>

    <ElDescriptions v-if="baseInfo" :column="2" border>
      <ElDescriptionsItem label="项目编码">{{ baseInfo.projectCode || '--' }}</ElDescriptionsItem>
      <ElDescriptionsItem label="项目名称">{{ baseInfo.projectName || '--' }}</ElDescriptionsItem>
      <ElDescriptionsItem label="项目方向">
        {{ getDirectionLabel(baseInfo.directionCode, '--') }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="项目类型">
        {{ getProjectTypeLabel(baseInfo.projectType, '--') }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="所属产品">{{ baseInfo.productName || baseInfo.productId || '--' }}</ElDescriptionsItem>
      <ElDescriptionsItem label="项目经理">
        {{ baseInfo.managerUserNickname || baseInfo.managerUserId || '--' }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="计划开始日期">{{ formatDate(baseInfo.plannedStartDate) }}</ElDescriptionsItem>
      <ElDescriptionsItem label="计划结束日期">{{ formatDate(baseInfo.plannedEndDate) }}</ElDescriptionsItem>
      <ElDescriptionsItem label="实际开始日期">
        {{ formatActualStartDate(baseInfo.actualStartDate) }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="实际结束日期">{{ formatActualEndDate(baseInfo.actualEndDate) }}</ElDescriptionsItem>
      <ElDescriptionsItem label="当前状态">
        <ElTag :type="getProjectStatusTagType(baseInfo.statusCode)">
          {{ getProjectStatusLabel(baseInfo.statusCode) }}
        </ElTag>
      </ElDescriptionsItem>
      <ElDescriptionsItem label="项目说明" :span="2">
        <div class="project-setting-base-info-card__description">{{ baseInfo.projectDesc || '--' }}</div>
      </ElDescriptionsItem>
    </ElDescriptions>

    <ElEmpty v-else description="未获取到基础信息" />
  </ElCard>
</template>

<style scoped>
.project-setting-base-info-card__description {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.7;
}
</style>
