<template>
    <div class="login-wrap">
        <div class="logo-wrap">
            <!-- <img class="icon" src="@/assets/images/logo-no-word-blue.png" /> -->
            <span class="text">{{ $t('login.989807-37') }}</span>
        </div>
        <!-- <pre class="introduce-text">{{ $t('login.989807-38') }}</pre> -->

        <div class="img-wrap">
            <img style="width: 100%; height: 100%" src="@/assets/images/cover.png" />
        </div>
        <div class="box-wrap">
            <!-- 账号登录 -->
            <div class="form-box" v-show="!isHaveBind && !errorText && formIndex === 1">
                <div class="title-wrap">
                    <div v-if="!bindId" class="name">{{ $t('login.989807-1') }}</div>
                    <div v-else class="name">{{ $t('login.989807-36') }}</div>
                    <langSelect class="lang"></langSelect>
                </div>
                <!-- <pre class="demo-account">{{ $t('login.989807-33') }}</pre> -->
                <el-form class="form-wrap" id="loginForm" ref="loginForm" :model="loginForm" :rules="loginRules">
                    <el-form-item prop="username">
                        <div class="item-wrap">
                            <div class="input-wrap">
                                <input class="inner" v-model="loginForm.username" auto-complete="off" type="text" :placeholder="$t('login.989807-4')" />
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item prop="password">
                        <div class="item-wrap">
                            <div class="input-wrap">
                                <input class="inner" v-model="loginForm.password" auto-complete="off" :type="pwdtype" :placeholder="$t('login.989807-5')" />
                                <span class="el-icon-view icon" @click="handlePasswordTypeChange()"></span>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item v-if="captchaOnOff" prop="code">
                        <div class="item-wrap">
                            <div class="input-wrap">
                                <input class="inner" v-model="loginForm.code" auto-complete="off" type="text" :placeholder="$t('login.989807-6')" />
                            </div>
                            <img class="input-append" :src="codeUrl" @click="getCode" />
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <div class="item-wrap">
                            <el-checkbox v-model="loginForm.rememberMe">
                                {{ $t('login.989807-7') }}
                            </el-checkbox>
                            <div style="font-weight: 400; font-size: 14px; color: #486ff2; cursor: pointer" @click="handleForgetPassword">{{ $t('login.989807-43') }}</div>
                        </div>
                    </el-form-item>

                    <div v-if="!bindId">
                        <el-button class="btn" :loading="loading" type="primary" @click.native.prevent="handleLogin">
                            <span v-if="!loading">{{ $t('login.989807-3') }}</span>
                            <span v-else>{{ $t('login.989807-13') }}</span>
                        </el-button>
                    </div>
                    <div v-else>
                        <el-button class="btn" :loading="loading" type="primary" @click.native.prevent="handleBindLogin">
                            <span v-if="!loading">{{ $t('login.989807-15') }}</span>
                            <span v-else>{{ $t('login.989807-16') }}</span>
                        </el-button>
                        <el-button style="margin: 16px 0 0 0" class="btn" @click.native.prevent="handleBackLogin">
                            <span>{{ $t('login.989807-60') }}</span>
                        </el-button>
                    </div>

                    <!-- <div class="other-link">
                        <span class="text" @click="handleRegister">{{ $t('login.989807-18') }}</span>
                        <el-divider direction="vertical"></el-divider>
                        <span class="text" @click="handleGotoDoc">{{ $t('login.989807-40') }}</span>
                        <el-divider direction="vertical"></el-divider>
                        <span class="text" @click="handleGotoOS">{{ $t('login.989807-41') }}</span>
                    </div> -->

                    <!-- <div class="other-login">
                        <span class="text">{{ $t('login.989807-42') }}</span>
                        <svg-icon class="icon" icon-class="wechat" style="color: #07c160" @click="handleGotoWeChatLogin" />
                        <svg-icon class="icon" icon-class="envelope" style="color: #486ff2" @click="handleGotoSmsLogin" />
                    </div> -->
                </el-form>
            </div>

            <!-- 短信登录 -->
            <div class="form-box" v-show="!isHaveBind && !errorText && formIndex === 2">
                <div class="title-wrap">
                    <div class="name">{{ $t('login.989807-2') }}</div>
                    <langSelect class="lang"></langSelect>
                </div>
                <el-form style="margin-top: 40px" class="form-wrap" id="smsLoginForm" ref="smsLoginForm" :model="smsLoginForm" :rules="smsLoginRules">
                    <el-form-item prop="phonenumber">
                        <div class="item-wrap">
                            <div class="input-wrap">
                                <input class="inner" v-model="smsLoginForm.phonenumber" auto-complete="off" type="text" :maxlength="11" :placeholder="$t('login.989807-8')" />
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item prop="smsCode">
                        <div class="item-wrap">
                            <div class="input-wrap">
                                <input class="inner" v-model="smsLoginForm.smsCode" auto-complete="off" type="text" :placeholder="$t('login.989807-9')" />
                            </div>
                            <el-button class="input-append" :disabled="isLoginSmsBtn" @click.prevent="getLoginSmsCode()">
                                {{ loginSmsBtnText }}
                            </el-button>
                        </div>
                    </el-form-item>
                    <div>
                        <el-button class="btn" :loading="smsLoading" type="primary" @click.native.prevent="handleSmsLogin">
                            <span v-if="!smsLoading">{{ $t('login.989807-3') }}</span>
                            <span v-else>{{ $t('login.989807-13') }}</span>
                        </el-button>
                    </div>
                    <div>
                        <el-button style="margin-top: 16px" class="btn" @click="handleGotoLogin">
                            <span>{{ $t('login.989807-44') }}</span>
                        </el-button>
                    </div>
                </el-form>
            </div>

            <!-- 忘记密码 -->
            <div class="form-box" v-show="!isHaveBind && !errorText && formIndex === 3">
                <div class="title-wrap">
                    <div class="name">{{ $t('login.989807-43') }}</div>
                    <langSelect class="lang"></langSelect>
                </div>
                <el-form style="margin-top: 40px" class="form-wrap" id="fpForm" ref="fpForm" :model="fpForm" :rules="fpRules">
                    <el-form-item prop="phoneNumber">
                        <div class="item-wrap">
                            <div class="input-wrap">
                                <input class="inner" v-model="fpForm.phoneNumber" auto-complete="off" type="text" :maxlength="11" :placeholder="$t('login.989807-8')" />
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item prop="code">
                        <div class="item-wrap">
                            <div class="input-wrap">
                                <input class="inner" v-model="fpForm.code" auto-complete="off" type="text" :placeholder="$t('login.989807-9')" />
                            </div>
                            <el-button class="input-append" :disabled="isFpSmsBtn" @click.prevent="getFpSmsCode()">
                                {{ fpSmsBtnText }}
                            </el-button>
                        </div>
                    </el-form-item>
                    <el-form-item prop="password">
                        <div class="item-wrap">
                            <div class="input-wrap">
                                <input class="inner" v-model="fpForm.password" auto-complete="off" :placeholder="$t('login.989807-5')" />
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item prop="confirmPassword">
                        <div class="item-wrap">
                            <div class="input-wrap">
                                <input class="inner" v-model="fpForm.confirmPassword" auto-complete="off" :placeholder="$t('login.989807-47')" />
                            </div>
                        </div>
                    </el-form-item>
                    <div>
                        <el-button class="btn" :loading="fpLoading" type="primary" @click.native.prevent="handleChangePassword">
                            <span v-if="!fpLoading">{{ $t('login.989807-45') }}</span>
                            <span v-else>{{ $t('login.989807-46') }}</span>
                        </el-button>
                    </div>
                    <div>
                        <el-button style="margin-top: 16px" class="btn" @click="handleGotoLogin">
                            <span>{{ $t('login.989807-44') }}</span>
                        </el-button>
                    </div>
                </el-form>
            </div>

            <!-- 账号注册 -->
            <div class="form-box" v-show="!isHaveBind && !errorText && formIndex === 4">
                <div class="title-wrap">
                    <div v-if="!bindId" class="name">{{ $t('login.989807-52') }}</div>
                    <div v-else class="name">{{ $t('login.989807-59') }}</div>
                    <langSelect class="lang"></langSelect>
                </div>
                <el-form style="margin-top: 40px" class="form-wrap" id="registForm" ref="registForm" :model="registForm" :rules="registRules">
                    <el-form-item prop="username">
                        <div class="item-wrap">
                            <div class="input-wrap">
                                <input class="inner" v-model="registForm.username" auto-complete="off" type="text" :placeholder="$t('login.989807-4')" />
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item prop="phonenumber">
                        <div class="item-wrap">
                            <div class="input-wrap">
                                <input class="inner" v-model="registForm.phonenumber" auto-complete="off" type="text" :maxlength="11" :placeholder="$t('login.989807-8')" />
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item prop="password">
                        <div class="item-wrap">
                            <div class="input-wrap">
                                <input class="inner" v-model="registForm.password" auto-complete="off" :placeholder="$t('login.989807-5')" />
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item prop="confirmPassword">
                        <div class="item-wrap">
                            <div class="input-wrap">
                                <input class="inner" v-model="registForm.confirmPassword" auto-complete="off" :placeholder="$t('login.989807-47')" />
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item v-if="captchaOnOff" prop="code">
                        <div class="item-wrap">
                            <div class="input-wrap">
                                <input class="inner" v-model="registForm.code" auto-complete="off" type="text" :placeholder="$t('login.989807-6')" />
                            </div>
                            <img class="input-append" :src="codeUrl" @click="getCode" />
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <div class="item-wrap" style="justify-content: flex-start">
                            <el-checkbox v-model="registForm.agree">{{ $t('login.989807-53') }}</el-checkbox>
                            <span style="color: #486ff2; cursor: pointer" @click="handleGotoPrivacyPolicy">{{ $t('login.989807-54') }}</span>
                        </div>
                    </el-form-item>
                    <div>
                        <el-button class="btn" v-if="!bindId" :loading="registLoading" type="primary" @click.native.prevent="handleRegist">
                            <span v-if="!registLoading">{{ $t('login.989807-55') }}</span>
                            <span v-else>{{ $t('login.989807-56') }}</span>
                        </el-button>
                        <el-button class="btn" v-else :loading="registLoading" type="primary" @click.native.prevent="handleRegistBind">
                            <span v-if="!registLoading">{{ $t('login.989807-57') }}</span>
                            <span v-else>{{ $t('login.989807-16') }}</span>
                        </el-button>
                    </div>
                    <div>
                        <el-button style="margin-top: 16px" class="btn" @click="handleGotoLogin">
                            <span>{{ $t('login.989807-44') }}</span>
                        </el-button>
                    </div>
                </el-form>
            </div>

            <!-- 绑定账号提示 -->
            <div class="form-box" v-if="isHaveBind">
                <div class="mess-text">
                    <i style="font-size: 16px" class="el-icon-warning" />
                    <span>&nbsp;{{ $t('login.989807-10') }}</span>
                    <span style="color: #486ff2; cursor: pointer" @click="handleRegister">&nbsp;{{ $t('login.989807-12') }}</span>
                </div>
                <el-button style="margin-top: 40px" class="btn" @click="handleGotoLogin">
                    <span>{{ $t('login.989807-44') }}</span>
                </el-button>
            </div>

            <!-- 错误信息提示 -->
            <div class="form-box" v-if="errorText">
                <div class="mess-text">
                    <i style="font-size: 16px" class="el-icon-warning" />
                    <span>{{ errorText }}</span>
                </div>
                <el-button style="margin-top: 40px" class="btn" @click="handleGotoLogin">
                    <span>{{ $t('login.989807-44') }}</span>
                </el-button>
            </div>

            <!-- <div class="copyright-wrap">
                <span>
                    Copyright © 2021-2025
                    <a target="_blank" href="http://fastbee.cn">FastBee</a>
                    All Rights Reserved.
                </span>
                <a target="_blank" href="https://beian.miit.gov.cn/">滇ICP备2023000466号-6</a>
            </div> -->
        </div>
    </div>
