<template>
	<view class="mainContainer">
		<!-- 地址 -->
		<view class="address all">
			<view class="noAddress flex" @click="toSelectAddress">
				<!-- 暂无地址 -->
				<block v-if="!address">
					<view class="addressIcon">
						<image src="/static/order/addressIcon.png" mode="widthFix"></image>
					</view>
					<view class="noteText">
						请选择收货地址
					</view>
				</block>
				<!-- 已有地址 -->
				<view class="yesAddress" v-else>
					<view class="addressIcons addressIcon">
						<image src="/static/order/addressIcon.png" mode="widthFix"></image>
					</view>
					<view class="addressDetailBox">
						<view class="addressDetailText">
							{{address.region}}{{address.address}}
						</view>
						<view class="nameAndPhone flex">
							<view class="name">
								{{address.name}}
							</view>
							<view class="phone">
								{{address.mobile}}
							</view>
							<view class="addressIconDefult">
								默认
							</view>
						</view>
					</view>
				</view>
				<view class="rightIcon">
					<image src="/static/order/rightIcon.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<!-- 商品 -->
		<view class="goods all flex" v-for="(item,index) in goods">
			<view class="goodsImage">
				<image :src="item.goods_spec_id.spec_image" mode="widthFix"></image>
			</view>
			<view class="goodsText">
				<view class="goodsTitle size28">
					{{item.goods_id.name}}
				</view>
				<view class="specs flex">
					<view class="specsText">
						<text class="forPre" v-for="(ite,inde) in item.goods_spec_id.goods_spec">
							{{ite.spec_value}}
						</text>
					</view>
					<view class="specsNum">
						x{{item.num}}
					</view>
				</view>
				<view class="goodsPrice size26">
					<text>¥</text>{{item.goods_spec_id.goods_price}}
				</view>
			</view>
		</view>
		<!-- 商品详情 -->
		<view class="goodsDetail">
			<view class="goodsDetailItem flex justifyBetween">
				<view class="itemLeftText size26">
					商品总价
				</view>
				<view class="itemRightPrice size26 weight600">
					￥{{totleValue}}
				</view>
			</view>
			<view class="goodsDetailItem flex justifyBetween">
				<view class="itemLeftText size26">
					店铺活动
				</view>
				<view class="itemRightPrice size26">
					{{shopActive ? '-' + shopActive : '暂无'}}
				</view>
			</view>
			<view class="goodsDetailItem flex justifyBetween">
				<view class="itemLeftText size26">
					店铺优惠券
				</view>
				<view class="itemRightPrice size26" v-if="cheapListDeal.length == 0">
					暂无使用优惠券
				</view>
				<picker selector-type="auto" mode="selector" @change="cheapListDealHear" :range="cheapListDeal" v-else>
					<view class="itemRightPrice size26">
						{{cheapActive == 0 ? '请选择' : '-' + cheapActive}}
					</view>
				</picker>
			</view>
			<view class="goodsDetailItem flex justifyBetween" v-if="lookValue">
				<view class="itemLeftText size26">
					关注有礼
				</view>
				<view class="follow size26 weight600">
					-￥{{lookValue}}
				</view>
			</view>
			<view class="goodsDetailItem flex justifyBetween" v-if="joinValue">
				<view class="itemLeftText size26">
					入会有礼
				</view>
				<view class="follow size26 weight600">
					-￥{{joinValue}}
				</view>
			</view>
			<view class="goodsDetailItem flex justifyBetween">
				<view class="itemLeftText size26">
					运费
				</view>
				<view class="itemRightPrice size26">
					免运费
				</view>
			</view>
			<view class="goodsDetailItem flex justifyBetween">
				<view class="itemLeftText size26">
					备注
				</view>
				<textarea maxlength="300" class="note size26" @input="noteHear" :value='noteTtext'></textarea>
			</view>
			<view class="truePriceBox flex justifyE">
				<view class="itemRightPrice size28">
					实付款:
				</view>
				<view class="truePrice size28">
					￥{{endValue}}
				</view>
			</view>
		</view>
		<!-- 支付方式 -->
		<view class="payMode all flex justifyBetween alignC">
			<view class="payText size26">
				支付方式
			</view>
			<view class="payWX size26">
				微信支付
			</view>
		</view>
		<!-- 底部固定按钮 -->
		<view class="fixButton all flex justifyE alignC">
			<view class="allSum size28">
				合计:
			</view>
			<view class="allSumPrice size28 weight700">
				￥{{endValue}}
			</view>
			<view class="allSumBtn size30 weight700" @click="comfim">
				提交订单
			</view>
		</view>
	</view>
