<template>
    <div class="container">
        <logo-head></logo-head>
        <div class="loginCenter" :style="{backgroundImage:'url('+require('../assetsPre/loginBanner.jpg')+')'}">
            <div class="login">
                <div class="login-wrapper" @keyup.enter="login">
                    <div class="tabLine" :style="{left:activeName=='first'?'33px':'177px'}"></div>
                    <el-tabs class="myTab" v-model="activeName">

                        <el-tab-pane label="用户名登陆" name="first">
                            <el-form :model="userInfo" style="width: 288px;margin-top:27px;" ref="form">
                                <el-form-item prop="username">
                                    <el-input v-model="userInfo.username" placeholder="用户名/手机号/邮箱">

                                        <template slot="prepend">
                                            <div style="padding: 0 12px">
                                                <img style="width:19px;" src="../assetsPre/yonghuming.png" alt="">
                                            </div>
                                        </template>
                                    </el-input>
                                </el-form-item>
                                <el-form-item prop="password">
                                    <el-input v-model="userInfo.password" placeholder="密码" type="password">

                                        <template slot="prepend">
                                            <div style="padding: 0 15px">
                                                <img style="width:13.6px;" src="../assetsPre/password.png" alt="">
                                            </div>
                                        </template>
                                    </el-input>
                                </el-form-item>
                                <el-form-item class='isRemenber' label="" style="line-height:16px;">
                                    <el-checkbox v-model="rememberMe">记住我</el-checkbox>
                                    <router-link :to="{name:'backPassword'}">忘记密码？</router-link>
                                </el-form-item>
                                <el-form-item>
                                    <el-button :loading="loading" @click="login" type="color" style="width: 100%;">登录</el-button>
                                </el-form-item>

                            </el-form>
                        </el-tab-pane>
                        <el-tab-pane label="验证码登陆" name="second">
                            <el-form :model="userInfo" style="width: 288px;margin-top:27px;" ref="form">
                                <el-form-item prop="phone">
                                    <el-input v-model="userInfo.phone" placeholder="手机号">

                                        <template slot="prepend">
                                            <div style="padding: 0 12px">
                                                <img style="width:19px;" src="../assetsPre/yonghuming.png" alt="">
                                            </div>
                                        </template>
                                    </el-input>
                                </el-form-item>
                                <el-form-item prop="code">
                                    <el-input v-model="userInfo.code" placeholder="验证码" type="text">

                                        <template slot="prepend">
                                            <div style="padding: 0 15px">
                                                <img style="width:13.6px;" src="../assetsPre/password.png" alt="">
                                            </div>
                                        </template>
                                        <template slot='append'>
                                            <div class="send" :disabled='isSend' @click="sendCode">{{isSend?'已发送('+num+')S':'发送验证码'}}</div>
                                        </template>
                                    </el-input>

                                </el-form-item>
                                <el-form-item class='isRemenber' label="" style="line-height:16px;">
                                    <el-checkbox v-model="rememberMe">记住我</el-checkbox>
                                    <router-link :to="{name:'backPassword'}">忘记密码？</router-link>
                                </el-form-item>
                                <el-form-item>
                                    <el-button :loading="loading" @click="login" type="color" style="width: 100%;">登录</el-button>
                                </el-form-item>

                            </el-form>
                        </el-tab-pane>
                    </el-tabs>
                    <div class="regest">
                        <router-link :to="{name:'register'}">没有账户，立即注册>></router-link>
                    </div>

                </div>
            </div>

        </div>

        <logo-foot :isBottom='false'></logo-foot>
    </div>
