<template>
	<view class="content" :style="[theme]">
		<view class="onecontent">
			<view class="onecontentone flex-start">
				<view class="onecontent_one">
					商品信息
				</view>
			</view>
			<view class="onecontenttow flex-start">
				<view class="onecontenttowitem flex-between" v-for="(item,index) in elist.goods" :key="index">
					<view class="onecontenttowitem_one flex-start">
						<image class="onecontenttowitemimage" :src="item.img" mode="aspectFill"></image>
						<view class="onecontenttowitem_onebox flex-colum-start">
							<view class="onecontenttowitem_onebox_one">
								{{item.title}}
							</view>
							<view class="onecontenttowitem_onebox_tow">
								{{item.spec}}
							</view>
						</view>
					</view>
					<view class="onecontenttowitem_tow flex-colum-end">
						<view class="onecontenttowitem_towstext_one">
							{{item.price}}
						</view>
						<view class="onecontenttowitem_towstetx_tow">
							×{{item.number}}
						</view>
					</view>

				</view>
			</view>
		</view>
		<view class="onecontent" style="margin-top: 32rpx;">
			<view class="onecontentone flex-between">
				<view class="onecontent_one">
					确认地址
				</view>
				<u-icon name="arrow-right" color="#000" size="14"></u-icon>
			</view>
			<view class="onecontentaddress flex-colum-start" v-if="elist.address" @click="clickaddress">
				<view class="onecontentaddressone" v-if="formlist.type == 3">
					{{elist.address.address}}
				</view>
				<view class="onecontentaddressone" v-else>
					{{elist.address.province}}-{{elist.address.city}}-{{elist.address.area}}-{{elist.address.address}}
				</view>
				<view class="onecontentaddresstow">
					{{elist.address.name}}<text style="margin-left: 10rpx;">{{elist.address.mobile}}</text>
				</view>
			</view>
			<view class="onecontentaddress" v-else>
				<view class="onecontentaddressone" @click="clickaddress">
					去添加地址
				</view>
			</view>
		</view>
		<view class="therecontent">
			<!-- <view class="therecontenttow flex-between">
				<view class="therecontenttow_one">
					商品金额
				</view>
				<view class="therecontenttow_tow">
					{{elist.number}}
				</view>
			</view>
			<view class="therecontenttow flex-between">
				<view class="therecontenttow_one">
					优惠券
				</view>
				<view class="therecontenttow_tow">
					暂无可用
				</view>
			</view> -->
			<view class="therecontenttow flex-between">
				<view class="therecontenttow_one">
					运费
				</view>
				<view class="therecontenttow_tow">
					￥{{elist.freight}}
				</view>
			</view>
			<view class="therecontenttow flex-between">
				<view class="therecontenttow_one">
					合计
				</view>
				<view class="therecontenttow_tow" style="color:#FC5F69;">
					￥{{elist.price.total_price}}
				</view>
			</view>
		</view>
		<!-- <view class="fivecontent">
			<view class="fivecontentitem flex-between">
				<view class="fivecontentitem_one">
					手机号码
				</view>
				<view class="fivecontentitem_tow">
					{{mobile}}
				</view>
			</view>
			<view class="fivecontentitem flex-between">
				<view class="fivecontentitem_one">
					姓名
				</view>
				<view class="fivecontentitem_tow">
					张雪
				</view>
			</view>
		</view> -->
		<view class="sixcontent">
			<view class="sixcontentone flex-between">
				<view class="sixcontent_one">
					支付方式
				</view>
			</view>
			<view class="sixcontenttow">
				<view class="sixcontenttowitem flex-between" @click="clickselect(1)">
					<view class="sixcontenttowitemone flex-start">
						<image src="https://ointmentweapp.oss-cn-beijing.aliyuncs.com/image/wx.png" mode="aspectFill"></image>
						<text class="sixcontenttowitemonetext">微信支付</text>
					</view>
					<view class="flex-start">
						<u-icon v-if="pay_type == 1" name="checkmark-circle-fill" color="#333333" size="18"></u-icon>
						<u-icon v-else name="checkmark-circle-fill" color="#999999" size="18"></u-icon>

					</view>
				</view>
				<view class="sixcontenttowitem flex-between" @click="clickselect(2)">
					<view class="sixcontenttowitemone flex-start">

						<image src="https://ointmentweapp.oss-cn-beijing.aliyuncs.com/image/ye.png" mode="aspectFill"></image>
						<text class="sixcontenttowitemonetext">余额支付</text>
					</view>
					<view class="flex-start">
						<u-icon v-if="pay_type == 2" name="checkmark-circle-fill" color="#333333" size="18"></u-icon>
						<u-icon v-else name="checkmark-circle-fill" color="#999999" size="18"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<!-- 	<view class="fourcontent">
			<view class="fourcontentone flex-start">
				<view class="fourcontent_one">
					须知：
				</view>
			</view>
			<view class="fourcontenttow flex-colum-start">
				
			</view>
		</view> -->
		<view :style="{height:height}">

		</view>
		<view class="fixedview flex-between">
			<view class="fixedview_one flex-start">
				<view class="fixedview_oneone">
					实付金额：
				</view>
				<view class="fixedview_onetow">
					<text>¥</text>{{elist.price.price}}
				</view>
			</view>
			<view class="fixedview_tow" @tap="$u.debounce(showpopupclick,1000)">
				立即付款
			</view>
		</view>
		<u-popup :show="showpopup" @close="closepopup" @open="openpopup" mode="center" :round="10">
			<view class="u-popupflex-colum flex-colum">
				<view class="u-popupflex-columview">
					请输入支付密码
				</view>
				<u-code-input v-model="ucodeinputvalue" :maxlength="6" dot @finish="finish"></u-code-input>
			</view>
		</u-popup>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				showpopup: false,
				ucodeinputvalue: '',
				height: '',
				order_id: '',
				elist: {
					address: {

					},
					price: {
						total_price: '',
						id: ''
					}
				},
				mobile: uni.cache.get('loginuser').userinfo.mobile,
				formlist: {
					goods_id: ''
				},
				pay_type: 1
			}
		},
		async onLoad(e) {
			// this.elist = JSON.parse(optionItem)
			this.formlist = e
			this.formlist.spec = decodeURIComponent(e.spec)
			let res = await this.api.shoppingindexgoodindexoforders({
				type: this.formlist.type, // 1购物车 2商品详情页
				goods_id: this.formlist.goods_id, //商品ID 商品详情页来源时必填
				car_id: this.formlist.car_id, //购物车ID 1,2 购物车来源时必填
				number: this.formlist.number, //数量 商品详情页来源时必填
				spec: this.formlist.spec, //规格 商品详情页来源时必填
				address_id: this.formlist.address_id, //地址ID 可以为空（为空时返回默认地址）
				order_id:this.formlist.order_id,
			})
			if (res) {
				this.elist = res
				this.elist.goods[0].spec = this.formlist.spec
				if (this.elist.address) {
					this.elist.address.mobile = res.address.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
				}
			}
		},
		computed: {
			theme() {
				return this.$store.getters.theme
			},
		},
		methods: {
			clickaddress() {
				uni.pro.navigateTo("my/address/index", {
					order: 1
				});
				uni.$once('update', data => {
					this.elist.address = JSON.parse(data)
					if (this.elist.address) {
						this.elist.address.mobile = this.elist.address.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
					}
					this.$forceUpdate();
				})
			},
			openpopup() {
				console.log('open');
			},
			closepopup() {
				this.showpopup = false
			},

			finish(e) {
				this.reservationmakenowsub()
			},
			showpopupclick() {
				if(this.elist.address == null || this.elist.address == undefined){
					uni.showToast({
						icon: 'none',
						title: '收货地址不能为空'
					})
					return false
				}
				if (this.pay_type == 1) {
					uni.showLoading({
						title: '加载中',
						mask: true
					})
					this.reservationmakenowsub()
					return false;
				} else {
					if (this.pay_type == 2) {
						if (this.elist.is_vip_password == 0) {
							uni.showModal({
								title: '提示',
								content: '您目前没有设置密码，请先设置支付密码',
								success: function(res) {
									if (res.confirm) {
										uni.redirectTo({
											url: '/pages/my/setup/repairpassword'
										});
									} else if (res.cancel) {}
								}
							});
						} else {
							this.showpopup = true
						}
					}
				}
			},
			async reservationmakenowsub() {
				var datareslane = await this.api.shoppingindexgoodindexsuborder({
					type: this.formlist.type,
					goods_id: this.formlist.goods_id, //商品ID 商品详情页来源时必填
					car_id: this.formlist.car_id, //购物车ID 1,2 购物车来源时必填
					number: this.formlist.number, //数量 商品详情页来源时必填
					spec: this.formlist.spec, //规格 商品详情页来源时必填
					address_id: this.formlist.address_id, //地址ID 可以为空（为空时返回默认地址）
					pay_type: this.pay_type ,//1微信 2余额卡
					order_id:this.formlist.order_id
				})
				console.log(datareslane, 280)
				if (datareslane.data) {
					let res = await this.api.shoppingindexgoodindexgetpayparams({
						order_id: datareslane.data.order_id,
						sec_password: this.ucodeinputvalue //安全密码 余额卡支付时有效
					}) //判断是否支付成功
					this.ucodeinputvalue = ''
					console.log(res, 287)
					if (res.data.pay_status == 0) {
						this.showpopup = false
						uni.showLoading({
							title: '加载中',
							mask: true
						})
						// #ifdef MP-WEIXIN
						uni.requestPayment({
							provider: 'wxpay', //支付类型-固定值
							partnerid: res.data.pay_data.payAppId, // 微信支付商户号
							timeStamp: res.data.pay_data.payTimeStamp, // 时间戳（单位：秒）
							nonceStr: res.data.pay_data.paynonceStr, // 随机字符串
							package: res.data.pay_data.payPackage, // 固定值
							signType: res.data.pay_data.paySignType, //固定值
							paySign: res.data.pay_data.paySign, //签名
							success: (res) => {
								uni.showToast({
									title: "支付成功"
								})
								uni.redirectTo({
									url: "/pages/mall/order/ordersuccess?id=" + datareslane.data.order_id,
								});
							},
							fail: (err) => {
								setTimeout(res => {
									uni.showToast({
										icon: 'none',
										title: '支付失败'
									})
									uni.hideLoading()
								}, 2000)
								uni.redirectTo({
									url: "/pages/mall/order/index?e=" +0,
								});
							}
						});
						// #endif	
					} else {
						uni.redirectTo({
							url: "/pages/mall/order/ordersuccess?id=" + datareslane.data.order_id,
						});
					}
				} else {
					uni.showToast({
						title: res.message || res.msg,
						icon: "none",
						success() {
							setTimeout(res => {
								// if (options.toast) {
								uni.hideLoading()
								// }
							}, 2000)
						}
					})
				}

			},
			clickselect(b) {
				this.pay_type = b
			},
		},
		mounted() {
			var query = uni.createSelectorQuery().in(this).select('.fixedview')
			query.boundingClientRect(ele => {
				var that = this;
				uni.getSystemInfo({
					success(res) {
						that.height = (ele.height) + "px";
						that = null;
					}
				})
			}).exec();
		},
	}
