<template>
	<view style="position: relative;" class="view-box">
		<view class="box">
			<!-- <view class="box-img">
				<image style="width: 100rpx; height: 50rpx;;"
					src='https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653464014000_713.png'
					mode="aspectFill"></image>
			</view> -->
			<view class="box-bg">
				<view class="title">
					学员姓名
				</view>
				<input class="uni-input inputM" placeholder-class="placeholderClass" v-model="rules.StuName"
					placeholder="请输入学员姓名" maxlength="5" />
			</view>
			<view class="box-bg">
				<view class="gender-name">性别</view>
				<view class="xingbie">
					<text v-for="(item, i) in goodsist" :key="i" @click="gende(item,i)"
						:class="[index==i?'gender':'gender2'] ">{{item.name}}</text>
				</view>
			</view>
			<view class="box-bg" @click="formType(0)">
				<view class="title">
					公历生日
				</view>
				<input class="uni-input inputM" placeholder-class="placeholderClass" v-model="rules.StuBirth"
					placeholder="请选择" />
				<view>
					<u-icon name="arrow" color="#9F9F9F" size="20"></u-icon>
				</view>
			</view>
			<view class="box-bg">
				<view class="title">
					手机号码
				</view>
				<input type="number" placeholder-class="placeholderClass" class="uni-input inputM"
					v-model="rules.StuTel" placeholder="输入11位手机号" maxlength="11" />
			</view>
			<view class="box-bg" style="padding-right: 0rpx">
				<view class="title">
					就读学校
				</view>
				<input class="uni-input inputM" style="padding-right: 30px;" placeholder-class="placeholderClass"
					v-model="rules.BaseCondition" placeholder="请选择" />
				<view @click="formType(1)" class="schoo-fe">
					<u-icon name="arrow" color="#9F9F9F" size="20"></u-icon>
				</view>
			</view>
			<view class="box-bg" @click="formType(2)">
				<view class="title">
					就读年级
				</view>
				<input maxlength="0" disabled='true' placeholder-class="placeholderClass" class="uni-input inputM"
					v-model="rules.DemandPoint" placeholder="请选择" />
				<view>
					<u-icon name="arrow" color="#9F9F9F" size="20"></u-icon>
				</view>
			</view>
			<view class="box-bg" @click="formType(3)">
				<view class="title">
					报名校区
				</view>
				<input maxlength="0" placeholder-class="placeholderClass" class="uni-input inputM" disabled='true'
					v-model="rules.School_Id" placeholder="请选择" />
				<view>
					<u-icon name="arrow" color="#9F9F9F" size="20"></u-icon>
				</view>
			</view>
			<view class="box-bg2">
				<view class="title">
					如何知道进阶思维
				</view>
				<textarea class="uni-input2 inputM" type="textarea" placeholder-class="placeholderClass"
					v-model="rules.ConsultingResults" placeholder="请输入" />
			</view>
			<!-- 日历弹窗 -->
			<uni-calendar v-show="show" ref="calendar" :insert="false" @confirm="confirm" @close="close" />
		</view>
		<!-- 学校弹窗 -->
		<u-popup v-model="show2" mode="right" length="80%">
			<view class="school-bg">
				<text>
					<!-- <u-icon name="arrow-left" size="20"></u-icon> -->
					<text class="school font24">选择就读学校</text>
				</text>
			</view>
			<!-- <view class="search">
				<u-search placeholder="请输入名称" v-model="keyword"></u-search>
			</view> -->
			<scroll-view scroll-y="true" style="height:100%;">
				<view v-if='type==1' class="list" :class="[actuve==i?'list2':'']" v-for="(item, i) in schoollist"
					:key="i" @click="masklist(item.ConfigName,i)">
					<view>
						{{item.ConfigName}}
					</view>
					<view v-if="actuve==i">
						<u-icon name="success" size="20"></u-icon>
					</view>
				</view>
			</scroll-view>
		</u-popup>
		<!-- 年级弹窗 -->
		<u-popup v-model="show3" mode="bottom" length="auto">
			<scroll-view scroll-y="true" style="height:400rpx;">
				<view v-for="(item, i) in schoollist" :key="i">
					<view class="list" :class="[actuve3==i?'list2':'']" @click="grades(item.Content,i)">
						<view>{{item.Content}}</view>
						<view v-if="actuve3==i">
							<u-icon name="success" size="20"></u-icon>
						</view>
					</view>
				</view>
			</scroll-view>
		</u-popup>
		<!-- 校区弹窗 -->
		<u-popup v-model="show4" mode="right" length="80%">
			<view class="school-bg">
				<text>
					<!-- <u-icon name="arrow-left" size="20"></u-icon> -->
					<text class="school font24">选择校区</text>
				</text>
			</view>
			<scroll-view scroll-y="true" style="height:100%;">
				<view class="list" :class="[actuve2==i?'list2':'']" v-for="(item, i) in schoollist" :key="i"
					@click="campus(item,i)">
					<view>
						{{item.SName}}
					</view>
					<view v-if="actuve2==i">
						<u-icon name="success" size="20"></u-icon>
					</view>
				</view>
			</scroll-view>
		</u-popup>
		<!-- 提交 -->
		<view class="submit-box" @click="submit()">
			<view class="submit-bo2">提交</view>
		</view>
	</view>
