<template>
	<view class="bg">
		<view class="top-box" v-if="product">
		    <view class="product-title">{{ product.title }}</view>
		    <view class="product-date">{{ selectDate.date }}</view>
		    <view class="product-num">
		        <text class="product-text" v-for="(item, index) in sku" :key="index">{{ item.title }}x{{ item.num }}</text>
		    </view>
		</view>
		
		<view class="user-box">
			<view class="user-box-title">出行人信息</view>
			
			<!-- <view v-for="(skuItem, skuIndex) in sku" :key="skuIndex">
			    <view class="user-item" v-for="(item, index) in skuItem.num" :key="index">
					<text class="user-item-text">{{ skuItem.title }}</text>
			
			        <view v-if="linkmans[skuIndex][index]" class="user-info">
			            <text style="margin-right: 30rpx">{{ linkmans[skuIndex][index].name }}</text>
			            <text>{{ linkmans[skuIndex][index].tel }}</text>
			        </view>
			
					<img @tap="showLinkman(skuIndex)" v-if="linkmans[skuIndex][index]" src="https://static.ticket.sz-trip.com/dongtai/images/index/edit.png" class="icon-bianji1" />
					
			        <view @tap="showLinkman(skuIndex)" v-else class="add-btn">
			            + 添加
			        </view>
			    </view>
			</view> -->
			<view class="user-item">
			    <text class="user-item-text">姓名</text>
			    <input v-model="reserve_name" placeholder="输入您的姓名" class="user-input"/>
			</view>
			<view class="user-item">
			    <text class="user-item-text">手机号</text>
			    <input type="number" v-model="reserve_phone" placeholder="输入您的手机号" maxlength="11" class="user-input"/>
				<uni-icons type="closeempty" size="20" @click="reserve_phone = ''" v-if="reserve_phone!= ''" style="margin-left: 30rpx;"></uni-icons>
			</view>
			<!-- <view class="user-item" style="border-bottom: none">
			    <text class="user-item-text">订单备注</text>
			    <input type="text" v-model="remark" placeholder="选填"  class="user-input"/>
			</view> -->
		</view>
		
		<navigator :url="'/subPackages/order/orderCoupon?allprice='+ price + '&sku_ids='+ sku_ids.toString()" class="coupon-box flex-between">
		    <text>优惠券</text>
		    <view style="display: flex;align-items: center;">
				<view class="add-btn" v-if="!coupon">选择优惠券</view>
				<view style="display: flex;align-items: center;color: #C3282E;font-weight: bold;" v-if="coupon && coupon.CouponActivity">
					<view>-￥{{coupon.CouponActivity.discounts/100}}</view>
				</view>
				<img src="https://static.ticket.sz-trip.com/changyoutaihu/images/user/rightIcon.png" class="icon-coupon">
			</view>
		</navigator>
		
		<!-- <view class="xy-box">
			<view class="quan flex-center" @click="clickXy">
				<view class="quan-seld" v-if="xySeld"></view>
			</view>
			<view style="margin-left: 20rpx;">
				请您仔细阅读<span @click="openXz">线路标准退预定须知</span>，点击去支付即代表您已阅读条款内容
			</view>
		</view> -->
		
		<view class="fixed-bottom">
		    <view class="order-all-price">
		        合计：
		        <text class="order-all-text">
					¥{{ priceTotal() / 100 }}
				</text>
		    </view>
		    <view class="order-btn" @tap="order">去支付</view>
		</view>
		
		<!-- 协议弹框 -->
		<!-- <uni-popup ref="popup" type="bottom" :safe-area="false">
			<view class="xzPopup">
				<view v-html="formateRichText(product.reserve_content)"></view>
				<img src="https://static.ticket.sz-trip.com/taihu/images/scenic/cha.png" @click="closePopup">
			</view>
		</uni-popup> -->
		
		<!-- 添加出行人弹窗 -->
		<uni-popup ref="peoplePopup" type="bottom" backgroundColor="#F4F4F4">
			<view class="people-popup">
				<view class="popup-top">
					<view class="top flex-between">
						<text class="text-overflow" @click="changePeoplePopup('close')"></text>
						<text class="confirm" @click="changePeoplePopup('')">确定</text>
					</view>
				</view>
				<navigator url="/subPackages/user/myContactsAdd?type=add" class="button">添加出行人</navigator>
				<view class="popup-list" v-if="peopleList.length>0">
					<view class="popup-item" v-for="(item,index) in peopleList" :key="index">
						<view class="item-top flex-between">
							<navigator :url="`/subPackages/user/myContactsAdd?type=edit&id=${item.id}`"><img
									src="https://static.ticket.sz-trip.com/taizhou/images/detail/edit.png" class="editImg">
							</navigator>
							<view class="name">{{ item.name }}</view>
							<view class="subtitle">
								<view class="mobile">手机号 {{ item.tel }}</view>
								<view class="idCard">{{ item.document_type_text }} {{ item.id_number }}</view>
							</view>
							<view class="status" :class="item.is_seld?'statuss':'noSelect'"
								@click="seldThisPeople(item, index)">
								<img src="https://static.ticket.sz-trip.com/taihu/images/user/dui.png"
									v-if="item.is_seld" class="selectImg">
							</view>
						</view>
						<view class="item-site" @click="changeDefaultPeople(item,index)">
							<view class="flex-around" v-if="item.is_default==1">
								<view></view>
							</view>
							<view v-else></view>
							设为默认出行人
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				product: this.$store.state.user.lineInfo.product,
				sku: this.$store.state.user.lineInfo.sku,
				selectDate: this.$store.state.user.lineInfo.selectDate,
				linkmans: [],
				sku_ids: '',
				price: this.$store.state.user.lineInfo.price,
				skuIndex: null,
				coupon: '',
				reserve_name: '',
				reserve_phone: '',
				reserve_mobile: '',
				remark: '',
				peopleList: [],
				linkmanList: [],
				xySeld: false
			}
		},
		onReady() {
			// 清除优惠券
			this.$store.commit("choseCoupon", "");
			// 自动获取手机号
			this.reserve_phone = JSON.parse(uni.getStorageSync('userInfo')).mobile
			this.Post({
				goods_id: this.sku[0].goods_id
			},'/api/goods/getGoodDetail').then(res => {
				this.product = res.data
			})
			
			let linkmans = [];
			let sku_ids = [];
			this.sku.map((item) => {
			    let num = Number(item.num);
			    linkmans.push(new Array(num));
			    sku_ids.push(item.id);
			});
			this.linkmans = linkmans
			this.sku_ids = sku_ids
		},
		onShow() {
			this.coupon = this.$store.state.user.coupon
			console.log('传过来的优惠券',this.coupon);
			
			// this.getPeople()
		},
		methods: {
			// 协议
			clickXy() {
				this.xySeld = !this.xySeld
			},
			openXz() {
				this.$refs.popup.open('bottom')
			},
			closePopup() {
				this.$refs.popup.close()
			},
			// 去支付
			order() {
				let flag = true
				let product_list = [];
				this.sku.map((item, index) => {
					if(item.num > 0) {
						// let linkman = this.linkmans[index].filter(i => i);
						// if(linkman.length < item.num) {
						// 	flag = false
						// 	uni.showToast({
						// 	    title: '请选择对应的出行人',
						// 	    icon: 'none'
						// 	});
						// 	return;
						// }
						// let pId = []
						// linkman.map(lItem => {
						// 	pId.push(lItem.id)
						// })
						product_list.push({
						    product_id: this.product.id,
						    specifications_id: item.id,
						    num: item.num,
						    // contact_id: pId,
						    date: this.selectDate.date
						});
					}
				})
				
				if(!this.idChinaName(this.reserve_name)) {
					flag = false
					uni.showToast({
					    title: '请输入联系人',
					    icon: 'none'
					});
					return;
				}
				
				if(!this.IsTel(this.reserve_phone)) {
					flag = false
					uni.showToast({
					    title: '请输入联系方式',
					    icon: 'none'
					});
					return;
				}
				
				// if(!this.xySeld) {
				// 	flag = false
				// 	uni.showToast({
				// 	    title: '请先同意预订须知内容',
				// 	    icon: 'none'
				// 	});
				// 	return;
				// }
				
				if(flag){
					let data = {
					    goods: product_list,
					    coupon: this.coupon ? this.coupon.id : null,
						reserve_name: this.reserve_name,
						reserve_phone: this.reserve_phone
					};
					
					this.Post({
						data: JSON.stringify(data),
						method: 'POST',
					},'/api/order/place').then(res => {
						console.log(res)
						if(res.code == 1) {
							let order_id = res.data.order_id
							this.$store.commit("changeLineInfo", null);
							this.$store.commit("choseCoupon", "");
							
							this.Post({
								order_id: order_id,
								type: "miniprogram",
								platform: 'miniprogram'
							}, '/api/pay/unify').then(res => {
								if (res.data) {
									uni.requestPayment({
										nonceStr: res.data.nonceStr,
										package: res.data.package,
										paySign: res.data.paySign,
										signType: res.data.signType,
										timeStamp: res.data.timeStamp,
										complete() {
											uni.navigateTo({
												url: '/subPackages/order/trades'
											})
										}
									})
								}
							})
						}
					})
				}
			},
			// 总价
			priceTotal() {
				let price = 0
				if(this.coupon) {
					if (this.coupon.percent == 0) {
						price = this.price - this.coupon.CouponActivity.discounts
					} else{
						price = this.price - (this.price * this.coupon.CouponActivity.percent/100)
					}
				}else {
					price = this.price
				}
				return price < 0 ? 0 : price
			},
			// 获取出行人列表
			getPeople() {
				this.Post({
					offset: 0,
					limit: 100
				},'/api/user/contactList').then(res => {
					this.peopleList = res.data
					this.reserve_mobile = this.peopleList[0].tel
					// 如果是添加或者修改完出行人后需要默认选中已选择的出行人
					if(this.linkmanList.length > 0){
						for (let i = 0; i < this.linkmanList.length; i++) {
							for (let j = 0; j < this.peopleList.length; j++) {
								if(this.peopleList[j].id == this.linkmanList[i].id){
									this.linkmanList[i] = this.peopleList[j]
									this.peopleList[j].is_seld = true
									this.linkmanList[i].is_seld = true
								}
							}
						}
						this.$forceUpdate()
					}
				})
			},
			// 设置默认出行人
			changeDefaultPeople(item, index) {
				if (item.is_default == 1) {
				    return
				}
				this.Post({
					is_default: 1,
					name: item.name,
					tel: item.tel,
					id: item.id,
					id_number: item.id_number,
					idcard_type: item.idcard_type
				},'/api/user/editContact').then(res => {
					if(res.code == 200){
						uni.showToast({
						    title: '设置成功',
						    icon: 'none'
						});
						for (let item of this.peopleList) item.is_default = 0
						this.peopleList[index].is_default = 1
					}
					this.$forceUpdate()
				})
			},
			// 选择出行人弹框
			showLinkman(skuIndex) {
				this.skuIndex = skuIndex
				
				this.peopleList.map(item => {
					if(item.is_seld && item.is_sku != this.sku[this.skuIndex].id) {
						item.is_disable = true
					}else {
						item.is_disable = false
					}
				})
				
				this.$refs.peoplePopup.open('bottom')
				this.$forceUpdate()
			},
			// 选择出行人
			seldThisPeople(item,index) {
				let num = 0
				let list = []
				
				if(item.is_seld && item.is_disable) {
					uni.showToast({
					    title: '该联系人已选择为其他规格',
					    icon: 'none'
					});
					return;
				}
				this.linkmans[this.skuIndex] = []
				this.peopleList.map(items => {
					if(items.id == item.id) {
						items.is_seld = !items.is_seld
					}
					if(items.is_seld && !items.is_disable) {
						num++;
						items.is_sku = this.sku[this.skuIndex].id
						this.linkmans[this.skuIndex].push(items)
					}
					if(items.is_seld) {
						this.linkmanList.push(item)
					}
				})
				if(num > this.sku[this.skuIndex].num) {
					item.is_seld = false
					this.linkmans[this.skuIndex].splice(this.linkmans[this.skuIndex].findIndex(i => i.id == item.id),1)
					uni.showToast({
					    title: '该规格最多只能选择'+this.sku[this.skuIndex].num+'个出行人',
					    icon: 'none'
					});
					return;
				}
				this.$forceUpdate()
				console.log(this.peopleList,this.linkmans)
			},
			// 确定取消
			changePeoplePopup(type,confirm) {
				this.$refs.peoplePopup.close()
				this.$forceUpdate()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		background: #f6f6f6;
		padding-bottom: 200rpx;
		min-height: 100vh;
	}
	
	.top-box {
	    padding: 30rpx 47rpx;
	    color: #333333;
	    font-size: 28rpx;
	    border-bottom: 1rpx solid #ccc;
		
		.product-title {
		    color: #000000;
		    font-size: 33rpx;
		    line-height: 47rpx;
		    margin-bottom: 30rpx;
		}
		
		.product-num {
		    margin-top: 30rpx;
			
			.product-text {
				margin-right: 50rpx;
			}
		}
	}
	
	.user-box {
	    margin: 25rpx;
	    background: #ffffff;
	    border-radius: 9rpx;
		
		.user-box-title {
		    // border-bottom: 1rpx solid #ccc;
		    line-height: 113rpx;
		    font-size: 33rpx;
		    color: #000;
		    font-weight: bold;
		    padding: 0 20rpx;
		}
		
		.user-item {
		    margin: 0 20rpx;
		    display: flex;
		    align-items: center;
		    justify-content: space-between;
		    height: 126rpx;
		    border-top: 1rpx solid #B8B8B8;
			
			.user-item-text{
				flex-shrink: 0;
				font-size: 31rpx;
				color: #000;
				font-weight: bold;
				margin-right: 20rpx;
			}
			
			.user-info {
			    font-size: 27rpx;
			    margin-right: 20rpx;
			    flex: 1;
			    text-align: left;
			}
			
			.icon-bianji1 {
				width: 36rpx;
				height: 36rpx;
			    margin-right: 10rpx;
			}
			
			.add-btn {
			    display: flex;
			    width: 153rpx;
			    height: 57rpx;
			    border: 1rpx solid #333333;
			    border-radius: 29rpx;
			    box-sizing: border-box;
			    justify-content: center;
			    align-items: center;
			    font-size: 28rpx;
			    color: #000;
			}
			
			.user-input {
			    flex: 1;
			    font-size: 29rpx;
			    display: block;
				text-align: right;
			}
			
			.icon-coupon{
				width: 20rpx;
				height: 20rpx;
				margin-left: 15rpx;
			}
		}
	}
	
	.people-popup {
		padding: 26rpx;
		min-height: 800rpx;
	
		.top-box {
			height: 80rpx;
	
			.top {
				position: fixed;
				left: 0;
				right: 0;
				color: #000;
				height: 80rpx;
				font-size: 0;
				overflow: hidden;
				padding: 0 26rpx;
	
				text {
					text-align: left;
					font-size: 30rpx;
					font-weight: 400;
					color: #000000;
				}
	
				.confirm {
					font-weight: 400;
					color: #000000;
				}
			}
		}
	
		.popup-list {
			height: 666rpx;
			overflow: scroll;
	
			.popup-item {
				border-radius: 12rpx;
				padding: 0 20rpx;
				margin-top: 24rpx;
				font-size: 24rpx;
				color: #333333;
				font-weight: 400;
				background-color: #FFFFFF;
	
				.item-top {
					padding: 20rpx 12rpx;
	
					img {
						color: #666666;
						width: 40rpx;
						height: 40rpx;
					}
	
					.name {
						font-size: 30rpx;
						color: #000000;
						margin: 0 20rpx;
						overflow: hidden;
	
						text {
							color: #999999;
							margin: 0 20rpx;
						}
	
						.tag {
							border-radius: 8rpx;
							text-align: center;
							color: #333333;
							font-size: 20rpx;
							padding: 6rpx 15rpx;
							background-color: #FFC825;
						}
					}
	
					.com-flex-start {
						margin: 0 0 30rpx;
					}
	
					.subtitle {
						font-weight: 400;
						flex: 1;
						text-align: left;
	
						.mobile {
							margin-bottom: 36rpx;
						}
					}
	
					.status {
						width: 40rpx;
						height: 40rpx;
						line-height: 40rpx;
						border-radius: 50%;
						text-align: center;
						box-sizing: border-box;
	
						img {
							width: 27rpx;
							height: 21rpx;
						}
					}
	
					.statuss {
						background: linear-gradient(90deg, #FA2B66, #FF9834);
						border: none;
					}
	
					.noSelect {
						border: 1rpx solid #999999;
					}
				}
	
				.item-site {
					color: #666666;
					display: flex;
					align-items: center;
					padding: 36rpx 0;
	
					view {
						width: 23rpx;
						height: 23rpx;
						margin-right: 10rpx;
						border: 1rpx solid #999999;
						border-radius: 50%;
	
						view {
							width: 8rpx;
							height: 8rpx;
							background: #000000;
							border-radius: 50%;
							margin: auto;
						}
					}
				}
			}
		}
	
		.button {
			font-size: 30rpx;
			font-weight: 400;
			color: #000000;
			text-align: center;
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			background-color: #FFFFFF;
			border-radius: 60rpx;
		}
	}
	
	.fixed-bottom {
	    position: fixed;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    height: 113rpx;
	    background: white;
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    padding: 0 26rpx;
		box-sizing: border-box;
	    box-shadow: 0px 0px 16rpx 0px rgba(6, 0, 1, 0.1);
	    z-index: 1;
		
		.order-all-price {
		    flex: 1;
		    font-size: 29rpx;
		    color: #333;
		    font-weight: 500;
			
			.order-all-text {
			    flex: 1;
			    font-size: 36rpx;
			    color: #C3282E;
				font-weight: bold;
			}
		}
		
		.order-btn {
		    width: 293rpx;
		    background: #C3282E;
		    border-radius: 43rpx;
		    text-align: center;
		    line-height: 87rpx;
		    color: #fff;
		    font-size: 36rpx;
		    font-weight: 500;
		    margin-left: 30rpx;
		}
	}
	
	.xy-box {
		width: 658rpx;
		margin: 36rpx auto 0;
		font-size: 27rpx;
		font-family: PingFangSC;
		font-weight: 400;
		color: #999999;
		display: flex;
		
		span {
			color: #FEB419;
		}
		
		.quan {
			min-width: 23rpx;
			min-height: 23rpx;
			max-width: 23rpx;
			max-height: 23rpx;
			border: 1px solid #999999;
			border-radius: 50%;
			
			.quan-seld {
				width: 12rpx;
				height: 12rpx;
				background: #FEB419;
				border-radius: 50%;
			}
		}
	}
	
	.xzPopup {
		width: 750rpx;
		padding: 33rpx 26rpx 20rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		position: relative;
		height: 1200rpx;
		overflow-y: scroll;
	
		view {
			padding: 0 20rpx;
			box-sizing: border-box;
			margin-top: 35rpx;
		}
	
		img {
			width: 32rpx;
			height: 32rpx;
			position: absolute;
			top: 33rpx;
			right: 27rpx;
		}
	}
	
	.coupon-box {
		height: 113rpx;
		background: #FFFFFF;
		border-radius: 13rpx;
		font-weight: bold;
		font-size: 31rpx;
		color: #000000;
		padding: 0 20rpx;
		margin: 0 20rpx;
		
		.add-btn {
			width: 153rpx;
			line-height: 40rpx;
			background: #C3282E;
			border-radius: 9rpx;
			text-align: center;
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
		}
		
		.icon-coupon{
			width: 20rpx;
			height: 20rpx;
			margin-left: 15rpx;
		}
	}
</style>