<template>
    <div class="login">
        <div class="login-bar">
            <div class="form-bar">
                <h3 class="title">智慧仓储管理平台</h3>
                <el-tabs
                    v-model="activeName"
                    style="width: 82%; margin: 0 auto"
                >
                    <el-tab-pane label="账号登录" name="account"></el-tab-pane>
                    <el-tab-pane label="手机登录" name="phone"></el-tab-pane>
                </el-tabs>
                <el-form
                    ref="loginForm"
                    :model="loginForm"
                    :rules="loginRules"
                    class="login-form"
                >
                    <el-form-item
                        prop="username"
                        v-if="activeName == 'account'"
                    >
                        <el-input
                            v-model="loginForm.username"
                            type="text"
                            auto-complete="off"
                            placeholder="账号"
                        >
                            <svg-icon
                                slot="prefix"
                                icon-class="user"
                                class="el-input__icon input-icon"
                            />
                        </el-input>
                    </el-form-item>
                    <el-form-item
                        prop="password"
                        v-if="activeName == 'account'"
                    >
                        <el-input
                            v-model="loginForm.password"
                            type="password"
                            auto-complete="off"
                            placeholder="密码"
                            show-password
                            @keyup.enter.native="handleLogin"
                        >
                            <svg-icon
                                slot="prefix"
                                icon-class="password"
                                class="el-input__icon input-icon"
                            />
                        </el-input>
                    </el-form-item>
                    <el-form-item
                        prop="code"
                        v-if="captchaEnabled && activeName == 'account'"
                        class="code-box"
                    >
                        <el-input
                            v-model="loginForm.code"
                            auto-complete="off"
                            placeholder="图形验证码"
                            style="width: 65%"
                            @keyup.enter.native="handleLogin"
                        >
                            <svg-icon
                                slot="prefix"
                                icon-class="validCode"
                                class="el-input__icon input-icon"
                            />
                        </el-input>
                        <div class="login-code">
                            <img
                                :src="codeUrl"
                                @click="getCode"
                                class="login-code-img"
                            />
                        </div>
                    </el-form-item>
                    <el-form-item
                        style="width: 100%"
                        v-if="activeName == 'account'"
                    >
                        <el-button
                            :loading="loading"
                            size="medium"
                            type="primary"
                            style="width: 100%"
                            @click.native.prevent="handleLogin"
                        >
                            <span v-if="!loading">登 录</span>
                            <span v-else>登 录 中...</span>
                        </el-button>
                        <div style="float: right" v-if="register">
                            <!--          <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>-->
                            <router-link class="link-type" :to="'/register'"
                                >立即注册</router-link
                            >
                        </div>
                    </el-form-item>

                    <el-form-item prop="phone" v-if="activeName == 'phone'">
                        <el-input
                            v-model="loginForm.phone"
                            type="text"
                            :readonly="readonlyFlag"
                            @focus="handleInputClick"
                            auto-complete="off"
                            placeholder="手机号"
                        >
                            <svg-icon
                                slot="prefix"
                                icon-class="phone"
                                class="el-input__icon input-icon"
                            />
                        </el-input>
                    </el-form-item>
                    <el-form-item
                        prop="textCode"
                        v-if="activeName == 'phone'"
                        class="code-box"
                    >
                        <el-input
                            v-model="loginForm.textCode"
                            auto-complete="off"
                            placeholder="短信验证码"
                            style="width: 65%"
                        >
                            <svg-icon
                                slot="prefix"
                                icon-class="validCode"
                                class="el-input__icon input-icon"
                            />
                        </el-input>
                        <div class="login-code">
                            <!-- <div class="login-code-img" style="border: 1px solid rgb(220, 223, 230);" @click="getTextCode">获取验证码</div> -->
                            <div
                                class="login-code-img"
                                style="border: 1px solid rgb(220, 223, 230)"
                                v-show="show === 1"
                                @click="getTextCode"
                            >
                                获取验证码
                            </div>
                            <div
                                class="login-code-img"
                                style="border: 1px solid rgb(220, 223, 230)"
                                v-show="show === 2"
                            >
                                {{ count }} s
                            </div>
                            <div
                                class="login-code-img"
                                style="border: 1px solid rgb(220, 223, 230)"
                                v-show="show === 3"
                                @click="getTextCode"
                            >
                                重发
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item
                        style="width: 100%"
                        v-if="activeName == 'phone'"
                    >
                        <el-button
                            :loading="loading"
                            size="medium"
                            type="primary"
                            style="width: 100%"
                            @click.native.prevent="textLogin"
                        >
                            <span v-if="!loading">登 录</span>
                            <span v-else>登 录 中...</span>
                        </el-button>
                        <div style="float: right" v-if="register">
                            <!--          <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>-->
                            <router-link class="link-type" :to="'/register'"
                                >立即注册</router-link
                            >
                        </div>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <!--  底部  -->
        <div class="el-login-footer">
            <span>Copyright © 2018-2023 ruoyi.vip All Rights Reserved.</span>
        </div>
    </div>
