<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '六纬VIP会员卡',
  },
}
</route>

<template>
  <view class="h-screen flex flex-col bg-[#f8f8f8]">
    <view class="px-[32rpx]">
      <image
        src="https://api.static.ycymedu.com/sub/images/ucenter/vip-back.png"
        class="mt-[32rpx] h-[400rpx]"
        mode="aspectFit"
      />
      <view
        class="flex flex-col rounded-[16rpx] bg-[#fff] mt-[30rpx] pt-[24rpx] pl-[18rpx] pr-[20rpx] pb-[32rpx]"
      >
        <view class="flex items-center gap-[16rpx]">
          <view class="text-[32rpx] font-semibold">
            <text class="text-[#303030]">六纬VIP</text>
            <text class="text-[#784B0F]">会员权益</text>
          </view>
          <text class="text-[20rpx] text-[#636363]">服务截止2025.9.1</text>
        </view>
        <view class="text-[28rpx] font-semibold flex gap-[12rpx] mt-[16rpx]">
          <view
            class="flex flex-col items-center justify-center text-item gap-[16rpx] w-[208rpx] h-[124rpx] rounded-[16rpx]"
          >
            <view>
              <text class="text-[#784B0F]">志愿</text>
              <text>填报表</text>
            </view>
            <text>AI解读</text>
          </view>

          <view
            class="flex flex-col items-center justify-center text-item gap-[16rpx] w-[208rpx] h-[124rpx] rounded-[16rpx]"
          >
            <view>
              <text class="text-[#784B0F]">11项测评</text>
              <text>报告</text>
            </view>
            <text>AI解读</text>
          </view>

          <view
            class="flex flex-col items-center justify-center text-item gap-[16rpx] w-[208rpx] h-[124rpx] rounded-[16rpx]"
          >
            <view>
              <text class="text-[#784B0F]">高考信息</text>
              <text>资讯</text>
            </view>
            <text>AI咨询</text>
          </view>
        </view>
      </view>
      <VipTable class="mt-[40rpx]" />
    </view>

    <view
      class="pb-safe bottom-0 left-0 mt-auto px-[32rpx] pt-[24rpx] bg-[#fff] text-[22rpx] flex flex-col gap-[16rpx] items-center"
    >
      <text class="text-[22rpx] text-[#303030]">生涯测评+志愿填报报告无限解读</text>
      <button
        class="custom-button-bg text-[#9D5800] text-[28rpx] font-semibold rounded-[8rpx] h-[80rpx]! w-full!"
        @tap="handleOpenVip"
      >
        ￥{{ productionList.price }} Vip会员
      </button>
      <view>
        <text class="text-[#636363]">开通会员表示同意</text>
        <text class="text-[#9D5800]">会员协议</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import VipTable from './components/VipTable.vue'
import { getProductionList, payTransaction } from '@/service/index/api'
import { useUserStore } from '@/store/user'

const userStore = useUserStore()

const productionList = ref({ price: 0, name: '' })

const handleOpenVip = () => {
  payTransaction({
    total: productionList.value.price * 100,
    openId: userStore.userInfo.openid,
    description: productionList.value.name,
  }).then((res) => {
    if (res.code === 200) {
      requestPay(res.result)
    } else {
      uni.showToast({
        title: res.message,
        icon: 'none',
      })
    }
  })
}

const requestPay = (res) => {
  uni.requestPayment({
    provider: 'wxpay',
    timeStamp: res.timeStamp,
    orderInfo: '',
    nonceStr: res.nonceStr, //随机字符串，长度为32个字符以下。
    package: res.package, //prepay_id 参数值，提交格式如：prepay_id=xx
    signType: res.signType, //MD5类型
    paySign: res.paySign, //签名
    success: (result) => {
      uni.showToast({
        title: '支付成功！',
        icon: 'success',
      })
      uni.navigateBack()
    },
    fail: (error) => {
      console.log(error)
    },
  })
}

onLoad(() => {
  getProductionList({ Id: '653695577120837' }).then((res) => {
    if (res.code === 200) {
      productionList.value = res.result as { price: number; name: string }
    }
  })
})
</script>

<style scoped lang="scss">
.text-item {
  background: linear-gradient(45deg, #fdf8ee 0%, #fff5dc 100%);
}

.custom-button-bg {
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(270deg, #f9e1b5 0%, #e4be80 100%);
}
</style>
