<template>
    <div class="register">
        <div class="main">
            <div class="container a-container">
                <el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="form" id="a-form">
                    <h2 class="form_title title">{{ $t('register.974236-0') }}</h2>

                    <el-form-item prop="username">
                        <div class="username">
                            <i class="el-icon-user icon"></i>
                            <input class="form__input" v-model="registerForm.username" auto-complete="off" type="text"
                                :placeholder="$t('login.989807-1')" />
                        </div>
                    </el-form-item>

                    <el-form-item prop="phonenumber" :class="{ 'is-null': isacount }">
                        <div class="telphone">
                            <svg-icon icon-class="phone" class="icon" />
                            <input v-model="registerForm.phonenumber" class="form__input" type="text"
                                auto-complete="off" :placeholder="$t('register.974236-3')" />
                        </div>
                    </el-form-item>

                    <el-form-item prop="password" :class="{ 'is-null': isphone }">
                        <div class="password">
                            <svg-icon icon-class="password" class="icon left" />
                            <input class="form__input" v-model="registerForm.password" auto-complete="off"
                                :type="pwdtype" :placeholder="$t('login.989807-5')" @@keyup.enter="handleRegister" />
                            <span class="el-icon-view icon right" @click="changepwdtype()"></span>
                        </div>
                    </el-form-item>

                    <el-form-item prop="confirmPassword" :class="{ 'is-null': ispwd }">
                        <div class="password">
                            <svg-icon icon-class="password" class="icon left" />
                            <input class="form__input" v-model="registerForm.confirmPassword" auto-complete="off"
                                :type="cpwdtype" :placeholder="$t('register.confirm')" @@keyup.enter="handleRegister" />
                            <span class="el-icon-view icon right" @click="changecpwdtype()"></span>
                        </div>
                    </el-form-item>

                    <el-form-item v-if="captchaOnOff" prop="code" :class="{ 'is-null': iscomfirmpwd }">
                        <div style="width: 350px" class="check">
                            <svg-icon icon-class="auth-code" class="icon" />
                            <input v-model="registerForm.code" auto-complete="off" class="form__input__code" type="text"
                                :placeholder="$t('login.989807-6')" />
                            <div class="login-code">
                                <img :src="codeUrl" @click="getCode" style="float: right" />
                            </div>
                        </div>
                    </el-form-item>

                    <el-form-item :class="{ 'is-null': true }">
                        <div style="display: flex; text-align: center; justify-content: center">
                            <el-link style="float: left; color: #a0a5a8; font-weight: normal" href="https://fastbee.cn/"
                                :underline="false" target="_blank">{{ $t('register.974236-7') }}</el-link>
                            <el-link style="float: left; color: #a0a5a8; font-weight: normal; margin-left: 20px"
                                href="https://fastbee.cn/doc" :underline="false" target="_blank">{{
                                    $t('register.974236-8') }}</el-link>
                            <router-link style="float: left; color: #a0a5a8; font-weight: normal; margin-left: 20px"
                                :to="{ path: '/login', query: this.$route.query }">{{ $t('register.974236-9')
                                }}</router-link>
                        </div>
                    </el-form-item>

                    <el-button class="form__button button submit" v-if="!bindAccount" :loading="loading" type="primary"
                        @click.native.prevent="handleRegister">
                        <span v-if="!loading">{{ $t('register.register') }}</span>
                        <span v-else>{{ $t('register.register') }}</span>
                    </el-button>
                    <el-button v-else :loading="loading" class="form__button button"
                        @click.native.prevent="handleRegister">
                        <span v-if="!loading">{{ $t('register.bind') }}</span>
                        <span v-else>{{ $t('register.binding') }}</span>
                    </el-button>
                </el-form>
            </div>

            <div class="switch" id="switch-cnt">
                <div :class="{ switch__circle: true }"></div>
                <div class="switch__container" id="switch-c1">
                    <div style="display: flex; align-items: center">
                        <img src="../assets/logo/fastbee.png" alt="logo" style="width: 60px" />
                        <h2 class="switch__title title" style="margin-left: 10px">{{ $t('register.974236-1') }}</h2>
                    </div>
                    <p class="switch__description description">FastBee开源物联网平台，简单易用，更适合中小企业和个人学习使用的物联网平台。</p>
                    <img src="../assets/images/login3.jpeg" alt="logo" style="width: 220px; height: 220px" />
                </div>
            </div>
        </div>
        <!--  底部  -->
        <div class="el-register-footer">
            <span>
                Copyright © 2023
                <a target="_blank" href="http://fastbee.cn">FastBee</a>
                All Rights Reserved.
            </span>
        </div>
    </div>
