<template>
    <div id="login">
        <div class="loginBox">
            <!-- 登录 -->
            <div class="cell" v-if="loginType==1" key='login'>
                <van-field v-model="loginForm.phone" clearable :placeholder="$t('login.inp1')">
                    <van-icon color="#38D0C9" class="iconfont" class-prefix="icon" slot="left-icon" name="shouji"></van-icon>
                </van-field>
                <van-field v-model="loginForm.password" clearable :placeholder="$t('login.inp2')" type="password">
                    <van-icon color="#38D0C9" class="iconfont" class-prefix="icon" slot="left-icon" name="suozi"></van-icon>
                </van-field>
                <div class="textBoxs">
                    <span @click="toogleLanguage" class="text">{{$t('login.language')}}：{{languages}}</span>
                    <!-- <span @click="goForget" class="text">{{$t('login.forget')}}</span> -->
                </div>
                <div class="butBox">
                    <van-button @click="logins" type="primary" color="#38D0C9" block>{{$t('login.sign')}}</van-button>
                    <van-button @click="goRegister" type="default" color="#38D0C9" plain block>{{$t('login.register1')}}</van-button>
                </div>
            </div>
            <!-- 注册 -->
            <div class="cell" v-if="loginType==2" key='register'>
                <van-field v-model="registerForm.phone" clearable  :placeholder="$t('login.inp1')" type="digit">
                    <van-icon color="#38D0C9" class="iconfont" class-prefix="icon" slot="left-icon" name="shouji"></van-icon>
                </van-field>
                <!-- <van-field v-model="registerForm.verification" clearable placeholder="認証コードを入力" >
                    <van-icon color="#38D0C9" class="iconfont" class-prefix="icon" slot="left-icon" name="dunpai"></van-icon>
                    <template #button>
                        <span style="color:#38D0C9">認証コードを受け取る</span>
                    </template>
                </van-field> -->
                <van-field v-model="registerForm.password" clearable :placeholder="$t('login.setUp')" type="password">
                    <van-icon color="#38D0C9" class="iconfont" class-prefix="icon" slot="left-icon" name="suozi"></van-icon>
                </van-field>
                <van-field v-model="registerForm.confirm" clearable :placeholder="$t('login.confirm')" type="password">
                    <van-icon color="#38D0C9" class="iconfont" class-prefix="icon" slot="left-icon" name="suozi"></van-icon>
                </van-field>
                <van-field v-model="registerForm.busName" clearable :placeholder="$t('login.select')" readonly @click="popupShow=true">
                    <van-icon color="#38D0C9" class="iconfont" class-prefix="icon" slot="left-icon" name="suozi"></van-icon>
                </van-field>

                <div class="textBox">
                </div>
                <div class="butBox">
                    <van-button @click="registers" type="primary" color="#38D0C9" block>{{$t('login.register2')}}</van-button>
                    <van-button @click="goLogin" type="default" color="#38D0C9" plain block>{{$t('login.sign')}}</van-button>
                </div>
            </div>
            <!-- 忘记密码 -->
            <div class="cell" v-if="loginType==3" key='forget'>
                <van-field v-model="forgetForm.phone" clearable :placeholder="$t('login.inp1')">
                    <van-icon color="#38D0C9" class="iconfont" class-prefix="icon" slot="left-icon" name="shouji"></van-icon>
                </van-field>
                <van-field v-model="forgetForm.verification" clearable placeholder="認証コードを入力">
                    <van-icon color="#38D0C9" class="iconfont" class-prefix="icon" slot="left-icon" name="dunpai"></van-icon>
                    <template #button>
                        <span style="color:#38D0C9">認証コードを受け取る</span>
                    </template>
                </van-field>
                <div class="textBox">
                </div>
                <div class="butBox">
                    <van-button @click="forgets" type="primary" color="#38D0C9" block>新規登録</van-button>
                    <van-button @click="goLogin" type="default" color="#38D0C9" plain block>ログイン</van-button>
                </div>
            </div>
        </div>
        <van-popup v-model="popupShow" round position="bottom" :style="{ height: '40%' }">
            <van-picker show-toolbar title="选择bus公司" :columns="columns" @confirm="onConfirm" @cancel="onCancel" />
        </van-popup>
        <van-popup v-model="languageShow" round position="bottom" :style="{ height: '40%' }">
            <van-picker show-toolbar title="选择语言" :columns="languagecolumns" @confirm="languageConfirm" @cancel="languageCancel" />
        </van-popup>
    </div>
</template>

<script>
import { setToken } from "@/utils/auth"; // get token from cookie
import { getBusList, register, login } from "@/api/login.js";
import Cookies from 'js-cookie'

