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

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

defineOptions({ name: 'ReconciliationDetailTable' });

const props = defineProps<{
  hint?: string;
  items: Record<string, any>[];
  sumSalesPrice?: string;
  sumSupplyPrice?: string;
  summary?: Record<string, any> | null;
}>();

const columns = [
  { title: '药品名称', dataIndex: 'drug_name', key: 'drug_name' },
  { title: '药品编号', dataIndex: 'drug_number', key: 'drug_number' },
  { title: '数量', dataIndex: 'number', key: 'number', width: 80 },
  { title: '销售总价', dataIndex: 'total_price', key: 'total_price' },
  { title: '供货总价', dataIndex: 'total_buy_price', key: 'total_buy_price' },
  { title: '状态', dataIndex: 'status_txt', key: 'status_txt', width: 90 },
  { title: '对账时间', dataIndex: 'created_at', key: 'created_at', width: 170 },
];

function hasValue(v: unknown): boolean {
  if (v === null || v === undefined || v === '') return false;
  const n = Number(v);
  return !Number.isNaN(n) && n !== 0;
}

const displaySummary = computed(() => props.summary ?? null);

const totalSales = computed(
  () => displaySummary.value?.total_sales_price ?? props.sumSalesPrice,
);
const totalSupply = computed(
  () => displaySummary.value?.total_supply_price ?? props.sumSupplyPrice,
);

const showHerbal = computed(() => {
  const s = displaySummary.value;
  if (!s) return false;
  return hasValue(s.herbal_sales) || hasValue(s.herbal_sales_price) || hasValue(s.herbal_supply_price);
});

const showMedicine = computed(() => {
  const s = displaySummary.value;
  if (!s) return false;
  return hasValue(s.medicine_sales) || hasValue(s.medicine_sales_price) || hasValue(s.medicine_supply_price);
});

const showServicePackage = computed(() => {
  const s = displaySummary.value;
  if (!s) return false;
  return (
    hasValue(s.service_package_sales)
    || hasValue(s.service_package_sales_price)
    || hasValue(s.service_package_supply_price)
  );
});

const showOtherFees = computed(() => {
  const s = displaySummary.value;
  if (!s) return false;
  return hasValue(s.express_price) || hasValue(s.process_price) || hasValue(s.treatment_price);
});

const showRegistration = computed(() => hasValue(displaySummary.value?.registration_price));
</script>

<template>
  <div>
    <div v-if="displaySummary" class="mb-4">
      <div class="mb-3 flex flex-wrap gap-4 text-sm font-medium">
        <span>总销售额：{{ totalSales }}</span>
        <span>总供货额：{{ totalSupply }}</span>
        <span v-if="showRegistration">
          挂号费：{{ displaySummary?.registration_price }}
          <template v-if="displaySummary?.register_order_no">
            （{{ displaySummary.register_order_no }}）
          </template>
        </span>
      </div>

      <div class="mb-3 grid grid-cols-1 gap-3 md:grid-cols-2">
        <div v-if="showHerbal" class="rounded border border-gray-200 p-3 dark:border-gray-700">
          <div class="mb-2 text-sm font-medium">草药</div>
          <div class="flex flex-col gap-1">
            <Tag color="green">销售数量：{{ displaySummary?.herbal_sales }}</Tag>
            <Tag color="orange">销售总价：{{ displaySummary?.herbal_sales_price }}</Tag>
            <Tag color="red">供货总价：{{ displaySummary?.herbal_supply_price }}</Tag>
          </div>
        </div>
        <div v-if="showMedicine" class="rounded border border-gray-200 p-3 dark:border-gray-700">
          <div class="mb-2 text-sm font-medium">西药</div>
          <div class="flex flex-col gap-1">
            <Tag color="green">销售数量：{{ displaySummary?.medicine_sales }}</Tag>
            <Tag color="orange">销售总价：{{ displaySummary?.medicine_sales_price }}</Tag>
            <Tag color="red">供货总价：{{ displaySummary?.medicine_supply_price }}</Tag>
          </div>
        </div>
        <div v-if="showServicePackage" class="rounded border border-gray-200 p-3 dark:border-gray-700">
          <div class="mb-2 text-sm font-medium">服务包</div>
          <div class="flex flex-col gap-1">
            <Tag color="green">销售数量：{{ displaySummary?.service_package_sales }}</Tag>
            <Tag color="orange">销售总价：{{ displaySummary?.service_package_sales_price }}</Tag>
            <Tag color="red">供货总价：{{ displaySummary?.service_package_supply_price }}</Tag>
          </div>
        </div>
        <div v-if="showOtherFees" class="rounded border border-gray-200 p-3 dark:border-gray-700">
          <div class="mb-2 text-sm font-medium">其他费用</div>
          <div class="flex flex-col gap-1">
            <Tag v-if="hasValue(displaySummary?.express_price)" color="green">
              快递费：{{ displaySummary?.express_price }}
            </Tag>
            <Tag v-if="hasValue(displaySummary?.process_price)" color="green">
              加工费：{{ displaySummary?.process_price }}
            </Tag>
            <Tag v-if="hasValue(displaySummary?.treatment_price)" color="green">
              诊疗费：{{ displaySummary?.treatment_price }}
            </Tag>
          </div>
        </div>
      </div>
    </div>

    <div v-else-if="sumSalesPrice != null" class="mb-3 flex gap-4 text-sm">
      <span>销售总价合计：{{ sumSalesPrice }}</span>
      <span>供货总价合计：{{ sumSupplyPrice }}</span>
    </div>

    <div v-if="items.length" class="mb-2 text-sm font-medium">药品明细</div>
    <Table
      :columns="columns"
      :data-source="items"
      :pagination="false"
      row-key="id"
      size="small"
    />
    <div
      v-if="!items.length && !displaySummary"
      class="py-8 text-center text-gray-500 dark:text-gray-400"
    >
      {{ hint || '订单尚未结算或无对账记录' }}
    </div>
    <div
      v-else-if="!items.length && displaySummary && !showHerbal && !showMedicine && !showServicePackage && !showOtherFees && !showRegistration"
      class="py-4 text-center text-gray-500 dark:text-gray-400"
    >
      {{ hint || '暂无药品对账明细' }}
    </div>
  </div>
</template>
