<script>
import { getConfig } from '@/api/user'
import { getSocialsLoginList, getLoginConfig, getTicket, getTicketStatus, socialsLogin } from '@/api/permission/socialsUser'
import qs from 'qs'

export default {
    name: 'Login',
    data() {
        return {
            loginForm: {
                account: '',
                password: '',
                code: '',
                origin: 'password'
            },
            loginRules: {
                account: [
                    { required: true, trigger: 'blur', message: this.$t('login.accountTip') }
                ],
                password: [
                    { required: true, trigger: 'blur', message: this.$t('login.passwordTip') }
                ],
                code: [
                    { required: true, trigger: 'blur', message: this.$t('login.codeTip') }
                ],
            },
            imgUrl: "",
            timestamp: '',
            capsTooltip: false,
            loading: false,
            showDialog: false,
            needCode: false,
            codeLength: 4,
            redirect: undefined,
            showTxt: false,
            otherQuery: {},
            active: 1,
            listenerLoad: false,
            visible: false,
            show: false,
            ssoLoading: true,
            isSso: false,
            preUrl: '',
            ssoUrl: '',
            ssoTicket: "",
            ticketParams: "",
            ssoTimer: null,
            socialsList: [],
            dialogVisible: false,
            tenantSocialList: [],
            redirectUrl: '',
        }
    },
    computed: {
        sysConfig() {
            return this.$store.state.settings.sysConfig
        },
        loginLoading() {
            return this.$store.state.user.loginLoading
        }
    },
    watch: {
        loginLoading(val) {
            if (!val) this.loading = false
        },
        visible(val) {
            if (!val) {
                this.loading = false
                this.show = false
                this.clearTimer()
            }
        },
        $route: {
            handler: function (route) {
                const query = route.query
                if (query) {
                    this.redirect = query.redirect
                    this.otherQuery = this.getOtherQuery(query)
                }
            },
            immediate: true
        }
    },
    created() {
        const _this = this
        document.onkeydown = function (e) {
            const { keyCode } = e
            if (keyCode === 13) {
                _this.handleLogin()
            }
        }
        if (this.needCode) this.changeImg()
        this.getLoginConfig()
    },
    mounted() {
        this.$store.commit('user/SET_LOGIN_LOADING', false)
        this.setShowTxt()
        window.onresize = () => {
            this.setShowTxt()
        }

        if (this.otherQuery.code) {
            let params = {
                code: this.otherQuery.code,
                redirectUri: "https://www.shidaiyun.net:18082"
            };
            this.$store.commit("user/SET_LOGIN_LOADING", true);
            this.$store
                .dispatch("user/ssoLogin", params)
                .then(res => {
                    console.log(res);
                    this.$router.push({
                        path: "/home"
                    });
                })
                .catch(() => {
                    this.$store.commit("user/SET_LOGIN_LOADING", false);
                });
        }
    },
    destroyed() {
        document.onkeydown = function (e) {
            const { keyCode } = e
            if (keyCode === 13) { }
        }
    },
    methods: {
        setShowTxt() {
            if (document.documentElement.clientHeight <= 840) {
                this.showTxt = false
            } else {
                this.showTxt = true
            }
        },
        checkCapslock(e) {
            const { key } = e
            this.capsTooltip = key && key.length === 1 && key >= 'A' && key <= 'Z'
        },
        getConfig(val) {
            if (!val) return
            getConfig(this.loginForm.account).then(res => {
                this.needCode = !!res.data.enableVerificationCode
                if (this.needCode) {
                    this.codeLength = res.data.verificationCodeNumber || 4
                    this.changeImg()
                }
            })
        },
        handleLogin() {
            if (this.loading) return
            this.$refs.loginForm.validate(valid => {
                if (valid) {
                    this.loading = true
                    this.$store.commit('user/SET_LOGIN_LOADING', true)
                    const query = {
                        ...this.loginForm,
                        timestamp: this.timestamp,
                        jnpf_ticket: this.ssoTicket
                    }

                    console.log(query)

                    this.$store.dispatch('user/login', query).then(res => {
                        this.$message.success('登录成功，正在跳转')
                        this.$router.push({
                            path: this.redirect || '/home',
                            query: this.otherQuery
                        })
                    }).catch((res) => {
                        if (this.needCode) {
                            this.changeImg()
                            this.loginForm.code = ''
                        }
                        this.$store.commit('user/SET_LOGIN_LOADING', false)
                        this.$message.error(res.msg)
                    })
                } else {
                    return false
                }
            })
        },
        changeImg() {
            let timestamp = Math.random()
            this.timestamp = timestamp
            this.imgUrl = `/api/oauth/ImageCode/${this.codeLength || 4}/${timestamp}`
        },
        getOtherQuery(query) {
            return Object.keys(query).reduce((acc, cur) => {
                if (cur !== 'redirect') {
                    acc[cur] = query[cur]
                }
                return acc
            }, {})
        },
        otherLoginList() {
            this.socialsList = []
            getSocialsLoginList().then(res => {
                this.socialsList = res.data.filter(item => { return item.isLatest == "true" });
            })
        },
        otherLogin(data) {
            getTicket().then(res => {
                this.ssoTicket = res.data
                if (this.winURL && !this.winURL.closed) {
                    this.winURL.location.replace(this.redirectUrl)
                    this.winURL.focus()
                    return
                }
                this.socialsList.forEach(item => {
                    if (data == item.enname) {
                        let renderUrl = item.renderUrl.replace('JNPF_TICKET', this.ssoTicket)
                        this.redirectUrl = renderUrl
                    }
                })
                var iWidth = 750; //弹出窗口的宽度;
                var iHeight = 500;//弹出窗口的高度;
                var iLeft = (window.screen.width - iWidth) / 2;
                var iTop = (window.screen.height - iHeight) / 2;//获得窗口的垂直位置;
                this.winURL = window.open(this.redirectUrl, '_blank', 'height=' + iHeight + ',innerHeight=' + iHeight + ',width=' + iWidth + ',innerWidth=' + iWidth + ',top=' + iTop + ',left=' + iLeft + ',toolbar=no,menubar=no,scrollbars=auto,resizeable=no,location=no,status=no')
                this.ssoTimer = setInterval(() => {
                    if (this.winURL.closed) { this.clearTimer() }
                    this.getTicketStatus()
                }, 1000)
            })
        },
        getTicketStatus() {
            if (!this.ssoTicket) return
            getTicketStatus(this.ssoTicket).then(res => {
                if (res.data.status != 2) {
                    this.winURL && this.winURL.close()
                    if (res.data.status == 4) {//未绑定预留ticket
                        clearInterval(this.ssoTimer)
                        this.ssoTimer = null
                    } else {
                        this.clearTimer()
                    }
                    switch (res.data.status) {
                        case 1://登陆成功
                            let param = {
                                theme: res.data.theme,
                                token: res.data.value
                            }
                            this.$store.dispatch('user/setToken', param).then(res => {
                                this.$router.push({
                                    path: this.redirect || '/home',
                                    query: this.otherQuery
                                })
                            })
                            break;
                        case 4://未绑定
                            this.$message.error('第三方账号未绑定，5分钟内登录本系统账号密码自动绑定该账号！')
                            this.visible = false
                            this.ssoUrl = ''
                            break;
                        case 6://多租户绑定多个
                            this.dialogVisible = true
                            this.tenantSocialList = typeof res.data.value === 'string' ? JSON.parse(res.data.value) : res.data.value;
                            break;
                        default:
                            this.$message.error(res.data.value || '账号异常！')
                            this.visible = false
                            this.ssoUrl = ''
                            this.getLoginConfig()
                            break
                    }
                }
            })
        },
        clearTimer() {
            if (this.ssoTimer) {
                clearInterval(this.ssoTimer)
                this.ssoTimer = null
                this.ssoTicket = ''
            }
        },
        handleClose() {
            this.dialogVisible = false
        },
        socailsLogin(data) {
            socialsLogin(qs.stringify({ ...data, tenantLogin: true })).then(response => {
                if (response.code == 200) {
                    this.$store.dispatch('user/setToken', response.data).then(res => {
                        this.$router.push({
                            path: this.redirect || '/home',
                            query: this.otherQuery
                        })
                    })
                }
            })
        },
        ssoLogin() {
            if (this.loading) return
            this.loading = true
            getTicket().then(res => {
                this.ssoTicket = res.data
                this.ssoUrl = this.preUrl + '?' + this.ticketParams + '=' + this.ssoTicket
                this.visible = true
                this.ssoTimer = setInterval(() => {
                    this.getTicketStatus()
                }, 1000)
            })
        },
        getLoginConfig() {
            getLoginConfig().then(res => {
                this.isSso = res.data.redirect
                this.preUrl = res.data.url
                this.ticketParams = res.data.ticketParams
                this.socialsList = res.data.socialsList || []
                localStorage.setItem('useSocials', this.socialsList.length)
                this.ssoLoading = false
            }).catch(() => {
                this.isSso = false
                this.ssoLoading = false
            })
        },
        onOpen() {
            this.show = true
        },
    }
}
</script>

