<template>
    <div class="nus_codeloginbox">
        <div class="nu_phone-num"
            v-if="phoneText">
            {{ phoneText }}
        </div>
        <div class="nu_sms-cont">
            <div class="nu_sms-code">
                <nu-input
                    class="nu_sms-input"
                    v-for="(item, index) in smsCode"
                    v-model="smsCode[index]"
                    :key="index"
                    :maxLen="1"
                    :type="'number'"
                    :isFocus="focusFlag[index]"
                    @keydown="_onKeyDown($event, index)"
                    @focus="_onFocus(index)"
                    @blur="_onBlur(index)"
                    @input="_onInput">
                </nu-input>
            </div>
            <div class="nu_codeBtn-info"
                :class="{'nu_code': !getCodeState}"
                @click="_getCode">
                {{ myCodeBtnTxt }}
            </div>
        </div>
        <div class="nu_btn-info">
           <nu-button
                class="nu_btn-btn"
                :disabled="!submitState || getCodeState"
                :name-text="btnTxt"
                @click="_onSignClick">
            </nu-button>
        </div>
    </div>
</template>

<script>
import LoginBoxTmp from '../../_comm/LoginBoxTmp';
import NuInput from '../../../../form/input';
import NuButton from '../../../../form/button';
// 格式化手机号
const PHONE_NUM_FORMAT_REG = /^(?:\d{3})(\d{4})\d+$/;
export default {
    extends: LoginBoxTmp,
    components: {
        NuInput,
        NuButton
    },
    props: {
        /**
         * 手机号
         */
        username: {
            type: [String, Number]
        },
        /**
         * 验证码的长度
         */
        codeLen: {
            type: Number,
            default: 4
        },

        /**
         * 获取请求数据
         */
        getUserData: {
            type: Function
        }
    },
    data () {
        const _that = this;
        const _codeLen = _that.codeLen || 4;
        return {
            smsCode: (new Array(_codeLen)).fill(''), // 验证码
            focusFlag: (new Array(_codeLen)).fill(false) // 当前input的focus状态
        };
    },
    computed: {
        /**
         * 手机号文案
         * @returns {String} 返回手机号文案
         */
        phoneText () {
            const _that = this;
            let _phoneNum = (_that.phone || '') + '';
            _phoneNum = _phoneNum.replace(PHONE_NUM_FORMAT_REG, ($1, $2) => {
                return $1.replace($2, '****');
            });
            return (_phoneNum && `已发送到手机号: ${_phoneNum}`) || '';
        },
        /**
         * 获取验证码
         * @returns {String} 返回验证码
         */
        code () {
            const _that = this;
            const _smsCode = _that.smsCode || [];
            return _smsCode.join('');
        }
    },
    mounted () {
        this._initCom();
    },
    watch: {
        /**
         * 监听smsCode值变化
         * @param {Array} nowVal 当前smsCode的值
         */
        smsCode () {
            const _that = this;
            // _that._autoFill();
            _that._setFocusFlag();
        }
    },
    methods: {
        /**
         * 初始化组件
         */
        _initCom () {
            const _that = this;
            _that.$nextTick(() => {
                setTimeout(() => {
                    _that._setFocusFlag();
                }, 100);
            });
            if (_that.phone) {
                _that._getCode();
            }
        },

        /**
         * 设置focus的标示
         */
        _setFocusFlag () {
            const _that = this;
            const _smsCode = _that.smsCode || [];
            const _len = _smsCode.length;
            let _focusIndex = _len - 1;
            for (let i = 0; i < _len; i++) {
                if (!_smsCode[i]) {
                    _focusIndex = i;
                    break;
                }
            }
            if (_focusIndex >= _len) {
                _focusIndex = _len - 1;
            }
            if (_focusIndex > -1) {
                let _focusFlag = _that.focusFlag || [];
                _focusFlag = _focusFlag.map(() => false);
                _focusFlag[_focusIndex] = true;
                _that.focusFlag = _focusFlag;
            }
        },
        /**
         * 获取验证码
         * @param {Event} evt 事件对象
         */
        _getCode (evt) {
            const _that = this;
            if (!_that.getCodeState) {
                return;
            }
            _that.getCode(evt);
        },

        /**
         * 点击登录的回调方法
         * @param {Event} evt 事件对象
         */
        _onSignClick (evt) {
            const _that = this;
            if (_that.getCodeState) {
                _that.getCode(evt);
            } else {
                _that.checkAndlogin(evt, true);
            }
        },
        /**
         * 自动填入
         * @param {String} data 自动填入的值
         */
        _autoFill (data) {
            const _that = this;
            let _code;
            if (data) {
                _code = data;
            } else {
                const _smsCode = _that.smsCode || [];
                _code = _smsCode.find((item) => {
                    item = item || '';
                    return item.length === _that.codeLen;
                });
            }
            if (_code && _code.length === _that.codeLen) {
                _that.smsCode = _code.split('');
            }
        },
        /**
         * input事件回调
         * @param {Event} evt 事件对象
         */
        _onInput (evt) {
            this._autoFill(evt.target.value);
        },
        /**
         * keydown事件回调方法
         * @param {Event} evt 事件对象
         * @param {Number} index 索引
         */
        _onKeyDown (evt, index) {
            const _that = this;
            const _keyCode = evt.keyCode || evt.charCode;
            if (_keyCode === 8) {
                const _smsCode = _that.smsCode || [];
                const _value = _smsCode[index];
                if (!_value && index > 0) {
                    _that.$set(_smsCode, index - 1, '');
                }
            }
        },
        /**
         * focus事件回调方法
         * @param {Number} index 索引
         */
        _onFocus (index) {
            const _that = this;
            let _focusFlag = _that.focusFlag || [];
            _that.$set(_focusFlag, index, true);
        },
        /**
         * blur事件回调方法
         * @param {Number} index 索引
         */
        _onBlur (index) {
            const _that = this;
            let _focusFlag = _that.focusFlag || [];
            _that.$set(_focusFlag, index, false);
        }
    }
};
</script>

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

.nus_codeloginbox {
    .nu_phone-num {
        text-align: center;
        color: $nulogin-phone-text-color;
        font-size: $nulogin-phone-text-font-size;
        margin-top: 12px;
    }
    .nu_sms-cont {
        width: 180px;
        margin: 50px auto 0 auto;
    }
    .nu_sms-code {
        display: flex;
        justify-content: space-between;
    }
    .nu_sms-input {
        width: 30px;
        height: 25px;
        padding-bottom: 2px;
        border-bottom: 1px solid $nulogin-code-input-br;
        .nu_input {
            padding: 0;
            text-align: center;
        }
    }
    .nu_codeBtn-info {
        text-align: right;
        color: $nulogin-code-countdown-color;
        line-height: 28px;
        font-size: $nulogin-code-countdown-font-size;
        &.nu_code {
            color: $nulogin-code-countdown-code-color;
        }
    }
    .nu_btn-info {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 20px auto 0 auto;
        width: 220px;
        height: 42px;
        border-radius: 5px;
        font-size: $nulogin-code-login-btn-font-size;
    }
    .nu_btn-btn{
        height: 100%;
        width: 100%;
    }
}
</style>
