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

import { useVbenModal } from '@vben/common-ui';
import { Tag } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getWalletTransactionList } from '#/api/agent';

interface ModalData {
  agentId: number;
}

const [Modal, modalApi] = useVbenModal({
  title: '钱包流水记录',
  destroyOnClose: true,
});

const modalData = computed(() => modalApi.getData<ModalData>());

// 交易类型映射
const transactionTypeMap: Record<string, { label: string; color: string }> = {
  commission: { label: '佣金收入', color: 'green' },
  withdraw: { label: '提现', color: 'red' },
  freeze: { label: '冻结', color: 'orange' },
  unfreeze: { label: '解冻', color: 'blue' },
  reward: { label: '奖励', color: 'green' },
  refund: { label: '退款', color: 'purple' },
  adjust: { label: '调整', color: 'cyan' },
};

// 获取交易类型标签
function getTransactionTypeTag(type: string) {
  const config = transactionTypeMap[type] || { label: type, color: 'default' };
  return h(Tag, { color: config.color }, config.label);
}

// 获取金额显示
function getAmountCellRender(params: any) {
  const amount = params.row.amount;
  const isPositive = amount >= 0;
  const color = isPositive ? '#52c41a' : '#ff4d4f';
  const sign = isPositive ? '+' : '';
  return h('span', { style: { color, fontWeight: 'bold' } }, `${sign}${amount.toFixed(2)}`);
}

// 表格列配置
const columns = [
  {
    field: 'id',
    title: '流水ID',
    width: 80,
  },
  {
    field: 'transaction_type',
    title: '交易类型',
    width: 120,
    cellRender: {
      name: 'CustomRender',
      render: getTransactionTypeTag,
    },
  },
  {
    field: 'amount',
    title: '变动金额',
    width: 120,
    cellRender: {
      name: 'CustomRender',
      render: getAmountCellRender,
    },
  },
  {
    field: 'balance_before',
    title: '变动前余额',
    width: 120,
    formatter: ({ cellValue }: any) => `¥${Number(cellValue || 0).toFixed(2)}`,
  },
  {
    field: 'balance_after',
    title: '变动后余额',
    width: 120,
    formatter: ({ cellValue }: any) => `¥${Number(cellValue || 0).toFixed(2)}`,
  },
  {
    field: 'frozen_balance_before',
    title: '变动前冻结',
    width: 120,
    formatter: ({ cellValue }: any) => `¥${Number(cellValue || 0).toFixed(2)}`,
  },
  {
    field: 'frozen_balance_after',
    title: '变动后冻结',
    width: 120,
    formatter: ({ cellValue }: any) => `¥${Number(cellValue || 0).toFixed(2)}`,
  },
  {
    field: 'transaction_id',
    title: '关联交易ID',
    width: 150,
    formatter: ({ cellValue }: any) => cellValue || '-',
  },
  {
    field: 'remark',
    title: '备注',
    width: 200,
    formatter: ({ cellValue }: any) => cellValue || '-',
  },
  {
    field: 'create_time',
    title: '创建时间',
    width: 180,
  },
];

const [Grid] = useVbenVxeGrid({
  formOptions: {
    schema: [
      {
        component: 'Input',
        fieldName: 'transaction_type',
        label: '交易类型',
        help: '如: commission, withdraw, freeze, unfreeze, reward, refund, adjust',
      },
      {
        component: 'DatePicker',
        componentProps: {
          format: 'YYYY-MM-DD HH:mm:ss',
          showTime: true,
          valueFormat: 'YYYY-MM-DD HH:mm:ss',
        },
        fieldName: 'create_time_start',
        label: '开始时间',
      },
      {
        component: 'DatePicker',
        componentProps: {
          format: 'YYYY-MM-DD HH:mm:ss',
          showTime: true,
          valueFormat: 'YYYY-MM-DD HH:mm:ss',
        },
        fieldName: 'create_time_end',
        label: '结束时间',
      },
    ],
    submitOnChange: true,
  },
  gridOptions: {
    columns,
    height: 600,
    maxHeight: 800,
    keepSource: true,
    pagerConfig: {
      enabled: true,
      pageSize: 20,
      pageSizes: [10, 20, 50, 100],
      layouts: ['Total', 'Sizes', 'PrevJump', 'Number', 'NextJump', 'FullJump'],
    },
    proxyConfig: {
      ajax: {
        query: async ({ page }: { page: { currentPage: number; pageSize: number } }, formValues: Record<string, any>) => {
          return await getWalletTransactionList({
            agent_id: modalData.value?.agentId || 0,
            ...formValues,
            page: page.currentPage,
            pageSize: page.pageSize,
          });
        },
      },
      props: {
        result: 'items',
        total: 'total',
      },
      autoLoad: true,
    },
    rowConfig: {
      keyField: 'id',
    },
    toolbarConfig: {
      custom: true,
      export: false,
      refresh: { code: 'query' },
      search: true,
      zoom: true,
    },
  },
});
</script>

<template>
  <Modal class="w-[calc(100vw-200px)]" :footer="false">
    <div class="wallet-transaction-modal">
      <Grid table-title="钱包流水记录" />
    </div>
  </Modal>
</template>

<style lang="less" scoped>
.wallet-transaction-modal {
  padding: 16px;
}
</style>

