<template>
    <div :class="curClassName" :style="curStyle">
        <div class="content">
            <i-input size="default" type="text" v-model="phoneNumber"
                :placeholder="$t('components.login.phoneplaceholder')" @on-blur="veriPhoneNumber"></i-input>
            <el-button :disabled="disabled" size="mini" @click="getVeriCode()">{{
                    disabled ? `${delay}s ${$t("components.login.getcodeafter")}` : `${$t("components.login.getcode")}`
            }}</el-button>
        </div>
        <alert v-show="phoneError" type="error">电话号码格式错误</alert>
        <div class="code" v-show="show">
            <i-input size="default" type="text" :value="currentValue" @input="codeChange"
                :placeholder="$t('components.login.codeplaceholder')"></i-input>
        </div>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";

@Component({})
export default class AppLoginNoteVerify extends Vue {
    /**
     * 模型
     *
     * @type {any}
     * @memberof AppLoginNoteVerify
     */
    @Prop() public layoutModelDetails: any;

    /**
     * 值
     *
     * @type {string}
     * @memberof AppLoginNoteVerify
     */
    @Prop() public value!: string;

    /**
     * 名称
     *
     * @type {string}
     * @memberof AppLoginNoteVerify
     */
    @Prop() public name!: string;

    /**
     * 下标
     *
     * @type {number}
     * @memberof AppLoginNoteVerify
     */
    @Prop({ default: 0 }) public index?: number;

    /**
     * 项名称
     *
     * @type {*}
     * @memberof AppLoginNoteVerify
     */
    get itemName() {
        return this.index ? `${this.name}_${this.index}` : this.name;
    }

    /**
     *验证码当前值
     *
     * @type {string}
     * @memberof AppLoginNoteVerify
     */
    get currentValue(): string {
        return this.value;
    }

    /**
     * 手机号
     *
     * @type {*}
     * @memberof AppLoginNoteVerify
     */
    public phoneNumber: string = "";

    /**
     * 错误提示
     * @type {*}
     * @memberof AppLoginNoteVerify
     */
    public phoneError = false;

    /**
     * 是否禁用获取验证码按钮
     *
     * @type {boolean}
     * @memberof AppLoginNoteVerify
     */
    public disabled: boolean = false;

    /**
     * 显示验证码输入框
     *
     * @type {boolean}
     * @memberof AppLoginNoteVerify
     */
    public show: boolean = false;

    /**
     * 延迟
     *
     * @type {number}
     * @memberof AppLoginNoteVerify
     */
    public delay: number = 60;

    /**
     * 定时器
     *
     * @type {any}
     * @memberof AppLoginNoteVerify
     */
    public timer: any = null;

    /**
     * 当前容器样式
     * 
     * @memberof AppLoginNoteVerify
     */
    get curStyle() {
        const layoutModel = this.layoutModelDetails[this.itemName];
        if (layoutModel) {
            return layoutModel.getElementStyle();
        }
    }

    /**
     * 类名
     *
     * @memberof AppLoginNoteVerify
     */
    get curClassName() {
        const layoutModel = this.layoutModelDetails[this.itemName];
        if (layoutModel) {
            return `app-login-note-verify ${this.itemName} ${layoutModel.sysCss}`;
        }
    }

    /**
     * @description 验证码输入变化
     * @memberof AppLoginNoteVerify
     */
    public codeChange(value: string) {
        this.$emit("valueChange", { name: this.itemName, value: value });
    }

    /**
     * @description 校验手机号
     * @memberof AppLoginNoteVerify
     */
    public veriPhoneNumber(): boolean {
        this.phoneError = !/^1[3-9]\d{9}$/.test(this.phoneNumber);
        return this.phoneError;
    }

    /**
     * @description 设置延迟时间
     * @memberof AppLoginNoteVerify
     */
    public setDelay() {
        this.timer = setInterval(() => {
            if (this.delay > 0) {
                this.delay--;
            } else {
                this.delay = 60;
                this.disabled = false;
                clearInterval(this.timer);
            }
        }, 1000)
    }

    /**
     * @description 获取验证码
     * @memberof AppLoginNoteVerify
     */
    public getVeriCode() {
        if (this.phoneError) return;
        // todo 获取验证码
        this.show = true;
        this.disabled = true;
        this.setDelay();
    }
}
</script>

<style lang="less">
@import "./app-login-note-verify.less";
</style>
