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

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

import { getUserBindListApi } from '#/views/business/store/settings/api';

const props = defineProps<{
  salespersonId: number;
  open: boolean;
}>();

const loading = ref(false);
const list = ref<any[]>([]);
const total = ref(0);
const page = ref(1);
const pageSize = ref(10);

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() {
  if (!props.salespersonId) return;
  loading.value = true;
  try {
    const res = await getUserBindListApi({
      salesperson_id: props.salespersonId,
      page: page.value,
      pageSize: pageSize.value,
    });
    list.value = res?.items ?? [];
    total.value = res?.total ?? 0;
  } finally {
    loading.value = false;
  }
}

watch(
  () => [props.open, props.salespersonId],
  ([open]) => {
    if (open) {
      page.value = 1;
      loadList();
    }
  },
  { immediate: true },
);

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

<template>
  <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"
      size="small"
    />
  </Spin>
</template>
