<template>
	<view :class="[AppTheme]" class="all_box">
		<view class="top_step">
			<u-steps :current="step" :activeColor="primary">
				<u-steps-item title="选票"></u-steps-item>
				<u-steps-item title="填写信息"></u-steps-item>
				<u-steps-item title="支付"></u-steps-item>
			</u-steps>
		</view>
		<view v-if="step===0">
			<view class="sestion_frame">
				<view class="identification_title">{{ activitydetails.activity_title }}</view>
				<view class="detailed_information">
					<image :src="activitydetails.activity_img" class="detailed_inon_p1" mode="scaleToFill"></image>
					<view class="detailed_inon_p2">
						<view class="details_text">
							时间:{{ retushorttime(activitydetails.create_time) }}-{{ retushorttime(activitydetails.end_time) }}
						</view>
						<view class="details_text">地点:{{ activitydetails.activity_address }}</view>
						<view class="details_text">{{activitydetails.collect_num}}人收藏</view>
					</view>
				</view>
			</view>
			<!-- 成人票 -->
			<view class="ticket_selector">
				<view class="ticket_selector_p1">
					<view class="ticket_title">成人票</view>
					<view class="feeder_box">
						<u-number-box @change="caltotalprice1" min="0" :max="activitydetails.adult_num"
							v-model="form.adult_num">
						</u-number-box>
						<view class="titn_company">张</view>
					</view>
				</view>
				<view class="ticket_selector_p2">票种余量:{{activitydetails.adult_num}}</view>
				<view class="ticket_selector_p2">票种价格:{{activitydetails.adult_fares}}/张</view>
			</view>
			<!-- 儿童票 -->
			<view class="ticket_selector">
				<view class="ticket_selector_p1">
					<view class="ticket_title">儿童票</view>
					<view class="feeder_box">
						<u-number-box @change="caltotalprice2" min="0" :max="activitydetails.child_num"
							v-model="form.child_num">
						</u-number-box>
						<view class="titn_company">张</view>
					</view>
				</view>
				<view class="ticket_selector_p2">票种余量:{{activitydetails.child_num}}</view>
				<view class="ticket_selector_p2">票种价格:{{activitydetails.child_fares}}/张</view>
			</view>
			<view class="valuation">
				<view class="all_num">总计</view>
				<view class="money_num text-neutral">￥{{form.totalprice.toFixed(2)}}</view>
			</view>
		</view>
		<view class="form_box" v-show="step===1">
			<u-form :model="form" :rules="rules" ref="uForm" :errorType="errorType">
				<u-form-item labelWidth="70" prop="answer1" borderBottom
					v-if="activitydetails.msg1!==null&&activitydetails.msg1!==undefined&&activitydetails.msg1!==''"
					:label="activitydetails.msg1">
					<u--input v-model="form.answer1" border="none"></u--input>
				</u-form-item>
				<u-form-item labelWidth="70" prop="answer2" borderBottom
					v-if="activitydetails.msg2!==null&&activitydetails.msg2!==undefined&&activitydetails.msg2!==''"
					:label="activitydetails.msg2">
					<u--input v-model="form.answer2" border="none"></u--input>
				</u-form-item>
				<u-form-item labelWidth="70" prop="answer3" borderBottom
					v-if="activitydetails.msg3!==null&&activitydetails.msg3!==undefined&&activitydetails.msg3!==''"
					:label="activitydetails.msg3">
					<u--input v-model="form.answer3" border="none"></u--input>
				</u-form-item>
				<u-form-item labelWidth="70" prop="answer4" borderBottom
					v-if="activitydetails.msg4!==null&&activitydetails.msg4!==undefined&&activitydetails.msg4!==''"
					:label="activitydetails.msg4">
					<u--input v-model="form.answer4" border="none"></u--input>
				</u-form-item>
				<u-form-item labelWidth="70" prop="answer5" borderBottom
					v-if="activitydetails.msg5!==null&&activitydetails.msg5!==undefined&&activitydetails.msg5!==''"
					:label="activitydetails.msg5">
					<u--input v-model="form.answer5" border="none"></u--input>
				</u-form-item>
				<u-form-item labelWidth="70" prop="remark" label="备注" borderBottom>
					<u--input v-model="form.remark" border="none"></u--input>
				</u-form-item>
			</u-form>
		</view>
		<view class="settlement bg-linear-gradient" @click="godrtext()">下一步</view>
		<payment ref="payment" :channel="5" :alipay="true" :weixinpay="true" :zhtpay="true"></payment>
		<view style="height: 20rpx;"></view>
	</view>
