<route lang="json5" type="page">
{
  style: {
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <view class="bg-[#F8F8F8] h-screen flex flex-col gap-[32rpx]">
    <view class="background-wrapper">
      <Navbar safeAreaInsetTop bg-color="transparent" placeholder :bordered="false"></Navbar>
      <view class="flex px-[32rpx] gap-[24rpx] custom-user-info" @click.stop="goLogin">
        <image
          :src="
            userStore.userInfo.avatar ||
            'https://private-zhiyuan.oss-cn-beijing.aliyuncs.com/avatar.png'
          "
          class="w-[112rpx] h-[112rpx] rounded-full z-[1]"
          mode="scaleToFill"
        />
        <view class="flex flex-col gap-[6rpx] py-[8rpx] z-[1] text-white">
          <view class="text-[32rpx] font-semibold flex items-center">
            <view>
              {{ userStore.userInfo.nickname || '未登录' }}
            </view>
            <view class="i-carbon-chevron-right font-700"></view>
          </view>
          <text class="text-[24rpx]" v-show="userStore.userInfo.openid">
            {{ userStore.userInfo.estimatedAchievement.provinceName }}·{{
              userStore.userInfo.estimatedAchievement.expectedScore
            }}
            {{ userStore.userInfo.estimatedAchievement.subjectGroup.split(',').join('/') }}
          </text>
        </view>
      </view>

      <!-- <view
        class="absolute bottom-0 py-[16rpx] pl-[32rpx] pr-[24rpx] left-[50%] translate-x-[-50%] flex items-center w-max custom-vip-bg"
      >
        <image
          src="https://api.static.ycymedu.com/src/images/ucenter/vip.png"
          mode="scaleToFill"
          class="w-[64rpx] h-[64rpx]"
        />
        <view class="h-[32rpx] w-[1rpx] bg-[#fff] mx-[20rpx]"></view>
        <text class="text-white text-[24rpx]">诸多分析特权免费查看</text>

        <button
          v-if="!userStore.userInfo.estimatedAchievement.isVIP"
          class="w-[136rpx]! h-[52rpx]! text-[#803D00]! text-[24rpx]! custom-button-bg font-normal flex! items-center! justify-center! rounded-[80rpx]! p-[0]! ml-[70rpx]!"
          @click="goVip"
        >
          立即开通
        </button>
        <button
          v-else
          class="w-[136rpx]! h-[52rpx]! text-[#B38552]! text-[24rpx]! custom-button-bg-active font-normal flex! items-center! justify-center! rounded-[80rpx]! p-[0]! ml-[70rpx]!"
        >
          已开通
        </button>
      </view> -->
      <view class="diagonal-lines"></view>
    </view>
    <view
      class="mx-[32rpx] flex items-center justify-center text-[#303030] text-[24rpx] bg-[#fff] pt-[24rpx] pb-[18rpx] gap-[144rpx] rounded-[8rpx]"
    >
      <view class="flex flex-col items-center gap-[16rpx]" @click="goWishList">
        <image
          src="https://api.static.ycymedu.com/src/images/ucenter/wish-list.png"
          class="w-[51rpx] h-[51rpx]"
          mode="scaleToFill"
        />
        <text>志愿表</text>
      </view>
      <view class="flex flex-col items-center gap-[16rpx]" @click="goEvaluate">
        <image
          src="https://api.static.ycymedu.com/src/images/ucenter/evaluation-list.png"
          class="w-[51rpx] h-[51rpx]"
          mode="scaleToFill"
        />
        <text>测评结果</text>
      </view>
      <view class="flex flex-col items-center gap-[16rpx]" @click="goStar">
        <image
          src="https://api.static.ycymedu.com/src/images/ucenter/star.png"
          class="w-[51rpx] h-[51rpx]"
          mode="scaleToFill"
        />
        <text>收藏</text>
      </view>
    </view>

    <view class="mx-[32rpx] bg-[#fff] rounded-[8rpx]">
      <view
        class="flex items-center justify-between mx-[32rpx] py-[28rpx] not-last-child"
        @click="goAppointment"
      >
        <text>我的预约</text>
        <view class="i-carbon-chevron-down rotate-270 text-[#BFBFBF]"></view>
      </view>
      <!-- <view class="flex items-center justify-between mx-[32rpx] py-[28rpx]" @click="goActive">
        <text>卡密兑换</text>
        <view class="i-carbon-chevron-down rotate-270 text-[#BFBFBF]"></view>
      </view> -->
    </view>

    <view class="mx-[32rpx] bg-[#fff] rounded-[8rpx]">
      <view
        class="flex items-center justify-between mx-[32rpx] py-[28rpx] not-last-child"
        @click="toSetting"
      >
        <text>设置</text>
        <view class="i-carbon-chevron-down rotate-270 text-[#BFBFBF]"></view>
      </view>
    </view>
    <TabBar :current-page="4"></TabBar>
    <FabButton :initial-x="0" :initial-y="100" />
  </view>
</template>

<script lang="ts" setup>
import TabBar from '@/components/bar/TabBar.vue'
import Navbar from '@/components/navbar/Navbar.vue'
import FabButton from '@/components/fab/FabButton.vue'

import { useUserStore } from '@/store'

const userStore = useUserStore()

const goVip = () => {
  const { platform } = uni.getDeviceInfo()
  switch (platform) {
    case 'android':
      uni.navigateTo({
        url: '/pages-sub/ucenter/vip/openVip',
      })
      break
    case 'ios':
      uni.showModal({
        title: 'iso系统暂不支持线上支付',
      })
      break
    default:
      uni.navigateTo({
        url: '/pages-sub/ucenter/vip/openVip',
      })
      break
  }
}

const goStar = () => {
  uni.navigateTo({
    url: '/pages-sub/ucenter/star/myStar',
  })
}

const goWishList = () => {
  uni.navigateTo({
    url: '/pages-sub/ucenter/wishList/wishList',
  })
}

const goEvaluate = () => {
  uni.navigateTo({
    url: '/pages-sub/ucenter/evaluate/evaluateList',
  })
}

const goAppointment = () => {
  uni.navigateTo({
    url: '/pages-sub/ucenter/appointment/appointment',
  })
}

const goActive = () => {
  uni.navigateTo({
    url: '/pages-sub/ucenter/active/activePage',
  })
}

const toSetting = () => {
  uni.navigateTo({
    url: '/pages-sub/ucenter/setting/index',
  })
}

const goLogin = () => {
  if (!userStore.userInfo.openid) {
    uni.navigateTo({
      url: '/login-sub/index',
    })
  } else {
    uni.navigateTo({
      url: '/pages-sub/ucenter/setting/userInfo',
    })
  }
}
</script>

<style lang="scss" scoped>
.background-wrapper {
  position: relative;
  width: 100%;
  height: 420rpx;
  overflow: hidden;
  background: linear-gradient(135deg, #33ccff 0%, #3399ff 100%);
}

/* 左下角大圆 */
.background-wrapper::before {
  content: '';
  position: absolute;
  width: 300rpx;
  height: 300rpx;
  bottom: -150rpx;
  left: -100rpx;
  border-radius: 50%;
  background-color: rgba(150, 230, 255, 0.4);
  z-index: 0;
}

/* 左上角中等圆 */
.background-wrapper::after {
  content: '';
  position: absolute;
  width: 300rpx;
  height: 300rpx;
  top: -150rpx;
  right: 40%;
  border-radius: 50%;
  background-color: rgba(150, 230, 255, 0.3);
}

/* 右上角斜线 */
.diagonal-lines {
  position: absolute;
  top: 30rpx;
  right: 30rpx;
}

.diagonal-lines::before {
  content: '';
  position: absolute;
  width: 120rpx;
  height: 20rpx;
  top: 70rpx;
  right: -80rpx;
  background-color: rgba(150, 230, 255, 0.5);
  border-radius: 10rpx;
  transform: rotate(-45deg);
}

.diagonal-lines::after {
  content: '';
  position: absolute;
  width: 160rpx;
  height: 30rpx;
  top: 130rpx;
  right: -80rpx;
  background-color: rgba(150, 230, 255, 0.5);
  border-radius: 20rpx;
  transform: rotate(-45deg);
}

.custom-button-bg {
  background: linear-gradient(135deg, #ffcd6c 0%, #fff6c5 100%);
}
.custom-button-bg-active {
  background: linear-gradient(135deg, #ffe1a7 0%, #fff9db 100%);
}

.custom-vip-bg {
  background: linear-gradient(135deg, #000000 0%, #525252 100%);
  border-radius: 20rpx 20rpx 0 0;
}

.custom-user-info {
  position: absolute;
  bottom: 172rpx;
}

.not-last-child {
  border-bottom: 2rpx solid #f5f5f5;
}
</style>