</template>

<script>
import 'element-ui/lib/theme-chalk/display.css';
import Cookies from 'js-cookie';
import { getCodeImg, checkBindId, getErrorMsg, socialLogin, bindLogin, getSmsLoginCaptcha, smsLogin, getSmsForgetPassword, forgetPwdReset, bindRegister } from '@/api/login';
import { register } from '@/api/iot/tool';
import { encrypt, decrypt } from '@/utils/jsencrypt';
import { setToken } from '@/utils/auth';
import langSelect from '@/layout/components/langSelect';

export default {
    name: 'Login',
    components: { langSelect },
    data() {
        return {
            formIndex: 1, // 1 账号登录，2 短信登录
            pwdtype: 'password', // 控制密码可见
            // 账号登录
            loginForm: {
                username: '',
                password: '',
                rememberMe: false,
                code: '',
                uuid: '',
                bindId: '',
            },
            // 账号登录校验
            loginRules: {
                username: [
                    {
                        required: true,
                        trigger: 'blur',
                        message: this.$t('login.989807-20'),
                    },
                ],
                password: [
                    { required: true, message: this.$t('login.989807-21'), trigger: 'blur' },
                    // {
                    //     trigger: 'blur',
                    //     validator: (rule, value, callback) => {
                    //         const passwordreg = /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)]|[()])+$)(?!^.*[\u4E00-\u9FA5].*$)([^(0-9a-zA-Z)]|[()]|[a-z]|[A-Z]|[0-9]){6,18}$/;
                    //         if (!passwordreg.test(value)) {
                    //             callback(new Error(this.$t('system.dept.780956-30')));
                    //         } else {
                    //             callback();
                    //         }
                    //     },
                    // },
                ],
                code: [
                    {
                        required: true,
                        trigger: 'change',
                        message: this.$t('login.989807-22'),
                    },
                ],
            },
            bindId: '', // 判断绑定微信的id
            uuid: '',
            captchaOnOff: true, // 验证码开关
            codeUrl: '', // 验证码url
            loading: false,
            // 短信登录
            smsLoginForm: {
                phonenumber: '',
                smsCode: '',
                sourceType: 1,
            },
            // 短信登录校验
            smsLoginRules: {
                phonenumber: [
                    { required: true, message: this.$t('login.989807-23'), trigger: 'blur' },
                    {
                        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                        message: this.$t('login.989807-24'),
                        trigger: 'blur',
                    },
                ],
                smsCode: [
                    {
                        required: true,
                        trigger: 'change',
                        message: this.$t('login.989807-25'),
                    },
                ],
            },
            isLoginSmsBtn: false, // 是否使能sms按钮
            loginSmsBtnText: this.$t('login.989807-27'), // sms按钮文本
            loginSmsBtnSeconds: 60, // 剩余秒数
            loginSmsBtnTimer: null, // 倒计时器对象
            smsLoading: false,
            isHaveBind: false, // 是否有绑定账号
            errorText: '', // 错误信息
            // 忘记密码
            fpForm: {
                phoneNumber: '',
                code: '',
                password: '',
                confirmPassword: '',
            },
            // 忘记密码校验
            fpRules: {
                phoneNumber: [
                    { required: true, message: this.$t('login.989807-23'), trigger: 'blur' },
                    {
                        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                        message: this.$t('login.989807-24'),
                        trigger: 'blur',
                    },
                ],
                code: [
                    {
                        required: true,
                        trigger: 'change',
                        message: this.$t('login.989807-25'),
                    },
                ],
                password: [
                    { required: true, message: this.$t('login.989807-21'), trigger: 'blur' },
                    // {
                    //     trigger: 'blur',
                    //     validator: (rule, value, callback) => {
                    //         const passwordreg = /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)]|[()])+$)(?!^.*[\u4E00-\u9FA5].*$)([^(0-9a-zA-Z)]|[()]|[a-z]|[A-Z]|[0-9]){6,18}$/;
                    //         if (!passwordreg.test(value)) {
                    //             callback(new Error(this.$t('system.dept.780956-30')));
                    //         } else {
                    //             callback();
                    //         }
                    //     },
                    // },
                ],
                confirmPassword: [
                    {
                        required: true,
                        trigger: 'blur',
                        message: this.$t('login.989807-48'),
                    },
                    {
                        required: true,
                        validator: (rule, value, callback) => {
                            if (this.fpForm.password !== value) {
                                callback(new Error(this.$t('register.974236-12')));
                            } else {
                                callback();
                            }
                        },
                        trigger: 'blur',
                    },
                ],
            },
            isFpSmsBtn: false, // 是否使能sms按钮
            fpSmsBtnText: this.$t('login.989807-27'), // sms按钮文本
            fpSmsBtnSeconds: 60, // 剩余秒数
            fpSmsBtnTimer: null, // 倒计时器对象
            fpLoading: false,
            // 账号注册
            registForm: {
                username: '',
                phonenumber: '',
                password: '',
                confirmPassword: '',
                code: '',
                agree: false,
                uuid: '',
                bindId: '',
                sourceType: 1,
            },
            // 账号注册校验
            registRules: {
                username: [
                    {
                        required: true,
                        trigger: 'blur',
                        message: this.$t('login.989807-20'),
                    },
                    {
                        min: 2,
                        max: 20,
                        message: this.$t('register.974236-13'),
                        trigger: 'blur',
                    },
                ],
                phonenumber: [
                    { required: true, message: this.$t('login.989807-23'), trigger: 'blur' },
                    {
                        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                        message: this.$t('login.989807-24'),
                        trigger: 'blur',
                    },
                ],
                code: [
                    {
                        required: true,
                        trigger: 'change',
                        message: this.$t('login.989807-25'),
                    },
                ],
                password: [
                    { required: true, message: this.$t('login.989807-21'), trigger: 'blur' },
                    // {
                    //     trigger: 'blur',
                    //     validator: (rule, value, callback) => {
                    //         const passwordreg = /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)]|[()])+$)(?!^.*[\u4E00-\u9FA5].*$)([^(0-9a-zA-Z)]|[()]|[a-z]|[A-Z]|[0-9]){6,18}$/;
                    //         if (!passwordreg.test(value)) {
                    //             callback(new Error(this.$t('system.dept.780956-30')));
                    //         } else {
                    //             callback();
                    //         }
                    //     },
                    // },
                ],
                confirmPassword: [
                    {
                        required: true,
                        trigger: 'blur',
                        message: this.$t('login.989807-48'),
                    },
                    {
                        required: true,
                        validator: (rule, value, callback) => {
                            if (this.registForm.password !== value) {
                                callback(new Error(this.$t('register.974236-12')));
                            } else {
                                callback();
                            }
                        },
                        trigger: 'blur',
                    },
                ],
            },
            registLoading: false,
        };
    },
    created() {
        const { loginId } = this.$route.query;
        if (!loginId) {
            this.getCode();
            this.getCookie();
            this.checkBind();
            this.checkError();
        } else {
            this.redirectLogin(loginId);
        }
    },
    mounted() {},
    methods: {
        // 显示|隐藏密码
        handlePasswordTypeChange() {
            this.pwdtype == 'password' ? (this.pwdtype = 'text') : (this.pwdtype = 'password');
        },
        // 获取验证码
        getCode() {
            getCodeImg().then((res) => {
                this.captchaOnOff = res.captchaEnabled;
                if (this.captchaOnOff) {
                    this.codeUrl = 'data:image/gif;base64,' + res.img;
                    this.uuid = res.uuid;
                }
            });
        },
        // 获取存储
        getCookie() {
            const username = Cookies.get('username');
            const password = Cookies.get('password');
            const rememberMe = Cookies.get('rememberMe');
            const loginId = Cookies.get('loginId');
            this.loginForm = {
                username: username === undefined ? this.loginForm.username : username,
                password: password === undefined ? this.loginForm.password : decrypt(password),
                rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
                loginId: loginId === undefined ? this.loginForm.loginId : loginId,
            };
        },
        // 登录
        handleLogin() {
            const { redirect } = this.$route.query;
            this.$refs.loginForm.validate((valid) => {
                if (valid) {
                    this.loading = true;
                    if (this.loginForm.rememberMe) {
                        Cookies.set('username', this.loginForm.username, {
                            expires: 30,
                        });
                        Cookies.set('password', encrypt(this.loginForm.password), {
                            expires: 30,
                        });
                        Cookies.set('rememberMe', this.loginForm.rememberMe, {
                            expires: 30,
                        });
                    } else {
                        Cookies.remove('username');
                        Cookies.remove('password');
                        Cookies.remove('rememberMe');
                    }
                    const params = { ...this.loginForm, uuid: this.uuid };
                    this.$store
                        .dispatch('Login', params)
                        .then(() => {
                            this.$router
                                .push({
                                    path: redirect || '/',
                                })
                                .catch(() => {});
                        })
                        .catch((error) => {
                            if (error && error.message && error.message.includes('503')) {
                                setTimeout(() => {
                                    this.$router.push({ path: '/license' });
                                }, 2000);
                            }
                            this.loading = false;
                            if (this.captchaOnOff) {
                                this.getCode();
                            }
                        });
                }
            });
        },
        // 忘记密码
        handleForgetPassword() {
            this.resetForm('fpForm');
            this.formIndex = 3;
        },
        // 注册账号
        handleRegister() {
            if (this.captchaOnOff) {
                this.getCode();
            }
            this.resetForm('registForm');
            this.formIndex = 4;
            this.isHaveBind = false;
            this.errorText = '';
        },
        // 查看文档
        handleGotoDoc() {
            window.open('https://fastbee.cn/doc', '_blank');
        },
        // 返回官网
        handleGotoOS() {
            window.open('https://fastbee.cn', '_blank');
        },
        // 微信登录
        handleGotoWeChatLogin() {
            const baseURL = process.env.VUE_APP_BASE_API;
            window.location.href = baseURL + '/auth/render/wechat_open_web';
        },
        // 短信登录
        handleGotoSmsLogin() {
            this.resetForm('smsLoginForm');
            this.formIndex = 2;
        },
        // 验证电话号码
        validatePhoneNumber(number) {
            const regExp = /^1[3456789]\d{9}$/; // 使用正则表达式进行校验
            return regExp.test(number);
        },
        // 获取短信登录短信验证码
        getLoginSmsCode() {
            if (this.validatePhoneNumber(this.smsLoginForm.phonenumber)) {
                getSmsLoginCaptcha(this.smsLoginForm.phonenumber).then((res) => {
                    if (res.code == 200) {
                        this.$message({
                            type: 'success',
                            message: this.$t('login.989807-26'),
                        });
                        this.loginSmsBtnTimer = setInterval(() => {
                            if (this.loginSmsBtnSeconds > 0) {
                                this.loginSmsBtnSeconds--;
                                this.loginSmsBtnText = `${this.loginSmsBtnSeconds}秒后获取`;
                            } else {
                                clearInterval(this.loginSmsBtnTimer);
                                this.loginSmsBtnText = this.$t('login.989807-27');
                                this.isLoginSmsBtn = false;
                            }
                        }, 1000);
                        this.isLoginSmsBtn = true;
                    } else {
                        this.$message({
                            type: 'warning',
                            message: this.$t('login.989807-28'),
                        });
                    }
                });
            } else {
                this.$message({
                    type: 'warning',
                    message: this.$t('login.989807-29'),
                });
            }
        },
        // 短信登录操作
        handleSmsLogin() {
            this.$refs.smsLoginForm.validate((valid) => {
                if (valid) {
                    this.smsLoading = true;
                    smsLogin(this.smsLoginForm).then((res) => {
                        setToken(res.data);
                        this.$router.push({
                            path: '/',
                        });
                    });
                }
            });
        },
        // 返回登录页
        handleGotoLogin() {
            if (this.captchaOnOff) {
                this.getCode();
            }
            this.clearValidate('loginForm');
            this.formIndex = 1;
            this.isHaveBind = false;
            this.errorText = '';
        },
        // 检测绑定信息
        checkBind() {
            const { bindId } = this.$route.query;
            if (bindId) {
                checkBindId(bindId).then((res) => {
                    if (res.code === 200) {
                        // this.isHaveBind = res.bindAccount;
                        this.isHaveBind = true;
                    } else {
                        this.isHaveBind = false;
                    }
                    if (this.isHaveBind) {
                        this.bindId = bindId;
                    } else {
                        this.bindId = '';
                        this.$router.push({
                            query: {},
                        });
                    }
                });
            }
        },
        // 绑定账号并登录
        handleBindLogin() {
            this.$refs.loginForm.validate((valid) => {
                if (valid) {
                    this.loading = true;
                    if (this.loginForm.rememberMe) {
                        Cookies.set('username', this.loginForm.username, {
                            expires: 30,
                        });
                        Cookies.set('password', encrypt(this.loginForm.password), {
                            expires: 30,
                        });
                        Cookies.set('rememberMe', this.loginForm.rememberMe, {
                            expires: 30,
                        });
                    } else {
                        Cookies.remove('username');
                        Cookies.remove('password');
                        Cookies.remove('rememberMe');
                    }
                    const params = { ...this.loginForm, uuid: this.uuid, bindId: this.bindId };
                    bindLogin(params)
                        .then((res) => {
                            setToken(res.token); // 保存token
                            this.$router
                                .push({
                                    path: '/',
                                })
                                .catch(() => {});
                        })
                        .catch(() => {
                            this.loading = false;
                            if (this.captchaOnOff) {
                                this.getCode();
                            }
                        });
                }
            });
        },
        // 返回登录
        handleBackLogin() {
            this.bindId = '';
            this.$router.push('/login');
        },
        // 检查错误信息
        checkError() {
            const { errorId } = this.$route.query;
            if (errorId) {
                getErrorMsg(errorId).then((res) => {
                    if (res.code === 200) {
                        this.errorText = res.msg;
                    } else {
                        this.errorText = '';
                    }
                });
            }
        },
        // 重定向到登录
        redirectLogin() {
            const { loginId } = this.$route.query;
            socialLogin(loginId).then((res) => {
                setToken(res.token); // 保存token
                this.$router.push({
                    path: this.redirect || '/',
                });
            });
        },
        // 获取忘记密码中的短信验证码
        getFpSmsCode() {
            if (this.validatePhoneNumber(this.fpForm.phoneNumber)) {
                getSmsForgetPassword(this.fpForm.phoneNumber).then((res) => {
                    if (res.code == 200) {
                        this.$message({
                            type: 'success',
                            message: this.$t('login.989807-26'),
                        });
                        this.fpSmsBtnTimer = setInterval(() => {
                            if (this.fpSmsBtnSeconds > 0) {
                                this.fpSmsBtnSeconds--;
                                this.fpSmsBtnText = `${this.fpSmsBtnSeconds}秒后获取`;
                            } else {
                                clearInterval(this.fpSmsBtnTimer);
                                this.fpSmsBtnText = this.$t('login.989807-27');
                                this.isFpSmsBtn = false;
                            }
                        }, 1000);
                        this.isFpSmsBtn = true;
                    } else {
                        this.$message({
                            type: 'warning',
                            message: this.$t('login.989807-28'),
                        });
                    }
                });
            } else {
                this.$message({
                    type: 'warning',
                    message: this.$t('login.989807-29'),
                });
            }
        },
        // 修改密码
        handleChangePassword() {
            this.$refs.fpForm.validate((valid) => {
                if (valid) {
                    this.fpLoading = true;
                    const { confirmPassword, ...params } = this.fpForm;
                    forgetPwdReset(params)
                        .then((res) => {
                            if (res.code === 200) {
                                this.$message({
                                    type: 'success',
                                    message: this.$t('login.989807-50'),
                                });
                                this.handleGotoLogin();
                            } else {
                                this.$message({
                                    type: 'error',
                                    message: this.$t('login.989807-51'),
                                });
                            }
                        })
                        .catch(() => {
                            this.fpLoading = false;
                        });
                }
            });
        },
        // 注册账号
        handleRegist() {
            const { agree } = this.registForm;
            if (agree) {
                this.$refs.registForm.validate((valid) => {
                    if (valid) {
                        this.registLoading = true;
                        const params = { ...this.registForm, uuid: this.uuid };
                        register(params)
                            .then((res) => {
                                this.registLoading = false;
                                if (res.code === 200) {
                                    this.registerAlert();
                                }
                            })
                            .catch(() => {
                                this.registLoading = false;
                                if (this.captchaOnOff) {
                                    this.getCode();
                                }
                            });
                    }
                });
            } else {
                this.$message({
                    type: 'warning',
                    message: this.$t('login.989807-58'),
                });
            }
        },
        // 注册成功提示
        registerAlert() {
            const { username } = this.registForm;
            this.$alert("<font color='red'> " + this.$t('register.974236-18') + username + this.$t('register.974236-19') + ' </font>', this.$t('register.974236-20'), {
                dangerouslyUseHTMLString: true,
                type: 'success',
            }).then(() => {
                this.handleGotoLogin();
            });
        },
        // 跳转到隐私政策
        handleGotoPrivacyPolicy() {
            window.open('https://fastbee.cn/privacy-policy.html', '_blank');
        },
        // 注册绑定
        handleRegistBind() {
            const { agree } = this.registForm;
            if (agree) {
                this.$refs.registForm.validate((valid) => {
                    if (valid) {
                        this.registLoading = true;
                        const params = { ...this.registForm, uuid: this.uuid, bindId: this.bindId };
                        bindRegister(params)
                            .then((res) => {
                                this.registLoading = false;
                                if (res.code === 200) {
                                    this.registerAlert();
                                }
                            })
                            .catch(() => {
                                this.registLoading = false;
                                if (this.captchaOnOff) {
                                    this.getCode();
                                }
                            });
                    }
                });
            } else {
                this.$message({
                    type: 'warning',
                    message: this.$t('login.989807-58'),
                });
            }
        },
        qqLogin() {
            window.location.href = 'http://localhost:8080/auth/render/qq';
        },
    },
};
</script>

