<script lang="ts" setup>
/**
 * 仓库修改记录详情：展示操作前后药品快照 JSON
 */
import { ref } from 'vue';

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

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

import { getWarehouseDrugChangeLogDetail } from '../api';

const data = ref<Record<string, any>>({});
const loading = ref(false);

function formatSnapshot(snap: unknown): string {
  if (snap == null || snap === '') {
    return '（无）';
  }
  try {
    return JSON.stringify(snap, null, 2);
  } catch {
    return String(snap);
  }
}

const [Modal, modalApi] = useVbenModal({
  fullscreenButton: true,
  draggable: true,
  showConfirmButton: false,
  cancelText: '关闭',
  onCancel() {
    modalApi.close();
  },
  async onOpenChange(isOpen: boolean) {
    if (!isOpen) {
      data.value = {};
      return;
    }
    const payload = modalApi.getData<{ id?: number; values?: Record<string, any> }>();
    const id = Number(payload?.id || payload?.values?.id || 0);
    if (id <= 0) {
      data.value = payload?.values || {};
      return;
    }
    loading.value = true;
    modalApi.setState({ loading: true });
    try {
      const res = await getWarehouseDrugChangeLogDetail(id);
      data.value = res?.data || res || {};
    } catch {
      data.value = payload?.values || {};
    } finally {
      loading.value = false;
      modalApi.setState({ loading: false });
    }
  },
});
</script>

<template>
  <Modal class="w-[90%] md:w-[720px]" title="仓库修改记录详情">
    <Descriptions
      :column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }"
      bordered
      size="small"
    >
      <Descriptions.Item label="ID">{{ data.id }}</Descriptions.Item>
      <Descriptions.Item label="操作时间">{{ data.created_at }}</Descriptions.Item>
      <Descriptions.Item label="操作人">
        {{ data.operator_name || '-' }}（ID: {{ data.operator_id || 0 }}）
      </Descriptions.Item>
      <Descriptions.Item label="用户类型">
        <Tag>{{ data.user_type_txt || data.user_type }}</Tag>
      </Descriptions.Item>
      <Descriptions.Item label="变更类型">
        <Tag color="blue">{{ data.change_type_txt || data.change_type }}</Tag>
      </Descriptions.Item>
      <Descriptions.Item label="门店ID">{{ data.store_id || 0 }}</Descriptions.Item>
      <Descriptions.Item label="药品名称">{{ data.drug_name || '-' }}</Descriptions.Item>
      <Descriptions.Item label="药品编码">{{ data.drug_number || '-' }}</Descriptions.Item>
      <Descriptions.Item label="药品ID">{{ data.drug_id || 0 }}</Descriptions.Item>
      <Descriptions.Item label="仓库药品ID">{{ data.store_drug_id || 0 }}</Descriptions.Item>
      <Descriptions.Item label="批次号" :span="2">{{ data.batch_no || '-' }}</Descriptions.Item>
      <Descriptions.Item label="备注" :span="2">{{ data.remark || '-' }}</Descriptions.Item>
      <Descriptions.Item label="IP" :span="2">{{ data.ip || '-' }}</Descriptions.Item>
      <Descriptions.Item label="操作前快照" :span="2">
        <pre class="snap-pre">{{ formatSnapshot(data.before_snapshot) }}</pre>
      </Descriptions.Item>
      <Descriptions.Item label="操作后快照" :span="2">
        <pre class="snap-pre">{{ formatSnapshot(data.after_snapshot) }}</pre>
      </Descriptions.Item>
    </Descriptions>
  </Modal>
</template>

<style scoped>
.snap-pre {
  margin: 0;
  max-height: 280px;
  overflow: auto;
  padding: 8px;
  border-radius: 6px;
  background: hsl(var(--muted) / 0.4);
  white-space: pre-wrap;
  word-break: break-all;
  font-size: 12px;
  line-height: 1.5;
}
</style>
