<script setup lang="ts">
import orderApi from '@/api/order'
import dayjs from '@/plugins/dayjs'
import sass from '@/utils/sass'
const OSS_URL = `${import.meta.env.VITE_OSS_URL}`
const bg = `url(${OSS_URL}/urm/order_bg.png) 100%/cover no-repeat`

const tableData = ref([{}])
const loading = ref(false)
async function init() {
  try {
    loading.value = true
    const {
      data: { data: res },
    } = await orderApi.getVipOrderRecord({
      size: -1,
    })
    tableData.value = res
  } catch (err) {
    console.log('err', err)
  } finally {
    loading.value = false
  }
}

onActivated(() => {
  init()
})
</script>
<template>
  <div class="page">
    <BackBar />
    <div class="content">
      <div class="title">
        <LineFont text="开通记录" />
      </div>
      <div class="content-table">
        <el-table v-if="!loading" :data="tableData" style="width: 100%">
          <el-table-column prop="orderName" :label="`${sass.platform.appName}VIP`" />
          <el-table-column label="到期时间">
            <template #default="{ row }">
              {{ dayjs(row.vipExpiredTime).format('YYYY-MM-DD') }}
            </template>
          </el-table-column>
          <el-table-column label="开通时间">
            <template #default="{ row }">
              {{ dayjs(row.paymentTime).format('YYYY-MM-DD') }}
            </template>
          </el-table-column>
          <el-table-column label="支付方式">
            <div class="custom-cell"><Icon name="tm_wxpay" size="32" /> 微信支付</div>
          </el-table-column>
        </el-table>
        <Icon v-else name="global_loading" loading size="150" />
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.page {
  width: 100%;
  height: 100%;
  padding: $space-4_h $space-6;
  @include main_bg;
  .content {
    width: 1802px;
    height: 86.67vh;
    background: v-bind(bg);
    padding: $space-4;
    .title {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 8.33vh;
      text-align: center;
    }
    .content-table {
      width: 100%;
      height: 66.83vh;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: $space-5_h;

      :deep(.el-table) {
        height: 66.83vh;
        border-radius: $radius-5;
        font-size: 2.33vh;
        .cell {
          font-weight: 400;
          color: $font-aux-color;
          line-height: 1.5em;
          height: 1.5em;
          padding: 0 $space-4;
        }
        .el-table__header {
          height: 7.5vh;
          .el-table__cell {
            &:last-child {
              border-right: 0;
            }
          }
        }
        .el-table__row {
          height: 7.5vh;
          .el-table__cell {
            &:last-child {
              border-right: 0;
            }
          }
        }
        .el-table__cell {
          border-bottom: 0.17vh dashed #deedfc;
          border-right: 0.17vh dashed #deedfc;
        }
        .custom-cell {
          display: flex;
          align-items: center;
          .x-icon {
            margin-right: $space-1;
          }
        }
      }
    }
  }
}
</style>
