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

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

import { Button, Drawer, Empty, Image, Spin, Table } from 'ant-design-vue';

import {
  getSelfSettlementDetailApi,
  getSelfSettlementListApi,
} 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 detailVisible = ref(false);
const detailLoading = ref(false);
const detail = ref<any>(null);

const columns = [
  { title: '结算单号', dataIndex: 'settlement_no', key: 'settlement_no', width: 180 },
  { title: '方式', dataIndex: 'settlement_type_text', key: 'settlement_type_text', width: 100 },
  { title: '金额', dataIndex: 'amount', key: 'amount', width: 100 },
  { title: '明细数', dataIndex: 'record_count', key: 'record_count', width: 80 },
  { title: '时间', dataIndex: 'created_at_text', key: 'created_at_text', width: 170 },
  { title: '操作', key: 'action', width: 80 },
];

async function loadList() {
  loading.value = true;
  try {
    const res = await getSelfSettlementListApi({
      page: page.value,
      pageSize: pageSize.value,
    });
    list.value = res?.items ?? [];
    total.value = res?.total ?? 0;
  } finally {
    loading.value = false;
  }
}

onMounted(loadList);

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

async function openDetail(id: number) {
  detailVisible.value = true;
  detailLoading.value = true;
  try {
    detail.value = await getSelfSettlementDetailApi({ id });
  } finally {
    detailLoading.value = false;
  }
}
</script>

<template>
  <Page auto-content-height title="结算记录">
    <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 === 'action'">
            <Button size="small" type="link" @click="openDetail(record.id)">
              详情
            </Button>
          </template>
        </template>
      </Table>
    </Spin>

    <Drawer v-model:open="detailVisible" title="结算详情" width="640">
      <Spin :spinning="detailLoading">
        <template v-if="detail">
          <p>结算单号：{{ detail.settlement_no }}</p>
          <p>结算金额：¥{{ detail.amount }}</p>
          <p>明细条数：{{ detail.record_count }}</p>
          <p v-if="detail.remark">备注：{{ detail.remark }}</p>
          <div v-if="detail.proof_images?.length" class="mt-4">
            <p class="mb-2">结算凭证</p>
            <Image.PreviewGroup>
              <Image
                v-for="(img, idx) in detail.proof_images"
                :key="idx"
                :src="img"
                :width="100"
                class="mr-2"
              />
            </Image.PreviewGroup>
          </div>
        </template>
      </Spin>
    </Drawer>
  </Page>
</template>
