<template>
    <div class="body-bg">
        <div class="com-logo">
            <img :src="logo" alt="" />
            <span>统一结算平台</span>
        </div>
        <div class="login-main">
            <div class="login-container-hello">您好{{ loginForm.token }}</div>
            <div class="login-container-title">欢迎使用统一结算平台</div>
            <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" label-position="left">
                <el-form-item style="margin-bottom: 20px" prop="username">
                    <el-input v-model="loginForm.username" type="text" placeholder="用户名" prefix-icon="el-icon-user" autocomplete="off" clearable @keyup.enter.native="handleLogin" />
                </el-form-item>
                <el-form-item style="margin-bottom: 20px" prop="password">
                    <el-input v-model="loginForm.password" type="text" placeholder="密码" prefix-icon="el-icon-lock" @keyup.enter.native="handleLogin" autocomplete="off" clearable show-password />
                </el-form-item>
            </el-form>
            <el-button :loading="loading" type="primary" style="width: 100%" @click.native.prevent="handleLogin" round>
                <span v-if="!loading">登 录</span>
                <span v-else>登 录 中...</span>
            </el-button>
            <div style="text-align: center; padding-top: 20px; font-size: 14px; color: #ffff">© 2015-{{ year }} 泛喜健康科技有限公司</div>
        </div>
    </div>
</template>

<script>
import { getCodeImg } from '@/api/login'
import { getConfig } from '@/api/system/config'
import Cookies from 'js-cookie'
import { encrypt, decrypt } from '@/utils/jsencrypt'
import store from '@/store'
export default {
    name: 'Login',
    data() {
        return {
            codeUrl: '',
            cookiePassword: '',
            loginForm: {
                username: '',
                password: '',
                is_keeplogin: true,
                code: '',
                key: '',
            },
            loginRules: {
                username: [{ required: true, trigger: 'blur', message: '请输入您的账号' }],
                password: [{ required: true, trigger: 'blur', message: '请输入您的密码' }],
                code: [{ required: true, trigger: 'change', message: '请输入验证码' }],
            },
            loading: false,
            // 验证码开关
            captchaOnOff: true,
            redirect: undefined,
            logo: require('@/assets/images/com-logo1-1.png'),
            backgroundImage: require('@/assets/images/login_background.png'),
            siteConfig: {},
            year: '',
            loginForm: {
                token: '',
            },
        }
    },
    watch: {
        $route: {
            handler: function (route) {
                this.redirect = route.query && route.query.redirect
            },
            immediate: true,
        },
    },
    created() {
        this.getNowTime()
        // this.getCode()
        this.getCookie()
        this.config()
        this.getQueryString('token')
    },
    methods: {
        getQueryString(name) {
            var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
            var r = window.location.search.substr(1).match(reg)
            if (r != null) {
                this.loginForm.token = unescape(r[2])
                this.$store.dispatch('Login', this.loginForm)
            }
            return null
        },
        //           getQueryString (name) {
        //   var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
        //   var r = window.location.search.substr(1).match(reg)
        //   if (r != null) {
        //     this.loginForm.token= unescape(r[2])
        //     // this.$store.dispatch('Login', this.loginForm)
        //   }
        //   return null
        // },
        getNowTime() {
            var dd = new Date()
            var n = -1
            dd.setDate(dd.getDate() + n)
            var y = dd.getFullYear()
            var m = dd.getMonth() + 1
            var d = dd.getDate()
            m = m < 10 ? '0' + m : m
            d = d < 10 ? '0' + d : d
            var day = y + '-' + m + '-' + d
            this.year = y
            // this.queryParams.receipt_date.value = [defaultDate + ' 00:00:00', defaultDate + ' 23:59:59']
        },
        getCode() {
            getCodeImg().then(res => {
                this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff
                if (this.captchaOnOff) {
                    this.loginForm.key = Cookies.get('key')
                    this.codeUrl = 'data:image/png;base64,' + btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''))
                }
            })
        },
        getCookie() {
            const username = Cookies.get('username')
            const password = Cookies.get('password')
            const is_keeplogin = Cookies.get('is_keeplogin')
            this.loginForm = {
                username: username === undefined ? this.loginForm.username : username,
                password: password === undefined ? this.loginForm.password : decrypt(password),
                is_keeplogin: is_keeplogin === undefined ? false : Boolean(is_keeplogin),
            }
        },
        async handleLogin() {
            // this.$refs.loginForm.validate(valid => {
            //     if (valid) {
            //         this.loading = true
            //         if (this.loginForm.is_keeplogin) {
            //             Cookies.set('username', this.loginForm.nickname, { expires: 30 })
            //             Cookies.set('password', encrypt(this.loginForm.password), {
            //                 expires: 30,
            //             })
            //             Cookies.set('is_keeplogin', this.loginForm.is_keeplogin, {
            //                 expires: 30,
            //             })
            //         } else {
            //             Cookies.remove('username')
            //             Cookies.remove('password')
            //             Cookies.remove('is_keeplogin')
            //         }
            //         this.$store
            //             .dispatch('Login', this.loginForm)
            //             .then(() => {
            // this.$router.push({ path: '/yibaomanager/outpatient' })
            // .catch(() => {})
            //             })
            //             .catch(err => {
            //                 this.loading = false
            //                 if (this.captchaOnOff) {
            //                     // this.getCode()
            //                 }
            //             })
            //     }
            // })
            if (this.loginForm.username == 'test' && this.loginForm.password == '666666') {
                // 根据roles权限生成可访问的路由表
                await store.dispatch('GenerateRoutes')

                this.$router.push({ path: '/yibaomanager/outpatient' })
                
            } else {
                this.$message({
                    message: '账号或密码错误请重试！',
                    type: 'error',
                })
            }
        },

        //获取系统配置
        config() {
            getConfig().then(response => {
                this.siteConfig = response.data
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.register {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-size: cover;
    overflow: hidden;
}
.com-logo {
    position: fixed;
    top: 5%;
    left: 5%;
    color: #fff;
    font-size: 22px;
    padding: 10px;
    border-radius: 5px;
    display: flex;
}

.com-logo > img {
    height: 40px;
}

.com-logo > span {
    padding-left: 10px;
    padding-top: 5px;
}

.body-bg {
    height: 100vh;
    background: url(../assets/images/login_background.png);
    background-size: cover;
    overflow: hidden;

    .login-main {
        margin-top: calc(50vh - 190px);
        margin-left: 65%;
        background: url(../assets/images/login_form.png);
        background-size: 100% 100%;
        border-radius: 10px;
        box-shadow: 0 2px 8px 0 rgb(7 17 27 / 6%);
        /* height: 280px; */
        padding: 6vh;
        border: 0;
        width: 420px;
    }
}

.site-title {
    color: white;
    padding-top: 0;
    font-size: 24px;
}

.login-container-hello {
    font-size: 32px;
    color: #fff;
}

.login-container-title {
    margin-top: 10px;
    margin-bottom: 30px;
    font-size: 20px;
    color: #fff;
}
</style>
