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

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

import { Empty, Input, Spin, Table } from 'ant-design-vue';

import { getSelfCommissionListApi } from '#/views/business/clinic-salesperson/api';

const loading = ref(true);
const list = ref<any[]>([]);
const total = ref(0);
const page = ref(1);
const pageSize = ref(20);
const orderNo = ref('');

const columns = [
  { title: '订单号', dataIndex: 'order_no', key: 'order_no', width: 180 },
  { title: '明细', dataIndex: 'drug_info', key: 'drug_info', ellipsis: true },
  { title: '服务费', dataIndex: 'commission_amount', key: 'commission_amount', width: 100 },
  { title: '状态', key: 'status', width: 90 },
  { title: '支付时间', dataIndex: 'order_pay_at_text', key: 'order_pay_at_text', width: 170 },
];

async function loadList() {
  loading.value = true;
  try {
    const res = await getSelfCommissionListApi({
      page: page.value,
      pageSize: pageSize.value,
      order_no: orderNo.value,
    });
    list.value = (res?.items ?? []).map((row: any) => ({
      ...row,
      drug_info: row.drug_info || `${row.drug_name} ×${row.qty}`,
    }));
    total.value = res?.total ?? 0;
  } finally {
    loading.value = false;
  }
}

onMounted(loadList);

function onPageChange(p: number, ps: number) {
  page.value = p;
  pageSize.value = ps;
  loadList();
}
</script>

<template>
  <Page auto-content-height title="服务费记录">
    <div class="mb-4">
      <Input
        v-model:value="orderNo"
        allow-clear
        class="w-60"
        placeholder="订单号"
        @press-enter="loadList"
      />
    </div>
    <Spin :spinning="loading">
      <Empty v-if="!loading && !list.length" description="暂无服务费记录" />
      <Table
        v-else
        :columns="columns"
        :data-source="list"
        :pagination="{
          current: page,
          pageSize,
          total,
          showSizeChanger: true,
          onChange: onPageChange,
        }"
        row-key="id"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'status'">
            {{ record.settlement_id > 0 ? '已结算' : '待结算' }}
          </template>
        </template>
      </Table>
    </Spin>
  </Page>
</template>
