<script lang="ts" setup>
/**
 * 接诊进病历：患者档案史与当前病历史不一致时，预览并确认是否导入
 * 用 VbenModal 展示差异对照，确认后把档案侧内容写回病历草稿
 */
import { ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

export type HistoryImportDiffItem = {
  field: string;
  label: string;
  current: string;
  import: string;
};

const rows = ref<HistoryImportDiffItem[]>([]);
const onConfirmCb = ref<((list: HistoryImportDiffItem[]) => void) | null>(
  null,
);
const onCancelCb = ref<(() => void) | null>(null);

const [Modal, modalApi] = useVbenModal({
  title: '导入患者档案病史？',
  class: 'w-[640px]',
  draggable: true,
  confirmText: '确认导入',
  cancelText: '暂不导入',
  closeOnClickModal: false,
  onConfirm() {
    const list = rows.value.slice();
    const cb = onConfirmCb.value;
    modalApi.close();
    cb?.(list);
  },
  onCancel() {
    onCancelCb.value?.();
  },
  onOpenChange(isOpen: boolean) {
    if (!isOpen) {
      rows.value = [];
      onConfirmCb.value = null;
      onCancelCb.value = null;
      return;
    }
    const data = modalApi.getData<{
      rows?: HistoryImportDiffItem[];
      onConfirm?: (list: HistoryImportDiffItem[]) => void;
      onCancel?: () => void;
    }>();
    rows.value = Array.isArray(data?.rows) ? data!.rows! : [];
    onConfirmCb.value = data?.onConfirm || null;
    onCancelCb.value = data?.onCancel || null;
  },
});
</script>

<template>
  <Modal>
    <div class="hist-import">
      <p class="hist-import__tip">
        就诊人档案中的病史与当前病历不一致，请确认是否用档案内容覆盖对应字段（导入后仍需保存病历）。
      </p>
      <div
        v-for="row in rows"
        :key="row.field"
        class="hist-import__card"
      >
        <div class="hist-import__label">{{ row.label }}</div>
        <div class="hist-import__cols">
          <div class="hist-import__col">
            <span class="hist-import__tag">当前病历</span>
            <div class="hist-import__val">{{ row.current || '无' }}</div>
          </div>
          <div class="hist-import__col hist-import__col--import">
            <span class="hist-import__tag hist-import__tag--import">将导入</span>
            <div class="hist-import__val">{{ row.import || '无' }}</div>
          </div>
        </div>
      </div>
    </div>
  </Modal>
</template>

<style scoped>
/* 颜色一律主题变量，亮/暗色自动适配，禁止写死 #fff / #0f172a */
.hist-import__tip {
  margin: 0 0 12px;
  font-size: 13px;
  color: hsl(var(--muted-foreground));
  line-height: 1.5;
}
.hist-import__card {
  border: 1px solid hsl(var(--border));
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: hsl(var(--muted) / 0.25);
}
.hist-import__label {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  color: hsl(var(--foreground));
}
.hist-import__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.hist-import__col {
  background: hsl(var(--card, var(--background)));
  border-radius: 6px;
  padding: 8px 10px;
  border: 1px solid hsl(var(--border));
}
.hist-import__col--import {
  border-color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.1);
}
.hist-import__tag {
  display: inline-block;
  font-size: 11px;
  color: hsl(var(--muted-foreground));
  margin-bottom: 4px;
}
.hist-import__tag--import {
  color: hsl(var(--primary));
  font-weight: 600;
}
.hist-import__val {
  font-size: 13px;
  color: hsl(var(--foreground));
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.45;
}
</style>
