<template>
  <view class="custom-background flex flex-col pb-safe">
    <view>
      <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 class="text-[32rpx] font-500" :style="{ 'padding-top': `${safeAreaInsets?.top}px` }">
            志愿填报
          </view>
        </template>
      </sar-navbar>
    </view>
    <view class="px-[32rpx] mt-[30rpx]">
      <EvaluationItem :item="value"
        v-for="value in evaluationList" :key="value.id" />
    </view>
  </view>
</template>

<script lang="ts" setup>
import { safeAreaInsets } from '@/utils/systemInfo'
import EvaluationItem from './components/EvaluationItem.vue'
import {getEvaluationList} from "@/service/requestApi"

// #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 evaluationList = ref<{name:string,minImg:string,id:number}[]>([])

onLoad(() => {
  getEvaluationList({query:{menuid:'340509778657349'}}).then(resp => {
    if(resp.code === 200){
      evaluationList.value = resp.result
    }
  })
})
</script>

<style lang="scss" 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;
}
</style>