<template>
	<view class="number-keyboard-component numberkeyboard">
		<view class="keys">
			<view 
				class="key button" 
				v-for="num in config.loop" 
				:key="num.key" 
				@tap="number(num.number)"
				hover-class="hover-dark" 
				:hover-stay-time="50"
			>{{num.number}}</view>
			<view class="key button" @tap="del" style="background: #e2e7eb;"></view>
			<view class="key button" @tap="number(0)">0</view>
			<view class="key button" @tap="del" style="background: #e2e7eb;">
				<image style="width: 50rpx;height: 50rpx;" src="data:image/png;base64,[encoded data, 5648 characters]"></image>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 数字键盘
	 * @event onChange 输入值改变时触发
	 */
	export default {
		name: 'number-keyboard',
		data() {
			return {
				val: '',
				config: {
					loop: [
						{number: 1,key: 'number-1'},
						{number: 2,key: 'number-2'},
						{number: 3,key: 'number-3'},
						{number: 4,key: 'number-4'},
						{number: 5,key: 'number-5'},
						{number: 6,key: 'number-6'},
						{number: 7,key: 'number-7'},
						{number: 8,key: 'number-8'},
						{number: 9,key: 'number-9'}
					]
				},
			};
		},
		props: {
			length: {
				type: Number,
				default: 6
			}
		},
		methods: {
			del() {
				if(this.val.length > 0){
					this.val = this.val.slice(0, this.val.length - 1);
					this.$emit('onChange', this.val)
				}
			},
			number(number) {
				if(this.val.length < this.length){
					this.val = this.val + number;
					this.$emit('onChange', this.val)
				}
			}
		}
	};
</script>

<style scoped="scoped" lang="scss">
	.number-keyboard-component {
		width: 100%;
		border-top: 1px solid #f1f4f4;

		.title {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 60rpx;
			background: #f0f0f0;
		}

		.keys {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;

			.key {
				width: 250rpx;
				height: 110rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-right: 1px solid #f1f4f4;
				box-sizing: border-box;
				font-size: 36rpx;
				font-weight: 700;
				color: #333;
			}

			.key:nth-child(n + 4) {
				border-top: 1px solid #f1f4f4;
				box-sizing: border-box;
			}
		}

		.container {
			width: 100%;

			.count-text {
				justify-content: center;
				align-items: center;
				display: flex;
				font-size: 18px;
			}
		}

		.numberkeyboard-popup {
			width: 100%;
			z-index: 10;

			.count-text {
				position: fixed;
				top: -100px;
				font-size: 28px;
				color: #ffffff;
				width: 100%;
				text-align: center;
				font-weight: 500;

				span {
					padding: 0 40px;
					border-radius: 30px;
					background: -webkit-linear-gradient(left top, #999999, #777777);
				}
			}

			.desc-text {
				position: fixed;
				top: -40px;
				font-size: 12px;
				color: #ffffff;
				width: 100%;
				text-align: center;
				font-weight: 100;
			}

			.number {
				height: 70px;
				line-height: 70px;
				font-size: 25px;
				font-weight: 400;
				color: #666666;
				border-right: 1px solid #999999;
				box-sizing: border-box;
			}

			.number:nth-child(n + 4) {
				border-top: 1px solid #999999;
				box-sizing: border-box;
			}

			.number:active {
				background: #04be02;
				color: #ffffff;
				border: 0px solid #000000;
				box-shadow: 0 0 2px 2px #09bb07;
				box-sizing: border-box;
			}


			.del {
				height: 140px;
				vertical-align: middle;
				line-height: 140px;
				border-bottom: 0.1px solid #999999;
				box-sizing: border-box;
			}
			.confirm {
				font-size: 15px;
				height: 140px;
				line-height: 140px;
				color: #ffffff;
			}
		}
	}
</style>
