<template>
    <div class="container">
        <div class="top">
            <div class="box">
                <div></div>
                <div class="title">{{ !phoneLogin ? '登录账号' : '短信验证登录' }}</div>
                <img @click="all('/Home')" src="../assets/icon／close@3x.png" alt="" />
            </div>
        </div>
        <div class="con">
            <el-form v-if="!phoneLogin" :model="form" ref="form" :rules="rules" label-width="0">
                <el-form-item
                    prop="username"
                    :rules="{
                        pattern: /^1[3-9]\d{9}$/,
                        message: '请输入正确的手机号',
                        trigger: 'blur'
                    }"
                >
                    <span class="el-icon-user"></span>
                    <el-input style="width: 300px" v-model="form.username" placeholder="请输入手机号"></el-input>
                </el-form-item>
                <div @keyup.enter="Login">
                    <el-form-item prop="password" :rules="{ required: true, message: '请输入', trigger: 'blur' }">
                        <span class="el-icon-unlock"></span>
                        <el-input
                            style="width: 300px"
                            v-model="form.password"
                            placeholder="请输入密码"
                            type="password"
                        ></el-input>
                    </el-form-item>
                </div>
            </el-form>

            <el-form v-else :model="form" ref="form" label-width="0">
                <el-form-item
                    prop="phone"
                    :rules="{
                        pattern: /^1[3-9]\d{9}$/,
                        message: '请输入正确的手机号',
                        trigger: 'blur'
                    }"
                >
                    <span class="el-icon-user"></span>
                    <el-select style="width: 90px" v-model="form.region" placeholder="请选择">
                        <el-option v-for="item in list" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                    </el-select>
                    <el-input v-model="form.phone" style="width: 210px" placeholder="请输入手机号"> </el-input>
                </el-form-item>
                <div @keyup.enter="loginPhone">
                    <el-form-item prop="code" :rules="{ required: true, message: '请输入', trigger: 'blur' }">
                        <span class="icon">
                            <img src="../assets/login_icon_yanzhengma@3x.png" alt="" />
                        </span>
                        <div>
                            <el-input style="width: 300px" v-model="form.code" placeholder="请输入短信验证码">
                                <el-link @click="send" class="code" type="primary" :underline="false" slot="append">{{
                                    time === 0 ? '发送验证码' : `重新发送${time}s`
                                }}</el-link>
                            </el-input>
                        </div>
                    </el-form-item>
                </div>
            </el-form>

            <div class="btn">
                <el-link @click="phoneLogin = !phoneLogin">{{ phoneLogin ? '密码登录' : '短信验证码登录' }}</el-link>
                <el-link type="primary" v-if="!phoneLogin" @click="password">忘记密码？</el-link>
            </div>
            <div class="sub-btn">
                <el-button v-if="!phoneLogin" @click="Login" type="primary" class="btn-block">登录</el-button>
                <el-button v-else @click="loginPhone" type="primary" class="btn-block">登录</el-button>
                <el-button style="background: #f2f3f5; color: #292c33" type="info" class="btn-block" @click="Register"
                    >还没有账号？立即注册</el-button
                >
            </div>
        </div>
    </div>
</template>

<script>
// import EventBus from '../eventBus';
export default {
    data() {
        return {
            show: false,
            phoneLogin: false,
            form: {
                region: '0'
            },
            time: 0,
            rules: {},
            list: [
                {
                    id: '0',
                    name: 'CH +86'
                }
            ]
        };
    },
    methods: {
        loginPhone() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.loading = true;
                    this.$http
                        .get('/sms/verify', {
                            phone: this.form.phone,
                            code: this.form.code
                        })
                        .then(res => {
                            localStorage.setItem('webToken', res);
                            this.$http
                                .post('/auth/phoneLogin', {
                                    phone: this.form.phone,
                                    code: this.form.code
                                })
                                .then(res => {
                                    localStorage.setItem('webToken', res);
                                    this.$message.warning('登录成功');
                                    this.$store.dispatch('getUserInfo');
                                    this.$router.replace('/');
                                })
                                .catch(e => {
                                    this.loading = false;
                                    if (e) {
                                        this.$message.error(e.error);
                                    }
                                });
                        })
                        .catch(e => {
                            this.$message.error(e.error);
                        });
                }
            });
        },
        Login() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.loading = true;
                    this.$http
                        .post('/auth/login', {
                            username: this.form.username,
                            password: this.form.password
                        })
                        .then(res => {
                            localStorage.setItem('webToken', res);
                            this.$message.warning('登录成功');
                            // this.$store.commit('loginTypeFn', true);
                            return this.$store.dispatch('getUserInfo');
                        })
                        .then(() => {
                            this.$router.replace('/');
                        })
                        .catch(e => {
                            this.loading = false;
                            this.$message.error(e.error);
                        });
                }
            });
        },
        send() {
            this.sendCode(this.form.phone);
        },
        password() {
            this.$router.push({
                path: '/Register',
                query: {
                    identification: 1
                }
            });
        },
        Register() {
            this.$router.push({
                path: '/Register',
                query: {
                    identification: 2
                }
            });
        }
    }
};
</script>

<style lang="less" scoped>
.container {
    background: #ffffff !important;
}
.el-form {
    /deep/ .el-input {
        .el-input__inner {
            border-width: 0px;
            border-bottom: 1px solid #f2f3f5;
            padding: 0 0 0;
            height: 50px;
            background: none;
            line-height: 50px;
            margin-left: 10px;
        }

        .el-input__prefix {
            color: #292c33;
            font-size: 18px;
        }

        .el-input-group__append {
            background-color: transparent;
            border-width: 0;
            border-bottom: 1px solid @bg;
        }
    }
    .el-form-item {
        margin-bottom: 20px;
    }
}
/deep/ .el-form-item__error {
    top: 50px;
    left: 43.5%;
}
/deep/ .el-form-item__content {
    display: flex;
    justify-content: center;
}
/deep/ .el-input__prefix {
    .el-input__icon {
        color: orange;
    }
}
.code {
    color: #ff8700;
}
/deep/.el-dialog--center .el-dialog__body {
    padding: 45px 75px 55px;
}
.top {
    margin-bottom: 50px;
}
.box {
    margin: auto;
    width: 900px;
    height: 60px;
    .flex();
    background: linear-gradient(to right, #ffffff 0%, rgba(520, 226, 200, 0.2) 50%, #ffffff 100%);
    justify-content: space-between;
    box-shadow: -2px 0px 0px 0px #ff8700;
    .title {
        font-weight: 500;
        color: #ff8700;
        font-size: 16px;
    }
    img {
        width: 24px;
        height: 24px;
        z-index: 1;
    }
}

.con {
    text-align: center;
    .el-icon-user {
        color: orange;
        font-size: 24px;
        margin-top: 13px;
    }
    .el-icon-unlock {
        color: orange;
        font-size: 24px;
        margin-top: 12px;
    }
    .icon {
        color: orange;
        img {
            width: 28px;
            height: 28px;
            padding-top: 10px;
        }
    }
    .btn {
        .flex();
        width: 330px;
        justify-content: space-between;
        margin: 0 auto;
    }
    .sub-btn {
        padding-top: 67px;
        text-align: center;
        width: 300px;
        margin: 0 auto;
        .el-button {
            font-size: 12px;
            line-height: 16px;
            border-width: 0px;
            &.el-button--default {
                background-color: @bg;
            }
        }
    }
}
</style>
