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

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

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

const columns: TableBaseColumns = [
  {
    title: 'ID',
    key: 'id'
  },
  {
    title: '用户ID',
    key: 'userId'
  },
  {
    title: '用户名',
    key: 'user.email'
  },
  {
    title: '资产代码',
    key: 'assetCode'
  },
  {
    title: '充值类型',
    key: 'depositType',
    render(row) {
      return DepositTypeEnum[row.depositType as keyof typeof DepositTypeEnum];
    }
  },
  {
    title: '金额',
    key: 'amount',
    render: row => {
      return Number(row.amount).toFixed(2);
    }
  },
  {
    title: '操作',
    fixed: 'right',
    key: 'operation',
    width: 160,
    operations: (row: any) => [
      {
        contentText: '通过',
        type: 'primary',
        strong: true,
        secondary: true,
        visible: row.status !== 'approved',
        onClick: async () => {
          dialog.create({
            title: '提示',
            positiveText: '是',
            negativeText: '否',
            content: '确认通过该充值请求吗？',
            onPositiveClick: async () => {
              await safeClient(() =>
                client.api.admin.deposit.approve({ orderId: row.id as string }).post({
                  actualAmount: row.amount
                })
              );
              tableInst.value?.reload();
              message.success('充值通过成功');
            }
          });
        }
      },
      {
        contentText: '拒绝',
        type: 'error',
        ghost: true,
        onClick: async () => {
          dialog.create({
            title: '提示',
            positiveText: '是',
            negativeText: '否',
            content: '确认拒绝该充值请求吗？',
            onPositiveClick: async () => {
              safeClient(() =>
                client.api.admin.deposit.reject({ orderId: row.id as string }).post({
                  reviewNote: '管理员拒绝充值'
                })
              );
              tableInst.value?.reload();
              message.success('充值拒绝成功');
            }
          });
        }
      }
    ]
  }
];

const filterColumns: TableFilterColumns = [
  {
    title: '用户ID',
    key: 'userId'
  },
  {
    title: '资产代码',
    key: 'assetCode'
  },
  {
    title: '充值类型',
    key: 'depositType',
    component: NSelect,
    componentProps: {
      options: [
        { label: '法币充值', value: 'fiat' },
        { label: '加密货币充值', value: 'crypto' }
      ]
    }
  }
];
</script>

<template>
  <TableBase
    ref="tableInst"
    :columns="columns"
    :fetch-data="fetchData"
    show-header-operation
    :filter-columns="filterColumns"
  />
</template>

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