<template>
	<div class="pay-module">
		<div @click="focusFn">
			<div class="pay-tit">金额(元)</div>
			<div class="pay-wrap">
				<span class="money-text">￥</span>
				<span type="text" class="cashier-text" v-if="val || focus">{{ val }}</span>
                <span class="cashier-text prompt" v-else>请输入金额</span>
				<i class="cursor" v-show="focus"></i>
			</div>
		</div>
		<keyboard-module :show="keyShow" @comfirm="hideKeyFn" @clickKey="clickKeyFn" @del="delFn" />
	</div>
</template>

<script>
import keyboardModule from './keyboard'
export default {
	name: 'pay-input',
	components: {
		keyboardModule
	},
	props: {
		num: {
			type: String,
			default: ''
		},
		// 输入框动画
		focus: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			val: '',
			keyShow: false
		}
	},
	watch: {
		num(val) {
			this.val = val
		},
		focus(val) {
			this.keyShow = val
		}
	},
	methods: {
		focusFn() {
			this.$emit('focusFn')
		},
		hideKeyFn() {
			this.$emit('blurFn')
		},
		// 点击键盘
		clickKeyFn(e) {
			let total = this.val + e
			this.$emit('clickKey', total)
		},
		// 键盘删除
		delFn() {
			let total = this.val.substr(0, this.val.length - 1)
			this.$emit('clickKey', total)
		}
	}
}
</script>

<style lang="scss" scoped>
	.pay-module {
		.pay-tit {
			margin-bottom: 36px;
		}
		.pay-wrap {
			@include disFlex(flex-end, flex-start);
			font-weight: bold;
			border-bottom: 4px solid $borderColor;
			padding-bottom: 38px;
			font-family: TextaAlt, serif;
			height: 70px;
			.money-text {
				font-size: 36px;
			}
			.cashier-text {
				font-size: 70px;
				line-height: 1;
				margin-left: 8px;
                margin-right: 6px;
                &.prompt {
					color: $fontColor3;
					font-weight: 400;
					font-size: 50px;
                }
            }
			.cursor {
				position: relative;
				top: 1px;
				width: 4px;
				height: 100%;
				background: $mainColor;
				display: inline-block;
				-webkit-animation: inputCursorAnimation 1s infinite;
				-moz-animation: inputCursorAnimation 1s infinite;
				animation: inputCursorAnimation 1s infinite;
			}
		}
	}

	// 输入框动画
	@-webkit-keyframes inputCursorAnimation {
		50% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}

	@-moz-keyframes inputCursorAnimation {
		50% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}

	@keyframes inputCursorAnimation {
		50% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}
</style>
