<template>
	<view class="main">
		<u-form :model="form" ref="uForm" :label-width="'auto'">
			<u-form-item label="驾校名称" >
				<view class="tar">
					{{currentSchool.schoolName}} 
				</view>
			</u-form-item>
			<u-form-item label="学驾车型" prop="classModel" required >
				<view @click="showDriveModels=true"  class="select_row" >
					<u-input v-model="form.classModel"  input-align="right" placeholder="请选择" disabled  @click="showDriveModels=true" />
					<u-icon name="arrow-right" size="28" color="#686B73" style="margin-left: 12rpx;" ></u-icon>
				</view>
			</u-form-item>
			<u-form-item label="班型" prop="classModel" required >
				<view @click="showDriveModels=true"  class="select_row" >
					<u-input v-model="form.trainingClassLable"  input-align="right" placeholder="请选择" disabled  @click="showDriveModels=true" />
					<u-icon name="arrow-right" size="28" color="#686B73" style="margin-left: 12rpx;" ></u-icon>
				</view>
			</u-form-item>
			
			<view class="line"></view>
			
			<u-form-item label="业务类型" required prop="businessTypeName" >
				<view class="tag_row">
					<view class="tag" v-for="(item, index) in businessTypeArr" :key="index" @click="form.businessType=item.id" :class="{active: item.id==form.businessType}">{{item.name}}</view>
				</view>
			</u-form-item>
			
			<!-- <view :class="{line: !form.businessType}"></view> -->
			
			<view class="" v-if="form.businessType==1">
				
				<!-- <u-form-item label="原驾驶证号"  required >
					<u-input v-model="form.certificateCodeShow" disabled input-align="right" placeholder="" disabled/>
				</u-form-item> -->
				<u-form-item label="驾驶证初领日期"  required >
					<view @click="showFirstLicenceTime=true"  class="select_row">
						<u-input v-model="form.firstLicenceTime" disabled input-align="right" placeholder="请选择" @click="showFirstLicenceTime=true"/>
						<u-icon name="arrow-right" size="28" color="#686B73" style="margin-left: 12rpx;"></u-icon>
					</view>
				</u-form-item>
				<u-form-item label="原准驾车型" required>
					<view @click="showOldDriveModel=true"  class="select_row">
						<u-input v-model="form.oldDriveModel" disabled input-align="right" placeholder="请选择" @click="showOldDriveModel=true"/>
						<u-icon name="arrow-right" size="28" color="#686B73" style="margin-left: 12rpx;"></u-icon>
					</view>
				</u-form-item>
				<view class="line"></view>
			</view>
			<!-- <view :class="{line: !form.businessType}"></view> -->
			<!-- <u-form-item label="异地转入" required prop="businessTypeName" >
				<view class="tag_row" @click="transfer=!transfer">
					<view class="tag" :class="{active: transfer}">是</view>
					<view class="tag" :class="{active: !transfer}">否</view>
				</view>
			</u-form-item>
			<view class="" v-if="transfer">
				<u-form-item label="转出城市" prop="coachName" >
					<view @click="showDriveModels=true"  class="select_row" >
						<u-input v-model="form.value"  input-align="right" placeholder="请选择" disabled  @click="showDriveModels=true" />
						<u-icon name="arrow-right" size="28" color="#686B73" style="margin-left: 12rpx;" ></u-icon>
					</view>
				</u-form-item>
				<u-form-item label="已学科目" prop="coachName" >
					<view @click="showDriveModels=true"  class="select_row" >
						<u-input v-model="form.value"  input-align="right" placeholder="请选择" disabled  @click="showDriveModels=true" />
						<u-icon name="arrow-right" size="28" color="#686B73" style="margin-left: 12rpx;" ></u-icon>
					</view>
				</u-form-item>
			</view> -->
			
			<view class="h2">
				学员信息 <text>请准确填写学员真实信息</text>
			</view>
			
			<u-form-item label="头  像"  >
				<view  @click="chooseImages('avatar')"  class="select_row" >
					<view class="avatar">
						<image src="@/static/images/avatar.png" mode="" v-if="!form.avatar"></image>
						<image :src="form.avatar" mode="" v-else></image>
					</view>
					<u-icon name="arrow-right" size="28" color="#686B73" style="margin-left: 12rpx;" ></u-icon>
				</view>
			</u-form-item>
			<u-form-item label="姓  名"   >
				<u-input placeholder="请填写" input-align="right" v-model="form.realName"></u-input>
			</u-form-item>
			<u-form-item label="性  别"  > 
				<view @click="showSex=true"  class="select_row" >
					<u-input v-model="form.sexName"  input-align="right" placeholder="请选择" disabled  @click="showSex=true" />
					<u-icon name="arrow-right" size="28" color="#686B73" style="margin-left: 12rpx;" ></u-icon>
				</view>
			</u-form-item>
			<u-form-item label="国  籍" prop="coachName" >
				<view class="tar">中国</view>
			</u-form-item>
			<u-form-item label="证件类型" >
				<view class="tar">身份证</view>
			</u-form-item>
			<u-form-item label="证件号码">
				<view class="tar">
					<u-input placeholder="请输入证件号码" input-align="right" v-model="form.certificateCode"></u-input>
				</view>
			</u-form-item>
			<!-- <u-form-item label="地址">
				<view class="tar">
					<u-input placeholder="请输入证件号码" input-align="right" v-model="form.address"></u-input>
				</view>
			</u-form-item> -->
			<view class="idcardBox">
				<view class="idcard"  @click="chooseImages('idcardA')" >
					<image src="@/static/images/idcardA.png" mode="widthFix"  v-if="!form.idcardA"></image>
					<image :src="form.idcardA" mode="widthFix"  v-else></image>
				</view>
				<view class="idcard"  @click="chooseImages('idcardB')" >
					<image src="@/static/images/idcardB.png" mode="widthFix" v-if="!form.idcardB"></image>
					<image :src="form.idcardB" mode="widthFix"  v-else></image>
				</view>
			</view>
			<view class="line"></view>
			<view class="remark">
				<view class="h3">备注</view>
				<view class="remarkInput">
					<u-input v-model="form.value" type="textarea" :border="false" :auto-height="true" :height="176"/>
				</view>
			</view>
		</u-form>
		
		<view class="footBox">
			<view class="leftCon">
				<view class="row1">
					<view class="lab">总额：</view>
					<view class="redPrice">
						<text>￥</text>{{ $u.utils.priceTo(newPrice)}}
					</view>
					<view class="oldPrice">{{$u.utils.priceTo(totalPrice)}}</view>
				</view>
				<view class="redTxt">享9.5折，已减{{$u.utils.priceTo(totalPrice - newPrice)}}元！</view>
			</view>
			<view class="rightBtn" @click="oneBtnConfirm">下一步</view>
		</view>
		
		<!-- 车型 -->
		<u-picker mode="selector" v-model="showDriveModels" :range="selectorDriveModels" @confirm="confirmDriveModels"></u-picker>
		<!-- 班型 --> 
		<u-picker mode="selector" v-model="showTrainingClasss" :range="selectorTrainingClasss" range-key="className" @confirm="confirmTrainingClasss"></u-picker>
		<!-- 性别选择 -->
		<u-picker mode="selector" v-model="showSex" :range="sexArr" range-key="lab" @confirm="confirmSex"></u-picker>
		<!-- 原驾驶证初领日期 -->
		<u-picker  mode="time" v-model="showFirstLicenceTime"  @confirm="confirmFirstLicenceTime" :params="paramsPicker"></u-picker>
		
		<!-- 原驾驶证学驾车型 -->
		<u-popup v-model="showOldDriveModel" mode="bottom">
			<view class="carBox">
				<view class="carh1">学驾车型</view>
				<view v-for="(item,index) in carTypeArr" :key="index" class="carLi">
					<view class="carType">{{item.lab}}</view>
					<view class="carName_row">
						<view class="carName" v-for="(item2,index2) in item.arr" :key="index2"  @click="pickerCarClick(item2)" :class="{active: pickerCarArr.indexOf(item2) > -1}">{{item2}}</view>
					</view>
				</view>
				<view class="payBtn_row">
					<view class="payBtn border" @click="pickerCar()">重置</view>
					<view class="payBtn"  @click="pickerCar(1)">完成</view>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	import indexApi from '@/api/index.js'
	import {mapState} from 'vuex'
	import { APP_API, APP_HOST } from '@/site.config.js';
	const _url = APP_HOST + APP_API + '/util/manage/uploadFile.do';
	export default {
		
		 computed: {
		    ...mapState(['currentSchool','classChooseItem']),
		    // 该函数内部运行的返回值大致为：{num: () => this.$store.state.num, school: () => this.$store.state.school} 
		  },
		data() {
			return {
				transfer: false,
				showDriveModels: false,
				showTrainingClasss: false,
				showFirstLicenceTime: false,
				showOldDriveModel: false,
				form: {
					classModel: '',
					businessType: 0,//业务类型
					firstLicenceTime: '',//原驾驶证初领日期
					avatar: '',//上传头像
					certificateType: 1,//证件类型
					trainingClassId: '',//班型
					realName: '',
					certificateCode: '',
					sex: '',
					nationality: '中国',
					oldDriveModel: '',//原驾驶证车型
					
					address: '',
					adaptability: 0,
					
					businessTypeName: '',
					sexName: '',
					trainingClassLable: '',
					idcardA: '',
					idcardB: ''
				},
				showSex: false,
				info: {},
				selectorTrainingClasss: [],//班型数据
				selectorDriveModels: [],//车型数据
				businessTypeArr: [
					{name: '初领', id: 0},
					{name: '增领', id: 1}
				],
				sexArr: [
					{id: 1, lab: '男'},
					{id: 2, lab: '女'},
				],
				carTypeArr: [
					{lab: '小车',arr: ['C1','C2','C3']},
					{lab: '货车',arr: ['A2','B2',]},
					{lab: '客车',arr: ['A1','B3','B1']},
					{lab: '摩托车',arr: ['D','E','F']},
					{lab: '其它',arr: ['C4','C5','C6']},
				],
				pickerCarArr: [],
				paramsPicker: {
					year: true,
					month: true,
					day: true,
				},
				trainingApplyId: '',
				totalPrice: '',
				newPrice: 0
			}
		},
		onLoad(options) {
			this.trainingApplyId = options.trainingApplyId
			// totalPrice  trainingClassId
			this.form.classModel = this.classChooseItem.className
			this.totalPrice = this.classChooseItem.totalPrice
			this.newPrice = this.totalPrice * 0.95
			this.form.trainingClassId = this.classChooseItem.trainingClassId
			this.form.trainingClassLable = this.classChooseItem.classModel
			
			this.InitFn()
			
		},
		methods: {
			async InitFn() {
				await this.getTrainingApplyDetailsFn()
				this.queryTrainingClasssFn()
				this.queryDriveModelsFn()
			},
			// 确认提交表单还是继续修改
			async oneBtnConfirm() {
				this.form.trainingSchoolId = this.info.trainingSchoolId
				this.form.trainingApplyId = this.trainingApplyId
				let obj = {}
				for(let key in this.form) {
					if(this.form[key]!=='') {
						obj[key] = this.form[key]
					}
				}
				if(this.form.businessType) {
					// 如果是增驾——原驾驶证号==身份证
					obj.driveLicence = obj.certificateCode
				}
				delete obj.businessTypeName
				delete obj.sexName
				delete obj.trainingClassLable
				
				console.log(obj)
				const [nulls, res] = await indexApi.createTrainingApplyDetails(obj)
				setTimeout(()=>{
					uni.navigateTo({
						url: '/pages/application/payment'
					})
				},2000)
				this.$store.commit('upDateCoachItem', {})
				console.log('表单已提交')
				console.log(res)
				if(res.code==0) {
					this.signContractFn()
				}
			},
			// 获取签约链接
			async signContractFn() {
				uni.showLoading({
					title: '请稍后',
					mask: true
				})
				const [nulls, res] = await indexApi.signContract({trainingApplyId: this.trainingApplyId})
				console.log('获取签约链接')
				console.log(res)
				if(res.code!=0) return this.$u.toast(res.message)
				// this.showWebView = true
				// this.webVeiwUrl = res.data.url
				// console.log(this.webVeiwUrl)
				uni.hideLoading()
				this.$store.commit('updateWebVeiwUrl',res.data.url)
				this.showSignConfirmPopup = false
				uni.navigateTo({
					url: 'pages/application/webView?id='+ this.trainingApplyId
				})
			},
			// 选择性别
			confirmSex(i) {
				let index = i[0]
				let item = this.sexArr[index]
				this.form.sex = item.id
				this.form.sexName = item.lab
			},
			// 选择原驾驶证学驾车型
			pickerCarClick(item) {
				let index = this.pickerCarArr.indexOf(item)
				if(index>-1) {
					this.pickerCarArr.splice(index, 1);
				}else {
					this.pickerCarArr.push(item)
				}
			},
			// 选择原驾驶证学驾车型 点击重置或确定
			pickerCar(num) {
				if(num==1) {
					if(!this.pickerCarArr.length) return this.$u.toast('请选择学驾车型')
					this.form.oldDriveModel = this.pickerCarArr.join('')
					this.showOldDriveModel = false
				}else {
					this.pickerCarArr = []
					this.form.oldDriveModel = ''
				}
			},
			// 选择原驾驶证初领日期
			confirmFirstLicenceTime(val) {
				let str = val.year+'-'+val.month+'-'+val.day
				this.form.firstLicenceTime = str
				console.log(val)
			},
			// 选择车型
			async confirmDriveModels(i) {
				let index = i[0]
				this.form.classModel = this.selectorDriveModels[index]
				this.form.trainingClassLable = ''
				await this.queryTrainingClasssFn()
				this.showTrainingClasss = true
				
			},
			// 选择班型
			confirmTrainingClasss(i) {
				let index = i[0]
				let item = this.selectorTrainingClasss[index]
				this.form.trainingClassId = item.trainingClassId
				this.form.trainingClassLable = item.className
				this.totalPrice = item.totalPrice
				
			},
			// 获取班型
			async queryTrainingClasssFn() {
				if(!this.info.trainingSchoolId) return
				let obj = {pageSize: 20,pageIndex: 1,trainingSchoolId: this.info.trainingSchoolId,}
				if(this.form.classModel) obj.classModel = this.form.classModel
				const [nulls, res] = await indexApi.querySimpleTrainingClasssByModel(obj)
				this.selectorTrainingClasss = res.data
				console.log('获取班型')
				console.log(res)
			},
			// 获取学驾车型
			async queryDriveModelsFn() {
				if(!this.info.trainingSchoolId) return
				const [nulls, res] = await indexApi.queryDriveModels({trainingSchoolId: this.info.trainingSchoolId})
				this.selectorDriveModels = res.data
				console.log('学驾车型')
				console.log(res)
			},
			// 查询状态
			async getTrainingApplyDetailsFn() {
				console.log(this.trainingApplyId)
				const [nulls, res] = await indexApi.getTrainingApplyDetails({trainingApplyId: this.trainingApplyId})
				this.info = res.data
				console.log('整体状态控制***************')
				console.log(res)
				console.log(nulls)
				if(this.info.checkStatus==1) this.stepIcon = 1 //按顺序：体检，面签，1为完成，0-未完成
				if(this.info.applyStatus==1) this.currentIndex = this.stepIcon = 3//0-预报名，1-已报名，2-已支付,3-已学完
				if(this.info.applyStatus==1&&this.info.contractStatus<2) this.showSignPopup = true
				if(this.info.contractStatus==2) this.currentIndex = 5
				if(this.info.contractStatus==2&&this.info.applyStatus==1) {
					if(!this.info.trainingOrderId) {
						this.createOrder()
					}else {
						uni.redirectTo({
							url: '/pages/learnDriveStep/payMoney/payMoney?trainingOrderId='+ this.info.trainingOrderId + '&trainingApplyId='+ this.trainingApplyId
						})
					}
				}
			},
			
			//选择图片
			chooseImages(type) {
				uni.chooseImage({
					count: 1, //允许选择的数量
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success:  res => {
						// console.log(res)
						uni.showLoading({
							title: '图片上传中...'
						});
						
						this.uploadImgApi(res.tempFilePaths[0],type)
					}
				})
			},
			uploadImgApi(filePath,type) {
				console.log(filePath)
				let _this = this
				// 上传图片到服务器
				uni.uploadFile({
					url: _url,//接口
					filePath: filePath,//要上传的图片的本地路径
					name: 'file',
					
					formData: {
						fileType: 1,
						fileSuffix: "png"
					},
					header: {
						token: uni.getStorageSync("Authorization") || '',
					},
					success(res) {
						console.log(res)
						console.log('上传成功')
						let res2 = JSON.parse(res.data)
						console.log(res2)
						if(res2.code==0) {
							_this.form[type] = res2.data
						}
						uni.hideLoading();
					},
					complete: ()=> {}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		padding: 0 32rpx 100rpx 32rpx;
		background: #fff;
	}
	.payBtn_row {
		width: 100%;
		padding: 20rpx 46rpx;
		display: flex;
		justify-content: space-between;
		border-top: 1px solid #ededed;
		.payBtn {
			width: 48%;
			line-height: 96rpx;
			color: #fff;
			height: 96rpx;
			background: linear-gradient(180deg, #3593FB 0%, #53D3E5 100%);
			border-radius: 49rpx;
			text-align: center;
			&.border {
				border: 2rpx solid  rgba(53, 147, 251, 1);
				color: #1989FA;
				background: #fff;
			}
		}
	}
	.select_row {
		display: flex;justify-content: flex-end;width: 100%;
	}
	.avatar {
		width: 96rpx;
		height: 96rpx;
		border-radius: 50%;
		overflow: hidden;
	}
	.idcardBox {
		display: flex;
		padding: 42rpx 0 28rpx 0;
		.idcard {
			flex: 1;
			padding: 0 10rpx;
		}
	}
	.h2 {
		width: 100vw;
		margin-left: -32rpx;
		height: 96rpx;
		background: #F6F7F8;
		font-weight: 600;
		color: #333333;
		line-height: 96rpx;
		padding: 0 32rpx;
		text {
			font-size: 28rpx;
			color: #686B73;
			padding: 0 0 0 8rpx;
		}
	}
	.line {
		height: 20rpx;
		width: 100vw;
		background-color: #f7f7f7;
		margin: -1px 0 0 -32rpx;
	}
	.tar {
		text-align: right;
		width: 100%;
	}
	.tag_row {
		display: flex;
		width: 100%;
		justify-content: flex-end;
		// padding-top: 15rpx;
		.tag {
			width: 88rpx;
			height: 56rpx;
			background: #F6F7F8;
			border-radius: 28rpx;
			font-size: 28rpx;
			color: #686B73;
			margin-left: 12rpx;
			text-align: center;
			line-height: 56rpx;
			&.active {
				background:  #EDF8FE;
				border: 1rpx solid #3593FB;
				color: #1989FA;
			}
		}
	}
	.remark{
		padding-bottom: 80rpx;
		.remarkInput {
			width: 100%;
			padding: 12rpx  32rpx;
			border-radius: 8rpx;
			background: #F6F7F8;
		}
		.h3 {
			height: 108rpx;
			line-height: 108rpx;
			font-size: 32rpx;
			color: #333;
		}
	}
	
	.footBox {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		height: 128rpx;
		background: #FFFFFF;
		box-shadow: inset 0px 1px 0px 0px #E8E9EC;
		padding: 0 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	  .leftCon {
		  flex: 1;
		  width: 0;
	    .row1 {
			display: flex;
			align-items: center;
			font-size: 28rpx;
	      .lab {
			color: #333;
	      }
	
	      .redPrice {
			  color: #E63633;
	        text {
				font-size: 28rpx;
	        }
			font-size: 40rpx;
	      }
	
	      .oldPrice {
			color: #686B73;
			text-decoration: line-through;
			margin-right: 10rpx;
	      }
	    }
	
	    .redTxt {
			color: #E63633;
			// margin-top: 8rpx;
			font-size: 28rpx;
	    }
	  }
	
	  .rightBtn {
		width: 216rpx;
		height: 96rpx;
		background: linear-gradient(180deg, #3593FB 0%, #53D3E5 100%);
		border-radius: 50rpx;
		font-size: 36rpx;
		color: #fff;
		text-align: center;
		line-height: 96rpx;
	  }
	}
	
	.carBox {
		width: 100%;
		.carh1 {
			font-size: 26rpx;
			font-weight: 700;
			text-align: center;
			padding: 30rpx 0 0  0;
		}
		.carLi {
			width: 100%;
			margin-bottom: 30rpx;
			padding: 0 32rpx;
		}
		.carType {
			font-size: 26rpx;
			font-weight: 500;
			line-height: 40rpx;
			padding: 28rpx 12rpx 12rpx 0;
		}
		.carName_row {
			display: flex;
			.carName {
				margin-right: 40rpx;
				width: 88rpx;
				height: 56rpx;
				background: #F6F7F8;
				border-radius: 28rpx;
				line-height: 56rpx;
				text-align: center;
				color: #686B73;
				&.active {
					background: #ECF7FE;
					border: 1px solid #3593FB;
					color: #1989FA;
				}
			}
		}
	}
</style>