<script setup>
/**
 * 诊所复诊 type11 follow_up_drug 助理用药确认卡
 * 展示问题、药品、是否用过、适用症/补充；可一键导入处方单
 */
import { computed } from 'vue';
import { Button } from 'ant-design-vue';

const props = defineProps({
  content: {
    type: Object,
    required: true,
  },
  /** 是否展示「添加到处方单」（接诊中且有药） */
  showAddToRx: {
    type: Boolean,
    default: false,
  },
  addToRxLoading: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(['add-to-rx']);

const data = computed(() =>
  typeof props.content === 'string'
    ? (() => {
        try {
          return JSON.parse(props.content);
        } catch {
          return {};
        }
      })()
    : props.content || {},
);

const answeredLabel = computed(() => {
  const st = data.value.answer_status;
  if (st === 'yes' || st === '1') return '是，曾使用过';
  if (st === 'no' || st === '0') return '否，未使用过';
  return '';
});

/** 是否就诊过：有明确 0/1 才展示 */
const visitedLabel = computed(() => {
  const v = data.value.has_visited;
  if (v === 1 || v === '1') return '是';
  if (v === 0 || v === '0') return '否';
  return '';
});

const drugs = computed(() =>
  Array.isArray(data.value.drugs) ? data.value.drugs : [],
);

/** 适用症文案（有值才展示） */
const illnessInfo = computed(() => {
  const v = data.value.illness_info;
  return v != null && String(v).trim() ? String(v).trim() : '';
});

/**
 * 补充信息：优先独立字段；若 illness_info 已含「；补充：」且无独立字段则不重复展示
 */
const supplementText = computed(() => {
  const v = data.value.supplement;
  if (v != null && String(v).trim()) return String(v).trim();
  return '';
});

const canShowAddBtn = computed(
  () => props.showAddToRx && drugs.value.length > 0,
);
</script>

<template>
  <div class="follow-up-drug-card">
    <div class="card-head">
      <div class="head-icon">
        <i class="fas fa-user-md"></i>
      </div>
      <div class="head-text">
        <div class="title">医生助理 · 用药确认</div>
        <div v-if="data.flow === 'follow_up_drug'" class="sub">复诊用药</div>
      </div>
    </div>

    <div v-if="data.question" class="question-block">
      {{ data.question }}
    </div>

    <div v-if="drugs.length" class="drug-list">
      <div class="drug-list-title">涉及药品</div>
      <ul>
        <li v-for="(row, idx) in drugs" :key="idx">
          <span class="name">{{ row.name || '药品' }}</span>
          <span class="qty">×{{ row.quantity != null ? row.quantity : 1 }}</span>
        </li>
      </ul>
    </div>

    <div v-if="answeredLabel" class="answer-row">
      <span class="label">患者回复</span>
      <span class="value">{{ answeredLabel }}</span>
    </div>

    <div v-if="visitedLabel" class="answer-row">
      <span class="label">是否就诊过</span>
      <span class="value">{{ visitedLabel }}</span>
    </div>

    <div v-if="illnessInfo" class="info-block">
      <div class="info-block-label">适用症/症状</div>
      <div class="info-block-content">{{ illnessInfo }}</div>
    </div>

    <div v-if="supplementText" class="info-block">
      <div class="info-block-label">补充信息</div>
      <div class="info-block-content">{{ supplementText }}</div>
    </div>

    <div
      v-else-if="!answeredLabel && data.answer_status === 'pending'"
      class="pending-tip"
    >
      待患者在小程序端填写用药信息
    </div>

    <div v-if="canShowAddBtn" class="add-rx-wrap">
      <Button
        :loading="addToRxLoading"
        block
        size="small"
        type="primary"
        ghost
        @click.stop="emit('add-to-rx')"
      >
        <i class="fas fa-plus-circle mr-1"></i>
        添加到处方单
      </Button>
    </div>
  </div>
</template>

<style scoped>
.follow-up-drug-card {
  @apply w-full max-w-md rounded-xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-600 dark:bg-slate-800;
}

.card-head {
  @apply mb-3 flex items-center gap-3;
}

.head-icon {
  @apply flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-full bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-300;
}

.head-text .title {
  @apply text-base font-semibold text-slate-800 dark:text-slate-100;
}

.head-text .sub {
  @apply mt-0.5 text-xs text-slate-500 dark:text-slate-400;
}

.question-block {
  @apply mb-3 rounded-lg bg-slate-50 p-3 text-sm leading-relaxed text-slate-700 dark:bg-slate-900/60 dark:text-slate-200;
}

.drug-list {
  @apply mb-3 border-t border-slate-100 pt-3 dark:border-slate-600;
}

.drug-list-title {
  @apply mb-2 text-xs font-medium uppercase tracking-wide text-slate-500 dark:text-slate-400;
}

.drug-list ul {
  @apply m-0 list-none space-y-2 p-0;
}

.drug-list li {
  @apply flex items-center justify-between text-sm text-slate-800 dark:text-slate-100;
}

.drug-list .name {
  @apply min-w-0 flex-1 truncate pr-2;
}

.drug-list .qty {
  @apply flex-shrink-0 font-medium text-slate-600 dark:text-slate-300;
}

.answer-row {
  @apply mb-3 flex items-center justify-between rounded-lg bg-emerald-50 px-3 py-2 text-sm dark:bg-emerald-900/30;
}

.answer-row .label {
  @apply text-slate-600 dark:text-slate-400;
}

.answer-row .value {
  @apply font-medium text-emerald-800 dark:text-emerald-300;
}

.info-block {
  @apply mb-3 rounded-lg bg-slate-50 px-3 py-2 dark:bg-slate-900/50;
}

.info-block-label {
  @apply mb-1 text-xs text-slate-500 dark:text-slate-400;
}

.info-block-content {
  @apply text-sm leading-relaxed text-slate-800 dark:text-slate-100;
}

.pending-tip {
  @apply rounded-lg border border-dashed border-amber-200 bg-amber-50 px-3 py-2 text-center text-xs text-amber-800 dark:border-amber-700 dark:bg-amber-900/20 dark:text-amber-200;
}

.add-rx-wrap {
  @apply mt-3 border-t border-slate-100 pt-3 dark:border-slate-600;
}
</style>