</script>

<style lang="scss">
	page {
		background: #F6F6F6;
	}

	.content {
		padding: 32rpx 28rpx;

		.onecontent {
			width: 100%;
			background: #FFFFFF;
			padding: 32rpx;
			border-radius: 12rpx;

			.onecontentone {
				padding-bottom: 28rpx;
				border-bottom: 1px solid #F7F7F7;

				.onecontent_one {
					font-size: 28rpx;
					font-weight: bold;
					font-family: PingFang SC-Bold, PingFang SC;
					color: #333333;
				}

				.onecontent_tow {
					flex: 1;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin-left: 32rpx;
					font-size: 32rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #333333;
				}
			}

			.onecontentaddress {
				.onecontentaddressone {
					margin-top: 24rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
				}

				.onecontentaddresstow {
					margin-top: 24rpx;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #666666;
				}
			}

			.onecontenttow {
				width: 100%;

				.onecontenttowitem {
					margin-top: 24rpx;
					width: 100%;

					.onecontenttowitem_one {
						.onecontenttowitemimage {
							width: 124rpx;
							height: 124rpx;
						}

						.onecontenttowitem_onebox {
							margin-left: 24rpx;

							.onecontenttowitem_onebox_one {
								font-size: 32rpx;
								font-family: Source Han Sans CN-Medium, Source Han Sans CN;
								font-weight: 500;
								color: #1A1A1A;
							}

							.onecontenttowitem_onebox_tow {
								margin-top: 32rpx;
								font-size: 24rpx;
								font-family: Source Han Sans CN-Medium, Source Han Sans CN;
								font-weight: 500;
								color: #666666;
							}
						}
					}

					.onecontenttowitem_tow {
						.onecontenttowitem_towstext_one {
							font-size: 32rpx;
							font-family: Roboto-Medium, Roboto;
							font-weight: 500;
							color: #333333;
						}

						.onecontenttowitem_towstetx_tow {
							margin-top: 32rpx;
							font-size: 28rpx;
							font-family: DIN Alternate-Bold, DIN Alternate;
							font-weight: bold;
							color: #666666;
						}
					}
				}
			}
		}


		.fivecontent {
			width: 100%;
			background: #FFFFFF;
			padding: 32rpx;
			border-radius: 12rpx;
			margin-top: 32rpx;

			.fivecontentitem:nth-child(2) {
				border: none !important;
			}

			.fivecontentitem {
				padding: 18rpx 0;
				border-bottom: 1px solid #F7F7F7;

				.fivecontentitem_one {
					font-size: 28rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #333333;
				}

				.fivecontentitem_tow {
					font-size: 28rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #333333;
				}
			}
		}

		.therecontent {
			width: 100%;
			background: #FFFFFF;
			padding: 32rpx;
			border-radius: 12rpx;
			margin-top: 32rpx;

			.therecontenttow:nth-child(1) {
				margin-top: 0 !important;
			}

			.therecontenttow {
				margin-top: 32rpx;

				.therecontenttow_one {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				.therecontenttow_tow {
					font-size: 28rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: 500;
					color: #333333;
				}
			}
		}

		.sixcontent {
			width: 100%;
			background: #FFFFFF;
			padding: 32rpx;
			margin-top: 32rpx;
			border-radius: 12rpx;

			.sixcontentone {
				padding-bottom: 28rpx;
				border-bottom: 1px solid #F7F7F7;

				.sixcontent_one {
					font-size: 28rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #333333;
				}
			}

			.sixcontenttow {
				.sixcontenttowitem {
					margin-top: 16rpx;

					.sixcontenttowitemone {
						image {
							margin-left: 24rpx;
							width: 31.37rpx;
							height: 27.34rpx;
						}

						.sixcontenttowitemonetext {
							margin-left: 14rpx;
							font-size: 28rpx;
							font-family: Source Han Sans CN-Medium, Source Han Sans CN;
							font-weight: 500;
							color: #333333;
						}
					}
				}
			}
		}

		.fourcontent {

			width: 100%;
			background: #FFFFFF;
			padding: 32rpx;
			margin-top: 32rpx;
			border-radius: 12rpx;

			.fourcontentone {
				padding-bottom: 28rpx;
				border-bottom: 1px solid #F7F7F7;

				.fourcontent_one {
					font-size: 28rpx;
					font-family: Source Han Sans CN-Bold, Source Han Sans CN;
					font-weight: bold;
					color: #333333;
				}

			}

			.fourcontenttow {
				margin-top: 16rpx;
				width: 100%;

				/deep/ img {
					width: 100%;
				}
			}
		}

		.u-popupflex-colum {
			padding: 80rpx 40rpx;
			border-radius: 50rpx;
			background: #FFFFFF;

			.u-popupflex-columview {
				font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
				font-weight: normal;
				color: #000;
				font-weight: bold;
				margin-bottom: 50rpx;
			}
		}

		.fixedview {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			padding: 24rpx 28rpx;
			background: #FFFFFF;

			.fixedview_one {
				.fixedview_oneone {
					font-size: 28rpx;
					font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
					font-weight: normal;
					color: #333333;
				}

				.fixedview_onetow {
					font-size: 44rpx;
					font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
					font-weight: normal;
					color: #F45C4C;
					font-weight: bold;

					text {
						font-size: 28rpx;
					}
				}
			}

			.fixedview_tow {
				background: var(--bg-color-button);
				border-radius: 34rpx;
				padding: 10rpx 44rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
			}

		}
	}
</style>