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

<template>
  <view class="h-screen flex flex-col bg-[#f8f8f8] relative z-[0]">
    <view class="relative">
      <Navbar
        safeAreaInsetTop
        bg-color="transparent"
        :bordered="false"
        left-arrow
        title="卡密兑换"
        @click-left="handleClickLeft"
        content-class="justify-between"
      ></Navbar>
      <view class="bg-[#fff] rounded-[8rpx] px-[46rpx] pt-[40rpx] pb-[30rpx] 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="https://api.static.ycymedu.com/sub/images/ucenter/vip-flag.png"
            mode="scaleToFill"
            class="w-[120rpx] h-[28rpx]"
            v-if="isVIP"
          />
          <image
            v-else
            src="https://api.static.ycymedu.com/sub/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" :disabled="isVIP">
          {{ isVIP ? '已开通' : '立即兑换' }}
        </button>
        <view class="text-[#999] text-[24rpx] text-center mt-[20rpx] text-center" v-show="isVIP">
          到期时间:{{ endTime }}
        </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] mt-[60rpx]"
    >
      <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 mb-[10rpx]">
        <image
          src="data:image/png;base64, "
          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, getBingInfo } from '@/service/index/api'

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

const userStore = useUserStore()

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

const isVIP = computed(() => {
  return userStore.userInfo.estimatedAchievement.isVIP
})

const handleClickLeft = () => {
  console.log(123)

  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
      userStore.setIsVIP(true)
      userStore.setVipCode(cardNumber.value)
    } else {
      uni.showToast({
        title: res.message,
        icon: 'none',
      })
    }
  })
}

const endTime = ref('')

onLoad(() => {
  getBingInfo().then((res) => {
    if (res.code === 200) {
      endTime.value = (res.result as { endTime: string }).endTime
      cardNumber.value = (res.result as { cardCode: string }).cardCode
    }
  })
})
</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>
