<template>
	<view class="index-wrap">
		<view class="title-h1">
			请先完善个人信息
		</view>
		<view class="item-list">
			<view class="item">
				<view class="title"><text>*</text>学历(必选)</view>
				<view class="option">
					<view class="subject-item" :class="eduLevel===3?'on':''" @click="changeEduLevel(3)">研究生</view>
					<view class="subject-item" :class="eduLevel===2?'on':''" @click="changeEduLevel(2)">本科</view>
					<view class="subject-item" :class="eduLevel===1?'on':''" @click="changeEduLevel(1)">专科</view>
				</view>
			</view>
			<view class="item">
				<view class="title"><text>*</text>专业类(必选)</view>
				<view class="input-wrap">
					<view class="input-value" :class="specialtyName!== ''?'':'placeholder'"
						@click="showZhuanYeDialog(true)">
						{{specialtyName !== ''? specialtyName: "请选择专业类"}}
					</view>
					<view class="icon-select">
					</view>
				</view>
			</view>
		</view>
		<view class="btn-wrap">
			<view class="btn"  @click="commitForm">
				确认提交
			</view>
		</view>
		<uni-popup ref="pop_zhuanye" type="bottom"  style="background: #fff !important;">
			<view class="layer-inner">
				<view class="head">
					<text>选择专业类</text>
					<view class="close-btn" @click="showZhuanYeDialog(false)"></view>
				</view>
				<view class="content">
					<view class="li" :class="item.value == specialtyName?'on':''" v-for="(item,index) in showSpecialtyList"
						:key="index" @click="checkSpecialty(item)">
						<text>{{item.label}}</text>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import api from "@/apiCa/user.js"
	export default {
		data() {
			return {
				schoolName: "", // 
				eduLevel: 2, //3研究生，2本科，1专科
				specialtyName: "", // 
				showSpecialtyList: [{
						label: '哲学',
						value: '哲学'
					},
					{
						label: '经济学',
						value: '经济学'
					},
					{
						label: '法学',
						value: '法学'
					},
					{
						label: '教育学',
						value: '教育学'
					},
					{
						label: '文学',
						value: '文学'
					},
					{
						label: '历史学',
						value: '历史学'
					},
					{
						label: '理学',
						value: '理学'
					},
					{
						label: '工学',
						value: '工学'
					},
					{
						label: '农学',
						value: '农学'
					},
					{
						label: '医学',
						value: '医学'
					},
					{
						label: '管理学',
						value: '管理学'
					},
					{
						label: '艺术学',
						value: '艺术学'
					},
					{
						label: '军事学',
						value: '军事学'
					},
					{
						label: '交叉学科',
						value: '交叉学科'
					},],
				specialtyOption1: [{
						label: '农林牧渔大类',
						value: '农林牧渔大类'
					},
					{
						label: '资源环境与安全大类',
						value: '资源环境与安全大类'
					},
					{
						label: '能源动力与材料大类',
						value: '能源动力与材料大类'
					},
					{
						label: '土木建筑大类',
						value: '土木建筑大类'
					},
					{
						label: '水利大类',
						value: '水利大类'
					},
					{
						label: '装备制造大类',
						value: '装备制造大类'
					},
					{
						label: '生物与化工大类',
						value: '生物与化工大类'
					},
					{
						label: '轻工纺织大类',
						value: '轻工纺织大类'
					},
					{
						label: '食品药品与粮食',
						value: '食品药品与粮食'
					},
					{
						label: '交通运输大类',
						value: '交通运输大类'
					},
					{
						label: '电子信息大类',
						value: '电子信息大类'
					},
					{
						label: '医药卫生大类',
						value: '医药卫生大类'
					},
					{
						label: '财经商贸大类',
						value: '财经商贸大类'
					},
					{
						label: '旅游大类',
						value: '旅游大类'
					},
					{
						label: '文化艺术大类',
						value: '文化艺术大类'
					},
					{
						label: '新闻传播大类',
						value: '新闻传播大类'
					},
					{
						label: '教育与体育大类',
						value: '教育与体育大类'
					},
					{
						label: '公安与司法大类',
						value: '公安与司法大类'
					},
					{
						label: '公共管理与服务大类',
						value: '公共管理与服务大类'
					},
				],
				specialtyOption2: [{
						label: '哲学',
						value: '哲学'
					},
					{
						label: '经济学',
						value: '经济学'
					},
					{
						label: '法学',
						value: '法学'
					},
					{
						label: '教育学',
						value: '教育学'
					},
					{
						label: '文学',
						value: '文学'
					},
					{
						label: '历史学',
						value: '历史学'
					},
					{
						label: '理学',
						value: '理学'
					},
					{
						label: '工学',
						value: '工学'
					},
					{
						label: '农学',
						value: '农学'
					},
					{
						label: '医学',
						value: '医学'
					},
					{
						label: '管理学',
						value: '管理学'
					},
					{
						label: '艺术学',
						value: '艺术学'
					},
					{
						label: '军事学',
						value: '军事学'
					},
					{
						label: '交叉学科',
						value: '交叉学科'
					},
				],
			
			}
		},
		computed: {
		},
		created() {
			// this.getUserInfor();
		},
		methods: {
			async getUserInfor(){
				const res = await api.getUserBasisInfo();
				if (res.Result == 1) {
					const data = res.Data.data;
					this.specialtyName=data.SpecialtyName;
					this.eduLevel=data.EduLevel;
				} else {
					uni.showToast({
						title: res.Message,
						icon: "none"
					})
				}
			},			
			//显示专业弹窗
			showZhuanYeDialog(type){
				if(type==false){
					this.$refs.pop_zhuanye.close();
				}else{
					this.$refs.pop_zhuanye.open('bottom');
				}
			},
			// 改变学历
			changeEduLevel(INDEX){
				if(INDEX == 1){
					this.showSpecialtyList = this.specialtyOption1;
				}else {
					this.showSpecialtyList = this.specialtyOption2;
				}
				this.specialtyName = "";
				this.eduLevel = INDEX;
			},
			//选中专业类
			checkSpecialty(ITEM) {
				this.specialtyName = ITEM.value;
				this.showZhuanYeDialog(false)
			},
			//确认表单
			async commitForm() {
				if (this.specialtyName == "") {
					uni.showToast({
						title: "请先选择专业类",
						icon: "none"
					})
					return;
				}
				uni.showLoading({
					title: "保存中..."
				}) 
				let mobileCode =  this.code;
				const data = {
					//SchoolName: this.schoolName,
					EduLevel: this.eduLevel,
					SpecialtyName: this.specialtyName,
					//Phone: this.mobile,
					//StartYear: this.startYear
				}
				const res = await api.saveUserBasisInfo(mobileCode,data);
				uni.hideLoading();
				if (res.Result == 1) {
					uni.navigateBack()
				} else {
					uni.showToast({
						title: res.Message,
						icon: "none"
					})
				}
			},
		}
	}
