<template>
	<view class="v-pages bgcolor p-b-24">
		<view class="v-card order small container-fluid m-t-24" style="padding-bottom: 60rpx;">
			<view class="merchant-name">{{orderInfo.merchantName}}</view><!-- 商户名称 -->
			<view class="row">
				<view class="v-shop-item-image">
					<image :src="orderInfo.picUrls" class="img" mode="widthFix"></image>
				</view>
				<view class="v-shop-item-con col">
					<view class="name">{{orderInfo.goodsName}}</view><!-- 商品名称 -->
					<view class="price"><text class="num-pre">&yen;</text><text
							class="num-price">{{orderInfo.price}}</text></view><!-- 单价 -->
				</view>
				<view><u-number-box :min="1" :max="100" v-model="goods" @change="goodsChange"></u-number-box></view>
			</view>
		</view>
		<view class="v-card order small container-fluid m-t-24">
			<view class="v-order-title m-b-24">
				<view class="text"><text>用户信息</text></view>
			</view>
			<uni-forms class="v-order-form" ref="form" :modelValue="formData">
				<uni-forms-item label="联系人" name="name">
					<uni-easyinput class="v-input" type="text" :inputBorder="false" placeholderStyle="fontSize:24rpx"
						v-model="formData.name" placeholder="请输入联系人姓名" />
				</uni-forms-item>
				<uni-forms-item label="联系电话" name="phoneNumber">
					<uni-easyinput class="v-input" type="number" :inputBorder="false" placeholderStyle="fontSize:24rpx"
						v-model="formData.phoneNumber" placeholder="请输入手机号码" />
				</uni-forms-item>
			</uni-forms>
		</view>
		<view class="v-card order small bg1 container-fluid m-t-24">
			<view class="v-order-title">
				<view class="text"><text>购买须知</text></view>
			</view>
			<view class="m-t-24 v-form-content">为确保订单顺利处理，请您务必填写真实姓名及手机号码，工作人员将尽快与您取得联系，请保持手机通讯畅通。</view>
		</view>

		<view class="v-order-submit row flex-align-center">
			<view class="col price">
				<text class="text">总价</text>
				<text class="yuan">&yen;</text>
				<text class="number">{{totalPrice}}</text>
			</view>
			<view class="btn" @click="orderSubmit">提交订单</view>
		</view>
		<u-popup :show="isPayPopup" mode="bottom" @close="closePay" round="10">
			<f-pay :show-title="false" :show="isPayPopup" :order="orderPay" :payMoney="orderPay.orderAmount"
				:tradeNo="orderPay.orderNumber" @payResult="payResult"></f-pay>
		</u-popup>
	</view>
</template>

<script>
	import fPay from "../components/f-pay/f-pay";
	import uPopup from "../components/uview-ui/components/u-popup/u-popup.vue";

	export default {
		components: {
			fPay,
			uPopup
		},
		data() {
			return {
				//是否支付弹窗
				isPayPopup: false,

				orderInfo: {},
				formData: {
					name: undefined,
					phoneNumber: undefined
				},
				goods: 1,
				orderPay: undefined,
				totalPrice: undefined, //总价格
				totalNum: undefined, //总数量
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '联系人姓名不能为空！',
						}]
					},
					phoneNumber: {
						rules: [{
								required: true,
								errorMessage: '联系手机不能为空！',
							},
							{
								validateFunction: function(rule, value, data, callback) {
									const reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/;
									if (reg.test(value) == false) {
										callback('请输入正确的手机号码！')
									}
									return true
								}
							}
						]
					}
				}
			}
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},
		onLoad(options) {
			const shop = JSON.parse(decodeURIComponent(options.shop));
			this.orderInfo = shop
			this.totalPrice = this.orderInfo.price
			this.formData.phoneNumber = this.orderInfo.mobile
		},
		methods: {
			goodsChange(val) {
				console.log(val.value)
				this.orderInfo.goodsNum = val.value
				this.totalPrice = this.orderInfo.price * 10000 * val.value / 10000
			},
			orderSubmit() {
				this.$refs.form.validate().then(res => {

					const extConfig = uni.getAccountInfoSync().miniProgram;
					let appId = extConfig.appId
					console.log("|this.formData", this.formData, this.orderInfo)

					var data = {
						"customerName": this.formData.name,
						"customerPhone": this.formData.phoneNumber,
						"openid": this.orderInfo.openid,
						"appid": appId,
						"tenantId": "1",
						"merchantId": this.orderInfo.merchantId,
						"merchantName": this.orderInfo.merchantName,
						"orderAmount": this.totalPrice,
						"goodsId": this.orderInfo.goodsId,
						"goodsNum": this.orderInfo.goodsNum || 1
					};

					console.log("|data", data)
					this.$Request.post(this.$config.createMerchantOrder, data, 'json', null, false, true).then((
						res) => {
						if (res.code == 0) {
							this.orderPay = res.data
							this.payOrder()
						} else if (res.code == 600) {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						} else {
							uni.showToast({
								title: "网络拥挤，请稍后重试",
								icon: 'none',
								duration: 2000
							})
						}
					});

				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},

			payOrder(val) {
				console.log("订单==========", val)
				this.isPayPopup = true
			},

			//支付结果
			payResult(data) {
				if (data.payStatus == 1) {
					uni.showToast({
						title: '支付成功',
						icon: 'none'
					});
					setTimeout(() => {
						uni.redirectTo({
							url: "/subPageC/orderShop/orderList"
						});
						this.isPayPopup = false
					}, 1000)
				} else {
					uni.showToast({
						title: '支付失败',
						icon: 'none'
					});
					setTimeout(() => {
						uni.redirectTo({
							url: "/subPageC/orderShop/orderList"
						});
						this.isPayPopup = false
					}, 1000)
				}
				//uni.showToast({title: data.detail.errMsg,icon:'none'});
			},

			closePay() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定取消支付？',
					cancelText: '再想想',
					showCancel: true,
					success: function(res) {
						if (res.confirm) {
							that.isPayPopup = false
							setTimeout(() => {
								uni.redirectTo({
									url: "/subPageC/orderShop/orderList"
								});
							}, 500)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.v-shop-item-image {
		flex: 0 0 120rpx;
		margin-right: 24rpx;
		width: 120rpx;
		height: 120rpx;
		overflow: hidden;

		.img {
			width: 120rpx;
			height: 120rpx;
		}
	}

	.v-shop-item-con {

		.name {
			font-size: 28rpx;
			color: #1B1B1B;
		}

		.price {
			.num-pre {
				color: #e02222;
				font-size: 24rpx;
			}

			.num-price {
				color: #e02222;
				font-size: 32rpx;
				margin-right: 12rpx;
			}
		}
	}

	.merchant-name {
		font-size: 32rpx;
		color: #1B1B1B;
		font-weight: bold;
		margin-bottom: 10rpx;
	}
</style>