export default {
    data() {
        return {
            loginType: 1, //1登录2注册3忘记密码
            //登录数据
            loginForm: {
                phone: "",
                password: "",
            },
            //注册数据
            registerForm: {
                phone: "",
                password: "",
                confirm: "",
                busName: "",
                busId: "",
            },
            //忘记密码数据
            forgetForm: {
                phone: "",
                verification: "",
            },
            columns: [],
            columnsAll: [],
            popupShow: false,
            languageShow:false,
            languagecolumns:[
                { text: '简体中文', value: 0 },
                { text: '日本語', value: 1 },
            ],
        };
    },
    created() {
        this.getBus();
        let phone= Cookies.get('phone');
        if(phone){
            this.loginForm.phone=phone;
        }
    },
    computed:{
        languages(){
            let text='';
            let language=this.$store.state.user.language;
            if(language=='zh'){
                text='简体中文'
            }
            if(language=='ja'){
                text='日本語'
            }
            console.log(language)
            return text;
        }
    },
    methods: {
        //登录
        logins() {
            let loginRules = [
                {
				name: 'phone',
				required: true,
				errmsg: this.$t('login.inp1')
                },
                {
				name: 'password',
				required: true,
				errmsg: this.$t('login.inp2')
                },
            ]
            let valLoginRes = this.$validate.validate(this.loginForm, loginRules)
			if (!valLoginRes.isOk) {
                this.$toast({ type: "fail", message: valLoginRes.errmsg });
				return false
			};
            //获取token
            this.$store
                .dispatch("user/Login", this.loginForm)
                .then(() => {
                    Cookies.set('phone',this.loginForm.phone);
                    // Cookies.set('password',this.loginForm.password);
                    // 获取用户信息
                    this.$store.dispatch("user/GetInfo").then((res) => {
                        if(res.code==200){
                            this.$router.push({ path: "/" }).catch(() => {});
                        }
                    });
                })
                .catch(() => {
                    this.loading = false;
                    // if (this.captchaOnOff) {
                    //     this.getCode();
                    // }
                });
        },
        //注册
        registers() {
            let loginRules = [
                {
				name: 'phone',
				required: true,
				errmsg: this.$t('login.inp1')
                },
                {
				name: 'password',
				required: true,
				errmsg: this.$t('login.setUp')
                },
                {
				name: 'confirm',
				required: true,
				errmsg: this.$t('login.confirm')
                },
                {
				name: 'busId',
				required: true,
				errmsg: this.$t('login.select')
                },
            ]
            let valLoginRes = this.$validate.validate(this.registerForm, loginRules)
			if (!valLoginRes.isOk) {
                this.$toast({ type: "fail", message: valLoginRes.errmsg });
				return false
			};
            if(this.registerForm.password!==this.registerForm.confirm){
                this.$toast({ type: "fail", message: this.$t('login.agreement') });
                return
            }   
            let requer = {
                username: this.registerForm.phone,
                password: this.registerForm.password,
                deptId: this.registerForm.busId,
            };
            register(requer).then((res) => {
                if (res.code == 200) {
                    this.$toast({ type: "success", message: this.$t('login.successful')});
                    this.loginForm.phone=this.registerForm.phone;
                    Cookies.set('phone',this.registerForm.phone);
                    this.loginType = 1;
                }
            });
        },
        //忘记密码
        forgets() {
            console.log("开始注册");
        },
        //切换到登录
        goLogin() {
            this.loginType = 1;
            this.clear();
        },
        //切换到忘记密码
        goForget() {
            this.loginType = 3;
            this.clear();
        },
        //切换到注册
        goRegister() {
            this.loginType = 2;
            this.clear();
        },
        toogleLanguage(){
            this.languageShow = true;
        },
        onConfirm(value) {
            for (let i = 0; i < this.columnsAll.length; i++) {
                this.registerForm.busName = value;
                if (value == this.columnsAll[i].deptName) {
                    this.registerForm.busId = this.columnsAll[i].deptId;
                }
            }
            console.log(this.registerForm);
            this.onCancel();
        },
        onCancel() {
            this.popupShow = false;
        },
        languageConfirm(value){
            let text='';
            if(value.value==0){
                text='zh'
            }else{
                text='ja'
            }
            this.$store.commit("user/SET_LANGUAGE", text);
            this.languageCancel();
            location.reload();
        },
        languageCancel(){
            this.languageShow = false;
        },
        clear() {
            //登录数据
            (this.loginForm = {
                phone: "",
                password: "",
            }),
                //注册数据
                (this.registerForm = {
                    phone: "",
                    verification: "",
                    password: "",
                    confirm: "",
                    busName: "",
                    busId: "",
                }),
                //忘记密码数据
                (this.forget = {
                    phone: "",
                    verification: "",
                });
        },
        getBus() {
            getBusList().then((res) => {
                if (res.code == 200) {
                    this.columnsAll = res.data;
                    this.columns = [];
                    for (let i = 0; i < res.data.length; i++) {
                        this.columns.push(res.data[i].deptName);
                    }
                }
            });
        },
    },
    watch: {
        loginType() {
            this.clear();
        },
    },
};
</script>

<style lang="scss" scoped>
#login {
    background: url("../../../public/static/images/loginBackground.png")
        no-repeat;
    background-size: 100% auto;
    height: 100vh;
    width: 100vw;
    background-position-x: center;
    background-position-y: -1rem /* 20/100 */;
    .loginBox {
        width: 95%;
        position: absolute;
        left: 2.5%;
        bottom: 8%;
        // border: 1px solid #000;
        padding: 0.4rem 0.24rem 0.12rem 0.24rem /* 24/100 */;
        box-sizing: border-box;
        background: #fff;
        border-radius: 0.05rem /* 5/100 */;
        box-shadow: 0px 0px 5px #e9e9e9;
        .cell {
            font-size: 0.12rem /* 12/100 */;
            .textBox {
                padding: 0.1rem /* 10/100 */ 0;
                text-align: right;
                color: #333333;
            }
            .textBoxs{
                padding: 0.1rem /* 10/100 */ 0;
                color: #333333;
                display: flex;
                justify-content: space-between;
                align-items: center;

            }
            .butBox {
                padding: 0.05rem /* 10/100 */ 0;
                height: 1rem /* 100/100 */;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
                .button {
                    margin-bottom: 0.1rem /* 10/100 */;
                }
            }
        }
    }
}
</style>
<style>
.van-cell {
    padding: 0.1rem /* 10/100 */ 0;
}
</style>