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

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

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

import { getSelfUserBindListApi } 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 columns = [
  { title: '用户昵称', dataIndex: 'user_nick_name', key: 'user_nick_name' },
  { title: '手机号', dataIndex: 'user_phone', key: 'user_phone' },
  { title: '绑定时间', dataIndex: 'bind_at_text', key: 'bind_at_text' },
];

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