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

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

import { Button, Empty, Spin, Table, Tag, Tooltip } from 'ant-design-vue';

import DetailModal from './components/DetailModal.vue';
import SensitiveText from '#/components/sensitive-text/SensitiveText.vue';
import { getSalespersonTransferListApi } from './api';

const loading = ref(true);
const list = ref<any[]>([]);
const total = ref(0);
const page = ref(1);
const pageSize = ref(20);
const detailRef = ref<InstanceType<typeof DetailModal>>();

function statusTag(status: number, text: string) {
  const colorMap: Record<number, string> = {
    0: 'warning',
    1: 'processing',
    2: 'success',
    3: 'error',
  };
  return h(Tag, { color: colorMap[status] || 'default' }, () => text || '—');
}

const columns = [
  { title: '诊所', dataIndex: 'store_name', key: 'store_name', width: 120 },
  { title: '推广员', dataIndex: 'salesperson_name', key: 'salesperson_name', width: 100 },
  {
    title: '患者',
    key: 'patient',
    width: 140,
    customRender: ({ record }: any) =>
      h('span', { class: 'inline-flex items-center gap-1 flex-wrap' }, [
        record.patient_name || '',
        h(SensitiveText, { record, field: 'patient_mobile', showEye: false }),
      ]),
  },
  {
    title: '方式',
    dataIndex: 'transfer_mode_text',
    key: 'transfer_mode_text',
    width: 90,
  },
  { title: '传方时间', dataIndex: 'transfer_time_text', key: 'transfer_time_text', width: 160 },
  {
    title: '处理状态',
    key: 'status',
    width: 90,
    customRender: ({ record }: any) =>
      statusTag(Number(record.status), record.status_text),
  },
  {
    title: '备注',
    dataIndex: 'remark',
    key: 'remark',
    width: 120,
    ellipsis: true,
    customRender: ({ record }: any) => record.remark || '—',
  },
  {
    title: '异常信息',
    key: 'exception_message',
    width: 120,
    customRender: ({ record }: any) =>
      record.exception_message
        ? h(Tooltip, { title: record.exception_message }, () =>
            h('span', { class: 'text-red-500 truncate block max-w-[100px]' }, record.exception_message),
          )
        : '—',
  },
  {
    title: '处方',
    key: 'action',
    width: 80,
    fixed: 'right' as const,
    customRender: ({ record }: any) =>
      h(Button, { type: 'link', onClick: () => detailRef.value?.open(record.id) }, () => '查看'),
  },
];

async function loadList() {
  loading.value = true;
  try {
    const res = await getSalespersonTransferListApi({
      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();
}
</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"
        :scroll="{ x: 1100 }"
        :pagination="{
          current: page,
          pageSize,
          total,
          showSizeChanger: true,
          onChange: onPageChange,
        }"
        row-key="id"
      />
    </Spin>
    <DetailModal ref="detailRef" />
  </Page>
</template>
