<template>
	<view class="container">
		<uv-form labelPosition="left" :model="state.studentInfo" :rules="state.rules" ref="formRef" class="form-box">
			<uv-form-item prop="name">
				<uv-input v-model="state.studentInfo.name" shape="circle" placeholder="请输入学生真实姓名">
				</uv-input>
			</uv-form-item>
			<uv-form-item prop="sex">
				<view style="display: flex;justify-content: space-around;width: 100%;">
					<view @click="state.studentInfo.sex = 0" class="select-item"
						:style="state.studentInfo.sex === 0 ? 'border-color:#6b75f6;' : ''">
						<uv-icon name="man" color="#7175f0" size="16" style="margin-right: 10rpx;"></uv-icon>男
					</view>
					<view @click="state.studentInfo.sex = 1" class="select-item"
						:style="state.studentInfo.sex === 1 ? 'border-color:#6b75f6;' : ''">
						<uv-icon name="woman" color="#ff5d5c" size="16" style="margin-right: 10rpx;"></uv-icon>女
					</view>
					<view @click="state.studentInfo.sex = 2" class="select-item"
						:style="state.studentInfo.sex === 2 ? 'border-color:#6b75f6;' : ''">
						<uv-icon name="lock" color="#7175f0" size="16" style="margin-right: 10rpx;"></uv-icon>保密
					</view>
				</view>
			</uv-form-item>
			<uv-form-item prop="city">
				<uv-input v-model="state.studentInfo.city" shape="circle" placeholder="请输入学生所在城市" />
			</uv-form-item>
			<uv-form-item prop="school">
				<uv-input v-model="state.studentInfo.school" shape="circle" placeholder="请输入学生在读学校" />
			</uv-form-item>
			<uv-form-item prop="grade" @click="showSelect">
				<uv-input v-model="state.studentInfo.grade" disabled disabledColor="#ffffff" shape="circle"
					placeholder="请选择学生在读年级">
					<template v-slot:suffix>
						<uv-icon name="arrow-down" color="#6b75f6" size="14"></uv-icon>
					</template>
				</uv-input>
			</uv-form-item>
			<uv-form-item>
				<view @click="submit"
					style="width: 100%;background-color: #7175f0;color: #fff;text-align: center;padding: 20rpx 0;border-radius: 9999rpx;">
					确认添加
				</view>
			</uv-form-item>
		</uv-form>

		<uv-picker ref="pickerRef" :columns="state.columns" @confirm="confirm"></uv-picker>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from "vue"
	import {
		addStudentsApi
	} from "@/api/index.js"

	const formRef = ref(null)
	const pickerRef = ref(null)

	const state = reactive({
		studentInfo: {
			name: "",
			sex: "",
			city: "",
			school: "",
			grade: ""
		},
		columns: [
			["一年级", "二年级", "三年级", "四年级", "五年级", "六年级", "初一", "初二", "初三", "高一", "高二", "高三"]
		],
		rules: {
			'name': {
				type: 'string',
				required: true,
				message: '请输入学生真实姓名',
				trigger: ['blur', 'change']
			},
			'sex': {
				type: 'number',
				required: true,
				message: '请选择性别',
				trigger: ['blur', 'change']
			},
			'city': {
				type: 'string',
				required: true,
				message: '请输入学生所在城市',
				trigger: ['blur', 'change']
			},
			'school': {
				type: 'string',
				required: true,
				message: '请输入学生在读学校',
				trigger: ['blur', 'change']
			},
			'grade': {
				type: 'string',
				required: true,
				message: '请选择学生在读年级',
				trigger: ['blur', 'change']
			},
		}
	})

	const showSelect = () => {
		pickerRef.value.open()
	}

	const confirm = e => {
		state.studentInfo.grade = e.value[0]
	}

	const submit = async () => {
		try {
			await formRef.value.validate()

			uni.showLoading({
				title: "提交中",
				mask: true
			})

			const res = await addStudentsApi(state.studentInfo)
			uni.hideLoading()
			uni.showToast({
				icon: 'success',
				title: '添加成功'
			})
			formRef.value.resetFields()
			uni.navigateBack()
		} finally {
			uni.hideLoading()
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background: linear-gradient(135deg, #eaecfb 10%, #f6f7fb 90%);
		background-color: red;
		height: calc(100vh - var(--tab-bar-height));
		overflow-y: auto;
		padding: 0 24rpx;
		font-size: 28rpx;
	}

	.form-box {
		margin-top: 80rpx;
		background-color: #fff;
		padding: 20rpx;
		border-radius: 40rpx;
	}

	.select-item {
		background-color: #e9ecfc;
		width: 28%;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10rpx 0;
		border-radius: 9999rpx;
		border: 3rpx solid #e8ecfd;
	}
</style>