<template>
	<view>
		<view @click="goBack">{{gradeTerm.text}}</view>
		<view>
			<view v-for="item in data.list" :key="item.index"> {{item.index}} {{item.label}} </view>
		</view>
		<view>
			<uni-button @click="handleCheckCatalogue">go catalogue</uni-button>
			<navigator :url="`/pages/study/catalogue?gradeId=1&termId=1&text=一年级上册`" hover-class="navigator-hover">
				<button type="default">学习计划</button>
			</navigator>
			<navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
				<button type="default">成长</button>
			</navigator>
			<navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
				<button type="default">伙伴</button>
			</navigator>
			<navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
				<button type="default">我的</button>
			</navigator>
		</view>

		<!-- 蛋 -->
		<view class="ezy-popup" >蛋</view>


		<catalogue ref="catalogueRef" @change-zhang="handleChangeZhang"></catalogue>
	</view>
</template>

<script setup>
	import {
		reactive,ref,onMounted
	} from "vue";
	import { onLoad,onReady } from '@dcloudio/uni-app';
	import catalogue from "@/components/catalogue/catalogue.vue";


	const catalogueRef = ref(null);

	const gradeTerm = ref('')

	onLoad((options) => {
		gradeTerm.value = options;
	})

	const data = reactive({
		list: [{
				label: '长度中的隐含条件问题',
				id: 1,
			},
			{
				label: '解决重叠问题',
				id: 2,
			},
			{
				label: '列表法解决方案问题',
				id: 3,
			},
			{
				label: '真题测试',
				id: 4,
			},
		]
	})

	function handleChangeZhang(data) {
		console.log('章:', data);
	}

	function handleCheckCatalogue() {
		catalogueRef.value.showPopup();
	}

	function goBack() {
		uni.navigateBack()
	}
</script>

<style>

</style>