<template>
  <div class="bill-box">
    <div class="bill-content">
      <div class="header">{{ $t('user.BillingDetails') }}</div>
      <div class="table-box">
        <t-table
          tableLayout="auto"
          row-key="index"
          :loading="loading"
          :data="BillData.list"
          :columns="columns"
          hover
        >
          <template #status="{ row }">
            <span v-if="row.status == 1">支付成功，地址正确</span>
            <span v-else-if="row.status == 2">支付失败</span>
            <span v-else-if="row.status == 3">支付成功，地址错误</span>
            <span v-else-if="row.status == 0">等待支付</span>
          </template>
          <template #vip_list_title="{ row }">
            <span>{{ row.vip_list?.title ?? '---' }}</span>
          </template>
        </t-table>
      </div>
    </div>
    <div class="table-footer">
      <t-pagination
        v-model="pageNum"
        v-model:pageSize="pageSize"
        :total="total"
        show-sizer
        @currentChange="onCurrentChange"
        :pageSizeOptions="[]"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import request from '@/utils/request';
import { MessagePlugin } from 'tdesign-vue-next';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const columns = computed(() => [
  {
    colKey: 'index',
    title: '#',
    align: 'center',
  },
  {
    colKey: 'vip_list_title',
    title: t('user.Packages'),
    align: 'center',
  },
  {
    colKey: 'amount',
    title: t('user.price'),
    align: 'center',
  },
  {
    colKey: 'default',
    title: t('user.ExpirationDate2'),
    align: 'center',
  },
  {
    colKey: 'created_at',
    title: t('user.OrderTime'),
    align: 'center',
  },
  {
    colKey: 'status',
    title: t('user.Status'),
    align: 'center',
  },
  {
    colKey: 'needed',
    title: t('user.PaymentMethod'),
    align: 'center',
  },
]);
const pageNum = ref(1);
const pageSize = ref(10);
const total = ref(0);
const loading = ref(false);
const BillData = reactive({
  list: [],
});
// 用户token
const Cookie = useCookie('userCookie');
onMounted(() => {
  getBillList();
});
// 页数改变
const onCurrentChange = () => {};
const getBillList = () => {
  try {
    loading.value = true;
    request
      .get('/api/user/recharge/List', {
        headers: {
          authorization: `Bearer ${Cookie.value}`,
        },
      })
      .then((res: any) => {
        if (res.code === 0 && res.data.list.length > 0) {
          res.data.list.forEach((item: any, index: number) => {
            item.index = index + 1;
          });
          BillData.list = res.data.list;
          total.value = res.data.total;
        } else if (res.code == 2) {
          MessagePlugin.closeAll();
          MessagePlugin.warning('登录信息已过期');
        }
        loading.value = false;
      });
  } catch (e) {
    loading.value = false;
  }
};
</script>

<style lang="less" scoped>
@import '@/style/flex.less';
@import '@/style/variables.less';
.bill-box {
  height: calc(100vh - 100px);
  width: calc(100vw - 410px);
  .bill-content {
    margin-top: 30px;
    width: 98%;
    border: 1px solid var(--td-Search-info-border-bottom-2);
    .header {
      height: 80px;
      .da();
      font-size: @font-size-xl;
      font-weight: bold;
      padding-left: 30px;
    }
    .table-box {
      width: 100%;
      :deep(.t-table) {
        white-space: nowrap;
        .t-table__content {
          .t-table__header {
            tr {
              height: 74px;
              th {
                border: none !important;
              }
            }
          }
          .t-table__body {
            tr {
              height: 74px;
            }
            > tr:last-child {
              td {
                border: none;
              }
            }
          }
        }
      }
    }
  }
  .table-footer {
    height: 64px;
    .dja();
    padding: 0 12px;
  }
}
</style>
