<template>
    <div class="content">
        <!-- 头部 -->
		<div :class="{'header':true,'scroll white':isScrollTop,'white':true}">
			<div class="back" @click="$router.go(-1)"><img src="../../../assets/images/home/expert/back.png" alt=""></div>
			<div class="header-title">完善考生信息</div>
		</div>
		<div class="information pull-content list-section">
			<ul class="information-list">
				<li>
					<span><em>*</em>姓名</span>
					<p>
						<input type="text" value="" v-model="name" placeholder="请输入姓名">
					</p>
				</li>
				<li @click="openAddr()">
					<span><em>*</em>考籍</span>
					<p>
						<input type="text" readonly="readonly" :value="addrData[addrIndex].name" placeholder="请选择考生所在省份">
						<img src="../../../assets/images/home/expert/arrow-right.png" >
					</p>
				</li>
				<li @click="openSex()">
					<span><em>*</em>性别</span>
					<p>
						<input type="text" readonly="readonly" :value="sexData[sexIndex].title" placeholder="请选择性别">
						<img src="../../../assets/images/home/expert/arrow-right.png" >
					</p>
				</li>
				<li @click="openCategory()">
					<span><em>*</em>考生类型</span>
					<p>
						<input type="text" readonly="readonly" :value="categoryData[categoryIndex].title" placeholder="请选择考生姓名">
						<img src="../../../assets/images/home/expert/arrow-right.png" >
					</p>
				</li>
				<li @click="openDate()">
					<span><em>*</em>高考年份</span>
					<p>
						<input type="text" readonly="readonly" :value="dateArray[dateIndex]" placeholder="请选择高考年份">
						<img src="../../../assets/images/home/expert/arrow-right.png" >
					</p>
				</li>
				<li>
					<span><em>*</em>选科组合</span>
					<div class="course-list">
						<span :class="{'checked':item.isActive}" v-for="(item,index) in subjectArray" :key="index" @click="onChangeA(index,item.id)">{{item.name}}</span>
					</div>
				</li>
				<li>
					<span>预估/模考成绩</span>
					<p>
						<input type="text" v-model="achievementExpect" placeholder="请填写预估/模考成绩（非必填）">
					</p>
				</li>
				<li>
					<span>预估/模考省内排名</span>
					<p>
						<input type="text" v-model="provinceRanking" placeholder="请填写预估/模考省内排名（非必填）">
					</p>
				</li>
			</ul>
		</div>
		<div class="information-btn" @click="getStudentInfo()">确认</div>
		<!-- 地址弹出框 -->
		<div class="addr-select-bg" v-show="isAddr" @click="isAddr=!isAddr"></div>
		<div class="addr-select-item" v-show="isAddr">
			<div class="addr-btns">
				<span>请选择城市</span>
				<span @click="isAddr=!isAddr">取消</span>
			</div>
			<ul>
			 	<li :class="{'checked':index == addrIndex}" @click="getAddrValue(index,item)" v-for="(item,index) in addrData" :key="index">{{item.name}}<img v-show="index==addrIndex" src="../../../assets/images/home/expert/yes.png"></li>
			</ul>
		</div>
		<!-- 性别弹出框 -->
		<div class="addr-select-bg" v-show="isSex" @click="isSex=!isSex"></div>
		<div class="addr-select-item" v-show="isSex">
			<div class="addr-btns">
				<span>请选择性别</span>
				<span @click="isSex=!isSex">取消</span>
			</div>
			<ul>
			 	<li :class="{'checked':index == sexIndex}" @click="getSexValue(index,item)" v-for="(item,index) in sexData" :key="index">{{item.title}}<img v-show="index==sexIndex" src="../../../assets/images/home/expert/yes.png"></li>
			</ul>
		</div>
		<!-- 日期弹出框 -->
		<div class="addr-select-bg" v-show="isDate" @click="isDate=!isDate"></div>
		<div class="addr-select-item" v-show="isDate">
			<div class="addr-btns">
				<span>请选择高考日期</span>
				<span @click="isDate=!isDate">取消</span>
			</div>
			<ul>
			 	<li :class="{'checked':index == dateIndex}" @click="getDateValue(index,item)" v-for="(item,index) in dateArray" :key="index">{{item}}<img v-show="index==dateIndex" src="../../../assets/images/home/expert/yes.png"></li>
			</ul>
		</div>
		<!-- 考生类别弹出框 -->
		<div class="addr-select-bg" v-show="isCategory" @click="isCategory=!isCategory"></div>
		<div class="addr-select-item" v-show="isCategory">
			<div class="addr-btns">
				<span>请选择考生类别</span>
				<span @click="isCategory=!isCategory">取消</span>
			</div>
			<ul>
			 	<li :class="{'checked':index == categoryIndex}" @click="getCategoryValue(index,item)" v-for="(item,index) in categoryData" :key="index">{{item.title}}<img v-show="index==categoryIndex" src="../../../assets/images/home/expert/yes.png"></li>
			</ul>
		</div>
		<!-- 咨询卡弹出框 -->
		<div class="addr-select-bg" v-show="isSeekCard" @click="isSeekCard=!isSeekCard"></div>
		<div class="seek-card" v-show="isSeekCard">
			<img @click="goPage('/expert')" src="../../../assets/images/user/seekcard.png">
			<img @click="isSeekCard=!isSeekCard" src="../../../assets/images/user/close.png">
		</div>
    </div>
