<template>
	<view class="index-page">
		<ch-nav-bar title="学生个人中心" :height="66" :backFn="quitApp">
			<template v-slot:right>
				<uni-icons type="gear-filled" size="56" color="#fff" @click="enterSetting"/>
			</template>
		</ch-nav-bar>
		<view class="top-container">
			<uni-row :gutter="10">
				<uni-col :span="8">
					<view class="user__info-item">
						<text>姓名：</text>
						<text>{{ userInfo.studentname }}</text>
					</view>
				</uni-col>
				<uni-col :span="8">
					<view class="user__info-item">
						<text>学号：</text>
						<text>{{ userInfo.studentno }}</text>
					</view>
				</uni-col>
				<uni-col :span="8">
					<view class="user__info-item">
						<text>班级：</text>
						<text>{{ userInfo.gradename }}{{ userInfo.classname }}</text>
					</view>
				</uni-col>
			</uni-row>
		</view>
		<uni-grid :column="4" :showBorder="false">
			<uni-grid-item v-for="item in gridList" :key="item.id" @click="clickMenuItem(item.url)">
				<ch-flex class="grid-menu__item" direction="column" justify="center" items="center">
					<image class="grid-menu__image" :src="item.icon" mode="aspectFit"></image>
					<text>{{ item.name }}</text>
				</ch-flex>
			</uni-grid-item>
		</uni-grid>
	</view>
</template>

<script setup>
import ChFlex from '@/components/ch-flex/ch-flex.vue';
import ChNavBar from '@/components/ch-nav-bar/ch-nav-bar.vue';
import { quitApp } from '@/useModules/useNavigate.js';
import { reactive, toRefs } from 'vue';
import userIndex from '@/assets/images/icons/userIndex_order.png';
import myStudy from '@/assets/images/icons/my_study.png';
import task from '@/assets/images/icons/task.png';
import answer from '@/assets/images/icons/answer.png';
import { onLoad } from '@dcloudio/uni-app';
import { useUserStore } from '@/store/user.js';

const userStore = useUserStore()

const data = reactive({
	userInfo: {},
	gridList: [
		{
			id: '001',
			name: '考试/练习',
			icon: userIndex,
			url: '/pages/exam/exam'
		},
		{
			id: '002',
			name: '试 题',
			icon: myStudy,
			url: '/pages/subjectSelect/subjectSelect'
		},
		{
			id: '003',
			name: '作 业',
			icon: task,
			url: '/pages/task/task'
		},
		{
			id: '004',
			name: '答题器',
			icon: answer,
			url: '/pages/IClicker/IClicker'
		}
	],
})

const { gridList, userInfo } = toRefs(data);

onLoad(() => {
	userInfo.value = userStore.userInfo;
})

function clickMenuItem(url) {
	uni.navigateTo({
		url
	})
}

function enterSetting () {
	uni.navigateTo({
		url: '/pages/setting/setting'
	})
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