<template>
    <div class="flex main">
        <div class="center">
            <div class="left"></div>
            <div class="right">
                <div class="login-form">
                    <!-- <el-image class="login-logo" :src="define.comUrl+sysConfig.loginIcon"
                        v-if="sysConfig && sysConfig.loginIcon">
                        <template slot="error">
                            <img class="login-logo" src="@/assets/images/login_logo.png" alt="">
                        </template>
                    </el-image>
                    <img class="login-logo" src="@/assets/images/login_logo.png" alt="" v-else> -->

                    <!-- <a href="http://101.42.224.59:35002" target="_blank">
                        <h1>点击进入Vue3地址</h1>
                    </a>
                    <a href="http://101.42.224.59:35001" target="_blank">
                        <h1>点击进入移动端地址</h1>
                    </a> -->

                    <div class="title title1">WELCOME!</div>
                    <div class="title title2">欢迎登录客户服务360系统</div>

                    <div v-show="!isSso && !ssoLoading">
                        <!-- <div class="login-tab" :class="'active'+active">
                            <a class="item" :class="{'active': active==1}"
                                @click="active=1">{{$t('login.title')}}</a>
                            <a class="item" :class="{'active': active==2}"
                                @click="active=2">{{$t('login.scanTitle')}}</a>
                        </div> -->
                        <el-form v-show="active==1" ref="loginForm" :model="loginForm"
                            :rules="loginRules" autocomplete="on" label-position="left">
                            <el-form-item prop="account">
                                <div class="input-title">账号</div>
                                <el-input ref="account" v-model="loginForm.account"
                                    :placeholder="$t('login.username')" name="account" type="text"
                                    tabindex="1" autocomplete="on" prefix-icon="el-icon-user"
                                    size="large" @change="getConfig" clearable>
                                </el-input>
                            </el-form-item>
                            <el-tooltip v-model="capsTooltip" :content="$t('login.upper')"
                                placement="right" manual>
                                <el-form-item prop="password">
                                    <div class="input-title">密码</div>
                                    <el-input ref="password" v-model="loginForm.password"
                                        show-password :placeholder="$t('login.password')"
                                        name="password" tabindex="2" autocomplete="on"
                                        @keyup.native="checkCapslock" @blur="capsTooltip = false"
                                        prefix-icon="el-icon-lock" size="large"
                                        clearable></el-input>
                                    <!-- @keyup.enter.native="handleLogin" -->
                                </el-form-item>
                            </el-tooltip>
                            <el-form-item prop="code" v-if="needCode">
                                <el-row type="flex" justify="space-between">
                                    <el-col class="sms-input">
                                        <el-input v-model="loginForm.code"
                                            :placeholder="$t('login.codeTip')" name="code"
                                            autocomplete="on" prefix-icon="el-icon-key"
                                            size="large">
                                        </el-input>
                                    </el-col>
                                    <el-col class="sms-right code-right">
                                        <el-tooltip :content="$t('login.changeCode')"
                                            placement="bottom">
                                            <img id="imgcode" :alt="$t('login.changeCode')"
                                                :src="define.comUrl+imgUrl" @click="changeImg">
                                        </el-tooltip>
                                    </el-col>
                                </el-row>
                            </el-form-item>
                            <el-button :loading="loading" type="primary" class="login-btn"
                                size="large"
                                @click.native.prevent="handleLogin">{{ $t('login.logIn') }}</el-button>
                            <template v-if="socialsList.length">
                                <el-divider content-position="center"
                                    class="divider__text">其他登录方式</el-divider>
                                <div class="other-list">
                                    <div v-for="(item,i) in socialsList" :key="i">
                                        <el-tooltip class="item" effect="dark"
                                            :content='item.name+"登录"' placement="top">
                                            <div class="other-item"
                                                @click="otherLogin(item.enname)"><i
                                                    :class="item.icon" />
                                            </div>
                                        </el-tooltip>
                                    </div>
                                </div>
                            </template>
                        </el-form>
                        <div v-show="active==2" class="login-form-QRCode">
                            <img class="qrcode-img" src="@/assets/images/login_qr.png">
                            <p class="qrcode-tip">正在测试,稍后上线</p>
                        </div>
                    </div>
                    <el-button type="primary" class="sso-login-btn" size="large" :loading="loading"
                        @click.native.prevent="ssoLogin"
                        v-show="isSso && !ssoLoading">登录</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
