<template>
	<div class='keyboard' @click.stop='_handleKeyPress'>
		<div class='key-row'>
			<div class='key-cell cell_b' data-num='7'>7</div>
			<div class='key-cell cell_b' data-num='8'>8</div>
			<div class='key-cell cell_b' data-num='9'>9</div>
			<div class='key-cell cell_b' data-num='-1'></div>
		</div>
		<div class='key-row'>
			<div class='key-cell cell_b' data-num='4'>4</div>
			<div class='key-cell cell_b' data-num='5'>5</div>
			<div class='key-cell cell_b' data-num='6'>6</div>
			<div class='key-cell cell_b' data-num='-1'></div>
		</div>
		<div class='key-row'>
			<div class='key-cell cell_b' data-num='1'>1</div>
			<div class='key-cell cell_b' data-num='2'>2</div>
			<div class='key-cell cell_b' data-num='3'>3</div>
			<div class='key-cell cell_b' data-num='-1'></div>
		</div>
		<div class="key-zero-and-point">
			<div class="a cell_b zero" data-num='0'>0</div>
			<div class="a cell_b point" data-num='.'>.</div>
		</div>

		<div @touchstart="touchstart" @touchend="touchend" data-num='D' class="key-confirm2">
			<text data-num='D'>C</text>
		</div>

		<div class='key-confirm' :style="{ 'background': btnColor }" data-num='S'>
			<div data-num='S' class="">
				<div data-num='S' class="title">{{ title }}</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, watch, reactive } from 'vue'
import { dayjs } from 'element-plus'
const props = defineProps({
	title: {
		default: '确认',
		type: String
	},
	btnColor: {
		default: 'green',
	}
})
const emit = defineEmits(["consumeFee", "confirmEvent"])
const this_money = reactive({
	money: '',
	Cdel: '',
	Time: ''
})

watch(() => this_money.money, (newval, oldval) => {
	emit('consumeFee', newval)

});
const touchstart = () => {
	this_money.Time = setInterval(() => {
		console.log(this_money.money);
		if (this_money.money == '') {
			clearInterval();
		}
		this_money.money = this_money.money.substring(0, this_money.money.length - 1);
	}, 200)
}
const touchend = () => {
	clearInterval(this_money.Time);
}
//处理按键
const _handleKeyPress = (e) => {
	let num = e.target.dataset.num;
	//不同按键处理逻辑
	// -1 代表无效按键，直接返回
	if (num == -1) return false;
	switch (String(num)) {
		//小数点
		case '.':
			_handleDecimalPoint();
			break;
		//删除键
		case 'D':
			_handleDeleteKey();
			break;
		//清空键
		case 'C':
			_handleClearKey();
			break;
		//确认键
		case 'S':
			_handleConfirmKey();
			break;
		default:
			_handleNumberKey(num);
			break;
	}
}
//处理小数点函数
const _handleDecimalPoint = () => {
	//如果包含小数点，直接返回
	if (this_money.money.indexOf('.') > -1) return false;
	//如果小数点是第一位，补0
	if (!this_money.money.length)
		this_money.money = '0.';
	//如果不是，添加一个小数点
	else
		this_money.money = this_money.money + '.';
}
//处理删除键
const _handleDeleteKey = () => {
	let S = this_money.money;
	//如果没有输入，直接返回
	if (!S.length) return false;
	//否则删除最后一个
	this_money.money = S.substring(0, S.length - 1);
}

//处理清空键
const _handleClearKey = () => {
	this_money.money = '';
}

//处理数字
const _handleNumberKey = (num) => {
	if (this_money.money.length == 10) {
		return
	}
	let S = this_money.money;
	//如果有小数点且小数点位数不小于2
	if (S.indexOf('.') > -1 && S.substring(S.indexOf('.') + 1).length < 2)
		this_money.money = S + num;
	//没有小数点
	if (!(S.indexOf('.') > -1)) {
		//如果第一位是0，只能输入小数点
		if (num == 0 && S.length == 0)
			this_money.money = '0.';
		else {
			if (S.length && Number(S.charAt(0)) === 0) return;
			this_money.money = S + num;
		}
	}
}
//提交
const _handleConfirmKey = () => {
	let S = this_money.money;
	//未输入
	if (!S.length || S == 0) {
		uni.showToast({
			title: '请输入正确的数值',
			icon: 'none',
			duration: 1000
		});
		return false;
	}
	//将 8. 这种转换成 8.00
	if (S.indexOf('.') > -1 && S.indexOf('.') == (S.length - 1))
		S = Number(S.substring(0, S.length - 1)).toFixed(2);
	//保留两位
	S = Number(S).toFixed(2);
	emit('confirmEvent', S);    //提交参数
}
</script>

<style lang="scss" scoped>
.cell_b {
	border-right: 1px solid #d5d5d6;
	border-bottom: 1px solid #d5d5d6;
}

.key-container {
	width: 100%;
	display: flex;
	flex-direction: column;
}

.keyboard {
	flex: 1;
	position: relative;
	bottom: 0;
	left: 0;
	height: 40vh;
	width: 100%;

	background: #FFFFFF;
}

.keyboard .key-row {
	display: flex;
	display: -webkit-flex;
	position: relative;
	height: 10vh;
	line-height: 10vh;


}

.keyboard .key-cell {
	flex: 1;
	-webkit-box-flex: 1;
	font-size: 60upx;

	display: flex;
	justify-content: center;
	align-items: center;
}

.keyboard .key-confirm {
	position: absolute;
	text-align: center;
	height: 30vh;
	width: 25%;
	line-height: 30vh;
	color: #FFFFFF;
	z-index: 5;
	right: 0;
	bottom: 0;

	display: flex;
	justify-content: center;
	align-items: center;
}

.keyboard .key-confirm2 {
	position: absolute;
	height: 10vh;
	width: 25%;
	line-height: 10vh;
	z-index: 9999;
	right: 0;
	top: 0;


	display: flex;
	justify-content: center;
	align-items: center;
}

.key-zero-and-point {
	display: flex;
	height: 10vh;
	justify-content: center;
	align-items: center;
	width: 75%;
	font-size: 60upx;

	.zero {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 66.66%;
		font-size: 60upx;
		text-align: center;
		height: 100%;
	}

	.point {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 33.33%;
		font-size: 60upx;
		text-align: center;
		height: 100%;
	}
}

.key-cell:active {
	color: white;
	background: black; //黑色
	opacity: 0.1; //这里重要，就是通过这个透明度来设置
}

.a:active,
.key-confirm2:active {
	color: white;
	background: black; //黑色
	opacity: 0.1; //这里重要，就是通过这个透明度来设置
}
</style>
