<template>
    <v-container class="verify">
        <input
                :disabled="disable"
                @input="getVal"
                autofocus="autofocus"
                class="hidden-input"
                type="number"
                v-model="verify"
        >
        <div class="login-title">验证码</div>
        <div class="login-subhead  grey--text">
            验证码已发送至{{username}}，请在下方输入框内输入4位数字验证码
        </div>
        <div class="code-box">
            <div class="d-flex justify-space-around">
                <template v-for="(item, index) in ranges">
                    <div :class="{active: codeIndex === item}" :key="index" class="item">
                        <div v-if="codeIndex == item">
                            <span class="dot-line"></span>
                        </div>
                        {{ codeArr[index] ? codeArr[index] : ''}}
                    </div>
                </template>
            </div>
        </div>
    </v-container>
</template>

<script>
    import router from "@/router";
    import {mapActions} from 'vuex'

    export default {
        data() {
            return {
                maxlength: 4,
                codeIndex: 1,
                codeArr: [],
                ranges: [1, 2, 3, 4],
                disable: false,
                username: '',
                verify: '',
                next_path: ''
            }
        },
        beforeRouteEnter(to, from, next) {
            if (from.name != 'AuthLogin' || to.params.username == undefined) {
                router.push({
                    name: 'AuthLogin'
                })
            }
            next()
        },
        mounted() {
            this.username = this.$route.params.username;
            this.parent_id = this.$route.params.parent_id;
            this.next_path = this.$route.params.next_path
        },
        methods: {
            ...mapActions(['doLogin']),
            getVal(e) {
                let value = e.target.value;
                let arr = value.split('');
                this.codeIndex = arr.length + 1;
                this.codeArr = arr;
                if (this.codeIndex > Number(this.maxlength)) {
                    this.disable = true;
                    this.sendVerifyToServer()
                }
            },
            sendVerifyToServer() {
                this.$api.auth.loginByCode({
                    username: this.username,
                    parent_id: this.parent_id,
                    verify: this.verify
                }).then(result => {
                    this.doLogin(result.access_token);
                    this.toast('登录成功');
                    setTimeout(() => {
                        if (this.next_path) {
                            router.push({
                                path: this.next_path
                            })
                        } else {
                            router.push({
                                name: 'Index'
                            })
                        }
                    }, 1000)
                }).catch(err => {
                    this.toast(err.message, 'warning');
                    this.disable = false;
                    this.codeIndex = 1;
                    this.codeArr = [];
                    this.verify = ''
                })
            }
        }
    }
</script>

<style scoped>
    @-webkit-keyframes twinkling {
        0% {
            opacity: 0.1;
        }
        100% {
            opacity: 1;
        }
    }

    @keyframes twinkling {
        0% {
            opacity: 0.1;
        }
        100% {
            opacity: 1;
        }
    }

    @-moz-keyframes twinkling {
        0% {
            opacity: 0.1;
        }
        100% {
            opacity: 1;
        }
    }

    .verify{
        position: relative;
        background-repeat: no-repeat;
        background-image: url("../../assets/logo.png");
        background-size: 200px;
        background-position: bottom right;
        width: 100vw;
        height: 100vh;
        padding: 20vh 60px;
        box-sizing: border-box;
    }

    .login-title{
        position: relative;
        font-size: 28px;
        font-weight: bold;
    }

    .login-subhead{
        padding-bottom: 5vh;
        font-size: 14px;
    }

    .hidden-input {
        position: absolute;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100vw;
        color: #fff;
        text-align: left;
        z-index: 9;
        opacity: 1;
    }

    .item {
        border-bottom: 5px solid #BDBDBD;
        height: 50px;
        width: 50px;
        text-align: center;
        line-height: 50px;
        font-size: 30px;
    }

    .dot-line {
        display: block;
        height: 20px;
        width: 2px;
        background: #BDBDBD;
        margin-top: 15px;
        margin-left: 24px;
        -webkit-animation: twinkling 1s infinite;
        -moz-animation: twinkling 1s infinite;
        animation: twinkling 1s infinite;
    }

    .item.active {
        border-bottom-color: #1f3c84;
    }
</style>