</template>

<script>
	var testCmd = "";
	var postMsg = {};
	export default {
		data() {
			return {
				pageTitle: '学员录入',
				title: '选择就读学校',
				u: {},
				School_Id: '', //要传的校区id
				schoollist: [], //列表
				Type: '',
				communitys: false,
				actuve: -1,
				actuve2: -1,
				actuve3: -1,
				type: -1,
				show: false, //日历
				show2: false, //学校
				show3: false, //年级
				show4: false, //社区
				mode: 'date',
				rules: {
					StuName: '',
					StuSex: '0',
					StuBirth: '',
					BaseCondition: '',
					DemandPoint: '',
					School_Id: '',
					StuTel: '',
					ConsultingResults: ''
				},
				goodsist: [{
						name: '男',
						id: '0',
					},
					{
						name: '女',
						id: "1"
					}
				],
				index: 0
			}
		},
		created() {
			this.u = uni.getStorageSync("mall_UserInfo");
		},
		mounted() {
			uni.setNavigationBarTitle({
				title: this.pageTitle,
			});
		},
		methods: {
			// 提交表单
			registered() {
				let that = this;
				testCmd = "/api/WeChatPublic/CreateMallStudent"; //WeChatPublic/CreateStudent
				postMsg = {
					OpenId: that.u.OpenId, //	openId	是	[string]		查看
					UnionId: that.u.Unoinid,
					StuSex: that.rules.StuSex, //	学生性别 0男 1女	是	[string]		查看
					StuName: that.rules.StuName, //	学生姓名	是	[string]		查看
					StuBirth: that.rules.StuBirth, //	学生生日	是	[string]		查看
					StuTel: that.rules.StuTel, //	手机号码	是	[string]		查看
					BaseCondition: that.rules.BaseCondition, //	就读学校	是	[string]		查看
					DemandPoint: that.rules.DemandPoint, //	班级	是	[string]		查看
					ConsultingResults: that.rules.ConsultingResults, //	如何知道进阶思维	是	[string]		查看
					School_Id: that.School_Id, //	校区	是	[string]	
					// School_Id: that.rules.School_Id, //	校区	是	[string]	
					Group_Id: "100001"
				};
				that.requestJJSWAdmin(testCmd, postMsg,
					(res) => {
						if (res.data.Code == 1) {
							uni.navigateBack({
								delta: 1
							});
						} else {
							uni.showToast({
								title: res.data.Message,
								position: 'bottom',
								icon: 'none',
								duration: 2000
							});
						}
					}
				);
			},
			initlist() {
				let that = this;
				that.requestJJSWAdmin(testCmd, postMsg,
					(res) => {
						that.schoollist = res.data.Data
					}
				);
			},
			submit() {
				let patt = /^[1][3-9][\d]{9}/
				if (this.rules.StuName == '') {
					uni.showToast({
						title: '请填写姓名',
						position: 'bottom',
						icon: 'none',
						duration: 2000
					});
				} else if (this.rules.StuTel == '') {
					uni.showToast({
						title: '请输入手机号',
						position: 'bottom',
						icon: 'none',
						duration: 2000
					});
				} else if (!patt.test(this.rules.StuTel)) {
					uni.showToast({
						title: '请输入正确的手机号码',
						position: 'bottom',
						icon: 'none',
						duration: 2000
					});
				} else {
					this.registered()
				}
			},
			confirm(e) {
				console.log(e);
				this.show = false
				this.rules.StuBirth = e.fulldate
			},
			gende(item, i) {
				this.index = i
				this.rules.StuSex = item.id
			},
			close() {
				this.show = false
				console.log('弹窗关闭');
			},
			// 表单切换
			formType(type) {
				switch (type) {
					case 0:
						this.show = true
						this.$refs.calendar.open();
						break;
					case 1:
						testCmd = "/api/WeChatPublic/GetPublicSchool";
						postMsg = {
							Type: 1
						};
						this.show2 = true
						this.title = '选择就读学校'
						break;
					case 2:
						testCmd = "/api/WeChatPublic/GetStuSchoolClass";
						postMsg = {
							Type: 2
						};
						this.show3 = true
						break;
					case 3:
						testCmd = "/api/WeChatPublic/GetSchoolList";
						postMsg = {
							Group_Id: ""
						};
						this.show4 = true
						break;
					default:
						console.log('其他')
				}
				this.type = type
				this.initlist()
			},
			masklist(item, i) {
				this.actuve = i
				this.rules.BaseCondition = item
				this.show2 = false
			},
			// 年级
			grades(item, i) {
				this.actuve3 = i
				this.rules.DemandPoint = item
				this.show3 = false
			},
			campus(item, i) {
				this.actuve2 = i
				this.rules.School_Id = item.SName
				this.School_Id = item.SId
				this.show4 = false
			},
		},
	}