</template>

<script>
	let jweixin = require('jweixin-module');
	export default {
		data() {
			return {
				address: '', // 默认地址
				goods: '', // 商品信息
				URL: '', // 图片头
				cheapListDeal: [], // 优惠券列表（处理）
				cheapActive: 0, // 选中优惠券
				noteTtext: '', // 备注信息
				totleValue: '', // 商品总价
				shopActive: 0, // 店铺活动
				moveValue: '', // 运费
				endValue: '', // 最终价格
				lookValue: 0, // 关注有礼
				joinValue: 0, // 入会有礼
				whereEnter: true, // true 为购物车 false 为商品详情页
			}
		},
		onLoad(e) {
			this.URL = getApp().globalData.url; // 图片头
			console.log(!!e.one);
			if (!e.goodsInfo) {
				// 购物车跳转
				this.cardDetail(e.ActiveNum, JSON.parse(e.goods));
			} else {
				// 商品详情跳转
				this.whereEnter = false;
				this.goodsDetailInfo((JSON.parse(decodeURIComponent(e.goodsInfo))))
			}
		},
		onShow() {
			this.getAddress(); // 获取地址
		},
		methods: {
			/**
			 * @购物车跳转该页面
			 * */
			// 获取订单详情 & 商品信息 &...
			cardDetail(id, gs) {
				// 商品数据处理
				gs.forEach(item => {
					if (item.goods_id.spec_type == 10) {
						item.goods_spec_id.spec_image = item.goods_id.image;
					}
					// 是否拼接参数
					(item.goods_spec_id.spec_image.slice(0, 4) != 'http') && (item.goods_spec_id.spec_image = this
						.URL + item.goods_spec_id.spec_image);
				})
				this.goods = gs;
				// 获取订单页面全部信息
				let data = {
					cart_ids: id
				}
				this.cart_ids = data.cart_ids // 商品购物车id
				this.$rqs('/api/cart/settlement', data).then((res) => {
					if (res.data.code == 1) {
						// 实付款&商品总价
						this.endValue = this.totleValue = res.data.data.total_price;
						// 运费
						this.moveValue = res.data.data.express_price;
						// 优惠券列表
						this.cheapList = res.data.data.coupon_list;
						(res.data.data.coupon_list.length > 0) && res.data.data.coupon_list.map(item => {
							if ((item.status == 1) && (item.category == 1)) {
								// 可用优惠券
								this.cheapListDeal.push(item.price);
							} else if ((item.status == 1) && (item.category == 2)) {
								// 关注有礼
								this.lookValue = (Number(item.price).toFixed(2))
							} else if ((item.status == 1) && (item.category == 3)) {
								// 入会有礼
								this.joinValue = (Number(item.price).toFixed(2))
							}
						});
						(this.cheapListDeal.length > 0) && (this.cheapListDeal.unshift('请选择'));
						// 店铺活动价
						res.data.data.goods_list.map(item => {
							if (item.active.length > 0) {
								this.shopActive = this.shopActive + Number(item.rule.discount_num);
							}
						})
						// 最终价格
						this.endValue = (Number(this.totleValue) - // 总价
								Number(this.shopActive) - // 店铺活动
								Number(this.lookValue) - // 关注有礼
								Number(this.joinValue) + // 入会有礼
								Number(this.moveValue) - // 运费
								Number(this.cheapActive)) // 优惠券
							.toFixed(2);
						this.endValue < 0 && (this.endValue = 0)
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			/**
			 * @商品详情页跳转该页面
			 * */
			goodsDetailInfo(e) {
				// 商品数据处理
				let o = {
					goods_spec_id: {
						spec_image: e.image,
						goods_spec: [{
							spec_value: '',
						}],
						goods_price: e.goods_price,
					},
					goods_id: {
						name: e.name,
					},
					num: e.num,
				};
				let r = [o];
				this.goods = r;
				// 获取订单页面全部信息
				let data = {
					goods_id: e.goods_id,
					num: e.num,
					goods_spec_id: e.goods_spec_id
				}
				this.detailPayData = data;
				this.$rqs('/api/goods/buyData', data).then((res) => {
					if (res.data.code == 1) {
						//商品规格
						this.goods[0].goods_spec_id.goods_spec[0].spec_value = res.data.data.goods_list[0]
							.goods_sku.goods_attr;
						// 实付款&商品总价
						this.endValue = this.totleValue = res.data.data.total_price;
						// 运费
						this.moveValue = res.data.data.express_price;
						// 优惠券列表
						this.cheapList = res.data.data.coupon_list;
						(res.data.data.coupon_list.length > 0) && res.data.data.coupon_list.map(item => {
								if ((item.status == 1) && (item.category == 1)) {
									// 可用优惠券
									this.cheapListDeal.push(item.price);
								} else if ((item.status == 1) && (item.category == 2)) {
									// 关注有礼
									this.lookValue = (Number(item.price).toFixed(2))
								} else if ((item.status == 1) && (item.category == 3)) {
									// 入会有礼
									this.joinValue = (Number(item.price).toFixed(2))
								}
							})
						console.log(this.cheapListDeal);
						(this.cheapListDeal.length > 0) && (this.cheapListDeal.unshift('请选择'));
						console.log(this.cheapListDeal);
						// 店铺活动价
						res.data.data.goods_list.map(item => {
							if (item.active.length > 0) {
								this.shopActive = this.shopActive + Number(item.rule.discount_num);
							}
						})
						// 最终价格
						this.endValue = (Number(this.totleValue) - // 总价
								Number(this.shopActive) - // 店铺活动
								Number(this.lookValue) - // 关注有礼
								Number(this.joinValue) + // 入会有礼
								Number(this.moveValue) - // 运费
								Number(this.cheapActive)) // 优惠券
							.toFixed(2);
						this.endValue < 0 && (this.endValue = 0)
					}
				})
			},
			// 监听备注内容
			noteHear(e) {
				this.noteTtext = e.detail.value
			},
			// 监听优惠券选择
			cheapListDealHear(e) {
				(e.detail.value > 0) ? (this.cheapActive = this.cheapListDeal[e.detail.value]) : (this.cheapActive = 0)
				// 选择优惠券改变支付金额
				this.endValue = (Number(this.totleValue) - // 总价
						Number(this.shopActive) - // 店铺活动
						Number(this.lookValue) - // 关注有礼
						Number(this.joinValue) + // 入会有礼
						Number(this.moveValue) - // 运费
						Number(this.cheapActive)) // 优惠券
					.toFixed(2);
				this.endValue < 0 && (this.endValue = 0)
			},
			// 提交按钮
			comfim() {
				if (!this.address) {
					uni.showToast({
						title: '请选择收货地址',
						icon: 'none'
					})
				} else {
					let join = !!this.joinValue ? 3 : 0; // 入会
					let look = !!this.lookValue ? 2 : 0; // 关注
					let cheapActive = !!this.cheapActive ? 1 : 0; // 优惠券
					console.log(join, look, cheapActive);
					let alreadyMake = []; // 用户已选择的
					let userCheap = '';
					// 获取用户已选择优惠券
					this.cheapList.forEach(item => {
						if (((item.category == join) || (item.category == look)) && (item.status == 1)) {
							alreadyMake.push(item);
						} else if ((item.category == cheapActive) && (item.status == 1) && (!userCheap)) {
							this.cheapList.forEach(ite => {
								if ((ite.price == this.cheapActive) && (!userCheap) && (ite.category ==
										cheapActive) && (item.status == 1)) {
									userCheap = ite;
									alreadyMake.push(userCheap);
									return
								}
							})
						}
					})
					//获取用户已选择优惠券 id
					let coupon_id = (alreadyMake.map(item => {
						return item.id
					})).join(',')
					if (this.whereEnter) {
						/**
						 * @购物车支付
						 * */
						// 调用支付接口，获取支付所需信息
						let data = {
							cart_ids: this.cart_ids,
							address_id: this.address.id,
							coupon_id: coupon_id,
							id: uni.getStorageSync('uId') || '',
							remark: this.noteTtext || '',
						}
						this.$rqs('/api/cart/pay', data).then(res => {
							jweixin.config({
								debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
								appId: 'wx03ffc650911f32d4', // 必填，公众号的唯一标识
								timestamp: res.data.data.jsApiParameters.timeStamp, // 必填，生成签名的时间戳
								nonceStr: res.data.data.jsApiParameters.nonceStr, // 必填，生成签名的随机串
								signature: res.data.data.jsApiParameters.paySign, // 必填，签名，见附录1
								jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
							});
							jweixin.ready(function() {
								jweixin.checkJsApi({
									jsApiList: ['chooseWXPay'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
									success: function(res) {
										console.log('checkjsapi Success')
										console.log(res);
									},
									fail: function(res) {
										console.log('res')
										console.log(res);
									}
								});
								jweixin.chooseWXPay({
									timestamp: res.data.data.jsApiParameters.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
									nonceStr: res.data.data.jsApiParameters.nonceStr, // 支付签名随机串，不长于 32 位
									package: res.data.data.jsApiParameters.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
									signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
									paySign: res.data.data.jsApiParameters.paySign, // 支付签名
									success: function(res) {
										// 支付成功后的回调函数
										console.log('paysuccess')
										console.log(res)
										// var route = 'payResult' + '?type=1'
										// console.log(route)
										// uni.navigateTo({
										// 	url: route
										// });
									},
									cancel: function(r) {
										// var route = 'payResult' + '?type=2'
										// uni.navigateTo({
										// 	url: route
										// });
									},
									fail: function(res) {
										// console.log('payfail')
										// console.log(res)
										// var route = 'payResult' + '?type=0'
										// uni.navigateTo({
										// 	url: route
										// });
									}
								});
							});
							jweixin.error(function(res) {
								console.log('error')
								console.log(res)
								uni.showToast({
									icon: 'none',
									title: '支付失败了',
									duration: 4000
								});
								// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
								/*alert("config信息验证失败");*/
							});
						})
					} else {
						/**
						 * @商品详情支付
						 * */
						let v = this.detailPayData
						let data = {
							address_id: this.address.id,
							coupon_id: coupon_id,
							id: uni.getStorageSync('uId') || '',
							remark: this.noteTtext || '',
							goods_id: v.goods_id,
							num: v.num,
							goods_spec_id: v.goods_spec_id,
						}
						this.$rqs('/api/goods/pay', data).then(res => {
							jweixin.config({
								debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
								appId: 'wx03ffc650911f32d4', // 必填，公众号的唯一标识
								timestamp: res.data.data.jsApiParameters.timeStamp, // 必填，生成签名的时间戳
								nonceStr: res.data.data.jsApiParameters.nonceStr, // 必填，生成签名的随机串
								signature: res.data.data.jsApiParameters.paySign, // 必填，签名，见附录1
								jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
							});
							jweixin.ready(function() {
								jweixin.checkJsApi({
									jsApiList: ['chooseWXPay'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
									success: function(res) {
										console.log('checkjsapi Success')
										console.log(res);
									},
									fail: function(res) {
										console.log('res')
										console.log(res);
									}
								});
								jweixin.chooseWXPay({
									timestamp: res.data.data.jsApiParameters
										.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
									nonceStr: res.data.data.jsApiParameters
										.nonceStr, // 支付签名随机串，不长于 32 位
									package: res.data.data.jsApiParameters
										.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
									signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
									paySign: res.data.data.jsApiParameters.paySign, // 支付签名
									success: function(res) {
										// // 支付成功后的回调函数
										// console.log('paysuccess')
										console.log(res)
										// var route = 'payResult' + '?type=1'
										// uni.navigateTo({
										// 	url: route
										// });
									},
									cancel: function(r) {
										// var route = 'payResult' + '?type=2'
										// uni.navigateTo({
										// 	url: route
										// });
									},
									fail: function(res) {
										// console.log('payfail')
										// console.log(res)
										// var route = 'payResult' + '?type=0'
										// uni.navigateTo({
										// 	url: route
										// });
									}
								});
							});
							jweixin.error(function(res) {
								console.log('error')
								console.log(res)
								uni.showToast({
									icon: 'none',
									title: '支付失败了',
									duration: 4000
								});
								// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
								/*alert("config信息验证失败");*/
							});
						})
					}
				}
			},
			// 获取地址
			getAddress() {
				this.$rqs('/api/address/index').then((res) => {
					let r = res.data.data[0];
					if ((res.data.code == 1) && (r.is_default = 1)) {
						r.region = r.region.replaceAll('/', '');
						r.mobile = r.mobile.slice(0, 3) + '****' + r.mobile.slice(7, 11);
						this.address = r;
						this.$forceUpdate();
					}
				})
			},
			// 跳转选择地址
			toSelectAddress() {
				uni.navigateTo({
					url: 'selectAddress/selectAddress'
				})
			},
		}
	}
</script>

<style>
	.mainContainer {
		padding: 24rpx 0 228rpx;
	}

	.all {
		background-color: #FFFFFF;
		padding: 0 32rpx;
		box-sizing: border-box;
	}

	/* 地址 */
	.address {
		height: 142rpx;
	}

	.noAddress {
		height: inherit;
		align-items: center;
	}

	.noteText {
		margin-left: 8rpx;
		color: #1F1F1F;
		font-size: 28rpx;
		font-weight: 600;
	}

	.addressIcon,
	.rightIcon {
		width: 32rpx;
		height: 32rpx;
	}

	.rightIcon {
		margin-left: auto;
	}

	/* 商品 */
	.goods {
		padding-top: 32rpx;
		box-sizing: border-box;
		margin-top: 18rpx;
		height: 250rpx;
		justify-content: space-between;
	}

	.goodsImage {
		width: 180rpx;
		height: 180rpx;
	}

	.specsText {
		width: 450rpx;
		height: 40rpx;
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 1;
		/** 显示的行数 **/
		color: #C2C2C2;
	}

	.goodsTitle,
	.goodsPrice {
		color: #1F1F1F;
	}

	.goodsTitle {
		width: 482rpx;
		height: 28rpx;
		line-height: 28rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.specs {
		margin-top: 16rpx;
	}

	.specsNum {
		font-size: 26rpx;
		color: #969799;
		margin-left: auto;
	}

	.goodsPrice {
		margin-top: 52rpx;
	}

	.goodsText {
		width: 482rpx;
		height: 180rpx;
	}

	/* 商品详情 */
	.goodsDetail {
		padding: 32rpx;
		box-sizing: border-box;
		background-color: #fff;
		margin-top: 24rpx;
	}

	.goodsDetailItem {
		margin-bottom: 32rpx;
	}

	textarea {
		height: auto;
	}

	.itemLeftText {
		color: #5C5C5C;
	}

	.itemRightPrice {
		color: #1F1F1F;
	}

	.follow {
		color: #FC4338;
	}

	.note {
		color: #323233;
		text-align: right;
	}

	.truePrice {
		font-weight: 700;
		color: #3E554E;
	}

	.truePriceBox {
		margin-top: 58rpx;
		position: relative;
	}

	.truePriceBox::before {
		content: '';
		width: 100%;
		height: 2rpx;
		background-color: #EBEBEB;
		position: absolute;
		top: 0;
		transform: translateY(-18rpx);
	}

	.payMode {
		color: #5C5C5C;
		margin-top: 24rpx;
		height: 104rpx;
	}

	.payWX {
		color: #1F1F1F;
	}

	.fixButton {
		height: 164rpx;
		width: 100%;
		padding-bottom: 68rpx;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		left: 0;
	}

	.allSum {
		color: #1F1F1F;
	}

	.allSumPrice {
		color: #DC9E5E;

	}

	.allSumBtn {
		width: 236rpx;
		height: 80rpx;
		background: linear-gradient(119.1deg, rgba(52, 94, 71, 1) 0%, rgba(62, 85, 78, 1) 100%);
		line-height: 80rpx;
		text-align: center;
		color: #fff;
		margin-left: 48rpx;
	}

	/* 有地址 */
	.yesAddress {
		position: relative;
		height: 80rpx;
		width: 100%;
		padding-left: 40rpx;
		box-sizing: border-box;
	}

	.addressIcons {
		position: absolute;
		left: 0;
		top: 4rpx;
	}

	.addressIconDefult {
		width: 64rpx;
		height: 32rpx;
		background-color: #3E554E;
		border-radius: 8rpx;
		color: #fff;
		font-size: 24rpx;
		text-align: center;
		line-height: 32rpx;
	}

	.phone {
		margin-left: 16rpx;
	}

	.addressDetailText {
		color: #323233;
		font-weight: 600;
		font-size: 28rpx;
		height: 28rpx;
		line-height: 28rpx;
		display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
		overflow: hidden;
		word-break: break-all;  /* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;  /* 超出部分省略号 */
		-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 1; /** 显示的行数 **/
		
	}

	.addressIconDefult {
		margin-left: 32rpx;
	}

	.nameAndPhone {
		margin-top: 10rpx;
		height: 32rpx;
		align-items: center;
	}

	.name,
	.phone {
		color: #727272;
		font-size: 24rpx;
	}

	.forPre {
		margin-right: 10rpx;
	}
</style>