<script setup lang="ts">
import { nextTick, onMounted, ref } from 'vue'

definePageMeta({
  layout: 'header',
})
const activeTab = ref('')

// const route = useRoute();
// const { id } = route.params as { id: string };
interface PointsResult {
  points: number
  memberConsumeList: any[]
}
const pointsResult = ref<PointsResult>()
async function getPoints() {
  try {
    const res = await request.get('/member/getValidMemberById')
    if (res.code === 200) {
      pointsResult.value = res.data as PointsResult
      nextTick(() => {
        activeTab.value = 'manage'
      })
    }
  }
  catch (err) {
    console.log(err)
  }
}
getPoints()

const myMemberList = ref([
  {
    title: '基础版VIP会员',
    type: '单月套餐',
    time: '2021-02-10至2024-19-23',
    payType: '支付宝',
  },
  {
    title: '基础版VIP会员',
    type: '单月套餐',
    time: '2021-02-10至2024-19-23',
    payType: '支付宝',
  },

])
onMounted(() => {
  // nextTick(() => {
  //   activeTab.value = 'beatles'
  // })
})
</script>

<template>
  <div class="flex justify-center bg-[#f2f5f8] items-center h-[calc(100vh-48px)]">
    <div class="w-[1200px] bg-white rounded-lg shadow-lg p-10 h-[calc(100%-40px)]">
      <h1 class="text-2xl font-bold mb-4">
        订单管理
      </h1>
      <n-tabs v-model:value="activeTab" type="line" animated>
        <n-tab-pane name="manage" tab="订单管理">
          <div class="h-[500px] overflow-y-auto">
            <div class="p-2 text-base">
              我的会员
            </div>
            <div v-for="(item, index) in pointsResult" :key="index" class="p-2 bg-[#f9fbfc] rounded-lg text-gray-500 mb-2">
              <div class="p-2 text-[#ff9e0b]">
                {{ item.memberLevelName }}
              </div>
              <!-- <div class="flex justify-between p-2">
                <div>订单类型</div>
                <div>{{ item.type }}</div>
              </div> -->
              <div class="flex justify-between p-2">
                <div>生效时间</div>
                <div>{{ item.startDate }} - {{ item.endDate }}</div>
              </div>
              <div class="flex justify-between p-2">
                <div>支付方式</div>
                <div>{{ item.paymentMethod }}</div>
              </div>
            </div>
          </div>
        </n-tab-pane>
        <!-- <n-tab-pane name="record" tab="购买记录">
          <div class="h-[500px] overflow-y-auto">
            <div class="mc-table flex w-full">
              <div class="w-[200px]">
                交易时间
              </div>
              <div class="w-[200px]">
                商品名称
              </div>
              <div class="flex-1">
                订单编号
              </div>
              <div class="w-[130px]">
                交易金额
              </div>
              <div class="w-[130px]">
                交易状态
              </div>
              <div class="w-[130px]">
                操作
              </div>
            </div>
            <div v-for="item in pointsResult.memberConsumeList" :key="item" class="mc-table flex w-full">
              <div class="w-[200px]">
                2021.02.12 12:21
              </div>
              <div class="w-[200px]">
                基础班VIP1个月
              </div>
              <div class="flex-1">
                OHF_202454221134433222
              </div>
              <div class="w-[130px]">
                ¥ 45.0
              </div>
              <div class="w-[130px]">
                成功
              </div>
              <div class="w-[130px]">
                <div class="border border-solid border-[#ccc] rounded-lg w-20 h-8 flex justify-center items-center cursor-pointer">开票</div>
              </div>
            </div>
          </div>
        </n-tab-pane> -->
      </n-tabs>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.mc-table {
  display: flex;
  padding: 10px 4px;
  border-bottom: 1px solid #eee;
  align-items: center;
  // justify-content: space-between;
}
</style>
