<template>
	<view>
		<view class="transmit-name allcss">
			<text style="flex: 1;">
				培训标题 ：
			</text>
			<text style="width:80%">
				{{listDetail.trainTitle}}
			</text>
		</view>
		<view class="demand-box allcss">
			<view class="demand-title">
				<text>活动内容 ：</text>
				<view class="enroll-box" v-if="isEnroll"><text>已报名</text></view>
			</view>
			<view class="demand-content">
				<view>{{listDetail.trainContent}}</view>
				<view>培训讲师：{{listDetail.trainTeacher}}</view>
				<view>培训标题：{{listDetail.trainTitle}}</view>
				<view>培训时间：{{listDetail.trainTime}}</view>
				<view>培训地点：{{listDetail.trainPlace}}</view>
			</view>
		</view>
		<view class="unveiling allcss">
			<view class="unveiling-title">
				现在报名	 ：
			</view>
			<view class="unveiling-content">
				电话 ：<input type="number" class="reason-ipt" placeholder="请输入您的电话" v-model="contactPhone"/>
			</view>
			<view class="unveiling-content">
				人数 ：<input type="number" class="reason-ipt" placeholder="请输入培训人数" v-model="contactNum"/>
			</view>
			<view class="unveiling-content">
				联系人 ：<input type="text" class="reason-ipt" placeholder="请输入联系人名称" v-model="contactMan"/>
			</view>
<!-- 			<view class="unveiling-content reason">
				揭榜理由 ：<textarea class="filed" placeholder="非必填,不得多于200字"></textarea>
			</view> -->
		</view>
		<button type="default" class="unveilingBtn" @click="commit">报名确认</button>
	</view>
</template>

<script>
  import { trainInform } from 'api/trainInform'
	import { trainApply } from 'api/trainApply'
	import { detail } from 'api/detail'
	import { trainApplyquery } from 'api/trainApplyquery'
	
	export default {
		onShareAppMessage(res) {
			if (res.from === 'button') {// 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '',
				path: '/pages/HomePages/peixun'
			}
		},
		data() {
			return {
				listDetail:{
					"incubator":'',
					"trainContent":'',
					"trainTeacher":'',
					"trainTitle":'',
					"trainTime":'',
					"trainPlace":'',
				},
				contactPhone:'',
				contactNum:'',
				contactMan:'',
				Id:'',
				isEnroll:false
			}
		},
		async onLoad(options) {
			// console.log(options)
			const that = this
			try{
				const params1 = {
					param:{
						"trainInformId":options.id
					}
				}
				const data1 = await trainApplyquery(params1)
				// console.log(data1)
				if(data1 !== null){
					that.isEnroll = true
					that.contactPhone = data1.contactPhone
					that.contactNum = data1.applyNum
					that.contactMan = data1.contacts
				}else if(that.$store.state.user.bindMsg.bindStatus-0 === 1){
					const params = {
						param:{
						}
					}
					const data = await detail(params)
					that.contactPhone = data.contactPhone
					that.contactMan = data.contacts
				}
			}catch(e){
				//TODO handle the exception
				console.log(e)
			}
			that.Id = options.id
			try{
				const params = {
					param:{
						"id": options.id
						}
					}
				const data = await trainInform(params)
				if(data.trainTeacher){
					that.listDetail = data
				}
			}catch(err){
				//TODO handle the exception
				console.log(err)
			}
		},
		methods: {
			async commit(){
				const that = this
				// console.log(that.contactPhone,that.contactNum,that.contactMan,that.Id)
				if(that.contactPhone == ''){
					uni.showModal({
						title:'请填写联系方式',
						icon:'none',
						duration:2000
					})
				}else if(that.contactNum == ''){
					uni.showModal({
						title:'请填写培训人数',
						icon:'none',
						duration:2000
					})
				}else if(that.contactMan == ''){
					uni.showModal({
						title:'请填写培训联系人',
						icon:'none',
						duration:2000
					})
				}else if(that.isEnroll === true){
					uni.showModal({
						title:"提示",
						content:"您已报名过，是否确认修改报名信息",
						success: async function(res) {
							if(res.confirm){
								try{
									const params = {
										param:{
											applyNum:that.contactNum - 0,
											contactPhone:that.contactPhone,
											contacts:that.contactMan,
											trainInformId:that.Id	- 0
										}
									}
									const data = await trainApply(params)
									uni.showToast({
										title:'报名成功',
										icon:'none'
									})
								}catch(e){
									//TODO handle the exception
									uni.showToast({
										title:'报名失败 :' + e,
										icon:'none'
									})
									console.log(e)
								}
							}
						}
					})
				}else{
					try{
						const params = {
							param:{
								applyNum:that.contactNum - 0,
								contactPhone:that.contactPhone,
								contacts:that.contactMan,
								trainInformId:that.Id	- 0
							}
						}
						const data = await trainApply(params)
						uni.showToast({
							title:'报名成功',
							icon:'none'
						})
					}catch(e){
						//TODO handle the exception
						uni.showToast({
							title:'报名失败 :' + e,
							icon:'none'
						})
						console.log(e)
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.allcss{
	background-color: $white;
	margin-bottom: 10px;
}
.transmit-name{
	padding-left: 30upx;
	min-height: 88upx;
	// line-height: 88upx;
	display: flex;
	flex-wrap: no-wrap;
	align-items: center;
}
.demand-box{
	height: auto;
	position: relative;
	padding-bottom: 30upx;
}
.demand-title{
	padding-left: 30upx;
	height: 60upx;
	line-height: 60upx;
	border-bottom: 1px solid #eee;
}
.demand-content{
	margin-left: 70upx;
	margin-right: 75upx;
	margin-top: 10px;
	padding:0 10px;
	min-height: 140px;
	height: auto;
	line-height: 48upx;
}
.unveiling{
	height: auto;
}
.unveiling-title{
	padding-left: 30upx;
	height: 60upx;
	line-height: 60upx;
	border-bottom: 1px solid #eee;
}
.unveiling-content{
	position: relative;
	margin-left: 30upx;
	width: 690upx;
	border-bottom: 1px solid #eee;
	padding: 10px;
}
.reason{
	border: none !important;
}
.reason-ipt{
	position: absolute;
	border: 1px solid #eee;
	border-radius: 5px;
	top: 10px;
	left: 180upx;
	padding-left: 10px;
}
.filed{
	border: 1px solid #eee;
	border-radius: 5px;
	padding: 10upx;
	height: 100px;
	width: 660upx;
}
.unveilingBtn{
	margin-left: 30upx;
	width: 690upx;
	background-color: $red !important;
	color: $white !important;
}
.enroll-box{
	position: absolute;
	right: 100upx;
	top: 100upx;
	height: 100px;
	width: 100px;
	border: 2px solid #FF4500;
	line-height: 100px;
	color: #FF4500;
	font-size: 24px;
	border-radius: 50%;
	text-align: center;
	transform: rotate(25deg);
	
	text{
		border: 1px solid #FF4500;
		padding: 4px;
		border-radius: 5px;
	}
}
</style>
