<template>
	<div class="nuic-3">
		<p class="title"><b>Where</b> are you based? What do you <b>do</b> ?</p>

		<div class="select-item">
			<div class="title">Based in</div>
			<el-select v-model="data.based">
				<el-option v-for="v in data.basedList" :key="v.value" :label="v.label" :value="v.value" />
			</el-select>
		</div>
		<div class="select-item">
			<div class="title">Role</div>
			<el-select v-model="data.role">
				<el-option v-for="v in data.roleList" :key="v.value" :label="v.label" :value="v.value" />
			</el-select>
		</div>
		<div class="btns">
			<button class="next" @click="emit('next')">All set!</button>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { computed, ref, reactive } from 'vue'
	import { useRouter } from 'vue-router'
	const router = useRouter()
	const emit = defineEmits(['next'])
	const data = reactive({
		basedList: [
			{ value: '1', label: 'Student' },
			{ value: '2', label: 'Teacher' },
			{ value: '3', label: 'Parent' },
			{ value: '4', label: 'Other' }
		],
		roleList: [
			{ value: '1', label: 'Student' },
			{ value: '2', label: 'Teacher' },
			{ value: '3', label: 'Parent' },
			{ value: '4', label: 'Other' }
		],
		based: '',
		role: ''
	})
</script>

<style lang="less" scoped>
	.nuic-3 {
		> .title {
			font-weight: 500;
			font-size: 4rem;
			margin-bottom: 9.8rem;
			> b {
				font-size: 4.8rem;
			}
		}
		> .select-item {
			margin-bottom: 8rem;
			width: 50rem;
			text-align: left;
			> .title {
				margin-bottom: 3rem;
				font-size: 3.6rem;
				font-weight: 800;
				color: #252727;
			}
			> .el-select {
				width: 100%;
				--el-border-radius-base: 0.8rem;
				&::v-deep {
					.el-select__wrapper {
						min-height: auto;
						height: 6rem;
						font-size: 2rem;
						padding: 0 1.8rem;
					}
				}
			}
		}
		> .btns {
			margin-top: 15.8rem;
		}
	}
</style>
