<route lang="json5" type="page">
{
  style: {
    navigationStyle: 'custom',
  },
}
</route>

<template>
  <view class="h-screen flex flex-col">
    <view class="relative">
      <Navbar
        safeAreaInsetTop
        bg-color="transparent"
        :bordered="false"
        left-arrow
        title="卡密兑换"
        @click-left="navigatorBack"
        content-class="justify-between"
      ></Navbar>
      <view class="bg-[#fff] rounded-[8rpx] px-[46rpx] pt-[40rpx] pb-[60rpx] mx-[30rpx] mt-[40rpx]">
        <view class="flex items-center gap-[12rpx]">
          <image
            :src="userStore.userInfo?.avatar"
            mode="scaleToFill"
            class="w-[60rpx] h-[60rpx] rounded-full"
          />
          <text class="text-[#000] text-[36rpx] font-bold">{{ userStore.userInfo?.nickname }}</text>
          <image
            src="@/pages-sub/static/images/ucenter/vip-flag.png"
            mode="scaleToFill"
            v-if="userStore.userInfo?.estimatedAchievement.isVIP"
          />
          <image
            v-else
            src="@/pages-sub/static/images/ucenter/no-vip.png"
            mode="scaleToFill"
            class="w-[120rpx] h-[28rpx]"
          />
        </view>

        <view class="mt-[40rpx]">
          <view
            class="flex items-center gap-[10rpx] px-[30rpx] py-[25rpx] rounded-[20rpx] bg-[#f5f5f5] mb-[40rpx]"
          >
            <view class="i-carbon-account text-[#999999]"></view>
            <input
              v-model="cardNumber"
              type="number"
              placeholder="请输入卡号"
              confirm-type="done"
              class="text-start flex-auto"
            />
          </view>

          <view
            class="flex items-center gap-[10rpx] px-[30rpx] py-[25rpx] rounded-[20rpx] bg-[#f5f5f5]"
          >
            <view class="i-carbon-locked text-[#999999]"></view>
            <input
              v-model="cardPassword"
              type="number"
              placeholder="请输入卡密"
              confirm-type="done"
              class="text-start flex-auto"
            />
          </view>
        </view>

        <button class="submit-button" @click="handleActive">立即兑换</button>
        <view
          class="text-[#999] text-[24rpx] text-center mt-[20rpx] mb-[30rpx] text-center"
          v-show="userStore.userInfo.estimatedAchievement.isVIP"
        >
          到期时间:2025-08-31
        </view>
      </view>
      <view class="custom-background h-[780rpx] w-full absolute top-0 left-0 z-[-1]"></view>
    </view>

    <view class="flex flex-col items-start justify-center text-[#999] text-[28rpx] px-[46rpx]">
      <text class="text-[#333] text-[30rpx] font-semibold mb-[20rpx]">兑换规则</text>
      <text class="mb-[20rpx]">
        1.适用对象：普通类文理科考生、新高考选科类考生 （提前批次及艺术体育类考生暂不适用)
      </text>
      <text class="mb-[20rpx]">2.使用时效：有效期截止到用户自行选择高考年的8月31日为止。</text>
      <text>3.这里是兑换规则介绍详情。</text>
    </view>
  </view>

  <MessageBox
    :show="showMessageBox"
    title=""
    :show-close="false"
    :defaultPadding="false"
    default-width="472rpx"
  >
    <template>
      <view class="mt-[60rpx] flex flex-col items-center">
        <image
          src="data:image/png;base64,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"
          mode="aspectFit"
          class="h-[112rpx]"
        />
        <text class="text-[40rpx] font-semibold my-[10rpx]">兑换成功</text>
        <text class="text-[28rpx] text-[#666] text-center px-[39rpx]">
          您已成功兑换六纬高级会员，快去体验吧！
        </text>
        <view class="h-[2rpx] bg-[#E5E5E5] w-full mt-[20rpx]"></view>
        <view
          class="w-full text-[#9D5800] py-[26rpx] text-center text-[36rpx] font-bold"
          @click="handleStart"
        >
          开启六纬之旅
        </view>
      </view>
    </template>
  </MessageBox>
</template>

<script setup lang="ts">
import Navbar from '@/pages-sub/components/navbar/Navbar.vue'
import MessageBox from '@/pages-sub/components/messageBox/MessageBox.vue'
import { activeCard } from '@/service/index/api'

import { useUserStore } from '@/store/user'

const userStore = useUserStore()

const cardNumber = ref('')
const cardPassword = ref('')

const navigatorBack = () => {
  uni.navigateBack()
}

const showMessageBox = ref(false)

const handleStart = () => {
  showMessageBox.value = false
}

const handleActive = () => {
  activeCard({
    cardCode: cardNumber.value,
    cardPwd: cardPassword.value,
  }).then((res) => {
    if (res.code === 200) {
      showMessageBox.value = true
    } else {
      uni.showToast({
        title: res.message,
        icon: 'none',
      })
    }
  })
}
</script>

<style lang="scss" scoped>
.custom-background {
  background: linear-gradient(180deg, #fbddbf 0%, rgba(251, 221, 191, 0) 100%);
  background-position: 50% 50%;
  background-origin: padding-box;
  background-clip: border-box;
  background-size: auto auto;
}

.submit-button {
  background: linear-gradient(270deg, #f9e1b5 0%, #e4be80 100%);
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  color: #9d5800;
  font-weight: 500;
  font-size: 32rpx;
  border-radius: 16rpx;
  margin-top: 60rpx;
}

.check-style {
  width: 112rpx;
  height: 112rpx;
  background: linear-gradient(270deg, #f9e1b5 0%, #e4be80 100%);
  box-shadow: 0rpx 12rpx 24rpx 0rpx rgba(228, 190, 128, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
