<template>
	<view>
		<view class="shop">
			<image :src="shop.logo"></image>
			<view class="hm-col-0 hm-font-b hm-font-32">付款给商家</view>
			<view class="hm-col-tips hm-font-26 hm-p-t-10">名称：{{shop.shop_name}}</view>
		</view>
		<view class="pay">
			<view class="hm-font-28 hm-col-tips">
				金额<text class="hm-fr">请询问服务员后输入</text>
			</view>
			<view class="hm-p-tb-50">
				<u--input :customStyle="{height:'80rpx',padding:'0rpx'}" 
				fontSize="24" prefixIcon="rmb" 
				placeholder="请输入金额" border="bottom" 
				v-model="money" type="digit"
				clearable 
				:prefixIconStyle="{color:'#000',fontSize:'80rpx',fontWeight:'bold'}">
				</u--input>
			</view>
			<view class="hm-p-tb-20">
				<text class="hm-col-0 hm-font-28 hm-font-b">买单备注</text>
				<view class="notes">
				<u--input placeholder="添加备注(20个汉字以内)" 
				border="bottom" 
				v-model="notes" 
				clearable>
				</u--input>
				</view>
			</view>
			<view class="hm-p-tb-20 hm-col-0 hm-font-28 hm-font-b">
				实际应付 <text v-if="money" class="hm-fr">合计 <text class="hm-col-error">￥{{money}}</text></text>
			</view>
			<view class="hm-p-tb-50">
				<view class="hm-p-lr-b25">
					<!-- #ifndef H5 -->
					<u-button type="success" text="确认买单" @click="payment">
					</u-button>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<u-button type="success" text="确认去买单" @click="cashier">
					</u-button>
					<!-- #endif -->
				</view>
			</view>
		</view>
		<!-- 技术支持 -->
		<view class="hm">
			{{applet.copyright}} <text class="v">V{{applet.version}}</text>
		</view>
		<u-popup :show="cashier_show" @close="cashier_show = false" mode="center" round="8" :closeable="true">
			<view class="hm-popup">
				<view class="hm-p-b-20 hm-border-b hm-text-center">支付收银台</view>
				<view class="hm-p-tb-50 hm-text-center">
					<view class="hm-font-b hm-col-0">
						￥<text class="hm-font-100">{{money}}</text>
					</view>
					<view class="hm-font-28 hm-col-content">线上买单</view>
				</view>
				<view class="hm-p-20 hm-border-t" @click="type = 30">
					<view class="hm-m-r-10 hm-dis-block-inline">
						<u-icon name="weixin-circle-fill" size="25" color="#19be6b"></u-icon>
					</view>
					微信
					<view class="hm-fr hm-dis-block-inline">
						<u-icon name="checkbox-mark" v-if="type==30" size="25" color="#fa3534"></u-icon>
					</view>
				</view>
				<view class="hm-p-20 hm-border-t hm-border-b" @click="type = 40">
					<view class="hm-m-r-10 hm-dis-block-inline">
						<u-icon name="zhifubao-circle-fill" size="25" color="#2979ff"></u-icon>
					</view>
					支付宝
					<view class="hm-fr hm-dis-block-inline">
						<u-icon name="checkbox-mark" v-if="type==40" size="25" color="#fa3534"></u-icon>
					</view>
				</view>
				<view class="hm-p-t-50">
					<view class="hm-p-lr-b25">
						<u-button type="error" @click="payment" text="确定支付"></u-button>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	let App = getApp();

	export default {
		data() {
			return {
				applet: {},
				shop:null,
				shop_id:'',
				type: 30,//默认30微信支付 40支付宝支付
				cashier_show: false,//收银台
				money: '', //金额
				notes:'',
			};
		},

		components: {},
		props: {},
		
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			let _this = this;
			_this.shop_id = options.shop_id;
			// #ifdef MP-ALIPAY
			_this.type = 40;
			//#endif
			_this.applet = uni.getStorageSync('applet');
			_this.getShop();
		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {},
		methods: {
			/**
			 * 打开收银台
			 */
			cashier:function(){
				let _this = this;
				let money = Number(_this.money);
				if (money <= 0) {
					App.showError('买单金额必须大于0');
					return false;
				}
				_this.cashier_show = true;
			},
			/**
			 * 发起充值付款
			 */
			payment: function() {
				let _this = this;
				let money = Number(_this.money);
				if (money <= 0) {
					App.showError('买单金额必须大于0');
					return false;
				}
				// 订单创建成功后回调
				let callback = function(result) {
					_this.cashier_show = false;
					if (result.code === -10) {
						App.showError(result.msg);
						return false;
					}
					// 发起微信支付
					// #ifdef MP-WEIXIN
					uni.requestPayment({
						timeStamp: result.data.timeStamp,
						nonceStr: result.data.nonceStr,
						package: result.data.package,
						signType: result.data.signType,
						paySign: result.data.paySign,
						success: function(res) {
							App.showSuccess('买单成功');
						},
						fail: function(res) {
							let msg = '支付失败';
							if(res.errMsg == 'requestPayment:fail cancel'){
								msg = '用户取消支付';
							}
							App.showError(msg);
						}
					});
					//#endif
					//#ifdef H5
					// #ifdef MP-WEIXIN
					window.location.href = result.data.h5_url;
					//#endif
					//#endif
					// #ifdef MP-ALIPAY
					uni.requestPayment({
						orderInfo: result.data.trade_no,
						success: function(res) {
							if(res.resultCode != '9000'){
								App.showError(res.memo);
								return false;
							}
							App.showSuccess('买单成功');
						}
					});
					//#endif
				};
				// 显示loading
				uni.showLoading({
					title: '正在处理...'
				});
				App._post_form('user.order/paybill', {
					shop_id: _this.shop_id,
					money: money,
					type: _this.type,
					notes: _this.notes
				}, function(result) {
					callback(result);
				});
			},

			/**
			 * 获取当前用户信息
			 */
			getShop() {
				let _this = this;
				App._get('shop/detail', {
					shop_id: _this.shop_id
				}, result => {
					_this.shop = result.data.detail;
					uni.setStorageSync('shop', result.data.detail);
				});
			},
			/**
			 * 转跳指定的页面
			 */
			goTo(url) {
				App.goTo(url); // 转跳指定的页面
			}

		}
	};
</script>
<style lang="scss" scoped>
	.shop{
		padding: 50rpx;
		image{
			width: 90rpx;
			height: 90rpx;
			float: right;
			border-radius: 50%;
		}
	}
	.pay{
		padding: 20rpx 50rpx;
		background-color: #fff;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		.notes{
			display: inline-block;
			width: 525rpx;
			margin-left: 20rpx;
		}
	}
</style>
