<template>
	<view v-if="!loding">
		<!-- 产品信息 -->
		<view class="goods">
			<image class="cover" :src="info.goods.cover" mode="aspectFill"></image>
			<view class="content">
				<view class="title nowrap">数字权证</view>
				<view class="text nowrap">锚定商品：{{info.goods.goods_name}}</view>
				<view class="text nowrap">供应商：{{info.company.name}}</view>
				<view class="text nav-goods nowrap" @click="onGoods">查看锚定商品信息<uni-icons type="arrowright" size="12" color="#8b64fd"></uni-icons></view>
			</view>
			<view class="info">
				<view class="info-item">
					<label>转让用户</label>
					{{info.user.username}}
				</view>
				<view class="info-item">
					<label>转让单价</label>
					￥{{info.price}}
				</view>
				<view class="info-item">
					<label>出售数量</label>
					{{info.stock}}
				</view>
				<view class="info-item">
					<label>剩余转让数量</label>
					{{info.surplus}}
				</view>
				<view class="info-item">
					<label>区块HASH</label>
					{{info.hash}}
				</view>
				<view class="info-item">
					<label>转让时间</label>
					{{info.created_at}}
				</view>
			</view>
		</view>
		<button class="buy-btn" type="default" @click="openLay">我要购买</button>
		<!-- 购买弹窗 -->
		<uni-popup ref="buyLay" :safe-area="true" background-color="#ffffff">
			<view class="popup">
				<view class="title">我要购买</view>
				<view class="des">
					剩余转让数量
					<text>{{info.surplus}}</text>
				</view>
				<view class="des">
					数量
					<uni-number-box v-model='stock' :min="1" :max="info.surplus" @change="countPrice"></uni-number-box>
				</view>
				<view class="des">
					订单总价
					<text class="price">￥{{price}}</text>
				</view>
				<view class="btn" @click="buy">提交订单</view>
			</view>
		</uni-popup>
		<!-- 支付方式 -->
		<uni-popup ref="payLay" :safe-area="true" background-color="#ffffff">
			<view class="popup">
				<view class="title">支付方式</view>
				<radio-group class="pay-group" @change="payType">
					<view class="item">
						<label>
							<radio class="pay-radio" value="wechat" checked color="#8b64fd" />
							<view class="pay-title">微信支付</view>
						</label>
					</view>
					<view class="item">
						<label>
							<radio class="pay-radio" value="alipay" color="#8b64fd" />
							<view class="pay-title">支付宝支付</view>
						</label>
					</view>
				</radio-group>
				<view class="btn" @click="orderPay">立即支付</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { marketsInfo, marketsBuy, marketsPay } from '@/apis/interfaces/market'
	import userAuth from '@/public/userAuth'
	import cashierPay from '@/public/cashierPay'
	export default {
		data() {
			return {
				payValue: 'wechat',
				orderNo : '',
				price	: '0.00',
				stock	: 1,
				loding	: true,
				info	: {}
			};
		},
		onShow() {
			this.getInfo()
		},
		methods:{
			// 获取数据信息
			getInfo(){
				marketsInfo(this.$Route.query.marketId).then(res =>{
					this.info	= res
					this.price	= res.price
					this.loding = false
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			// 查看锚定产品
			onGoods(){
				this.$Router.push({name: 'marketGoods', params: { id: this.info.goods.goods_id }})
			},
			// 选择购买方式
			payType(e){
				this.payValue = e.detail.value
			},
			// 购买弹窗
			openLay(){
				let token = this.$store.getters.getToken
				if(token == ''){
					this.$Router.push({name: 'Login'})
					return
				}
				this.$refs.buyLay.open('bottom')
			},
			// 计算价格
			countPrice(e){
				this.price = (e * this.info.price).toFixed(2)
			},
			// 提交购买单
			buy(){
				marketsBuy(this.info.market_id, {
					qty: this.stock
				}).then(res => {
					this.account = res.account
					this.orderNo = res.market_order_no
					this.$refs.buyLay.close()
					this.$refs.payLay.open('bottom')
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			// 支付
			orderPay(){
				marketsPay(this.orderNo, this.payValue).then(res => {
					switch (this.payValue){
						case 'wechat':
							let payConfigObj = JSON.parse(res)
							cashierPay.pay('wxpay', payConfigObj, 'market').then(() => {
								this.paySuccess()
							})
							break
						case 'alipay':
							cashierPay.pay('alipay', res, 'market').then(() => {
								this.paySuccess()
							})
							break
					}
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			// 支付结果
			paySuccess(){
				this.$refs.payLay.close()
				uni.showModal({
					title		: '支付成功',
					content		: '购买成功，可在节点中心我的权证中查看',
					showCancel	: false,
					success		: () => {
						this.$Router.back()
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 支付方式
	.pay-group{
		margin: 0 ($margin * 2);
		.item{
			position: relative;
			border-bottom: solid 1rpx $border-color;
			padding: $padding 0;
			&:last-child{
				border-bottom: none;
			}
			.pay-radio{
				position: absolute;
				right: 0;
				top: 50%;
				margin-top: -25rpx;
			}
			.pay-sub-title{
				font-size: $title-size-sm;
				color: $text-gray;
				line-height: 40rpx;
			}
			.pay-title{
				font-weight: bold;
				line-height: 50rpx;
				color: $text-color;
				font-size: $title-size-lg;
				text-align: left;
			}
		}
	}
	// 我要购买按钮
	.buy-btn{
		margin: 0 $margin;
		background: $mian-color;
		color: white;
		height: 90rpx;
		line-height: 90rpx;
		padding: 0;
		border-radius: $radius/2;
		font-size: $title-size;
		font-weight: bold;
		&::after{
			border: none;
		}
	}
	// 产品信息
	.goods{
		min-height: 168rpx;
		position: relative;
		background: white;
		border-radius: $radius/2;
		margin: $margin;
		padding: $padding;
		.cover{
			position: absolute;
			left: $padding;
			top: $padding;
			width: 168rpx;
			height: 168rpx;
		}
		.content{
			padding-left: calc(168rpx + #{$padding});
			.title{
				position: relative;
				font-size: $title-size-lg;
				color: $text-color;
				font-weight: bold;
				line-height: 52rpx;
				padding-right: 60rpx;
				text{
					position: absolute;
					right: 0;
					top: 0;
					width: 60rpx;
					text-align: right;
					font-weight: normal;
				}
			}
			.text{
				font-size: $title-size-sm;
				color: $text-gray;
				height: 40rpx;
				line-height: 40rpx;
				&.nav-goods{
					color: $mian-color;
				}
			}
		}
		.info{
			margin-top: $margin;
			border-top: solid 1rpx $border-color;
			padding-top: $padding;
			.info-item{
				padding-left: 200rpx;
				height: 60rpx;
				line-height: 60rpx;
				position: relative;
				text-align: right;
				font-size: $title-size-m;
				@extend .nowrap;
				label{
					position: absolute;
					left: 0;
					top: 0;
					width: 200rpx;
					text-align: left;
					color: $text-gray;
				}
			}
		}
	}
	// 购买产品
	.popup {
		width: 100%;
		background-color: #fff;
		padding-bottom: $padding;
		.title {
			font-size: 36rpx;
			text-align: center;
			padding: 50rpx 30rpx 30rpx 30rpx;
			font-weight: bold;
		}
		.btn {
			background-color: $mian-color;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			color: #fff;
			font-weight: bold;
			font-size: $title-size;
			margin: $padding * 2;
			border-radius: $radius/2;
		}
		.des {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			padding: $padding $padding * 2;
			color: $text-gray;
			font-size: $title-size-lg;
			text{
				color: $text-color;
			}
			.price{
				color: $text-price;
				font-weight: bold;
			}
		}
	}
</style>
