<template>
	<view class="container">
		 <uv-navbar leftIcon="" placeholder bgColor="rgba(255, 255, 255, 0)" />

		<view class="content-box">
			<view class="header">
				<view class="avatar">
					<image v-if="state.userInfo?.avatar" :src="state.userInfo.avatar" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="fm-box">
					<view style="font-size: 36rpx;">
						{{ state.userInfo?.nickName || "未知" }}
					</view>
					<view class="">
						{{ state.userInfo?.phonenumber ? state.userInfo?.phonenumber.slice(0, 8) + '****' : "" }}
					</view>
				</view>
			</view>
			
			<view style="background-color: #fff;padding: 20rpx 30rpx;margin-top: 60rpx;border-radius: 20rpx;font-size: 28rpx;">
				<view style="display: flex;justify-content: space-between;">
					<view class="">
						我的孩子
					</view>
					<view style="display: flex;justify-content: space-between;align-items: center;color: #7175f0;">
						添加<uv-icon name="arrow-right" color="#7175f0" size="14"></uv-icon>
					</view>
				</view>
				<view style="display: grid;grid-template-columns: repeat(2, 1fr);gap: 20rpx;margin-top: 30rpx;">
					<view v-for="item in state.students" style="display: flex;border: 2rpx solid #e4e9ff;padding: 10rpx;border-radius: 20rpx;">
						<view style="flex-shrink: 0;width: 90rpx;height: 90rpx;border-radius: 50%;background-color: #bdceff;">
							<image v-if="item.avatar" :src="item.avatar" style="width: 100%;height: 100%;"></image>
						</view>
						<view style="flex: 1;display: flex;flex-direction: column;justify-content: space-between;margin-left: 20rpx;">
							<view class="">
								{{ item.name || "未知" }}
							</view>
							<view style="font-size: 28rpx;">
								{{ item.grade || "-" }}
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view style="background-color: #fff;padding: 20rpx 30rpx;border-radius: 20rpx;font-size: 28rpx;margin-top: 40rpx;">
				<view style="margin-bottom: 30rpx;">
					我的报名
				</view>
				<template v-if="state.signupList.length">
					<view v-for="item in state.signupList" style="display: flex;justify-content: space-between;border-radius: 20rpx;border: 2rpx solid #bdceff;padding: 10rpx;">
						<view style="background-color: #b8cfff;border-radius: 16rpx;flex-shrink: 0;width: 100rpx;height: 100rpx;">
							<image v-if="item.avatar" :src="item.avatar" style="width: 100%;height: 100%;"></image>
						</view>
						<view style="flex: 1;display: flex;flex-direction: column;justify-content: space-between;margin-left: 20rpx;">
							<view class="">
								华地校区-四年级-数学-A+班
							</view>
							<view class="">
								10-01至10-31 19:00-21：00
							</view>
						</view>
					</view>
				</template>
				<view v-else style="text-align: center;color: #666;padding: 30rpx 0;">
					暂无报名数据
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		onMounted
	} from 'vue';
	import { userInfoApi, myStudentsApi, userSignUpListApi } from "@/api/index.js"

	const state = reactive({
		userInfo: {},
		signupList: [],
		students: []
	})
	
	onMounted(() => {
		getUserInfo()
		getMyStudents()
		getuserSignUpList()
	})
	
	const getUserInfo = async () => {
		const { data } = await userInfoApi()
		state.userInfo = data.user
	}
	
	const getMyStudents = async () => {
		const { data } = await myStudentsApi()
		state.students = data.students
	}

	const getuserSignUpList = async () => {
		const { data } = await userSignUpListApi()
		console.log(data)
		state.signupList = data.signupList
	}
</script>

<style lang="scss" scoped>
	.container {
		background: linear-gradient(135deg, #d4d6fe 10%, #f6f7fb 90%);
		background-color: red;
		height: calc(100vh - var(--tab-bar-height));
		display: flex;
		flex-direction: column;
	}

	.content-box {
		flex: 1;
		overflow-y: auto;
		padding: 0 30rpx;
		display: flex;
		flex-direction: column;
	}
	
	.header {
		display: flex;
		justify-content: space-between;
		padding: 0 20rpx;
	}
	
	.avatar {
		flex-shrink: 0;
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background-color: #c1cdff;
	}
	
	.fm-box {
		margin-left: 30rpx;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 6rpx 0;
	}
</style>