::v-deep {
    .el-form-item {
        margin-bottom: 20px;
    }
    .el-form-item:nth-child(2) {
        margin-bottom: 40px;
    }
    .el-form-item .el-input__wrapper {
        box-shadow: 0px 0px 2px var(--el-color-primary) inset;
    }
}

.main {
    background-image: url('~@/assets/images/login/background_image5.png');
    background-size: cover;
    position: relative;
    height: 100%;
    .center {
        width: 1100px;
        height: 600px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 15px;
        background-image: url('~@/assets/images/login/background_image6.png');
        background-size: cover;
        box-shadow: 0 0 10px 4px #1890ff;

        display: flex;
        .right {
            width: 45%;
            .login-form {
                width: 70%;
                margin: 0 auto;
                .title {
                    width: 90%;
                    margin: 0 auto;
                    font-weight: bold;
                }
                .title1 {
                    font-size: 35px;
                    margin-top: 120px;
                }
                .title2 {
                    font-size: 20px;
                    margin-bottom: 20px;
                }
                .forgot-password {
                    color: #1890ff;
                    cursor: pointer;
                    font-size: 10px;
                }
                .input-title {
                    height: 20px;
                    line-height: 20px;
                    margin: 10px 0 5px;
                }
                .login-btn {
                    width: 100%;
                }
            }
        }
        .left {
            width: 65%;
            background-size: cover;
        }
    }
}
</style>

<style lang="scss" scoped>
@import './index.scss';
</style>
