<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '测评',
  },
}
</route>

<template>
  <view class="flex flex-col h-screen">
    <Tabs v-model:modelValue="currentIndex" :tabs="tabs"></Tabs>
    <swiper class="flex-1" :current="currentIndex" @change="handleSwiperChange">
      <swiper-item>
        <view class="mx-[32rpx] overflow-auto h-full">
          <EvaluationItem
            v-for="item in academicList"
            :key="item.id"
            :item="item"
            start-color="#E5F2FA"
            end-color="#DAE8FA"
          ></EvaluationItem>
        </view>
      </swiper-item>
      <swiper-item>
        <view class="mx-[32rpx] overflow-auto h-full">
          <EvaluationItem
            v-for="item in healthList"
            :key="item.id"
            :item="item"
            start-color="#E6F4F2"
            end-color="#CAF4F0"
          ></EvaluationItem>
        </view>
      </swiper-item>
      <swiper-item>
        <view class="mx-[32rpx] overflow-auto h-full">
          <EvaluationItem
            v-for="item in learningList"
            :key="item.id"
            :item="item"
            start-color="#E9EFFF"
            end-color="#D8DFFD"
          ></EvaluationItem>
        </view>
      </swiper-item>
    </swiper>
    <TabBar :current-page="3"></TabBar>
  </view>
</template>

<script lang="ts" setup>
import TabBar from '@/components/bar/TabBar.vue'
import Tabs from '@/components/tab/Tabs.vue'
import EvaluationItem from '../components/EvaluationItem.vue'
import { getEvaluationList } from '@/service/index/api'

const tabs = [
  {
    title: '学职定位',
    startColor: '#E5F2FA',
    endColor: '#DAE8FA',
  },
  {
    title: '心理健康',
    startColor: '#E6F4F2',
    endColor: '#CAF4F0',
  },
  {
    title: '学习状态',
    startColor: '#E9EFFF',
    endColor: '#D8DFFD',
  },
]

const currentIndex = ref(0)

const academicList = ref<any[]>([])
const healthList = ref<any[]>([])
const learningList = ref<any[]>([])

const handleSwiperChange = (val: any) => {
  currentIndex.value = val.detail.current
}

onLoad(() => {
  getEvaluationList({ menuid: '340509778657349' }).then((res) => {
    academicList.value = res.result as any[]
  })
  getEvaluationList({ menuid: '339908117110853' }).then((res) => {
    healthList.value = res.result as any[]
  })
  getEvaluationList({ menuid: '340509778686021' }).then((res) => {
    learningList.value = res.result as any[]
  })
})
</script>
