<template>
    <div class="dialog_cont">
        <div class="login_title">{{ loginTitle }}</div>
        <template v-if="curLoginType === 1">
            <PasswordLogin :agreement="true" @login-success="handleLoginSuccess" />
            <!-- <div class="reg">
                <div class="reg_label">还没有帐号？</div>
                <div class="reg_btn" @click="onRegister">去注册>></div>
            </div> -->
        </template>
        <template v-if="curLoginType === 4">
            <Register @change-password-success="onLogin(1)" />
            <div class="back_login" :class="{ 'login_m': curLoginType === 4 }">
                <div class="back_label">已有帐号？</div>
                <div class="login" @click="onLogin(1)">去登录>></div>
            </div>
        </template>
    </div>
</template>
<script>
import { mapState } from 'vuex'
import PasswordLogin from './PasswordLogin'
import Register from './Register'
export default {
    components: {
        PasswordLogin,
        Register,
    },
    data () {
        return {
            curLoginType: 1,
            loginTitle: '登录',
            loading: false,
        }
    },
    computed: {
        ...mapState({
            user: (state) => state.user, //
        })
    },
    created () {
    },
    deactivated () {
    },
    destroyed () {
    },
    methods: {
        handleLoginSuccess (data) {
            this.$store.dispatch('setUser', data)
            this.$router.push({
                path: '/home'
            })
        },
        onRegister() {
            this.curLoginType = 4
            this.loginTitle = '注册'
        },
        onLogin (loginType) {
            this.curLoginType = loginType
            this.loginTitle = '登录'
        },
    }
}
</script>
<style lang="less" scoped>
.dialog_cont {
    display: flex;
    align-items: center;
    flex-direction: column;
    min-height: 432px;
    width: 420px;
    padding: 56px 40px 40px;
    .login_title{
        width: 100%;
        font-weight: bold;
        font-size: 20px;
        color: #222222;
        line-height: 29px;
        margin-bottom: 20px;
    }
    .reg {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 17px;
        line-height: 17px;
        font-weight: 400;
        font-size: 12px;
        margin-top: 24px;
        .reg_label{
            color: #222222;
        }
        .reg_btn {
            cursor: pointer;
            color: #35E89A;
        }
    }

    .back_login {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 17px;
        line-height: 17px;
        font-weight: 400;
        font-size: 12px;
        margin-top: 24px;
        .reg_label{
            color: #222222;
        }
        .login {
            cursor: pointer;
            color: #35E89A;
        }
    }
}
</style>