</template>

<script>
import 'element-ui/lib/theme-chalk/display.css';
import logo from '@/assets/logo/logo.gif';
import { getCodeImg, checkBindId, bindRegister } from '@/api/login';
import { register } from '@/api/iot/tool';

export default {
    name: 'Register',
    data() {
        const equalToPassword = (rule, value, callback) => {
            if (this.registerForm.password !== value) {
                callback(new Error(this.$t('register.inconsistent')));
            } else {
                callback();
            }
        };
        return {
            isacount: false,
            ispwd: false,
            isphone: false,
            iscode: false,
            iscomfirmpwd: false,
            //控制密码可见
            pwdtype: 'password',
            //控制确认密码可见
            cpwdtype: 'password',

            logo,
            codeUrl: '',
            registerForm: {
                username: '',
                phonenumber: '',
                password: '',
                confirmPassword: '',
                code: '',
                uuid: '',
                bindId: '',
                sourceType: 1,
            },
            registerRules: {
                username: [
                    {
                        required: true,
                        trigger: 'blur',
                        message: this.$t('login.989807-20'),
                    },
                    {
                        min: 2,
                        max: 20,
                        message: this.$t('register.accountCount'),
                        trigger: 'blur',
                    },
                ],
                phonenumber: [
                    {
                        required: true,
                        trigger: 'blur',
                        message: this.$t('register.enterPhone'),
                    },
                    {
                        min: 11,
                        max: 11,
                        message: this.$t('register.phoneLength'),
                        trigger: 'blur',
                    },
                ],
                password: [
                    {
                        required: true,
                        trigger: 'blur',
                        message: this.$t('login.989807-21'),
                    },
                    {
                        min: 5,
                        max: 20,
                        message: this.$t('register.passWordlength'),
                        trigger: 'blur',
                    },
                    {
                        trigger: 'blur',
                        validator: (rule, value, callback) => {
                            // 两种及以上
                            var passwordreg = /(?![A-Z]*$)(?![a-z]*$)(?![0-9]*$)(?![^a-zA-Z0-9]*$)/
                            if (!passwordreg.test(value)) {
                                callback(new Error(this.$t('system.dept.780956-30')))
                            }
                            //   四种
                            // var passwordreg = /(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9])/
                            // if (!passwordreg.test(value)) {
                            //     callback(new Error('密码必须包含大写字母、小写字母、数字、特殊符号'))
                            // }
                            else {
                                callback()
                            }
                        }
                    },
                ],
                confirmPassword: [
                    {
                        required: true,
                        trigger: 'blur',
                        message: this.$t('register.passwordAgain'),
                    },
                    {
                        required: true,
                        validator: equalToPassword,
                        trigger: 'blur',
                    },
                ],
                code: [
                    {
                        required: true,
                        trigger: 'change',
                        message: this.$t('login.989807-22'),
                    },
                ],
            },
            loading: false,
            captchaOnOff: true,
            bindAccount: false,
        };
    },
    created() {
        this.checkBind();
        this.getCode();
    },
    methods: {
        changepwdtype() {
            this.pwdtype == 'password' ? (this.pwdtype = 'text') : (this.pwdtype = 'password');
        },
        changecpwdtype() {
            this.cpwdtype == 'password' ? (this.cpwdtype = 'text') : (this.cpwdtype = 'password');
        },
        checkBind() {
            const query = this.$route.query;
            const bindId = query.bindId;
            if (bindId === undefined || bindId === null) {
                this.bindAccount = false;
            } else {
                this.bindAccount = true;
                checkBindId(bindId).then((res) => {
                    this.bindAccount = res.bindAccount === undefined ? true : res.bindAccount;
                    if (this.bindAccount) {
                        this.registerForm.bindId = bindId;
                    } else {
                        this.registerForm.bindId = '';
                        this.$router.push({
                            query: {},
                        });
                    }
                });
            }
        },

        getCode() {
            getCodeImg().then((res) => {
                this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff;
                if (this.captchaOnOff) {
                    this.codeUrl = 'data:image/gif;base64,' + res.img;
                    this.registerForm.uuid = res.uuid;
                }
            });
        },
        qqLogin() {
            window.location.href = 'http://localhost:8080/auth/render/qq';
        },
        authLogin() {
            this.$alert('第三方登录正在集成中...', '提示消息', {
                confirmButtonText: '确定',
                callback: (action) => {
                    this.$message({
                        type: 'info',
                        message: `action: ${action}`,
                    });
                },
            });
        },
        handleRegister() {
            // 校验用户名：是否符合长度要求（2-20字符）
            this.isacount = !(this.registerRules.username[0].required && this.registerForm.username.length >= 2 && this.registerForm.username.length <= 20);

            // 校验电话号码：是否符合长度要求（11位）
            this.isphone = !(this.registerRules.phonenumber[0].required && this.registerForm.phonenumber.length === 11);

            // 校验密码：是否符合长度要求（5-20字符）
            this.ispwd = !(this.registerRules.password.required && this.registerForm.password.length >= 5 && this.registerForm.password.length <= 20);
            // 校验确认密码：是否与密码相等
            this.iscomfirmpwd = !(this.registerRules.confirmPassword[0].required && (this.registerForm.confirmPassword !== '' && this.registerForm.confirmPassword === this.registerForm.password));
            this.$refs.registerForm.validate((valid) => {
                if (valid) {
                    this.loading = true;
                    if (this.bindAccount) {
                        bindRegister(this.registerForm)
                            .then((res) => {
                                this.innerRegister(res);
                            })
                            .catch(() => {
                                this.loading = false;
                                if (this.captchaOnOff) {
                                    this.getCode();
                                }
                            });
                    } else {
                        register(this.registerForm)
                            .then((res) => {
                                this.innerRegister(res);
                            })
                            .catch(() => {
                                this.loading = false;
                                if (this.captchaOnOff) {
                                    this.getCode();
                                }
                            });
                    }
                }
            });
        },
        innerRegister(res) {
            const username = this.registerForm.username;
            this.$alert("<font color='red'> " + this.$t('register.congratulations') + username + this.$t('register.registered') + ' </font>', this.$t('register.system'), {
                dangerouslyUseHTMLString: true,
                type: 'success',
            })
                .then(() => {
                    this.$router.push('/login');
                })
                .catch(() => { });
        },
    },
};
</script>

