<script setup lang="ts">
definePageMeta({
  layout: 'header',
})

const userStore = useUserStore()
const userInfo = userStore.userInfo as UserInfoType
// 显示支付弹框
interface Payment {
  isVisible: boolean
}
const PaymentRef = ref<Payment | null>(null)
function showPayment() {
  if (PaymentRef.value) {
    PaymentRef.value.isVisible = true
  }
}

// 是否是会员
const isMember = ref(false)
async function getIsMember() {
  try {
    const res = await request.get('/member/isMember')
    if (res.code === 200) {
      isMember.value = res.data
    }
  }
  catch (err) {
    console.log(err)
  }
}
// getIsMember()

// 获取积分余额和历史记录
const points = ref(0)
async function getPoints() {
  try {
    const res = await request.get('/member/getPoints')
    if (res.code === 200) {
      points.value = res.data
    }
  }
  catch (err) {
    console.log(err)
  }
}
// getPoints()

// 获取会员等级及权益列表
const MemberBenefitList = ref([])
async function getMemberBenefitList() {
  try {
    const res = await request.get('/memberLevel/getMemberBenefitList')
    if (res.code === 200) {
      MemberBenefitList.value = res.data
    }
  }
  catch (err) {
    console.log(err)
  }
}
// getMemberBenefitList()

// 获取会员等级列表
interface memberLevel {
  memberName: string
  unitPrice: number
  originalPrice: number
  subscriptionPeriod: number
}
const memberLevelList = ref<memberLevel[]>([])
async function getMemberLevelList() {
  try {
    const res = await request.get('/memberLevel/list')
    if (res.code === 200) {
      memberLevelList.value = res.data
    }
  }
  catch (err) {
    console.log(err)
  }
}
getMemberLevelList()
</script>

