<template>
    <div class="nus_codeloginform">
        <div class="nu_login-title">
            {{ title }}
            <i class="nu_login-close nu_icon"
                @click="$emit('close')">
                {{ icon }}
            </i>
        </div>
        <code-login-box
            class="nu_code-login-box"
            :getUserData="getUserData"
            :validData="validData"
            :username="username"
            :code-btn-txt="codeBtnTxt"
            :btn-txt="loginBtnTxt"
            :countDownTxt="countDownTxt"
             @submit="$emit('submit', $event)"
            @confirm="$emit('confirm', $event)">
        </code-login-box>
        <div class="nu_cont-rule">
            新用户登录即完成注册，代表同意
            <a class="nu_rule_link" @click="$emit('link', $event)">《xxxx用户协议》</a>
        </div>
    </div>
</template>

<script>
import { USER_PAGE_TYPE } from 'nimble-lib';
import CodeLoginBox from './codeLoginBox/CodeLoginBox';
import LoginTmp from '../_comm/LoginTmp';
export default {
    extends: LoginTmp,
    components: {
        CodeLoginBox
    },
    props: {
        /**
         * 登录文案
         */
        loginBtnTxt: {
            type: String,
            default: '验证'
        },
        /**
         * 获取验证码按钮文案
         */
        codeBtnTxt: {
            type: String,
            default: '重发验证码'
        },
        /**
         * 倒计时suffix文案
         */
        countDownTxt: {
            default: 's之后可重发'
        },
        /**
         * 标题
         */
        title: {
            type: String,
            default: '填写短信验证码'
        },
        /**
         * icon
         */
        icon: {
            type: String,
            default: '\ue606'
        }
    },
    mounted () {
        this.$emit('openPage', USER_PAGE_TYPE.CODE_LOGIN);
    }
};
</script>

<style lang="scss">
@import '../../../../_assets/style/_iconFont.scss';
@import '../../../../_assets/style/_var.scss';
@import '../../../../_assets/style/_mixin.scss';

.nus_codeloginform {
    .nu_login-title {
        position: relative;
        text-align: center;
        height: 48px;
        line-height: 48px;
        color: $nulogin-code-login-title-color;
        font-size: $nulogin-code-login-title-font-size;
        border-bottom: 1px solid $nulogin-code-login-br-color;
    }
    .nu_login-close {
        position: absolute;
        color: $nulogin-close-color;
        right: 14px;
        font-size: $nulogin-close-font-size;
    }
    .nu_cont-rule {
        color: $nulogin-rule-text-color;
        font-size: 12px;
        text-align: center;
        margin-top: 10px;
        padding: 0 30px;
    }
    .nu_rule_link {
        color: $nulogin-rule-link-color;
    }
}
</style>
