<template>
	<view class="jq-keyboard">
		<view class="left">
			<view v-for="(item,index) in vdata.number" :key="index" @tap="change(item)" 
				class="common" hover-class="hover-but"   hover-start-time="10" hover-stay-time="60">
				{{ item }}
			</view>
			<view @tap="change('.')" class="common" hover-class="hover-but"   hover-start-time="10" hover-stay-time="60">.</view>
			<view @tap="change('0')" class="common zero" hover-class="hover-but"   hover-start-time="10" hover-stay-time="60">0</view>
		</view>
		<view class="right">
			<view class="common del" hover-class="hover-but" hover-start-time="10" hover-stay-time="60" @tap="del">
				<image src="/static/img/del.svg"></image>
			</view>
			<view class="common del" style="display: none;" hover-class="hover-but"  hover-start-time="10" hover-stay-time="60" @tap="clear">C</view>
			<view
				class="common pay"
				hover-class="hover-but"	
				hover-start-time="10" hover-stay-time="60"
				:style="{'backgroundColor': '#387CE7'}"
				@tap="pay">
				<div>付</div>
				<div>款</div>
			</view>
				<!-- :style="{'backgroundColor': props.primaryColor}" -->
		</view>
	</view>
</template>

<script setup>
import { reactive, onMounted } from 'vue'

	const props = defineProps({
		primaryColor: {
			type: String,
			default: '#FFFFFF'
		}
	})
	const vdata = reactive({
		number: ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
		value: '0'
	})
	const emit = defineEmits(['change', 'pay'])
	
	function change(k) {
		
		let currentVal = vdata.value
		if(currentVal === '0' && k != '.') {
			currentVal = k
		}else {
			currentVal += k;
		}
		
		if(!matchNum(currentVal)) {
			return
		}
		vdata.value = currentVal
	
		uni.vibrateShort()
		emit('change', vdata.value)
	}
	function del() {
		
		let currentVal = vdata.value
		if(!currentVal || currentVal.length <= 1) {
			vdata.value = '0'
		}else {
			vdata.value = vdata.value.substring(0, currentVal.length - 1)
		}
		
		uni.vibrateShort()
		emit('change', vdata.value)
	}
	function clear() {
		
		vdata.value = '0'
		
		uni.vibrateShort()
		emit('change', vdata.value)
	}
	function matchNum(currentVal) {
		const pattern = /^(([1-9]{1}\d{0,5})|(0{1}))(\.\d{0,2})?$/
		return pattern.test(currentVal)
	}
	function pay() {
		
		uni.vibrateShort()
		emit('pay')
	}
	function setValue(value) {
		vdata.value = value
	}
	
	defineExpose({ setValue })
</script>

<style lang="scss">
	.jq-keyboard {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		padding: 0 5rpx;
		box-sizing: border-box;
		
		.left {
			width: 75%;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-around;
		}
		.right {
			width: 25%;
			margin-left: 5rpx;
			margin-right: 5rpx;
		}
	}
	.common {
		width: calc(100%/3 - 10rpx);
		height: 24%;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		margin-bottom: 10rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		font-size: 55rpx;
		letter-spacing: 0.04em;
		color: $uni-text-color;
	}
	.zero {
		width: calc(100%/3*2 - 10rpx);
	}
	.del {
		width: 100%;
		image {
			width: 51rpx;
			height: 37rpx;
			pointer-events: none;
		}
	}
	.pay {
		width: 100%;
		height: 406rpx;
		font-size: 36rpx;
		color: $uni-text-color-inverse;
	}
	.hover-but {
		filter: brightness(80%);
	}
</style>