</template>

<script>
    export default {
        name: "information",
        data(){
            return {
				isScrollTop: false,
				name:'',
				addrData:[], //考籍列表
				addrIndex: 0,
				isAddr: false, //城市列表是否显示
				addrValue:'', //考籍城市编号
				
				studentName: '', //考生姓名
				
				sexData:[
					{title:'男'},
					{title:'女'}
				],
				sexIndex: 0,
				isSex: false, //性别列表是否显示
				sexValue:'', //选择性别
				
				dateArray:[],
				dateIndex: 0,
				isDate: false, //时间列表是否显示
				dateValue:'', //选择时间
				
				categoryData:[
					{title:'普通高考生'},
					{title:'艺考生'},
					{title:'体考生'}
				],
				categoryIndex: 0,
				isCategory: false, //性别列表是否显示
				categoryValue:'', //选择性别
				
				checkedIndex: -1,
				isSeekCard: false,
				
				achievementExpect:'',//预估成绩
				provinceRanking: '' ,//预估排名
				
				// 学科
				subjectArray: [],
				subjectValue: [],
				subjectIndex: 0,
				
				numberArr: [],
				temporaryCode:[],//暂存编号
				limitArr:[],//多选一数组
				count:0,
				userObj:'',
				lenNum:0,//最少最多
				iscount:true,
				ispopu:false
            }
        },
        created() {
        	this.isScroll = true;
        	window.addEventListener("scroll", this.eventScrollTop);
			
			this.getAddrData();
			this.getDate();
			this.getSubjectArray();
        },
		mounted() {
			this.getAddrData();
			this.getDate();
			this.getSubjectArray();
		},
		methods:{
			// 获取城市列表
			getAddrData() {
				let that = this;
				this.axios
					.post(this.HOME + "/api/area/index", {
						pcode: 86
					})
					.then(function(res) {
						that.addrData = res.data.data;
					});
			},
			
			// 获取考试时间
			getDate(){
				const date = new Date();
				let year = Math.trunc(date.getFullYear());
				let end = year + 10;
				let newArray=[];
				for(let i=year; i<= end; i++){
				  newArray.push(i);
				}
				this.dateArray = newArray;
			},
			
			// 城市选择
			openAddr(){
				this.isAddr=!this.isAddr;
			},
			getAddrValue(index,item){
				this.addrValue = item.code;
				this.addrIndex = index;
				this.isAddr=false;
				// 查询科目
				this.getSubjectArray();
				console.log(this.addrData[this.addrIndex],3636)
			},
			
			// 选择性别
			openSex(){
				this.isSex=!this.isSex;
			},
			getSexValue(index,item){
				this.sexValue = item.title;
				this.sexIndex = index;
				this.isSex=false;
			},
			
			// 选择时间
			openDate(){
				this.isDate=!this.isDate;
			},
			getDateValue(index,item){
				this.dateValue = item;
				this.dateIndex = index;
				this.isDate=false;
			},
			
			//选择考生类别
			openCategory(){
				this.isCategory=!this.isCategory;
			},
			getCategoryValue(index,item){
				this.categoryValue = item.title;
				this.categoryIndex = index;
				this.isCategory=false;
			},
			
			// 选择学科
			changeCourse(index){
				this.checkedIndex = index
			},
			
			// 获取选科组合列表
			getSubjectArray() {
				let that = this;
				this.axios
					.post(this.HOME + "/api/dictionary/subjects", {
						type: 0
					})
					.then(function(res) {
						console.log(res,222)
						let list = res.data.data;
						let newArray = [];
						let baiArr = that.addrData[that.addrIndex].subject_white.split(',');
						list.forEach(item=>{
						  baiArr.forEach(item1=>{
							if(item.id==item1){
							  let obj = {
								id: item.id,
								name: item.name,
								isActive:false
							  }
							  newArray.push(obj);
							}
						  })
						  
						})
						that.subjectArray =newArray;
						console.log(that.subjectArray,123)
					});
			},
			
			// 选科组合选择事件
			onChangeA(index,id) {
				let stuJect = this.data.userObj.student.student_subject.split(',');
					let arrList = [];
					stuJect.forEach(item=>{
					  this.data.subjectArray.forEach(item1=>{
						if(item==item1.id){
						  item1.isActive = true;
						}
					  })
					  arrList.push(item*1);
				});
				// // 有限制的科目
				// if(this.data.limitArr.length && this.data.temporaryCode.length!=3){
				// 	// 判断限制的科目在，选择的科目数组里是否存在
				// 	let isc = this.data.limitArr.filter(item=>this.data.temporaryCode.indexOf(item) > -1);
				// 	if(isc.length){
				// 	  let existli = this.data.limitArr.indexOf(id);
				// 	  if(existli==-1){
				// 		this.data.subjectArray[indexes].isActive = !this.data.subjectArray[indexes].isActive
				// 		if(existtemp!=-1) {
				// 		  // 再次点击已经存在的科目，删除
				// 		  this.data.temporaryCode.splice(existtemp,1);
				// 		} else {
				// 		  this.data.temporaryCode.push(id);
				// 		}
				// 		this.setData({
				// 		  subjectArray:this.data.subjectArray
				// 		})
				// 	  } else {
				// 		if(existtemp!=-1) {
				// 		  this.data.subjectArray[indexes].isActive = !this.data.subjectArray[indexes].isActive
				// 		  // 再次点击已经存在的科目，删除
				// 		  this.data.temporaryCode.splice(existtemp,1);
				// 		  this.setData({
				// 			subjectArray:this.data.subjectArray
				// 		  })
				// 		} else {
				// 		  // 存在，就不能再选
				// 		  dd.showToast({content:'选科冲突',type: 'none',duration:2000});
				// 		}
				// 	  }
				// 	} else {
				// 	  this.data.subjectArray[indexes].isActive = !this.data.subjectArray[indexes].isActive
				// 	  if(existtemp!=-1) {
				// 		// 再次点击已经存在的科目，删除
				// 		this.data.temporaryCode.splice(existtemp,1);
				// 	  } else {
				// 		// 可继续选择
				// 		  this.data.temporaryCode.push(id);
				// 	  }
				// 	  this.setData({
				// 		subjectArray:this.data.subjectArray
				// 	  })
				// 	}
				//   } else if(this.data.temporaryCode.length!=3) {
				// 	this.data.subjectArray[indexes].isActive = !this.data.subjectArray[indexes].isActive
				// 	// 没有限制的科目
				// 	if(existtemp!=-1) {
				// 	  // 再次点击已经存在的科目，删除
				// 	  this.data.temporaryCode.splice(existtemp,1);
				// 	} else {
				// 	  // 添加选中的科目
				// 	  this.data.temporaryCode.push(id);
				// 	}
				// 	this.setData({
				// 	  subjectArray:this.data.subjectArray
				// 	})
				//   } else {
				// 	// 没有限制的科目
				// 	if(existtemp!=-1) {
				// 	  this.data.subjectArray[indexes].isActive = !this.data.subjectArray[indexes].isActive
				// 	  // 再次点击已经存在的科目，删除
				// 	  this.data.temporaryCode.splice(existtemp,1);
				// 	  this.setData({
				// 		subjectArray:this.data.subjectArray
				// 	  })
				// 	} else {
				// 	  dd.showToast({content:`最多选${this.data.lenNum}科`,type: 'none',duration:2000});
				// 	}
				// }
				// this.subjectArray[index].isActive=true;
				console.log(index,id)
				
			},
			
		
			
			// 获取考生信息
			getStudentInfo() {
				let that = this;
				this.axios
					.post(this.HOME + "/api/area/index", {
						student_name:	that.studentName,//姓名
						student_gender:	that.sexIndex==0 ? 1 : 2,//性别
						student_native: that.addrData[that.addrIndex].code, //考籍（省级）编号
						student_native_str:	that.addrData[that.addrIndex].name,//考籍（省级）名称
						
						student_subject: this.temporaryCode.join(','),//选科组合（选科ID，多个用英文逗号分割）
						
						student_exam_year: that.dateValue,//高考年份
						
						is_art: that.dateIndex==1?1:0,//是否是艺考生
						is_PE:that.dateIndex==2?1:0,//是否是体考生
						achievement_expect: this.data.achievementExpect,//预估或模考成绩
						province_ranking: this.data.provinceRanking,//预估/省内排名
						achievement_high: '',//高考成绩，-1表示未考（用户留空时默认传值为-1）
					})
					.then(function(res) {
						// that.isSeekCard = true;
						console.log(res,123)
					});
			},
			
			// 跳转
			goPage(path){
			    this.$router.push(path);
			},
			// 滚动改变样式
			eventScrollTop() {
				let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
				if (scrollTop >= 5) {
					if (this.isScroll) {
						this.isScroll = false;
						this.isScrollTop = true;
					}
				} else {
					if (!this.isScroll) {
						this.isScroll = true;
						this.isScrollTop = false;
					}
				}
			}
		},
		destroyed() {
			window.removeEventListener("scroll", this.eventScrollTop);
		},
		//keep-alive进入时触发
		activated() {
			this.isScroll = true;
			window.addEventListener("scroll", this.eventScrollTop)
		},
		//keep-alive离开时触发
		deactivated() {
			window.removeEventListener("scroll", this.eventScrollTop);
		}
    }
</script>

<style scoped>

</style>