<template>
	<view class="buydetail">
		<view class="buytop">
			<text class="buytitle"> 数字货币</text>
			<view class="buybox flexA">
				<image :src="list1[0]" mode=""></image>
				<view class="buymiss">
					<view class="title">
						{{topdetail.name}}
					</view>
					<view class="money">
						<text>￥</text>{{topdetail.price}}
					</view>
				</view>
			</view>
		</view>
		<view class="paymiss">
			<view class="paybox">
				<view class="boxtitle">
					买家信息
				</view>
				<view class="paybar">
					<view class="left">
						<text>*</text>接收账户：
					</view>
					<view class="right">
						<input type="text" placeholder="请输入手机号或钱包地址" v-model="lastInfo.buyer_package"
							placeholder-style="color: rgba(0,0,0,0.26);font-size: 28rpx;">
					</view>
				</view>
				<view class="paybar">
					<view class="left">
						<text>*</text>微信号：
					</view>
					<view class="right">
						<input type="text" placeholder="请输入" v-model="lastInfo.buyer_wechat"
							placeholder-style="color: rgba(0,0,0,0.26);font-size: 28rpx;">
					</view>
				</view>
				<view class="paybar">
					<view class="left">
						联系人：
					</view>
					<view class="right">
						<input type="text" placeholder="选填" v-model="lastInfo.buyer_name"
							placeholder-style="color: rgba(0,0,0,0.26);font-size: 28rpx;">
					</view>
				</view>
				<view class="paybar">
					<view class="left">
						联系电话：
					</view>
					<view class="right">
						<input type="text" placeholder="选填" v-model="lastInfo.buyer_mobile"
							placeholder-style="color: rgba(0,0,0,0.26);font-size: 28rpx;">
					</view>
				</view>
				<view class="paybar">
					<view class="left">
						实名认证：<text v-if="lastInfo.is_cert==0">（未通过）</text><text class="ok" v-else>（已通过）</text>
					</view>
					<view class="right flexA" >
						<text v-if="lastInfo.is_cert==0" @click="show=true">去认证</text>
						<text class="ok" v-else>已认证</text>
						<image src="../../static/ic-arrow.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="btn">
			<view class="paybtn" v-if="lastInfo.is_cert==0">
				确认支付
			</view>
			<view class="paybtn none" v-else @click="product_buy">
				确认支付
			</view>
		</view>
		<u-popup :show="show" @close="close" @open="open" mode="center" :round="12">
			<view class="popname">
				<view class="title">
					实名认证
				</view>
				<view class="contant">
					为了保证平台用户交易的安全性，您需要实名认证后，才能在平台中进行发布物品操作
				</view>
				<view class="btngroup">
					<view class="concle" @click="show=false">
						暂不认证
					</view>
					<view class="requt" @click="tocart">
						立即认证
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {toa} from '@/utils/toast.js'
	var wx = require('jweixin-module')
	import {
		last_buy_data,
		product_detail,
		product_buy
	} from '@/api/index.js'
	export default {
		data() {
			return {
				product_id: "",
				String: "",
				topdetail: "",
				list1: [],
				lastInfo: {
					product_id: "",
					buyer_package: "",
					buyer_wechat: "",
					buyer_name: "",
					buyer_mobile: "",
					is_cert: "",
				},
				show: false,
			}
		},
		onLoad(options) {
			this.product_id = options.id
			this.product_detail()
			this.last_buy_data()
		},
		onShow() {

		},
		methods: {
			open() {
			},
			close() {
				this.show = false
			},
			//实名认证
			tocart() {
				uni.navigateTo({
					url: "/pages/index/realName"
				})
			},
			//详情
			async product_detail() {
				try {
					const res = await product_detail(this.product_id)
					console.log('product_detail', res)
					this.topdetail = res.detail
					this.list1 = res.detail.images_preview
					// 保存数据
				} catch (err) {
					uni.showToast({
						title: err,
						icon: 'none'
					})
					console.log('product_detail', err)
				}
			},
			//下单
			async product_buy() {
				if(!this.lastInfo.buyer_package) return toa.toast('请输入接收账号')
				if(!this.lastInfo.buyer_wechat) return toa.toast('请输入微信号')
				// console.log(this.lastInfo, "000000")
				let obj = {
					openid:uni.getStorageSync('openId'),
					product_id: this.product_id,
					buyer_package: this.lastInfo.buyer_package,
					buyer_wechat: this.lastInfo.buyer_wechat,
					buyer_name: this.lastInfo.buyer_name,
					buyer_mobile: this.lastInfo.buyer_mobile,
				}
				try {
					const res = await product_buy(obj)
					console.log('product_buy', res)
					wx.config({
					             debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
					             appId: res.pay_data.appId, // 必填，公众号的唯一标识
					             timestamp: res.pay_data.timeStamp, // 必填，生成签名的时间戳
					             nonceStr: res.pay_data.nonceStr, // 必填，生成签名的随机串
					             signature: res.pay_data.paySign, // 必填，签名
					             jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
					           })
					           wx.ready(function () {
					             wx.chooseWXPay({
					               timestamp: res.pay_data.timeStamp, // 时间戳
					               nonceStr: res.pay_data.nonceStr, // 随机数
					               package: res.pay_data.package, //
					               signType: res.pay_data.signType,
					               paySign: res.pay_data.paySign, // 签名
					               success: function () {
														toa.success('支付成功')
														uni.redirectTo({
															url:'/pages/mine/buyerOrder'
														})
					               },
					               cancel: function () {
														setTimeout(()=>{
															toa.toast('取消支付')
														},200)
														uni.navigateBack({})
					               },
					               fail: function () {
														setTimeout(()=>{
															toa.toast('支付失败')
														},200)
														uni.navigateBack({})
					               }
					             })
					           })
					// 保存数据
				} catch (err) {
					uni.showToast({
						title: err,
						icon: 'none'
					})
					console.log('product_buy', err)
				}
			},
			//下单展示
			async last_buy_data() {
				try {
					const res = await last_buy_data()
					console.log('last_buy_data', res)
					this.lastInfo = res.detail
					// 保存数据
				} catch (err) {
					uni.showToast({
						title: err,
						icon: 'none'
					})
					console.log('last_buy_data', err)
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f0f0;
	}

	.buydetail {

		.buytop {
			width: 100%;
			padding: 0 32rpx;
			height: 294rpx;
			background-image: url(@/static/ic_back3.png);
			background-size: 100%;
			background-repeat: no-repeat;
			padding-top: 68rpx;
			box-sizing: border-box;

			.buytitle {
				color: rgba(0, 0, 0, 1);
				font-size: 36rpx;
				font-weight: 600;
				font-family: "PingFang SC";
			}

			.buybox {
				margin-top: 24rpx;
				background-color: #ffffff;
				padding: 24rpx;
				border-radius: 16rpx;
				box-sizing: border-box;

				image {
					margin-right: 12rpx;
					width: 120rpx;
					height: 120rpx;
					border-radius: 16rpx;
				}

				.buymiss {
					.title {
						color: rgba(0, 0, 0, 0.9);
						font-size: 28rpx;
						font-weight: 400;
						font-family: "PingFang SC";
					}

					.money {
						margin-top: 32rpx;
						color: rgba(248, 83, 23, 1);
						font-size: 32rpx;
						font-weight: 700;

						text {
							font-size: 24rpx;
							font-weight: 500;
						}
					}
				}
			}
		}

		.paymiss {
			padding: 0 32rpx;
			margin-top: 24rpx;

			.paybox {
				background-color: #ffffff;
				padding: 24rpx;

				.boxtitle {
					color: rgba(0, 0, 0, 0.9);
					font-size: 30rpx;
					font-weight: 600;
					font-family: "PingFang SC";
				}

				.paybar {
					padding: 16rpx 0;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.left {
						flex: 1;
						color: rgba(0, 0, 0, 0.9);
						font-size: 28rpx;
						font-weight: 400;
						font-family: "PingFang SC";

						text {
							opacity: 1;
							color: rgba(252, 67, 56, 1);
							font-size: 28rpx;
							font-weight: 400;
							font-family: "PingFang SC";
						}

						.ok {
							color: rgba(24, 209, 142, 1);
							font-size: 28rpx;
							font-weight: 400;
							font-family: "PingFang SC";
						}
					}

					.right {
						text-align: right;

						text {
							color: rgba(33, 83, 212, 1);
							font-size: 28rpx;
							font-weight: 400;
							font-family: "PingFang SC";
						}

						.ok {
							color: rgba(24, 209, 142, 1);
							font-size: 28rpx;
							font-weight: 400;
							font-family: "PingFang SC";
						}

						image {
							width: 16rpx;
							height: 32rpx;
						}
					}
				}
			}
		}

		.btn {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 128rpx;
			padding: 16rpx 32rpx;
			box-sizing: border-box;
			opacity: 1;
			background: rgba(255, 255, 255, 1);

			.paybtn {
				width: 100%;
				height: 96rpx;
				line-height: 96rpx;
				text-align: center;
				border-radius: 28rpx;
				opacity: 1;
				color: rgba(0, 0, 0, 0.9);
				font-size: 32rpx;
				font-weight: 600;
				font-family: "PingFang SC";
				background: rgba(240, 242, 245, 1);
			}

			.none {
				background: linear-gradient(134.8deg, rgba(255, 232, 100, 1) 0%, rgba(255, 216, 0, 1) 100%);
			}
		}

		.popname {
			padding: 32rpx;
			box-sizing: border-box;
			width: 622rpx;
			text-align: center;

			.title {
				color: rgba(0, 0, 0, 0.9);
				font-size: 32rpx;
				font-weight: 600;
				font-family: "PingFang SC";
				text-align: center;
			}

			.contant {
				color: rgba(179, 179, 179, 1);
				font-size: 28rpx;
				font-weight: 400;
				font-family: "PingFang SC";
				text-align: center;
			}

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

				.concle {
					width: 264rpx;
					height: 76rpx;
					border-radius: 16rpx;
					opacity: 1;
					line-height: 76rpx;
					color: rgba(0, 0, 0, 0.9);
					font-size: 28rpx;
					font-weight: 500;
					font-family: "PingFang SC";
					text-align: center;
					background: rgba(246, 246, 246, 1);
				}

				.requt {
					width: 264rpx;
					height: 76rpx;
					color: rgba(0, 0, 0, 0.9);
					font-size: 28rpx;
					font-weight: 500;
					font-family: "PingFang SC";
					text-align: center;
					line-height: 76rpx;
					border-radius: 16rpx;
					opacity: 1;
					background: rgba(254, 208, 0, 1);
				}
			}

		}

	}
</style>