<template>
	<view>
		<topnav :title='pageTitle' @tohome="tohome"></topnav>
		<view class="content">
			<orderinfo :info="order"></orderinfo>
			<view class="pageTitle">请选择收款金额</view>
			<view class="moneyBox" style="margin-top: 30rpx;">
				<view class="moneyBoxLeft">
					<block v-for="(item,index) in moneyArr">
						<view class="moneyItem" :class="item.checked?'moneyItemOn':''" :data-index='index'
							@click="bindClickMoney">
							<text>￥{{item.amt}}元</text>
						</view>
					</block>
				</view>
				<view class="moneyBoxRight">
					<view class="btnOther" :class="selectOtherAmt?'btnOther-on':''" @click="bindinputotheramt">
						<text>其它金额</text>
					</view>
				</view>
			</view>

			<view class="payList">
				<view class="l-box">
					<block v-for="(item,index) in paylist">
						<view class="l-box-info" @click="tochange" :data-index="index">
							<view class="l-box-info-left" :data-index="index">
								<view class="l-box-info-left-logo">
									<image :src="item.img" class="icon_logo"></image>
								</view>
								<view class="l-box-info-left-rinfo">
									<view class="l-box-info-left-title">
										{{item.name}}
									</view>
									<view class="l-box-info-left-ftitle">
										{{item.comment}}
									</view>
								</view>
							</view>
							<view class="l-box-info-right">
								<text class="iconfont icon-check icon-check-in" v-if="item.chekced"></text>
								<text class="iconfont icon-check" v-else></text>
							</view>
						</view>
					</block>
				</view>
			</view>



			<view class="payBox">
				<view class="listBox mp-20">
					<view class="listBoxItem">
						<view class="listBoxItemLeft">
							<view class="vred"> </view>备注
						</view>
						<view class="listBoxItemRight">
							<input type="text" class="listBoxItemInput" placeholder-class="listBoxItemInputPlaceholder"
								placeholder="请输入" @input='bindChangeComment' @confirm='bindPay' />
						</view>
					</view>
				</view>
			</view>
		</view>


		<view class="bottom">
			<view class="bottomLeft">
				<text class="priceTitle">收款金额：</text>
				<text class="priceInfo">￥{{totalPrice}}</text>
			</view>
			<view class="bottomRight">
				<view class="btnSubmit btn" @click="bindPay">确认收款</view>
			</view>
		</view>

		<uni-popup ref="popup" type="bottom" @change="bindPopChange">
			<view class="popupbox-amt"
				:style="'width:'+0.8*windowWidth+'px;top:-'+(windowHeight/2+150)+'px;'+'left:'+((windowWidth-0.8*windowWidth)/2)+'px'">
				<view class="popupbox-header">
					<view class="popupbox-header-tag"></view>
					<view class="popupbox-header-title">请填写金额</view>
				</view>
				<view class="popupbox-body">
					<view class="listBox mp-20">
						<view class="listBoxItem">
							<view class="listBoxItemLeft">
								<view class="vred">*</view>金额
							</view>
							<view class="listBoxItemRight">
								<input type="number" class="listBoxItemInput"
									placeholder-class="listBoxItemInputPlaceholder" :focus="focusAmtSet"
									placeholder="请输入" @input='bindChangeMoney' @confirm="bindPopOk" />
							</view>
						</view>
					</view>
				</view>
				<view class="popupbox-bottom">
					<view class="popupbox-btn popupbox-btn-cancel" @click="closePop"><text
							class="popupbox-btn-txt">取消</text></view>
					<view class="popupbox-btn" @click="bindPopOk"><text class="popupbox-btn-txt">确定</text></view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	var util = require("../../utils/util.js");
	var app = getApp();
	export default {
		data() {
			return {
				pageTitle: "收银台",
				windowHeight: 720,
				windowWidth: 720,
				order: {
					"id": 731,
					"serial": "",
					"customer_id": 16,
					"manager_id": null,
					"bed_id": 778,
					"patient_id": 793,
					"project_id": 1,
					"product_id": 1,
					"product_item_id": 1,
					"product_paramedic_level_id": 1,
					"from_date": "",
					"to_date": "",
					"status": 0,
					"total": 150,
					"paid_total": 0,
					"contact": null,
					"mobile": "13912797667",
					"paramedic_id": 31,
					"price": "150.00",
					"patient_quantity": null,
					"created_at": "",
					"updated_at": "",
					"balance": "0.00",
					"status_name": "",
					"days": 0,
					"product_item": {
						"id": 1,
						"name": "一对一"
					},
					"paramedic_level": {
						"id": 8,
						"name": "普通护工",
						"laravel_through_key": 1
					},
					"project": {
						"id": 1,
						"name": "武进中医院",
						"logo_url": null,
						"banners_url": null
					},
					"bed": {
						"id": 778,
						"name": "1",
						"room_name": "101",
						"area_name": "一楼（十九病区）",
						"building_name": "内科楼"
					},
					"customer": {
						"id": 16,
						"name": null,
						"balance": "0.00"
					},
					"patient": {
						"id": 793,
						"name": "",
						"sex": null,
						"age": null,
						"mobile": null
					},
					"paramedic": {
						"id": 31,
						"name": "",
						"mobile": "15850579275",
						"paramedic_level_name": "普通护工",
						"avatar_url": null,
						"age": "",
						"status_name": null
					},
					"factorjson": [{
						"fee": "0.00",
						"price": "0.00",
						"factor_id": 1,
						"factor_name": "所在科室",
						"fee_percent": "25.00",
						"used_for_fee": 1,
						"factor_item_id": 2,
						"factor_item_name": "骨科"
					}]
				},
				totalPrice: 0,
				paylist: [{
					name: "微信支付",
					comment: "推荐微信用户使用",
					chekced: true,
					img: "/static/resources/weixin.png",
					type: "weixin"
				}, {
					name: "支付宝支付",
					comment: "推荐支付宝用户使用",
					chekced: false,
					img: "/static/resources/alipay.png",
					type: "alipay"
				}, {
					name: "刷卡支付",
					comment: "推荐刷卡用户使用",
					chekced: false,
					img: "/static/resources/pos.png",
					type: "pos"
				}, {
					name: "现金支付",
					comment: "推荐现金",
					chekced: false,
					img: "/static/resources/cash.png",
					type: "cash"
				}],
				payType: "weixin",
				id: "",
				moneyArr: [],
				comment: "",
				selectOtherAmt: false,
				showPopAmt: false,
				focusAmtSet: false
			}
		},
		onLoad: function(option) {
			var that = this;
			this.id = option.id;
			util.getOrderInfo(this.id, function(r) {
				console.log(r)
				that.order = r.data;
				that.loadMoneyArr(that.order.price);
			}, function() {

			})

			this.windowHeight = app.globalData.winHeight;
			this.windowWidth = app.globalData.winWidth;
		},
		methods: {
			tohome:function(){
				uni.navigateTo({
					url:"../index/index"
				})
			},
			openPop() {
				// 通过组件定义的ref调用uni-popup方法
				this.$refs.popup.open();
			},
			bindPopChange: function() {
				var that = this;
				that.focusAmtSet = true;
			},
			closePop() {
				// 通过组件定义的ref调用uni-popup方法
				this.$refs.popup.close();

				this.focusAmtSet = false;
			},
			bindClickMoney: function(e) {
				var index = e.currentTarget.dataset.index;
				var _moneyArr = this.moneyArr;
				for (var m of _moneyArr) {
					m.checked = false;
				}
				_moneyArr[index].checked = true;
				console.log(_moneyArr[index])
				this.moneyArr = _moneyArr;
				this.totalPrice = _moneyArr[index].amt;
				this.selectOtherAmt = false;
				this.closePop();
			},
			tochange: function(e) {
				var index = e.currentTarget.dataset.index;
				var _paylist = this.paylist;
				for (var m of _paylist) {
					m.chekced = false;
				}
				_paylist[index].chekced = true;
				this.paylist = _paylist;
				this.payType = _paylist[index].type;
			},
			bindinputotheramt: function() {
				var _moneyArr = this.moneyArr;
				for (var m of _moneyArr) {
					m.checked = false;
				}
				this.moneyArr = _moneyArr;
				this.totalPrice = 0;
				this.selectOtherAmt = true;
				this.openPop();
			},
			bindPopOk: function() {
				if (this.totalPrice == 0) {
					util.alert('请输入金额');

					return false;
				}
				this.closePop();

			},
			bindPay: function(e) {
				var that = this;
				if (this.totalPrice == 0 || util.isNull(this.totalPrice)) {
					util.alert('请输入金额');
					return false;
				}
				if (util.isNull(that.payType)) {
					util.alert('请选择收款方式');
					return false;
				}
				switch (that.payType) {
					case "weixin": // 只允许通过相机扫码
						uni.scanCode({
							onlyFromCamera: true,
							success: function(res) {
								console.log('条码类型：' + res.scanType);
								console.log('条码内容：' + res.result);
								util.scanPay(that.id, that.totalPrice, res.result, that.payType,
									function(res) {
										uni.showModal({
											title: "收款成功",
											success: function() {
												that.processAfterPay(res);
											}
										})
									},
									function(res) {
										util.alert("收款失败：" + res);
									})

							}
						});
						break;
					case "alipay": // 只允许通过相机扫码
						uni.scanCode({
							onlyFromCamera: true,
							success: function(res) {
								console.log('条码类型：' + res.scanType);
								console.log('条码内容：' + res.result);
								util.scanPay(that.id, that.totalPrice, res.result, that.payType,
									function(res) {
										uni.showModal({
											title: "收款成功",
											success: function() {
												that.processAfterPay(res);
											}
										})
									},
									function(res) {
										util.alert("收款失败：" + res);

									})
							}
						});
						break;
					case "cash":
					case "pos":
						uni.showModal({
							title: '提示',
							content: "确认收款￥[" + that.totalPrice + "]，收款方式[" + (that.payType == 'cash' ? '现金' :
								'刷卡') + "]",
							confirmText: "确认",
							confirmColor: "#000",
							cancelColor: "#eee",
							success(res) {
								if (res.confirm) {
									that.doReceivedMoney(that.id);

								}
							}
						});
						break;
				}

			},
			doReceivedMoney: function(id) {
				var that = this;
				util.request({
					bindThis: that,
					method: 'POST',
					customLoading: false,
					api: 'manager/recharge-for-order/' + id,
					data: {
						payment: that.payType,
						money: that.totalPrice,
						remark: that.comment
					},
					utilSuccess: function(res) {
						console.log('3：提交成功返回' + res);
						uni.showModal({
							title: "收款成功",
							success: function() {
								that.processAfterPay(res);
							}
						})
					},
					utilFail: function(res) {
						console.log('4：提交失败' + res);
						util.alert(res);
					}
				});
			},
			bindChangeMoney: function(e) {
				this.totalPrice = e.detail.value;
			},
			processAfterPay: function(res) {
				var that = this;
				uni.navigateTo({
					url: "../../package/packageorder/pages/orderinfo/orderinfo?id=" + that.id
				})
			},
			loadMoneyArr: function(price) {
				var moneyArr = [];
				var that = this;
				for (var i = 1; i <= 6; i++) {
					var c = false;
					if (this.order.total-this.order.paid_total==i*price) {
						c = true;
						that.totalPrice = i * price;

					}
					moneyArr.push({
						amt: i * price,
						checked: c
					});
				}
				this.moneyArr = moneyArr;
			},
			bindChangeComment: function(e) {
				this.comment = e.detail.value;
			}
		}
	}
