<script lang="ts" setup>
import { h, ref, useTemplateRef } from 'vue';
import { NDatePicker, NInputNumber, useDialog, useMessage } from 'naive-ui';
import dayjs from 'dayjs';
import { client, safeClient } from '@/service/api';
import type { TableBaseColumns, TableFetchData, 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.bank_account.banks.get({
      query: {
        ...pagination,
        ...filter
      }
    })
  );
};

const columns: TableBaseColumns = [
  {
    title: 'ID',
    key: 'id'
  },
  {
    title: '银行名称',
    key: 'nameCn'
  },
  {
    title: 'nameEn',
    key: 'nameEn'
  },
  {
    title: 'bankCode',
    key: 'bankCode'
  },
  {
    title: 'swiftCode',
    key: 'swiftCode'
  },
  {
    title: 'isActive',
    key: 'isActive'
  },
  {
    title: 'sortOrder',
    key: 'sortOrder'
  },
  {
    title: 'createdAt',
    key: 'createdAt',
    render(row: any) {
      return h('span', {}, row.createdAt ? dayjs(row.createdAt).format('YYYY-MM-DD HH:mm:ss') : '-');
    }
  },
  {
    title: 'updatedAt',
    key: 'updatedAt',
    render(row: any) {
      return h('span', {}, row.updatedAt ? dayjs(row.updatedAt).format('YYYY-MM-DD HH:mm:ss') : '-');
    }
  },
  {
    title: 'deletedAt',
    key: 'deletedAt',
    render(row: any) {
      return h('span', {}, row.deletedAt ? dayjs(row.deletedAt).format('YYYY-MM-DD HH:mm:ss') : '-');
    }
  },
  {
    title: '操作',
    fixed: 'right',
    key: 'operation',
    width: 160,
    operations: (row: any) => [
      {
        contentText: '编辑',
        type: 'primary',
        onClick: () => {
          tableInst.value?.reload();
        }
      },
      {
        contentText: '删除',
        type: 'error',
        ghost: true,
        size: 'small',
        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: '银行名称',
    key: 'nameCn'
  },
  {
    title: 'nameEn',
    key: 'nameEn'
  }
];
</script>

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

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