<template>
    <div>
        <h4 class="title">登录授权认证</h4>
        <el-form>
            <el-form-item>
                <el-input placeholder="请输入账号" v-model.trim="userName" >
                    <i slot="prefix" class="iconfont">&#xe60a;</i>
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-input placeholder="请输入密码" type="password" v-model="password">
                    <i slot="prefix" class="iconfont">&#xe638;</i>
                </el-input>
            </el-form-item>
            <el-form-item>
                <div class="flex">
                    <el-input placeholder="验证码" class="flex-1" v-model.trim="smsCode">
                        <i slot="prefix" class="iconfont">&#xe60c;</i>
                    </el-input>
                    <el-button plain class="code-btn"  @click="handleGetSMSCodeClick" :disabled="isOpenCutDown">{{ isOpenCutDown ? count : checkCodeBtnText }}</el-button>
                </div>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" class="login-btn" @click="submit" >确认认证</el-button>
                <el-button  class="back-btn" @click="back" >返回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name: 'BindUser',
    props: {
        openId: {
            type: String,
            default: ''
        }
    },
    data () {
        return {
            userName: '',
            password: '',
            smsCode: '',
            count: 60,
            timer: null,
            checkCodeBtnText: '获取验证码',
            isOpenCutDown: false
        }
    },
    computed: {
    },
    mounted () {
        document.onkeydown = e => {
            if (window.event.keyCode === 13) { this.login() }
        }
    },
    beforeDestroy () {
        if (this.timer) clearInterval(this.timer)
    },
    methods: {
        endCountDown () {
            clearInterval(this.timer)
            this.checkCodeBtnText = '重新获取'
            this.isOpenCutDown = false
            this.count = 60
        },
        // 获取验证码
        handleGetSMSCodeClick () {
            if (this.isOpenCutDown) return false
            if (!this.userName) return this.$message.warning('请输入账号')
            this.isOpenCutDown = true
            this.timer = setInterval(() => {
                this.count--
                if (this.count === 0) this.endCountDown()
            }, 1000)
            const params = encodeURIComponent(this.userName)
            this.$api.platBaseApi.sendSMSVerifyCodeByUserName(params).then(res => {
                if (!res.data.Status) {
                    this.endCountDown()
                    this.$message.error(res.data.ResponseError.LongMessage)
                }
            }).catch(() => {
                this.endCountDown()
            })
        },
        // 登录
        submit () {
            let { userName, password, smsCode, openId } = this
            if (!userName) return this.$message.warning('请输入账号')
            if (!password) return this.$message.warning('请输入密码')
            if (!smsCode) return this.$message.warning('请输入验证码')
            this.$api.loginApi.weixinOpendBindUser({
                user_name: userName,
                password: password,
                sms_code: smsCode,
                open_Id: openId
            }).then(res => {
                this.$handleResponse(res)
            })
        },
        back () {
            this.$router.replace('/login')
        }
    }
}
</script>

<style lang="less" scoped>
@inputHeigth: 40px;
.title {
    line-height: 44px;
    padding: 12px 0;
    text-align: center;
    color: #000;
    font-size: 22px;
}
/deep/.el-form {
    .el-form-item  {
        .el-form-item__content {
            line-height: @inputHeigth;
            .el-input {
                .el-input__inner {
                    height: @inputHeigth;
                    line-height: @inputHeigth;
                    // border: 1px solid #cfcfcf;
                    padding-left: 40px
                }
                .el-input__prefix {
                    margin: 0 6px;
                }
            }
            .code-btn {
                margin-left: 10px;
                width: 115px;
            }
            .login-btn,.back-btn {
                font-size: 16px;
                height: 40px;
            }
            .login-btn { min-width: 100px; }
        }
    }
}
</style>