</template>
<script>
	import untiljs from '@/common/until.js';
	export default {
		data() {
			return {
				primary: this.$theme.primary,
				settingFile: getApp().globalData.siteinfo,
				errorType: 'message',
				activitydetails: {},
				step: 0,
				numList: [{
					name: '选票'
				}, {
					name: '填写信息'
				}, {
					name: '支付'
				}],
				form: {
					activity_id: '',
					adult_num: 0,
					child_num: 0,
					type_pay: 1,
					answer1: '',
					answer2: '',
					answer3: '',
					answer4: '',
					answer5: '',
					remark: '',
					totalprice: 0
				},
				rules: {
					answer1: [{
						required: true,
						message: '请输入信息',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],
					answer2: [{
						required: true,
						message: '请输入信息',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],
					answer3: [{
						required: true,
						message: '请输入信息',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],
					answer4: [{
						required: true,
						message: '请输入信息',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],
					answer5: [{
						required: true,
						message: '请输入信息',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],
				}
			};
		},
		onLoad(options) {
			let that = this;
			uni.getStorage({
				key: 'activitydetails',
				success(res) {
					that.activitydetails = res.data;
				}
			});
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			// 返回指定格式时间
			retushorttime(time) {
				if (time !== undefined && time !== null) {
					let date = new Date(time);
					return untiljs.formatDate(date, 'yyyy.MM.dd');
				}
			},
			caltotalprice1(e) {
				let that = this
				that.form.adult_num = e.value;
				that.form.totalprices = parseInt(that.form.adult_num) * parseFloat(that.activitydetails.adult_fares) +
					parseInt(that.form.child_num) * parseFloat(that.activitydetails.child_fares);
					console.log(that.form.totalprices,'that.form.totalprices')
				that.form.totalprice=parseFloat(that.form.totalprices*(that.activitydetails.level_radio/100)) ;
					console.log(that.form.totalprice,'that.form.totalpriceswww')
			},
			caltotalprice2(e) {
				let that = this
				that.form.child_num = e.value;
				that.form.totalprices = parseInt(that.form.adult_num) * parseFloat(that.activitydetails.adult_fares) +
					parseInt(that.form.child_num) * parseFloat(that.activitydetails.child_fares);
					that.form.totalprice=parseFloat(that.form.totalprices*(that.activitydetails.level_radio/100)) ;
			},
			//填写信息
			godrtext() {
				let that = this
				if (that.step === 0) {
					if (that.form.adult_num === 0 && that.form.child_num === 0) {
						that.$api.msg("请至少选择一张票")
					} else {
						that.step = 1
					}
				} else if (that.step == 1) {
					that.$refs.uForm.validate().then(res => {
						that.form.activity_id = that.activitydetails.id
						that.form.money = that.form.totalprice
						that.form.order_money =  that.form.totalprice 
						that.form.yuantotalprice=that.form.totalprices
						that.form.adult_fares = that.activitydetails.adult_fares
						that.form.child_fares = that.activitydetails.child_fares
						that.$paycenter.ct_ac_order(that.form)
							.then(res => {
								if (res.status == 200) {
									that.form.id = res.data
									console.log('ct_ac_order',that.form)
									that.$refs.payment.payopen(that.form);
								} else {
									uni.showToast({
										title: res.msg,
										icon: "none"
									});
								}
							});
					}).catch(errors => {

					})
				}
			}
		}
	};
</script>
<style lang="scss" scoped>
	.all_box {
		width: 100%;
		background-color: #ffffff;
		min-height: 100vh;

		.top_step {
			padding-top: 30rpx;
		}

		.sestion_frame {
			background-color: #ffffff;
			padding: 30rpx 20rpx;
			margin: 25rpx;
			box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.08);
			border-radius: 20rpx;

			.identification_title {
				font-size: 34rpx;
				color: #666;
			}

			.detailed_information {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 25rpx;

				.detailed_inon_p1 {
					width: 300rpx;
					height: 190rpx;
				}

				.detailed_inon_p2 {
					margin-left: 25rpx;
					min-width: calc(100% - 325rpx);

					.details_text {
						width: 100%;
						font-size: 26rpx;
						color: #333;
						margin: 20rpx 0;
					}
				}
			}
		}

		.ticket_selector {
			background-color: #ffffff;
			padding: 30rpx 20rpx;
			margin: 25rpx;
			box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.08);
			border-radius: 20rpx;

			.ticket_selector_p1 {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;

				.ticket_title {
					font-size: 30rpx;
					font-weight: 700;
					color: #333;
				}

				.titn_company {
					margin-left: 15rpx;
				}

				.feeder_box {
					display: flex;
					justify-content: flex-start;
					align-items: center;
				}
			}

			.ticket_selector_p2 {
				font-size: 28rpx;
				color: #333;
				padding: 15rpx 0;
			}
		}

		.valuation {
			background-color: #ffffff;
			padding: 30rpx 20rpx;
			margin: 25rpx;
			box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.08);
			border-radius: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.all_num {
				font-size: 30rpx;
				color: #333;
			}

			.money_num {
				font-size: 28rpx;
			}
		}

		.form_box {
			width: 90%;
			margin: 0 5%;

			/deep/ .u-border-bottom:after,
			.u-border-left:after,
			.u-border-right:after,
			.u-border-top-bottom:after,
			.u-border-top:after,
			.u-border:after {
				border-bottom-color: #666;
			}

			/deep/ .u-form-item {
				padding: 10rpx 0;
			}
		}

		.settlement {
			background-color: #ffffff;
			padding: 25rpx 0;
			margin: 20rpx 25rpx 0 25rpx;
			border-radius: 50rpx;
			text-align: center;
			color: #ffffff;
		}
	}
</style>