<style lang="scss" scoped>
*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
}

.register {
    height: 100%;
    overflow: auto;
    width: 100%;
    // height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    background: repeating-linear-gradient(to bottom right, #cee3fc 20%, #a8c7ed87 50%, #ffffffe7 50%, #ffffffc2 80%), url('../assets/images/bg.png');
    color: #a0a5a8;

    .main {
        position: relative;
        width: 1100px;
        // min-width: 1100px;
        // min-height: 600px;
        height: 600px;
        padding: 25px;
        background-color: #fff;
        box-shadow: 10px 0 10px #d0d5dd;
        border-radius: 12px;
        overflow: hidden;
    }

    .container {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        width: 600px;
        height: 100%;
        padding: 25px;
        background-color: #fff;
        transition: 1.25s;
    }

    .form {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 100%;
        height: 100%;
    }

    .username {
        position: relative;

        // margin-bottom: 1.5rem;
        .icon {
            position: absolute;
            top: 50%;
            left: 0.5rem;
            transform: translateY(-50%);
            color: #888;
        }

        .form__input {
            padding-left: 2rem;
            /* 确保输入框内文本不会被图标遮挡 */
        }
    }

    .is-null {
        margin-top: 20px;
    }

    .password {
        position: relative;

        .icon {
            position: absolute;
            top: 50%;
            color: #888;
        }

        .icon.left {
            left: 0.5rem;
            transform: translateY(-50%);
        }

        .icon.right {
            right: 0.5rem;
            transform: translateY(-50%);
        }

        .form__input {
            padding-left: 2rem;
            /* 确保输入框内文本不会被左侧图标遮挡 */
            padding-right: 2.5rem;
            /* 确保输入框内文本不会被右侧图标遮挡 */
        }
    }

    .check {
        position: relative;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;

        // margin-bottom: 1.5rem;
        .icon {
            position: absolute;
            top: 50%;
            left: 0.5rem;
            transform: translateY(-50%);
            color: #888;
        }

        .form__input__code {
            padding-left: 2rem;
            /* 确保输入框内文本不会被图标遮挡 */
        }
    }

    .remember {
        width: 350px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .telphone {
        position: relative;

        // margin-bottom: 1.5rem;
        .icon {
            position: absolute;
            top: 50%;
            left: 0.5rem;
            transform: translateY(-50%);
            color: #888;
        }

        .form__input {
            padding-left: 2rem;
            /* 确保输入框内文本不会被图标遮挡 */
        }
    }

    .form__icon {
        object-fit: contain;
        width: 30px;
        margin: 0 5px;
        opacity: 0.5;
        transition: 0.15s;
    }

    .form__icon:hover {
        opacity: 1;
        transition: 0.15s;
        cursor: pointer;
    }

    .form__input {
        width: 350px;
        height: 40px;
        margin: 4px 0;
        padding-left: 25px;
        font-size: 13px;
        letter-spacing: 0.15px;
        border: none;
        outline: none;
        font-family: 'Montserrat', sans-serif;
        background-color: #fff;
        transition: 0.25s ease;
        border-radius: 8px;
        box-shadow: inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #f9f9f9;
    }

    .form__input__code {
        width: 66%;
        height: 40px;
        margin: 4px 0;
        padding-left: 25px;
        font-size: 13px;
        letter-spacing: 0.15px;
        border: none;
        outline: none;
        font-family: 'Montserrat', sans-serif;
        background-color: #fff;
        transition: 0.25s ease;
        border-radius: 8px;
        box-shadow: inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #f9f9f9;
    }

    .form__input:focus {
        box-shadow: inset 4px 4px 4px #d1d9e6, inset -4px -4px 4px #f9f9f9;
    }

    .form__input__code:focus {
        box-shadow: inset 4px 4px 4px #d1d9e6, inset -4px -4px 4px #f9f9f9;
    }

    .form__span {
        font-size: 15px;
        margin-top: 5px;
        margin-bottom: 12px;
        color: #0f73ee9e;
    }

    .form__link {
        display: none;
        color: #181818;
        font-size: 15px;
        margin-top: 25px;
        border-bottom: 1px solid #a0a5a8;
        line-height: 2;
    }

    .title {
        font-size: 34px;
        font-weight: 700;
        line-height: 3;
        color: #181818;
    }

    .description {
        font-size: 14px;
        letter-spacing: 0.25px;
        text-align: center;
        line-height: 1.6;
    }

    .button {
        width: 180px;
        height: 50px;
        border-radius: 25px;
        margin-top: 20px;
        font-weight: 700;
        font-size: 14px;
        letter-spacing: 1.15px;
        background-color: #0f73ee;
        color: #f9f9f9;
        box-shadow: 8px 8px 16px #d1d9e6, -8px -8px 16px #f9f9f9;
        border: none;
        outline: none;
    }

    /**/
    .a-container {
        z-index: 100;
        left: calc(100% - 600px);
    }

    .switch {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 500px;
        padding: 50px;
        z-index: 200;
        transition: 1.25s;
        background-color: #fff;
        overflow: hidden;
    }

    .switch__circle {
        position: absolute;
        width: 450px;
        height: 450px;
        border-radius: 50%;
        background-color: #fff;
        box-shadow: inset 8px 8px 12px #dde6f4, inset -8px -8px 12px #f9f9f9;
        bottom: -60%;
        left: -60%;
        transition: 1.25s;
    }

    .switch__circle--t {
        top: -30%;
        left: 60%;
        width: 300px;
        height: 300px;
    }

    .switch__container {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        position: absolute;
        width: 400px;
        padding: 50px 55px;
        transition: 1.25s;
    }

    /**/

    .tabs {
        width: 400px;
        border-bottom: none;
        // border: solid white 1px;
        box-shadow: none !important;
    }

    .tabs ::v-deep .el-tabs__nav {
        background-color: white;
        box-shadow: none !important;
        text-decoration: none;
        /* 设置导航栏背景颜色 */
    }

    /*去掉切换时el-tab-pane底部的蓝色下划线*/
    ::v-deep .el-tabs__active-bar {
        background-color: transparent !important;
    }

    /*去掉tabs底部的下划线*/
    ::v-deep .el-tabs__nav-wrap::after {
        position: static !important;
    }

    .tabs ::v-deep .el-tabs__item {
        font-size: 20px;
        /* 设置字体大小 */
        border: none;
        /* 去除默认边框 */
    }

    .bindAccountTitle {
        margin: 0px auto 30px auto;
        text-align: center;
        color: #333;
        font-size: 24px;
    }

    .tabs-login {
        margin: 20px auto 0 auto;
        z-index: 1000;
        max-width: 350px;
    }

    .login-form {
        margin: 10px 0 0 0;
        z-index: 1000;
        max-width: 350px;

        input {
            height: 38px;
            background-color: #f1f1f1;
            color: #666;
        }

        .input-icon {
            height: 39px;
            width: 14px;
            margin-left: 2px;
        }
    }

    .login-code {
        width: 34%;
        float: right;

        img {
            cursor: pointer;
            vertical-align: middle;
            border-radius: 3px;
            height: 38px;
        }
    }

    .el-register-footer {
        height: 40px;
        line-height: 40px;
        position: fixed;
        bottom: 0;
        width: 100%;
        text-align: center;
        color: #333;
        font-family: Arial;
        font-size: 12px;
        letter-spacing: 1px;
    }

    .alert-box-wrap {
        border: 1px solid #f78e21;

        .alert-message-wrap {
            font-size: 14px;
            font-family: '微软雅黑';
            color: rgba(197, 41, 41, 0.856);
            margin-left: 10px;
        }
    }
}

@media (max-width: 1200px) {
    .main {
        transform: scale(0.9);

        .switch {
            width: 40%;
        }

        .container {
            width: 60%;
        }
    }
}

@media (max-width: 1000px) {
    .main {
        transform: scale(0.8);

        .switch {
            width: 40%;
        }

        .container {
            width: 60%;
        }
    }
}

@media (max-width: 800px) {
    .main {
        transform: scale(0.9);
        display: flex;
        justify-content: center;
        /* 水平居中 */
        align-items: center;
        /* 垂直居中 */
        height: 100vh;
        /* 设置容器高度为视口高度，实现垂直居中 */
        width: 600px;

        .a-container {
            position: absolute;
            z-index: 100;
            left: 50%;
            /* 将元素的左边缘移动到父容器的水平中心 */
            transform: translateX(-50%);
            /* 通过向左平移自身宽度的一半来实现水平居中 */
        }

        .switch {
            display: none;
        }

        .form__link {
            display: block;
            color: #181818;
            font-size: 15px;
            margin-top: 25px;
            border-bottom: 1px solid #a0a5a8;
            line-height: 2;
        }
    }
}

@media (max-width: 600px) {
    .register {
        background: repeating-linear-gradient(to bottom right, #cee3fc 20%, #a8c7ed87 50%, #ffffffe7 50%, #ffffffc2 80%), url('../assets/images/login.png');

        .main {
            transform: scale(0.9);
            display: flex;
            justify-content: center;
            /* 水平居中 */
            align-items: center;
            /* 垂直居中 */
            height: 75vh;
            width: 100vh;
            box-shadow: 10px 0 10px #5c7aaa;

            .a-container {
                //background: linear-gradient(to bottom, #0f73ee 25%, #ffffff 25%);
                position: absolute;
                width: 100%;
                z-index: 100;
                left: 50%;
                /* 将元素的左边缘移动到父容器的水平中心 */
                transform: translateX(-50%);
                /* 通过向左平移自身宽度的一半来实现水平居中 */
            }

            .switch {
                display: none;
            }

            .form__link {
                display: block;
                color: #181818;
                font-size: 15px;
                margin-top: 25px;
                border-bottom: 1px solid #a0a5a8;
                line-height: 2;
            }
        }
    }
}
</style>