</script>

<style>
	.uni-calendar__content{
		z-index: 1000 !important;
	}
	.schoo-fe{
		width: 72rpx;
		    /* text-align: right; */
		    /* display: inline-block; */
		    display: flex;
		    /* justify-content: space-around; */
		   /* justify-content: flex-end; */
	}
	.gender-name {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #282828
	}

	.placeholderClass {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #C8C8C8;
	}

	.title {
		padding-right: 51rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #282828;
	}

	.uni-input {
		margin-left: 0rpx !important;
		flex: 1;
		font-size: 30rpx;
	}

	.uni-input2 {
		height: 108rpx;
		margin-left: 0rpx !important;
		flex: 1;
		line-height: 40rpx;
		font-size: 30rpx;
	}

	.school {
		font-size: 22rpx;
	}

	.school.font24 {
		font-size: 24rpx;
	}

	.search {
		margin-bottom: 20rpx;
	}

	.view-box {
		/* padding-top: 40rpx; */
		background-color: #F5F5F5;
		min-height: 100vh;
		padding-bottom: 59rpx;
	}

	.submit-box {
		/* margin-top: 50rpx; */
		width: 280rpx;
		height: 88rpx;
		background: #C91727;
		border-radius: 44px;
		display: flex;
		justify-content: center;
		font-size: 22rpx;
		position: fixed;
		bottom: 60rpx;
		left: 50%;
		transform: translate(-50%, 0%);
		align-items: center;
		font-weight: 500;
		font-size: 30rpx;
		color: #FFF;
		z-index: 100
	}

	.list2 {
		color: #138BF9;
	}

	.list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: solid 1px #D9D9D9;
		padding: 20rpx 0;
		padding-left: 20rpx;
		padding-right: 20rpx;
		font-size: 24rpx;
	}

	.box {
		/* width: 90%; */
		padding-bottom: 110rpx;
		padding-top: 63rpx;
		padding-left: 50rpx;
		padding-right: 50rpx;
		margin: auto;
		/* padding-bottom: 34rpx; */
		border-radius: 20rpx;
	}

	.school-bg {
		background-color: #EEF1FA;
		padding: 20rpx 0;
		display: flex;
		align-items: center;
		padding-left: 50rpx;
		margin-bottom: 20rpx;
	}

	.xingbie {
		/* width: 185rpx; */
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-left: 110rpx;
		width: 160rpx;

	}

	.gender {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #282828;
		width: 55rpx;
		height: 55rpx;
		background: #16CFEA;
		border-radius: 50%;
		display: inline-block;
		text-align: center;
		line-height: 55rpx
	}

	.gender2 {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #C8C8C8;
		width: 55rpx;
		height: 55rpx;
		background: #F5F5F5;
		border-radius: 50%;
		display: inline-block;
		text-align: center;
		line-height: 55rpx;
		/* 	margin-left: 49rpx; */

	}

	.box-bg {

		height: 88rpx;
		line-height: 88rpx;
		background: #FFFFFF;
		border-radius: 44rpx;
		margin-bottom: 42rpx;
		display: flex;
		align-items: center;
		padding-left: 51rpx;
		/* justify-content: space-between; */
		padding-right: 52rpx;
	}

	.box-bg2 {

		height: 224rpx;
		line-height: 88rpx;
		background: #FFFFFF;
		border-radius: 44rpx;
		margin-bottom: 42rpx;
		/* display: flex;
		align-items: center; */
		padding-left: 51rpx;
		/* justify-content: space-between; */
		padding-right: 52rpx;
	}

	.box-img {
		display: flex;
		justify-content: center;
		padding-top: 50rpx;
		margin-bottom: 20rpx;
	}
</style>