<style lang="scss" scoped>
.login-wrap {
    user-select: none;
    height: 100vh;
    max-width: 100%;
    width: 100vw;
    display: flex;

    .logo-wrap {
        position: absolute;
        top: 80px;
        left: 80px;
        display: flex;
        flex-direction: row;
        align-items: center;

        .icon {
            width: 42px;
            height: 46px;
        }

        .text {
            font-size: 36px;
            font-weight: 500;
            margin-left: 12px;
            color: #486ff2;
        }
    }

    .introduce-text {
        position: absolute;
        font-weight: 400;
        font-size: 14px;
        color: #909399;
        line-height: 20px;
        text-align: left;
        font-style: normal;
        top: 146px;
        left: 80px;
    }

    .img-wrap {
        flex: 1;
        background: #0f73ee;
    }

    .box-wrap {
        position: relative;
        width: 608px;
        align-items: center;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        justify-content: center;

        .form-box {
            margin-top: -8%; // 上移35下面留宽一点
            width: 300px;

            .title-wrap {
                display: flex;
                justify-content: space-between;
                align-items: center;

                .name {
                    font-weight: 600;
                    font-size: 24px;
                    color: #303133;
                }

                .lang {
                    cursor: pointer;

                    ::v-deep .el-dropdown {
                        font-weight: 400;
                        font-size: 14px;
                        color: #909399;
                    }
                }
            }

            .demo-account {
                font-weight: 400;
                font-size: 14px;
                color: #909399;
                margin: 40px 0 0;
            }

            .form-wrap {
                margin-top: 24px;

                ::v-deep .el-form-item {
                    margin-bottom: 21px;

                    .el-form-item__content {
                        line-height: 14px;
                    }
                }

                .item-wrap {
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    align-items: center;

                    .input-wrap {
                        display: flex;
                        flex-direction: row;
                        justify-content: space-between;
                        border-radius: 4px;
                        border: 1px solid #dcdfe6;
                        padding: 3px 16px;
                        width: 100%;

                        .inner {
                            background: none;
                            border: none;
                            box-sizing: border-box;
                            flex-grow: 1;
                            font-size: inherit;
                            outline: none;
                            padding: 0;
                            width: 100%;
                            color: #303133;
                            line-height: 30px;
                        }

                        .icon {
                            color: #303133;
                            cursor: pointer;
                            padding-top: 8px;
                        }
                    }

                    .input-append {
                        width: 112px;
                        height: 40px;
                        margin-left: 8px;
                        border-radius: 4px;
                        cursor: pointer;
                    }
                }

                .other-link {
                    margin-top: 17px;
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    align-items: center;
                }

                .text {
                    color: #909399;
                    font-size: 14px;
                    text-align: left;
                    white-space: nowrap;
                    cursor: pointer;
                }

                .other-login {
                    margin-top: 40px;
                    display: flex;
                    flex-direction: row;
                    align-items: center;

                    .icon {
                        width: 16px;
                        height: 16px;
                        margin: 0 12px 0 8px;
                        cursor: pointer;
                    }
                }
            }

            .btn {
                margin-top: 26px;
                width: 100%;
                height: 40px;
            }

            .mess-text {
                font-weight: 400;
                font-size: 14px;
                line-height: 24px;
                color: #ed2525;
            }
        }

        .copyright-wrap {
            position: absolute;
            bottom: 24px;
            font-weight: 400;
            font-size: 12px;
            color: #909399;
            line-height: 20px;
        }
    }
}

@media screen and (min-width: 1920px) {
    .login-wrap .box-wrap {
        width: 811px;
    }
}

@media screen and (max-width: 1180px) {
    .login-wrap .box-wrap {
        width: 498px;

        .form-box {
            width: 246px;
        }
    }

    .login-wrap .logo-wrap {
        top: 66px;
        left: 66px;

        .icon {
            width: 34px;
            height: 38px;
        }

        .text {
            font-size: 29px;
            margin-left: 10px;
            color: #486ff2;
        }
    }

    .login-wrap .introduce-text {
        font-size: 11px;
        top: 120px;
        left: 66px;
    }
}

@media screen and (max-width: 968px) {
    .login-wrap .img-wrap {
        display: none;
    }

    .login-wrap .logo-wrap {
        display: none;
    }

    .login-wrap .introduce-text {
        display: none;
    }

    .login-wrap .box-wrap {
        width: 100%;

        .copyright-wrap {
            position: absolute;
            bottom: 10px;
            padding: 0 10px;
            text-align: center;
        }
    }
}
</style>
