<template>
    <div class="loginUI flex">

        <div class="loginUI-img">
            <img src="@/assets/crmImages/login.png" class="img"/>
        </div>

        <div class="loginUI-panel flex-center">

            <div class="loginUI-card flex-column">

                <div class="loginUI-card__title flex-center">登录</div>
                <div class="loginUI-card__tips flex-center">请登录以后再继续</div>

                <div class="loginUI-card__tabs">

                    <a-tabs default-active-key="1" @change="onClickTab">
                        <a-tab-pane key="1" tab="账号密码">

                            <a-form-model ref="loginForm" :model="loginForm" :rules="rules">

                                <a-form-model-item ref="username" prop="username" class="loginUI-card__tabs--line">
                                    <a-input v-model="loginForm.username" placeholder="请输入登录用户名" 
                                        @blur="() => { $refs.username.onFieldBlur(); }">
                                        <a-icon slot="prefix" type="user" />
                                    </a-input>
                                </a-form-model-item>

                                <a-form-model-item ref="password" prop="password" class="loginUI-card__tabs--line">
                                    <!-- <a-input type="password" v-model="loginForm.password" placeholder="请输入登录密码" -->
                                    <a-input v-model="loginForm.password" placeholder="请输入登录密码"
                                        @blur="() => { $refs.password.onFieldBlur(); }" >
                                        <a-icon slot="prefix" type="lock" />
                                    </a-input>
                                </a-form-model-item>

                                <a-form-model-item class="loginUI-card__tabs--line">
                                    <div class="loginUI-card__tabs--tips flex-between">
                                        <!-- <div class="cursor-pointer">记住我</div> -->
                                        <div></div>
                                        <div class="cursor-pointer" @click="onForgetPassword">忘记密码</div>
                                    </div>
                                </a-form-model-item>

                                <a-form-model-item class="loginUI-card__tabs--line">
                                    <myButton class="loginUI-btn--big" theme="orange" :isRound="true" 
                                            :text="isLoginLoading ? '登录中' : '登录' " :loading="isLoginLoading" @click="onSubmit"/>
                                </a-form-model-item>

                                <a-form-model-item class="loginUI-card__tabs--line">
                                    <div class="loginUI-btn--link flex-center cursor-pointer" @click="onRegister">还没有注册账号？</div>
                                </a-form-model-item>

                            </a-form-model>
                            
                        </a-tab-pane>
                    </a-tabs>
                </div>
               
            </div> 

        </div>
    </div>
</template>

<script>
// @ is an alias to /src
import Loading from "@/components/Layout/Loading.vue";
import myButton from "@/components/Common/myButton";
export default {
    name: "Login",
    components: {
        Loading, myButton
    },
    data() {
        return {
            labelCol: { span: 4 },
            wrapperCol: { span: 14 },
            other: '',
            loginForm: {
                username: 'admin',
                password: '123456',
            },
            rules: {
                username: [
                    { required: true, message: 'Please input Login name', trigger: 'blur' },
                    { min: 3, max: 20, message: 'Length should be 6 to 20', trigger: 'blur' },
                ],
                password: [{ required: true, message: 'Please input password form', trigger: 'blur' }],
            },
            isLoggingIn:false,
            isAlertShow:false,
            redirect: undefined,
            otherQuery: {},
            isLoginLoading: false
        };
    },
    created() {
        console.log("login created")
        localStorage.clear();
    },
    computed: {
        
    },
    watch: {
        $route: {
            handler: function(route) {
                const query = route.query
                if (query) {
                    this.redirect = query.redirect
                    this.otherQuery = this.getOtherQuery(query)
                }
            },
            immediate: true
        }
    },
    mounted () {
        if (this.loginForm.username === '') {
            this.$refs.username.focus()
        } else if (this.loginForm.password === '') {
            this.$refs.password.focus()
        };
    },
    methods: { 
        onClickTab() {

        },
        onRegister(){
            this.$router.push('/register')
        },
        onSubmit() {
            this.$refs.loginForm.validate(valid => {
                if (valid) {
                    return this.login();
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        login () {

            this.isLoginLoading = true;

            const { username, password } = this.loginForm;
            let formData = new FormData();
			formData.append("username", username.trim());
			formData.append("password", password);
			formData.append("grant_type", 'password');
			formData.append("client_id", 'client-pc');
			formData.append("client_secret", '123456');

            this.$api.user.login(formData, { headers: {'Content-Type': 'application/x-www-form-urlencode'} }).then(res => {
                if (res.code != 0 ) return this.isLoginLoading = false,this.$message.error(res.message || '登录失败');
                const { data } = res;
                let token = `${data.tokenHead}${data.token}`;
                this.$store.commit('user/SET_TOKEN', token);
                localStorage.setItem('x-auth-token', token);
                this.queryUserInfo();//獲取用戶信息
                // this.redirectMain();
            }).catch(error => {
                this.$message.error('登陆失败！');
            })
        },
        queryUserInfo() {
            this.$store.dispatch('user/queryUserInfo').then(res => {
                this.isLoginLoading = false;
                if (res) this.redirectMain();

            });
        },
        redirectMain() {
            if (this.$route.query.redirect == location.hostname) {
                this.$router.go(-1);
            } else {
                this.$router.push('/activities');
            }
        },
        resetForm() {
            this.$refs.loginForm.resetFields();
        },
        onForgetPassword(){
            this.$router.push('/forgetPassword');
        },
        getOtherQuery(query) {
            return Object.keys(query).reduce((acc, cur) => {
                if (cur !== 'redirect') {
                    acc[cur] = query[cur]
                }
                return acc
            }, {})
        }
    },
};
</script>

<style lang="less">

.loginUI {
    width: 100vw;
    height: 100vh;
    min-width: 960px;
    // overflow: scroll;
    padding: 0;
    margin: 0;
    background: #fff;
    font-size: 15px !important;
    &-img {
        width: 55%;
        height: 100%;
        padding: 0;
        margin: 0;
        min-width: 550px;
        img {
            width: 100%;
            height: 100%;
            object-fit:cover;
        }
    }
    &-panel {
        height: 100%;
        flex: 1;
        min-width: 550px;
    }
    &-card {
        width: 450px;
        &__title {
            font-size: 32px;
            font-weight: 600;
            margin-bottom: 5px;
        }
        &__tips {
            margin-bottom: 30px;
        }
        &__tabs {
            width: 80%;
            margin-left: 10%;
            &--line {
                width: 100%;
                margin-bottom: 7px !important;
            }
            &--tips {
                margin-top: -7px !important;
            }
        }
    }
    &-btn--big {
        button {
            width: 360px;
            height: 40px;
            border-radius: 20px !important;
        }
        margin-top: 15px;
    }
    &-btn--link {
        color: #317ae2;
        margin-top: 80px;
        width: 120px;
        margin-left: 50%;
        transform: translateX(-50%);
    }
}

.widget{
  margin:0;
  height:unset;
}
.login-panel{
  /* padding:200px 0; */
  position:relative;
  height: 100vh;
  /* background: red; */
}
.login-panel .alert{
  opacity:0;
  position:absolute;
  top:100px;
  width:100%;
}
.login-panel .alert.alert-primary{
  background:#007bff;
  color:#fff;
  font-size:18px;
  z-index: 999;
}
.login-panel .alert .widget{
  position:absolute;
  right:5px;
  top:0;
  margin:10px;
}
</style>