<script setup lang="tsx">
import { computed } from 'vue';
// import dayjs from 'dayjs';
// import { fetchGetStoreList } from '@/service/api/xsb-manage/store-info';
import { fetchList } from '@/service/api/order-manage/recharge-records';
import { commonExport } from '@/utils/common';
import { useTable } from '@/components/zt/Table/hooks/useTable';

const columns: NaiveUI.TableColumn<Api.goods.ShopSku>[] = [
  {
    key: 'orderNumber',
    align: 'center',
    title: '充值订单编号'
  },
  {
    key: 'consigneeMobile',
    title: '用户手机号',
    align: 'center'
  },
  {
    key: 'actualTotal',
    title: '充值金额',
    align: 'center'
  },
  {
    key: 'actualTotalShow',
    title: '金额积分',
    align: 'center'
  },
  {
    key: 'recordStatus',
    title: '订单状态',
    align: 'center',
    render: row => {
      if (row.recordStatus === 1) {
        return '已取消';
      } else if (row.recordStatus === 2) {
        return '已到账';
      } else if (row.recordStatus === 3) {
        return '退款';
      }
      return '-';
    }
  },
  {
    key: 'orderTypes',
    title: '订单类型',
    align: 'center'
  },
  {
    key: 'transactionId',
    title: '交易流水号',
    align: 'center'
  },
  {
    key: 'refundAmount',
    title: '退款金额',
    align: 'center'
  },
  {
    key: 'remarks',
    title: '备注',
    align: 'center'
  },
  {
    key: 'updateTime',
    title: '更新时间',
    align: 'center'
  }
];

const [registerTable, { getTableData, getSeachForm, setTableLoading }] = useTable({
  searchFormConfig: {
    schemas: [
      {
        label: '手机号',
        component: 'NInput',
        field: 'tel'
      },
      {
        label: '状态',
        component: 'NSelect',
        field: 'status',
        componentProps: {
          options: [
            {
              label: '已取消',
              value: 1
            },
            {
              label: '已到账',
              value: 2
            },
            {
              label: '退款',
              value: 3
            }
          ]
        }
      },

      {
        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: 'skuId',
    title: '积分明细',
    showAddButton: false,
    fieldMapToTime: [['createTime', ['startTime', 'endTime']]]
  }
});

const tableData = computed(() => {
  return getTableData();
});

async function handleExport() {
  setTableLoading(true);
  try {
    await commonExport(
      '/smqjh-system/api/v1/purchaseRecord/getPurchaseRecordListExport',
      getSeachForm(),
      '充值记录.xlsx'
    );
  } finally {
    setTableLoading(false);
  }
}
</script>

<template>
  <LayoutTable>
    <ZTable :columns="columns" :show-table-action="false" :api="fetchList" @register="registerTable">
      <template #prefix="{ loading }">
        <NSpace>
          <NButton size="small" :disabled="tableData.length == 0" :loading="loading" @click="handleExport">
            导出全部
          </NButton>
        </NSpace>
      </template>
    </ZTable>
  </LayoutTable>
</template>

<style scoped></style>