</script>

<style>
	page {
		padding-top: 140rpx;
		padding-bottom: 100rpx;
	}

	.l-box-info-left {
		display: flex;
		justify-content: space-between;
	}

	.btnOther {

		background-color: #0CB790;
		height: 200rpx;
		width: 100%;
		color: #FFFFFF;
		box-sizing: border-box;
		border-radius: 8rpx;
		display: flex;
		font-size: 28rpx;
		align-items: center;
		justify-content: center;
		margin-left: 20rpx;
	}

	.btnOther-on {
		background-color: orange;
	}

	.bottom {
		background: #FFFFFF;
		box-shadow: 0 -2rpx 12rpx 0 rgba(0, 0, 0, 0.16), inset 0 1rpx 0 0 #E4E4E4;
		width: 100%;
		height: 100rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: space-between;
	}

	.bottom .bottomLeft {
		display: flex;
		align-items: center;
	}

	.bottom .bottomRight {
		display: flex;
	}

	.btn {
		width: 220rpx;
		line-height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		font-family: SourceHanSansCN-Medium;
		font-size: 32rpx;
		letter-spacing: 0;
	}

	.btnCancel {

		color: #666666;
		background: #F0F0F0;
	}

	.btnSubmit {

		color: #FFFFFF;
		background: #0DC99E;
	}


	.priceTitle {
		font-family: SourceHanSansCN-Normal;
		font-size: 24rpx;
		color: #999999;
		letter-spacing: 0;
		line-height: 28rpx;
		margin-left: 32rpx;
	}

	.priceInfo {
		font-family: SourceHanSansCN-Normal;
		font-size: 30rpx;
		color: orange;
		margin-left: 10rpx;
		letter-spacing: 0;
		line-height: 28rpx;
		font-weight: bold;
	}

	.icon_logo {
		width: 80rpx;
		height: 80rpx;
		margin-right: 24rpx;
	}

	.moneyBox {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		background-color: #FFFFFF;
	}

	.moneyBoxLeft {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		width: 80%;
	}

	.moneyBoxRight {
		flex: 1;
	}

	.moneyItem {
		height: 90rpx;
		width: 31.3%;
		font-size: 28rpx;
		display: flex;
		justify-content: center;
		border: 1rpx solid #333333;
		margin-right: 1%;
		margin-left: 1%;
		color: #333333;
		margin-bottom: 20rpx;
		border-radius: 8rpx;
		box-sizing: border-box;
		line-height: 90rpx;

	}


	.moneyItemOn {
		border-color: orange;
		color: orange;
	}
</style>