</template>

<script>
import { getCodeImg, sendCode, loginByMall } from '@/api/login'
import Cookies from 'js-cookie'
import { encrypt, decrypt } from '@/utils/jsencrypt'

export default {
    name: 'Login',
    data() {
        return {
            codeUrl: '',
            loginForm: {
                username: '',
                password: '',
                phone: '',
                rememberMe: false,
                code: '',
                uuid: '',
            },
            loginRules: {
                username: [
                    {
                        required: true,
                        trigger: 'blur',
                        message: '请输入您的账号',
                    },
                ],
                phone: [
                    {
                        required: true,
                        trigger: 'blur',
                        message: '请输入您的手机号',
                    },
                ],
                textCode: [
                    {
                        required: true,
                        trigger: 'blur',
                        message: '请输入短信验证码',
                    },
                ],
                password: [
                    {
                        required: true,
                        trigger: 'blur',
                        message: '请输入您的密码',
                    },
                ],
                code: [
                    {
                        required: true,
                        trigger: 'change',
                        message: '请输入验证码',
                    },
                ],
            },
            loading: false,
            // 验证码开关
            captchaEnabled: true,
            // 注册开关
            register: false,
            redirect: undefined,
            activeName: 'account',
            readonlyFlag: true,
            show: 1,
            count: '',
            timer: null,
            loginParams: {}, //登录页面地址栏参数
        }
    },
    watch: {
        $route: {
            handler: function (route) {
                this.redirect = route.query && route.query.redirect
                // console.log(this.$route.query.redirect.split("?"))
                // console.log(this.$route.query.redirect.split("?")[1].split("&"))
                if (this.$route.query.redirect.split('?').length > 1) {
                    let arr =
                        this.$route.query.redirect.split('?')[1].split('&') ||
                        []
                    arr.forEach((item, index) => {
                        this.$set(
                            this.loginParams,
                            item.split('=')[0] + '',
                            item.split('=')[1],
                        )
                    })
                }
            },
            immediate: true,
        },
    },
    created() {
        // console.log(this.$route.query.redirect.split("?")[1])
        if (JSON.stringify(this.loginParams) != '{}') {
            this.jumpLogin()
        }
        this.getCode()
        this.getCookie()
    },
    methods: {
        getCode() {
            getCodeImg().then((res) => {
                this.captchaEnabled =
                    res.captchaEnabled === undefined ? true : res.captchaEnabled
                if (this.captchaEnabled) {
                    this.codeUrl = 'data:image/gif;base64,' + res.img
                    this.loginForm.uuid = res.uuid
                }
            })
        },
        //防止手机号自动充填
        handleInputClick() {
            this.readonlyFlag = false
        },
        //获取短信验证码
        getTextCode() {
            const regExp = /^1[3456789]\d{9}$/
            if (regExp.test(this.loginForm.phone)) {
                console.log('手机号格式正确')
                sendCode({ phone: this.loginForm.phone }).then((res) => {
                    if (res.code == 200) {
                        this.$modal.msgSuccess('发送成功')
                        const TIME_COUNT = 60
                        if (!this.timer) {
                            this.count = TIME_COUNT
                            this.show = 2
                            this.timer = setInterval(() => {
                                if (
                                    this.count > 0 &&
                                    this.count <= TIME_COUNT
                                ) {
                                    this.count--
                                } else {
                                    this.show = 3
                                    clearInterval(this.timer)
                                    this.timer = null
                                }
                            }, 1000)
                        }
                    }
                })
            } else {
                this.$modal.msgError('请输入正确手机号')
            }
        },
        //短信登录
        textLogin() {
            // checkCode
            console.log(this.loginForm)
            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')
                    }
                    console.log(this.loginForm)
                    this.$store
                        .dispatch('textLogin', this.loginForm)
                        .then(() => {
                            this.$router.push({ path: '/' }).catch(() => {})
                        })
                        .catch(() => {
                            this.loading = false
                        })
                }
            })
        },
        //南网登录
        jumpLogin() {
            this.loading = true
            let param = {
                token: this.loginParams.token,
                username: this.loginParams.userName,
            }
            // console.log(param)
            this.$store
                .dispatch('ssoLogin', param)
                .then(() => {
                    //成功后会跳转页面入首页
                    this.$router.push({ path: '/' }).catch(() => {})
                })
                .catch(() => {
                    this.loading = false
                    //失败返回南网登录页面
                    // window.location.replace('https://test-sso.csgmall.com.cn/?client_id=549OWptc&theme=zhgc_storage&response_type=code&redirect_uri=https%3A%2F%2Ftest-cc.zhgkxt.com')
                })
        },
        getCookie() {
            const username = Cookies.get('username')
            const password = Cookies.get('password')
            const rememberMe = Cookies.get('rememberMe')
            this.loginForm = {
                username:
                    username === undefined ? this.loginForm.username : username,
                password:
                    password === undefined
                        ? this.loginForm.password
                        : decrypt(password),
                rememberMe:
                    rememberMe === undefined ? false : Boolean(rememberMe),
            }
        },
        handleLogin() {
            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')
                    }
                    this.$store
                        .dispatch('Login', this.loginForm)
                        .then(() => {
                            // if (localStorage.getItem('isCode') == 1) {
                            //     this.$router
                            //         .push({ path: '/resetPassword' })
                            //         .catch(() => {})
                            // } else {
                            //     this.$router.push({ path: '/' }).catch(() => {})
                            // }
                            this.$router.push({ path: '/' }).catch(() => {})
                        })
                        .catch(() => {
                            this.loading = false
                            if (this.captchaEnabled) {
                                this.getCode()
                            }
                        })
                }
            })
        },
    },
    watch: {
        activeName: {
            handler(newVal) {
                this.$refs['loginForm'].clearValidate()
            },
        },
    },
}
</script>

