<script lang="ts" setup>
import { safeAreaInsets } from '@/utils/systemInfo'

// #ifdef MP-WEIXIN
definePage({
  style: {
    navigationStyle: 'custom',
  },
})
// #endif

// #ifndef MP-WEIXIN
definePage({
  style: {
    navigationStyle: 'custom',
    transparentTitle: 'always',
    navigationBarTitleText: '',
  },
})
// #endif

const opacity = ref(0)
onPageScroll((e) => {
  const scrollTop = e.scrollTop
  opacity.value = Math.min(scrollTop / 100, 1)
})

const testList = [{ name: '体育特长生', desc: '测算中考体育分数，评估专项优势，并获取升学路径建议', img: 'https://lwzk.ycymedu.com/img/cpgx/cp_ty.png', type: 'sports' },
{ name: '艺术特长生', desc: '上传作品，获取老师/AI点评，结合文化课成绩规划升学方向', img: 'https://lwzk.ycymedu.com/img/cpgx/cp_ys.png', type: 'art' },
{ name: '特色班', desc: '上传作品，获取老师/AI点评，结合文化课成绩规划升学方向', img: 'https://lwzk.ycymedu.com/img/cpgx/cp_tsb.png', type: "class" }]

const navigateToPage = (type: string) => {
  if(type === "class"){
    uni.showToast({ title: '特色班测评暂未开放，敬请期待~', icon: 'none' })
    return
  }
  uni.navigateTo({ url: `/pages-sub/talented/create/${type}First` })
}
</script>

<template>
  <view class="custom-background flex flex-col">
    <sar-navbar :fixed="true" fixation-style="top:unset;"
      :root-style="{ '--sar-navbar-bg': `rgba(255, 255, 255, ${opacity})`, '--sar-navbar-height': `${safeAreaInsets?.top + 44}px` }">
      <template #title>
        <view :style="{ 'padding-top': `${safeAreaInsets?.top}px` }" class="flex justify-center text-[32rpx] font-500">
          <text>艺体生测评</text>
        </view>
      </template>
    </sar-navbar>

    <view class="mt-[30rpx]">
      <view class="mx-[32rpx] rounded-[18rpx] mb-[20rpx] p-[32rpx] flex custom-item-bg"
        v-for="(value, index) in testList" :key="index" @click="navigateToPage(value.type)">
        <view class="flex flex-col justify-center">
          <view class="text-[#333] text-[40rpx] font-600 mb-[10rpx]">{{ value.name }}</view>
          <view class="text-[#999] text-[24rpx]">{{ value.desc }}</view>
        </view>
        <view class="w-[216rpx] h-[216rpx] flex items-center">
          <image :src="value.img" mode="scaleToFill" class="w-[216rpx] h-[216rpx]" />
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped>
.custom-background {
  background: linear-gradient(180deg, #ecf2ff 0%, #f6f8ff 40rpx, #fff 128rpx);
  background-position: 50% 50%;
  background-origin: padding-box;
  background-clip: border-box;
  background-size: auto auto;
}

.custom-item-bg {
  background: linear-gradient(90deg, #E6F4F2 0%, #CAF4F0 70%);
}
</style>
