<script lang="ts" setup>
import { computed } from 'vue';

import { Image, Tag } from 'ant-design-vue';

/** 患者选方记录（含特色方封面、SKU 等） */
const props = withDefaults(
  defineProps<{
    record: Record<string, any> | null;
    purchaseLabel?: string;
    loading?: boolean;
    /** 是否可点击导入（有待导入/已应用记录时） */
    clickable?: boolean;
  }>(),
  {
    purchaseLabel: '',
    loading: false,
    clickable: true,
  },
);

const emit = defineEmits<{
  apply: [];
}>();

/** 封面图 */
const coverImage = computed(
  () => props.record?.special_prescription?.cover_image || '',
);
/** 药方名称 */
const prescriptionName = computed(
  () => props.record?.special_prescription?.name || '特色方',
);
/** 状态文案与颜色 */
const statusMeta = computed(() => {
  const status = Number(props.record?.status ?? -1);
  if (status === 0) return { text: '待导入', color: 'orange' as const };
  if (status === 1) return { text: '已应用', color: 'green' as const };
  return { text: '已完成', color: 'default' as const };
});

/**
 * 点击卡片触发导入
 * loading 或不可点击时不响应
 */
function handleCardClick() {
  if (!props.clickable || props.loading) return;
  emit('apply');
}
</script>

<template>
  <div
    v-if="record"
    class="sp-import-card mt-4 rounded-lg border p-3 transition-shadow
      bg-[#fffaf5] border-[#ffe0c2]
      dark:bg-[#2c2419] dark:border-[#5c4a32]"
    :class="{
      'sp-import-card--clickable cursor-pointer hover:shadow-md dark:hover:shadow-[0_2px_8px_rgba(255,152,0,0.25)]':
        clickable && !loading,
      'sp-import-card--loading': loading,
    }"
    @click="handleCardClick"
  >
    <div
      class="sp-import-card__hint mb-2.5 text-[13px] text-[#fa8c16] dark:text-[#ffa940]"
    >
      点击卡片导入药方
    </div>
    <div class="sp-import-card__body flex flex-wrap items-center gap-4">
      <Image
        v-if="coverImage"
        :src="coverImage"
        :width="80"
        :height="80"
        class="sp-import-card__cover shrink-0 rounded object-cover"
      />
      <div
        v-else
        class="sp-import-card__cover sp-import-card__cover--placeholder flex h-20 w-20 shrink-0 items-center justify-center rounded text-xs
          bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-400"
      >
        无封面
      </div>
      <div class="sp-import-card__info min-w-0 flex-1">
        <div
          class="sp-import-card__name text-base font-semibold text-gray-900 dark:text-gray-100"
        >
          {{ prescriptionName }}
        </div>
        <div
          class="sp-import-card__sku mt-1 text-sm text-gray-600 dark:text-gray-400"
        >
          规格：{{ purchaseLabel || '单剂' }}
        </div>
        <Tag class="sp-import-card__tag mt-2" :color="statusMeta.color">
          {{ statusMeta.text }}
        </Tag>
      </div>
    </div>
  </div>
</template>

<style scoped>
.sp-import-card--loading {
  opacity: 0.75;
  pointer-events: none;
}
</style>