</template>
<script>
import logoHead from '../pagesPre/LogoHead'
import logoFoot from '../pagesPre/LogoFoot'
import { mapState } from 'vuex'
export default {
    data() {
        return {
            rememberMe: false,
            loading: false,
            userInfo: {
                username: '',
                password: '',
                phone: '',
                code: '',
            },
            activeName: 'first',
            realCode: '',
            num: 61,
            isSend: false,
        }
    },
    computed: {
        ...mapState(['brefName', 'msgCode']),
    },

    methods: {
        login() {
            this.$refs.form.validate(valid => {
                if (this.activeName == 'first') {
                    if (!this.userInfo.username || !this.userInfo.password) {
                        this.$message({
                            message: '用户名或密码不能为空！',
                            type: 'warning'
                        });
                        return
                    }
                    this.loading = true;
                    this.$http.post({
                        url: '/auth/login',
                        data: {
                            username: this.userInfo.username,
                            password: this.userInfo.password,
                            remember: this.rememberMe
                        }
                    }).then(res => {
                        this.loading = false;
                        if (res.success) {
                            this.$message.success('登录成功')
                            if (this.brefName && this.brefName != 'register' && this.brefName != 'backPassword') {
                                history.back()
                            }
                            else {
                                this.$router.replace({
                                    name: 'index'
                                })
                            }
                        } else {
                            this.$message.error('用户名或密码错误');
                        }
                    }).catch(() => {
                        this.loading = false;
                    })
                }
                else {
                    if (!this.userInfo.phone || !this.userInfo.code) {
                        this.$message({
                            message: '手机号验证码不能为空',
                            type: 'warning'
                        });
                        return
                    }
                    if (!this.realCode) {
                        this.$message({
                            message: '验证码获取失败，请重新发送',
                            type: 'warning'
                        });
                        return
                    }
                    this.loading = true;
                    this.$http.post({
                        url: '/auth/loginSms',
                        data: {
                            phone: this.userInfo.phone,
                            code: this.userInfo.code,
                            remember: this.rememberMe,
                        }
                    }).then(res => {
                        this.loading = false;
                        if (res.success) {
                            this.$message.success('登录成功')
                            if (this.brefName && this.brefName != 'register' && this.brefName != 'backPassword') {
                                history.back()
                            }
                            else {
                                this.$router.replace({
                                    name: 'index'
                                })
                            }
                        } else {
                            this.$message.error('用户名或密码错误');
                        }
                    }).catch(() => {
                        this.loading = false;
                    })
                }
            })
        },
        sendCode() {
            if (this.isSend) {
                return
            }
            if (!this.checkPhone(this.userInfo.phone)) {
                this.$message.error('手机号格式错误');
                return
            }

            // this.isSend = true
            // this.getTime()
            this.checkHas({ phone: this.userInfo.phone }).then((result) => {

                if (result) {
                    this.sendMeg(this.userInfo.phone, this.msgCode['登录确认']).then((json) => {
                        if (json.success) {
                            this.$message.success('发送成功')
                            this.realCode = json.data
                            this.isSend = true
                            this.getTime()
                        }
                        else {
                            this.$message.warning(json.error)
                        }
                    })
                }
                else {
                    this.$message.warning('该手机号未绑定用户')
                }
            })
        },
        sendMessage() {
            this.checkHas({ phone: this.userInfo.phone }).then((result) => {
                console.log(result)
                if (result) {
                    // this.sendMeg(this.userInfo.phone, this.msgCode['登录确认']).then((json) => {
                    //     if (json.success) {

                    //         this.$message.success('验证码发送成功！');
                    //         this.realCode = json.data
                    //         this.isSend = true
                    //         this.getTime()
                    //     }
                    //     else {
                    //         this.$message.warning(json.error)
                    //     }
                    // })
                }
                else {
                    this.$message.warning('该手机号未绑定用户')
                }
            })

        },
        getTime() {
            if (this.num > 0) {
                this.num--
                setTimeout(() => {
                    this.getTime()
                }, 1000);
            }
            else {
                this.num = 61
                this.isSend = false
            }
        }
    },
    components: {
        logoHead, logoFoot
    }
}
</script>
<style lang="less" scoped>
.container {
    height: 100%;
    background-color: #fff;
    min-width: 1190px;
}
.loginCenter {
    overflow: hidden;
    padding: 96px 0 129px;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    position: relative;

    .login {
        width: 1138px;
        overflow: hidden;
        margin: auto;
    }

    .login-wrapper {
        padding: 0 33px;
        width: 288px;
        height: 375px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 2px 3px 2px rgba(4, 115, 165, 0.47);
        border-radius: 2px;
        float: right;
    }
}

.isRemenber {
    a {
        float: right;
        font-size: 12px;
        color: rgba(11, 158, 192, 1);
        line-height: 16px;
    }
}

.regest {
    height: 40px;
    background: rgba(238, 242, 243, 1);
    border-radius: 2px;
    // padding: 0 26px;
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;

    a {
        font-size: 12px;
        font-family: MicrosoftYaHei;
        color: rgba(251, 110, 8, 1);
        line-height: 40px;
        text-decoration: none;
        float: right;
        margin-right: 26px;
    }
}

.send {
    height: 100%;
    // background-color: #0b9ec0;
    font-size: 12px;
    color: #000;
    padding: 0 10px;
    cursor: pointer;
}
</style>
