<template>
  <div>
   <div class="pay_box">
			<div class="payDialog">
				<div :class="focus?'active password':'password'">
					<input v-model='inputPass' 
                    id='input' 
                    ref='myInput' 
                    type='text' 
                    autofocus="autofocus" 
                    maxlength='6' 
                    class='inputPass' 
                    @blur="funblur" />
					<form @click="clickInput">
						<input v-model='myPassword.myPassword1' type='password' maxlength='1' readonly />
						<input v-model='myPassword.myPassword2' type='password' maxlength='1' readonly />
						<input v-model='myPassword.myPassword3' type='password' maxlength='1' readonly />
						<input v-model='myPassword.myPassword4' type='password' maxlength='1' readonly />
						<input v-model='myPassword.myPassword5' type='password' maxlength='1' readonly />
						<input v-model='myPassword.myPassword6' type='password' maxlength='1' readonly />
					</form>
					<div class="tip" v-if="psdWrong">
						提现密码错误，请输入6位数字提现密码
					</div>
				</div>
			</div>
		</div>
  </div>
</template>

<script>
export default {
  name: 'paybox',
   data() {
        return {
            focus:true,
            inputPass: '',
            myPassword: {
                myPassword1: '',
                myPassword2: '',
                myPassword3: '',
                myPassword4: '',
                myPassword5: '',
                myPassword6: ''
            },
            psdWrong: false,
        }
    },
    created() {
        // this.showUp();
    },
    watch: {
        inputPass() {
            this.show();
            var patt = /^[0-9]*$/g;
            this.psdWrong = !patt.test(this.inputPass);//表单校验，输入错误时给出提示
        },
        dialogShow(){//确保每次打开窗口聚焦到输入框
            this.showUp();
        }
    },
    methods: {
        show() {//用户输入显示
            var myInputPass = this.inputPass;
            var arr = myInputPass.split('');
            var obj = this.myPassword;
            var index = 0;
            for (var i in obj) {
                obj[i] = arr[index];
                index++
            }
        },
        // cancel() {
        //     this.inputPass = '';
        //     this.$emit('closeDialog',false)
        // },
        // confirm() {
        //     alert('输入的密码是：'+this.inputPass);
        //     this.inputPass = '';
        //     this.$emit('closeDialog',false);
        // },
        getPass(){
            this.$emit('getPass',this.inputPass);
        },
        clickInput(){
            this.focus = true
            this.$refs.myInput.focus();
        },
        showUp() {
            //保证焦点始终在表单上
            // this.$nextTick(() => {
            //     this.$refs.myInput.focus();
            // })
            document.addEventListener("mousedown", (e) => {
                if (e.target.id !== "input") {
                    e.preventDefault()
                }
            }, false);
        },
        funblur(e){
            this.focus = false;
        }
    }
}
</script>

<style lang="scss" scoped>
	.pay_box {
			position: relative;
			display: inline-block;
			vertical-align: middle;
		}

			.pay_box .payDialog .inputPass {
				position: absolute;
				z-index: -999;
				right: 25%;
				top: 40%;
				border: transparent;
			}

				.pay_box .payDialog .inputPass:focus {
					outline: none;
				}

			.pay_box .payDialog form > input {
				width: 36px;
				height: 36px;
				text-align: center;
				font-size: 30px;

			}

			.pay_box .password {
				text-align: center;
				background: #ddd;
				border: 1px solid #ddd;
				position: relative;
				height: 38px;
			}
			.pay_box .password form{
				overflow:hidden;
			}
			.pay_box .password form input{
				float:left;
				border:0;
				border-left:1px solid #ddd;
			}
			.pay_box .password form input:nth-child(1){
				border-left:0;
			}
			.pay_box .tip {
				color: red;
				font-size: smaller;
				position: absolute;
				top: 28px;
			}

		.active {
			border: 1px solid #00AAEE !important;
		}
</style>
