<template>
	<view class="container">
		<view class="h-box"></view>
		<view class="input-block">
			<view class="title">收款金额</view>
			<view class="money" v-if="money">¥ {{money}}</view>
			<view class="placehoder" v-else>¥ 0.00</view>
		</view>
		<view class="keyboard-block flex">
			<view class="number-block">
				<view hover-class="btn-hover" class="number-btn" @click="onInput" data-num="1">1</view>
				<view hover-class="btn-hover" class="number-btn" @click="onInput" data-num="2">2</view>
				<view hover-class="btn-hover" class="number-btn" @click="onInput" data-num="3">3</view>
				<view hover-class="btn-hover" class="number-btn" @click="onInput" data-num="4">4</view>
				<view hover-class="btn-hover" class="number-btn" @click="onInput" data-num="5">5</view>
				<view hover-class="btn-hover" class="number-btn" @click="onInput" data-num="6">6</view>
				<view hover-class="btn-hover" class="number-btn" @click="onInput" data-num="7">7</view>
				<view hover-class="btn-hover" class="number-btn" @click="onInput" data-num="8">8</view>
				<view hover-class="btn-hover" class="number-btn" @click="onInput" data-num="9">9</view>
				<view hover-class="btn-hover" class="number-btn no-btm-bd" @click="onInput" data-num="00">00</view>
				<view hover-class="btn-hover" class="number-btn no-btm-bd" @click="onInput" data-num="0">0</view>
				<view hover-class="btn-hover" class="number-btn no-btm-bd" @click="onInput" data-num=".">.</view>
			</view>
			<view class="btn-block">
				<view hover-class="btn-hover" class="btn backspace-btn" @click="onDel">
					<image class="backspace-img" mode="aspectFit" src="../../static/images/backspace.png" />
				</view>
				<view hover-class="btn-hover" class="btn submit-btn" :class="{canuse:money}" @click="onSubmit">结算</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				store_id: '',
				money: '',

			}
		},
		onLoad() {
			this.store_id = uni.getStorageSync("store_id");
		},
		onShow() {

		},
		methods: {
			onInput(e) {
				let money = this.money
				let num = e.currentTarget.dataset.num
				let dotIndex = money.indexOf('.');
				console.log(dotIndex)
				if (num === '.') {
					if (dotIndex === -1) {
						this.money = money.length ? (money + '.') : (0 + '.')
					}
				} else if (dotIndex >= 0 && money.length - dotIndex >= 3) {
					return
				} else {
					if (money === '0' || money === '00') {
						money = '';
					}
					var maxMoney = money + num + '';
					console.log(maxMoney)
					if (parseFloat(maxMoney) <= 100000) {
						this.money = money + num + '';
					}
				}
			},
			onDel() {
				let money = this.money
				this.money = money.substring(0, money.length - 1)
			},
			onSubmit() {
				if (!/^(0|([1-9]\d{0,6}))(\.\d{1,2})?$/.test(this.money) || this.money <= 0) {
					uni.showToast({
						title: "请正确输入金额",
						icon: "none"
					})
					return false
				}

				uni.scanCode({
					success: r => {
						console.log('扫码', r)
						this.request({
							url: 'smdcshop/payment_code',
							is_agent: 'api',
							data: {
								store_id: this.store_id,
								auth_code: r.result,
								money: this.money,

							},
							hide: true
						}).then(res => {
							console.log('扫码支付返回', res)

							uni.showModal({
								content: res.message,
								cancelText: '查看订单',
								confirmText: '继续收款',
								success: (r) => {
									if (r.cancel) {
										wx.redirectTo({
											url: '/saomaDiancan/orderDetail/orderDetail?id=' +
												res.data
										})
									}
								}
							})

							this.money = ""

						}).catch(res => {
							if (res.code == 400 && typeof(res.data) == 'string' && res.data) {
								uni.showModal({
									content: "支付结果未知",
									cancelText: '查看订单',
									confirmText: '继续收款',
									success: (r) => {
										if (r.cancel) {
											wx.redirectTo({
												url: '/saomaDiancan/orderDetail/orderDetail?id=' +
													res.data
											})
										}
									}
								})
								this.money = ""
							} else {
								uni.showToast({
									title: res.message,
									icon: 'none'
								})
							}
						})
					}
				})
			},


		}


	}
</script>

<style>
	page {
		background-color: #f6f6f6;
	}

	.h-box {
		width: 100%;
		height: 40rpx;
	}

	.input-block {
		width: 670rpx;
		height: 100rpx;
		background-color: #fff;
		margin: 0 auto;
		padding: 0 40rpx;
		box-sizing: border-box;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: center;
	}

	.input-block .title {
		flex: auto;

		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #4E4E4E;
		padding-right: 20rpx;
	}

	.input-block .money {
		text-align: right;
		flex: 0 0 440rpx;
		overflow: auto;
		white-space: nowrap;

	}

	.input-block .placehoder {
		text-align: right;
		flex: 0 0 440rpx;
		overflow: hidden;
		color: #888;
	}

	.keyboard-block {
		width: 100%;
		height: 528rpx;
		background-color: #fff;
		position: absolute;
		left: 0;
		bottom: 0;
	}

	.number-block {
		width: 540rpx;
		flex: 0 0 540rpx;
		display: flex;
		flex-flow: row wrap;
		justify-content: flex-start;
		align-content: flex-start;
	}

	.number-btn {
		flex: 0 0 180rpx;
		box-sizing: border-box;
		height: 132rpx;
		border-right: 2px solid #F2F2F2;
		border-bottom: 2px solid #F2F2F2;
		text-align: center;
		line-height: 132rpx;
		font-size: 42rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #4E4E4E;
	}

	.btn-block {
		width: 210rpx;
		flex: 0 0 210rpx;
	}

	.btn-block .btn {
		width: 210rpx;
		height: 264rpx;
		box-sizing: border-box;
		text-align: center;
		line-height: 264rpx;
	}

	.backspace-img {
		width: 80rpx;
		height: 80rpx;
	}

	.backspace-btn {
		border-bottom: 2px solid #F2F2F2;
	}

	.submit-btn {
		background-color: #F5F6F9;
	}

	.submit-btn.canuse {
		background-color: #fe821e;
		color: #fff;
	}

	.no-btm-bd {
		border-bottom: none
	}

	.btn-hover {
		background-color: #f1f1f1;
	}
</style>