<template>
  <div>
    <div class="test bg-[#403833] flex justify-center items-center h-90">
      <div class="flex gap-6 w-[1145px]">
        <!-- 左侧用户信息 -->
        <div class="w-60 bg-[#2b2421] rounded-lg p-6">
          <!-- 右上角订阅管理 -->
          <div class="text-right">
            <button class="text-[#8b8685] text-sm bg-inherit border-none cursor-pointer">
              订阅管理 >
            </button>
          </div>

          <!-- 用户头像和信息 -->
          <div class="flex flex-col items-center mt-2">
            <client-only>
              <img :src="userInfo.avatar" alt="头像" class="w-20 h-20 rounded-full mb-3">
              <span class="text-white text-sm mb-2">{{ userInfo.nickName }}</span>
            </client-only>
            <div class="flex items-center text-[#8b8685] text-xs">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-4 w-4 mr-1"
                viewBox="0 0 20 20"
                fill="currentColor"
              >
                <path
                  d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
                />
              </svg>
              您还不是魔创未来的会员
            </div>
          </div>

          <!-- 开通会员按钮 -->
          <button
            class="w-full bg-[#f2d5bc] text-[#6b4f3f] rounded-full py-2.5 mt-8 font-medium cursor-pointer"
            @click="showPayment"
          >
            开通会员
          </button>

          <!-- 兑换会员链接 -->
          <div class="text-center mt-3">
            <button class="text-[#8b8685] text-sm bg-inherit border-none cursor-pointer">
              兑换会员
            </button>
          </div>
        </div>

        <!-- 右侧内容 -->
        <div class="flex-1 space-y-4">
          <!-- 余额信息卡片 -->
          <div class="bg-[#2b2421] rounded-lg p-6">
            <div class="grid grid-cols-3 gap-8">
              <!-- 算力余额 -->
              <div>
                <h3 class="text-[#c3986b] mb-4">
                  算力余额
                </h3>
                <div class="flex items-center mb-2">
                  <span class="text-[#c3986b] mr-2">300点</span>
                  <button class="text-[#c3986b] bg-inherit border-none cursor-pointer">
                    充值 >
                  </button>
                </div>
                <button class="text-white bg-inherit border-none cursor-pointer p-0">
                  算力明细 >
                </button>
              </div>

              <!-- 生图加速余额 -->
              <div>
                <h3 class="text-[#c3986b] mb-4">
                  生图加速余额
                </h3>
                <div class="flex items-center mb-2">
                  <span class="text-[#c3986b] mr-2">0次</span>
                  <button class="text-[#c3986b] bg-inherit border-none cursor-pointer">
                    充值 >
                  </button>
                </div>
                <button class="text-white bg-inherit border-none cursor-pointer p-0">
                  加速明细 >
                </button>
              </div>

              <!-- 训练加速余额 -->
              <div>
                <h3 class="text-[#c3986b] mb-4">
                  训练加速余额
                </h3>
                <div class="flex items-center mb-2">
                  <span class="text-[#c3986b]">0次</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 存储空间卡片 -->
          <div class="bg-[#2b2421] rounded-lg p-6">
            <div class="flex items-center gap-6 mb-6">
              <span class="text-[#c3986b] text-lg">我的存储空间</span>
              <button class="text-[#8b8685] bg-inherit border-none cursor-pointer p-0">
                管理图库
              </button>
              <button class="text-[#8b8685] bg-inherit border-none cursor-pointer p-0">
                管理训练
              </button>
            </div>

            <!-- 进度条 -->
            <div class="relative">
              <div class="h-1 bg-[#3a322e] rounded-full">
                <div class="absolute right-0 -top-6 text-[#8b8685] text-sm">
                  0G/3G
                </div>
              </div>
            </div>

            <!-- 图例 -->
            <div class="flex gap-4 mt-4">
              <div class="flex items-center">
                <div class="w-2 h-2 bg-blue-500 rounded-full mr-2" />
                <span class="text-[#8b8685] text-sm">生图</span>
              </div>
              <div class="flex items-center">
                <div class="w-2 h-2 bg-purple-500 rounded-full mr-2" />
                <span class="text-[#8b8685] text-sm">训练</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="bg-gradient-to-b from-[#fdf6e3] to-[#ffffff] w-full flex justify-center py-8"
    >
      <div class="w-[1145px]">
        <div class="grid grid-cols-5 gap-1">
          <div
            v-for="(item, index) in memberLevelList"
            :key="index"
            class="h-56 border-1 border-solid border-[#fff] rounded-lg bg-gradient-to-b from-[#fdf0dd] to-[#fef8ef] flex justify-between items-center flex-col p-4 box-border"
          >
            <div class="text-[#e08909] card-item">
              {{ item.memberName }}
            </div>
            <div class="card-item">
              <span class="text-[#814600] text-[20px] mr-2">¥</span>
              <span class="text-[#814600] text-[40px] mr-2">{{ item.unitPrice }}</span>
              <span class="text-gray-400 text-[20px] line-through">¥{{ item.originalPrice }}</span>
            </div>
            <div class="card-item text-[#e08909] w-7/10 text-center text-[12px]">
              {{ item.subscriptionPeriod }}
            </div>
            <div class="card-item">
              <button
                class="bg-gradient-to-r from-[#fbdfa4] to-[#f3c180] text-[#4c3d33] w-40 h-10 rounded-full text-[12px] border-none cursor-pointer"
              >
                立即开通
              </button>
            </div>
          </div>
        </div>
        <div class="py-8">
          <div class="flex justify-center mb-4">
            <div class="text-xl font-bold">
              会员权益
            </div>
          </div>
          <div class="flex gap-2">
            <div class="w-1/4 h-20 bg-[#f7f0ea] flex justify-center items-center">
              会员权益
            </div>
            <div class="w-1/4 h-20 bg-[#f5f5f5] flex justify-center items-center">
              用户免费
            </div>
            <div class="w-1/4 h-20 bg-[#fdf6ea] flex justify-center items-center">
              基础版VIP
            </div>
            <div class="w-1/4 h-20 bg-[#fce6bf] flex justify-center items-center">
              专业版VIP
            </div>
          </div>
          <div class="flex gap-2">
            <div class="w-1/4 h-10 bg-[#fff] flex justify-center items-center">
              算力
            </div>
            <div class="w-1/4 h-10 bg-[#fff] flex justify-center items-center">
              每天300点
            </div>
            <div class="w-1/4 h-10 bg-[#fff] flex justify-center items-center">
              每月15000点
            </div>
            <div class="w-1/4 h-10 bg-[#fff] flex justify-center items-center">
              每月35000点
            </div>
          </div>
          <div class="flex gap-2">
            <div class="w-1/4 h-10 bg-[#f7f0ea] flex justify-center items-center">
              算力
            </div>
            <div class="w-1/4 h-10 bg-[#f5f5f5] flex justify-center items-center">
              每天300点
            </div>
            <div class="w-1/4 h-10 bg-[#fdf6ea] flex justify-center items-center">
              每月15000点
            </div>
            <div class="w-1/4 h-10 bg-[#fce6bf] flex justify-center items-center">
              每月35000点
            </div>
          </div>
          <div class="flex gap-2">
            <div class="w-1/4 h-10 bg-[#fff] flex justify-center items-center">
              算力
            </div>
            <div class="w-1/4 h-10 bg-[#fff] flex justify-center items-center">
              每天300点
            </div>
            <div class="w-1/4 h-10 bg-[#fff] flex justify-center items-center">
              每月15000点
            </div>
            <div class="w-1/4 h-10 bg-[#fff] flex justify-center items-center">
              每月35000点
            </div>
          </div>
          <div class="flex gap-2">
            <div class="w-1/4 h-10 bg-[#f7f0ea] flex justify-center items-center">
              算力
            </div>
            <div class="w-1/4 h-10 bg-[#f5f5f5] flex justify-center items-center">
              每天300点
            </div>
            <div class="w-1/4 h-10 bg-[#fdf6ea] flex justify-center items-center">
              每月15000点
            </div>
            <div class="w-1/4 h-10 bg-[#fce6bf] flex justify-center items-center">
              每月35000点
            </div>
          </div>
        </div>
        <div class="text-[#999] text-[12px]">
          <div class="mt-1">
            会员每月算力和加速特权按月下发，有效期31天，到期重置。会员模型下载次数上限为每月200次
          </div>
          <div class="mt-1">
            发票或团队/企业定制需求，请点击立即咨询联系我们，企业合作需求也可直接联系chujie@liblib.ai
          </div>
          <div class="mt-1">
            更多问题可见帮助中心
          </div>
        </div>
      </div>
    </div>
    <Payment ref="PaymentRef" />
  </div>
</template>

<style scoped>
.card-item {
  @apply flex items-center justify-center h-1/4;
}
</style>
