<script setup lang="ts">
import { computed } from 'vue';
import { RDMS_OBJECT_DIRECTION_DICT_CODE } from '@/constants/dict';
import DictText from '@/components/custom/dict-text.vue';
import { getProductStatusLabel, getProductStatusTagType } from '../../shared/product-master-data';
import { isProductBaseInfoEditable } from '../shared';

defineOptions({ name: 'SettingBaseInfoCard' });

interface Props {
  baseInfo: Api.Product.ProductSettingBaseInfo | null;
}

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

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

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

  return !isProductBaseInfoEditable(props.baseInfo.statusCode);
});
</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
          v-auth="{ code: 'project:product:update', source: 'object' }"
          type="primary"
          plain
          :disabled="editDisabled"
          @click="emit('edit')"
        >
          编辑基础信息
        </ElButton>
      </div>
    </template>

    <ElDescriptions v-if="baseInfo" :column="2" border>
      <ElDescriptionsItem label="产品编码">{{ baseInfo.code || '--' }}</ElDescriptionsItem>
      <ElDescriptionsItem label="产品名称">{{ baseInfo.name || '--' }}</ElDescriptionsItem>
      <ElDescriptionsItem label="产品方向">
        <DictText :dict-code="RDMS_OBJECT_DIRECTION_DICT_CODE" :value="baseInfo.directionCode" />
      </ElDescriptionsItem>
      <ElDescriptionsItem label="产品经理">
        {{ baseInfo.managerUserNickname || baseInfo.managerUserId || '--' }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="当前状态">
        <ElTag :type="getProductStatusTagType(baseInfo.statusCode)">
          {{ getProductStatusLabel(baseInfo.statusCode) }}
        </ElTag>
      </ElDescriptionsItem>
      <ElDescriptionsItem label="最近状态原因">{{ baseInfo.lastStatusReason || '--' }}</ElDescriptionsItem>
      <ElDescriptionsItem label="产品描述" :span="2">
        <div class="setting-base-info-card__description">{{ baseInfo.description || '--' }}</div>
      </ElDescriptionsItem>
    </ElDescriptions>

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

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