<script setup lang="ts">
import { usePagination } from '@/composables/usePagination'
import useTableScrollY from '@/composables/useTableScrollY'
import { DataTableColumns } from 'naive-ui'
import { h, ref, watch } from 'vue'
import { fetchGetOrderList } from '@/apis/order-manage'
import { useI18n } from 'vue-i18n'
import type { OrderItem } from '../types'

const { t } = useI18n()
const rechargeColumns = createRechargeColumns()
// 表头：48  分页：28
const { pageContentWrapRef, tableContentY } = useTableScrollY(48 + 28)
const { paginationData, handlePageNoChange, handlePageSizeChange } = usePagination()

const rechargeList = ref<OrderItem[]>([])
const rechargeTableIsLoading = ref(false)

;(function () {
  handleGetRechargeList()
})()

watch([() => paginationData.pageNo, () => paginationData.pageSize], handleGetRechargeList)

function handleGetRechargeList() {
  rechargeTableIsLoading.value = true
  const domain = 'point'
  fetchGetOrderList<OrderItem[]>(domain, paginationData)
    .then((res) => {
      if (res.code !== 0) return

      rechargeList.value = res.data
      paginationData.totalRows = res.pagingInfo?.totalRows || 0
      paginationData.totalPages = res.pagingInfo?.totalPages || 0
    })
    .finally(() => {
      rechargeTableIsLoading.value = false
    })
}

function splicingRechargeDetails(orderItem: OrderItem) {
  let rechargeType = ''

  switch (orderItem.type) {
    case 'normal':
      rechargeType = 100 + t('order_manage_module.points')
      break
    case 'professional':
      rechargeType = 300 + t('order_manage_module.points')
      break
    case 'ultimate':
      rechargeType = 800 + t('order_manage_module.points')
      break
  }

  return rechargeType
}

function createRechargeColumns(): DataTableColumns<OrderItem> {
  return [
    {
      title: t('order_manage_module.recharge_name'),
      key: 'rechargeDetails',
      render(row) {
        return h('div', {}, splicingRechargeDetails(row) + t('order_manage_module.gift_pack'))
      },
    },
    {
      title: t('order_manage_module.points'),
      key: 'pointNum',
      render(row) {
        return h('div', [h('span', row.pointNum + t('order_manage_module.points'))])
      },
    },
    {
      title: t('order_manage_module.order_amount'),
      key: 'amount',
    },
    {
      title: t('order_manage_module.pay_time'),
      key: 'payTime',
    },
    {
      title: t('order_manage_module.pay_method'),
      key: 'payChannel',
      render(row) {
        return h('div', {}, row.payChannel === 'Wx' ? t('common_module.wechat') : t('common_module.alipay'))
      },
    },
    {
      title: t('order_manage_module.order_number'),
      key: 'payOrderSn',
    },
  ]
}
</script>

<template>
  <div ref="pageContentWrapRef" class="h-full">
    <div :style="{ height: tableContentY + 48 + 'px' }">
      <n-data-table
        :single-line="true"
        single-column
        :columns="rechargeColumns"
        :data="rechargeList"
        :bordered="false"
        :bottom-bordered="false"
        :max-height="tableContentY"
        :loading="rechargeTableIsLoading"
      >
        <template #empty
          ><div class="flex flex-col items-center justify-center" :style="{ height: tableContentY + 'px' }">
            <img src="@/assets/images/empty-list.png" width="68px" height="68px" />
            <span class="mt-[20px] text-[14px] text-[#999999]">{{ t('common_module.empty_data') }}</span>
          </div></template
        >
      </n-data-table>
    </div>
    <footer class="flex justify-end">
      <CustomPagination
        :paging-info="paginationData"
        @update-page-no="handlePageNoChange"
        @update-page-size="handlePageSizeChange"
      />
    </footer>
  </div>
</template>
