<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 type { OrderItem } from '../types'
import { fetchGetOrderList } from '@/apis/order-manage'
import { useI18n } from 'vue-i18n'

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

const packageList = ref<OrderItem[]>([])
const packageTableIsLoading = ref(false)

;(function () {
  handleGetPackageList()
})()

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

function handleGetPackageList() {
  packageTableIsLoading.value = true
  const domain = 'equity'

  fetchGetOrderList<OrderItem[]>(domain, paginationData)
    .then((res) => {
      if (res.code !== 0) return

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

function judgeExpirationDate(lifespan: number) {
  switch (lifespan) {
    case -1:
      return t('common_module.expired')
    case -2:
      return t('common_module.forever_effective')
    default:
      return (
        t('order_manage_module.remaining_validity_period') +
        lifespan +
        t('order_manage_module.remaining_validity_period_day')
      )
  }
}

function splicingPackageName(orderItem: OrderItem) {
  let expiredType = ''
  let equityType = ''

  switch (orderItem.type) {
    case 'normal':
      expiredType = t('order_manage_module.basic_edition')
      break
    case 'professional':
      expiredType = t('order_manage_module.professional_edition')
      break
    case 'ultimate':
      expiredType = t('order_manage_module.flagship_edition')
      break
  }

  switch (orderItem.expiredType) {
    case 'year':
      equityType = t('common_module.year')
      break
    case 'month':
      equityType = t('common_module.month')
      break
  }

  return expiredType + orderItem.expiredNum + equityType
}

function createPackageColumns(): DataTableColumns<OrderItem> {
  return [
    {
      title: t('order_manage_module.package_name'),
      key: 'packageName',
      render(row) {
        return h('div', {}, splicingPackageName(row))
      },
    },
    {
      title: t('order_manage_module.points'),
      key: 'pointNum',
      width: 360,
      render(row) {
        return h('div', [
          h('span', {}, row.pointNum + t('order_manage_module.points')),
          h(
            'span',
            {
              class: 'ml-[10px]',
              style: row.remainExpiredDay === -1 ? { color: '#cb5656' } : { color: '#26a50e' },
            },
            judgeExpirationDate(row.remainExpiredDay),
          ),
        ])
      },
    },
    {
      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="packageColumns"
        :data="packageList"
        :bordered="false"
        :bottom-bordered="false"
        :max-height="tableContentY"
        :loading="packageTableIsLoading"
      >
        <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>
