<script lang="ts" setup>
import { h, useTemplateRef } from 'vue';
import { NInputNumber, useDialog, useMessage } from 'naive-ui';
import { client, safeClient } from '@/service/api';
import { DepositTypeEnum } from '@/enum';
import type { TableBaseColumns, TableFetchData, TableInst } from '@/components/table';
import EditForm from './components/edit.vue';

const dialog = useDialog();
const message = useMessage();
const tableInst = useTemplateRef<TableInst>('tableInst');

const fetchData: TableFetchData = ({ pagination, filter }) => {
  return safeClient(() =>
    client.api.admin.users.get({
      query: {
        ...pagination,
        ...filter
      }
    })
  );
};

const columns: TableBaseColumns = [
  {
    title: '用户ID',
    key: 'userId'
  },
  {
    title: 'UID',
    key: 'uid'
  },
  {
    title: '用户名',
    key: 'nickname'
  },
  {
    title: '邮箱',
    key: 'user.email'
  },
  {
    title: '手机号',
    key: 'user.phoneNumber'
  },
  {
    title: '推荐人ID',
    key: 'referralCode'
  },
  {
    title: '性别',
    key: 'gender'
  },
  {
    title: '语言',
    key: 'language'
  },
  {
    title: '操作',
    fixed: 'right',
    key: 'operation',
    width: 100,
    operations: (row: any) => [
      {
        contentText: '编辑',
        type: 'primary',
        ghost: true,
        size: 'small',
        onClick: () => {
          handleEdit(row);
        }
      }
    ]
  }
];

const filterColumns: TableBaseColumns = [
  {
    title: '用户ID',
    key: 'userId'
  },
  {
    title: '用户名',
    key: 'nickname'
  },
  {
    title: '邮箱',
    key: 'email'
  },
  {
    title: '手机号',
    key: 'phoneNumber'
  },
  {
    title: '推荐人ID',
    key: 'referralCode'
  }
];

function handleEdit(row: any) {
  const dialogInstance = dialog.create({
    title: '编辑用户',
    content: () =>
      h(EditForm, {
        data: row,
        onClose: () => {
          dialogInstance.destroy();
          tableInst.value?.reload();
        }
      }),
    style: { width: '700px' },
    showIcon: false
  });
}
</script>

<template>
  <TableBase
    ref="tableInst"
    show-header-operation
    :columns="columns"
    :fetch-data="fetchData"
    :filter-columns="filterColumns"
    :scroll-x="1400"
    :header-operations="{
      add: false,
      refresh: true,
      columns: true
    }"
  />
</template>

<style lang="css" scoped></style>