</script>
<style lang="scss" scoped>
	.index-wrap {
		padding: 40rpx 20rpx 60rpx;

		.title-h1 {
			font-size: 36rpx;
			color: #000000;
			font-weight: 600;
			margin-bottom: 40rpx;
		}

		.item-list {
			.item {
				padding-bottom: 20px;

				.title {
					font-size: 28rpx;
					color: #333;
					margin-bottom: 20rpx;
					text{
						color:red;
					}
				}

				.input-wrap {
					width: 670rpx;
					height: 84rpx;
					border-radius: 12rpx;
					border: 2rpx solid #EEEEEE;
					padding: 0 20rpx;
					display: flex;
					align-items: center;

					.icon-input {
						width: 32rpx;
						height: 32rpx;
						background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAMAAABF0y+mAAAAM1BMVEUAAAAwMDAyMjIzMzMyMjIwMDAzMzMyMjIzMzMyMjIzMzMzMzM0NDQwMDAzMzMzMzMzMzNtKHn7AAAAEHRSTlMAIN+/fzDvYM9wn49AEK9QVfMC+gAAAGNJREFUKM/VzTsSgDAIRVEiIf8o+1+tGcOkIjQ2etvDPOAbdV/bztzBzH6DFHjULD21zURTUf0XHg1OM55KqolqNkuGHe63BtEwSIY5wyAuI7+KgmUQ5i5nEgrmkmXxwlWFV91t2QjwOGHVAgAAAABJRU5ErkJggg==") no-repeat;
						background-size: 100%;
					}
					.icon-select {
						width: 16rpx;
						height: 16rpx;
						margin-left: 24rpx;
						background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAS5JREFUWEftltsRgjAQRXehEeyACQ1IJUolYiXSiRRAMnQgjTDRZdCJCOQhhB/yH+7JZnMWhI0XbpwPO8Bega4CjLELIuYeG7IBgJJznmGSJDcAOHsMV6MKAngAQLQRQEMA91c5jhsBFBjHcRSGIUH4rkLTtm3aNWEPQVfhbSFiWlVV+fGAT4h3OJ32S0SMsTMi0qtYbanhPwBrO0FKmQkhCvV0oypeQ0xSylwIcR2WdnIWLAxRkPXG7nUSgJoyCILTAoom5aZTTTU7DfuXQU3pKqrZ8NEmHJL+AaENNwJQRGVjy4ZzfjB5y8Y/JBbK7hRb1zWNXO0yBjBV9lA0OgIrAB2EbbhxDwxPMaZsl3BnAKUS9EQjRMxosunKbSUil4+57LHuAZeQuT07wF6BJ0iYZ7lPYQRvAAAAAElFTkSuQmCC") no-repeat;
						background-size: 100%;
					}

					.input-value {
						width: 580rpx;
						height: 84rpx;
						font-size: 28rpx;
						color: #333;
						line-height: 84rpx;
						padding-left: 20rpx;

						&.placeholder {
							font-size: 28rpx;
							color: #999;
						}

						&::-webkit-input-placeholder {
							font-size: 28rpx;
							color: #999;
						}
					}
					.mb-input-value {
						width: 440rpx;
						height: 84rpx;
						font-size: 28rpx;
						color: #333;
						border-radius: 12rpx;
						border: 2rpx solid #EEEEEE;
						line-height: 84rpx;
						padding-left: 40rpx;
						&::-webkit-input-placeholder {
							font-size: 28rpx;
							color: #999;
						}
					}
					.get-code-btn {
						width: 240rpx;
						height: 80rpx;
						margin-left: 30rpx;
						line-height: 80rpx;
						background-color: #1b88ff;
						border-radius: 12rpx;
						font-size: 32rpx;
						text-align: center;
						color: #ffffff;
						z-index: 9;
						&.disable {
							background: #9f9f9f;
						}
					}
				}

				.option {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-around;
					.subject-item {
						width: 210rpx;
						height: 76rpx;
						background: #F3F4F6;
						border-radius: 12rpx;
						font-size: 28rpx;
						color: #333;
						margin-bottom: 20rpx;
						margin-right: 30rpx;
						text-align: center;
						line-height: 76rpx;

						&:nth-child(3n) {
							margin-right: 0;
						}

						&.on {
							background: #F3F4F6;
							color: #1677ff;
						}

						&.disadble {
							color: #bbb;
						}
					}
				}
			}
		}

		.btn-wrap {
			position: fixed;
			bottom: 100rpx;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			justify-content: center;
			z-index: 9;

			.btn {
				width: 688rpx;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				background: #1677ff;
				font-size: 32rpx;
				color: #fff;
				border-radius: 60rpx;

				&.disable {
					background: #F3F4F6;
					color: #bbb;
				}
			}
		}
		.layer-inner {
			background:#fff;
			border-radius:10px 10px 0 0;
			.head {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 120rpx;
				width: 100%;
				font-size: 34rpx;
				color: #000000;

				.close-btn {
					position: absolute;
					top: 39rpx;
					right: 27rpx;
					width: 52rpx;
					height: 52rpx;
					background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAQAAAADQ4RFAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAHdElNRQfmChMLCDGRh9c8AAAAmklEQVQ4y7WUMQ7DMAhFnzpmRO3979ABqVN8m/YWdLGcqEkM+lI92Qb+R3wAPgRPjMoxnOANQRCsLGnIwtq98X5pCZvRuucLHuMxY9tYGvffD0tYdsA2ZbsEvWabAp4b09SPDlYp0t4JSAt0YPOhYEH4ja0m+jg+QvzMfKuh/CE9oRBCyQVxhTYSGlYYDWEIpXGXFou0woRl+QUj09L9Yg66GgAAAABJRU5ErkJggg==") center no-repeat;
					background-size: 50%;
				}
			}

			.content {
				max-height: 640rpx;
				overflow: auto;
				padding: 0 40rpx;

				.li {
					position: relative;
					height: 114rpx;
					line-height: 114rpx;
					border-bottom: 2rpx solid #f5f5f5;

					text {
						font-size: 30rpx;
						color: #000000;
						margin-right: 20rpx;
					}

					&.on {
						text {
							color: #1b88ff;
						}

						&::after {
							position: absolute;
							right: 10rpx;
							top: 50%;
							transform: translateY(-50%);
							content: "";
							background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAZCAMAAACM5megAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAATlBMVEUbiP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8AAAAx8hE2AAAAGHRSTlMAH0f2c0SVAfc7bv6JI/hS+UhR+1D0jxRK42VSAAAAAWJLR0QZ7G61iAAAAAd0SU1FB+YKFBEcF+FCm4sAAABsSURBVCjPzdHHDoAwDANQs1cLlJn//1KGEIKqrY+QY/QOiQ2QiRgA4iTlRCTjJC9+QsqPSMVJ3ShGdCuiwgToegu5zrWQ+6MX8j39QMaby41MILoLmWC6JzKkgGFHI+voQKxGTLMshACrdu83CdwKBKKZxqUAAAAASUVORK5CYII=") no-repeat;
							background-size: 100%;
							display: block;
							width: 35rpx;
							height: 25rpx;
						}
					}
				}
			}

			.op-block {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 30rpx 40rpx 0;
				width: 670rpx;
				height: 115rpx;

				.commit-btn {
					width: 361rpx;
					height: 77rpx;
					line-height: 77rpx;
					text-align: center;
					background-color: #1b88ff;
					border-radius: 38rpx;
					font-size: 30rpx;
					color: #ffffff;
				}
			}
		}
	}
</style>