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

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

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

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

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

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

<template>
  <Modal class="w-[90%] md:w-[640px]" title="仓库价格修改日志详情">
    <Descriptions bordered :column="2" size="small">
      <Descriptions.Item label="ID">{{ data.id }}</Descriptions.Item>
      <Descriptions.Item label="类型">{{ data.type_txt }}</Descriptions.Item>
      <Descriptions.Item label="操作人">{{ data.operator_name || data.user_id }}</Descriptions.Item>
      <Descriptions.Item label="药品">{{ data.drug_name || data.drug_id }}</Descriptions.Item>
      <Descriptions.Item label="编码">{{ data.drug_number || '-' }}</Descriptions.Item>
      <Descriptions.Item label="门店ID">{{ data.store_id }}</Descriptions.Item>
      <Descriptions.Item label="原供货价">{{ data.old_buy }}</Descriptions.Item>
      <Descriptions.Item label="新供货价">{{ data.new_buy }}</Descriptions.Item>
      <Descriptions.Item label="原售价">{{ data.old_price }}</Descriptions.Item>
      <Descriptions.Item label="新售价">{{ data.new_price }}</Descriptions.Item>
      <Descriptions.Item label="IP" :span="2">{{ data.ip }} {{ data.ip_address }}</Descriptions.Item>
      <Descriptions.Item label="时间" :span="2">{{ data.created_at }}</Descriptions.Item>
    </Descriptions>
  </Modal>
</template>
