<script setup lang="tsx">
import { NImage } from 'naive-ui';
import { fetchUserList } from '@/service/api/h5-manage/user-list';
import { fetchChannelList } from '@/service/api/h5-manage/channel-manage';
import { fetchBackendChannelSelect } from '@/service/api/xsb-manage/store-info';
import { useTable } from '@/components/zt/Table/hooks/useTable';

const columns: NaiveUI.TableColumn<Api.goods.ShopSku>[] = [
  {
    key: 'id',
    title: '用户ID',
    align: 'center'
  },
  {
    key: 'accessId',
    title: '渠道ID',
    align: 'center'
  },
  {
    key: 'accessName',
    title: '渠道',
    align: 'center'
  },

  {
    key: 'realName',
    title: '姓名',
    align: 'center'
  },
  {
    key: 'nickName',
    title: '用户昵称',
    align: 'center'
  },
  {
    key: 'avatarUrl',
    title: '头像',
    align: 'center',
    render: row => <NImage src={row.avatarUrl} class="h-[80px] min-w-80px w-[80px]" lazy />
  },
  {
    key: 'mobile',
    title: '手机号码',
    align: 'center'
  },
  {
    key: 'channelName',
    title: '企业',
    align: 'center'
  },
  {
    key: 'createTime',
    title: '注册时间',
    align: 'center'
  }
];

const [registerTable] = useTable({
  searchFormConfig: {
    schemas: [
      {
        field: 'mobile',
        label: '用户手机号',
        component: 'NInput'
      },
      {
        field: 'id',
        label: '用户ID',
        component: 'NInput'
      },
      {
        field: 'accessId',
        label: '渠道',
        component: 'ApiSelect',
        componentProps: {
          api: fetchChannelList,
          resultFeild: 'data.list',
          labelFeild: 'accessName',
          valueFeild: 'accessId'
        }
      },
      {
        label: '企业',
        field: 'channelId',
        component: 'ApiSelect',
        componentProps: {
          api: fetchBackendChannelSelect,
          multiple: true,
          labelFeild: 'name',
          valueFeild: 'id'
        }
      },
      {
        label: '注册时间',
        component: 'NDatePicker',
        field: 'createTime',
        componentProps: {
          type: 'datetimerange',
          defaultTime: ['00:00:00', '23:59:59']
        }
      }
    ],
    inline: false,
    size: 'small',
    labelPlacement: 'left',
    isFull: false
  },
  tableConfig: {
    keyField: 'id',
    title: '用户列表',
    showAddButton: false,
    fieldMapToTime: [['createTime', ['startTime', 'endTime']]]
  }
});
</script>

<template>
  <LayoutTable>
    <ZTable :columns="columns" :api="fetchUserList" :show-table-action="false" @register="registerTable"></ZTable>
  </LayoutTable>
</template>

<style scoped></style>