<style rel="stylesheet/scss" lang="scss">
.login {
  //display: flex;
  //justify-content: center;
  //align-items: center;
  position: relative;
  height: 100%;
  background-image: url('../assets/images/login.png');
  background-size: 100% 100%;
  //background: #1891FF;
}

.title {
    margin: 0px auto 30px auto;
    //text-align: center;
    color: #707070;
}

.login-bar {
    position: absolute;
    height: auto;
    top: 20%;
    left: 14%;
    width: auto;
    height: 500px;
    border-radius: 6px;
    display: flex;
    background: #fff;
    text-align: center;
    padding-top: 40px;
}

.form-bar {
    //height: 500px;
    background: #fff;
}

.login-form {
    //border-radius: 6px;
    //height: 100%;
    background: #ffffff;
    width: 400px;
    padding: 25px 25px 5px 25px;

    .el-input {
        height: 45px;

        input {
            height: 38px;
        }
    }

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

.login-tip {
    font-size: 13px;
    text-align: center;
    color: #bfbfbf;
}

.login-code {
    // width: 30%;
    flex: 1;
    height: 38px;
    // float: right;
    margin-left: 12px;

    img {
        width: 100%;
        cursor: pointer;
        vertical-align: middle;
    }
}

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

.login-code-img {
    height: 38px;
    width: 100%;
}

.code-box .el-form-item__content {
    display: flex;
}
</style>
