<template>
    <div class="signIn">
        <div class="box cf">
            <div class="left">
                <h3>{{ info.banner }}</h3>
                <p>{{ info.subBanner }}</p>
            </div>
            <div class="right">
                <div class="logo cf">
                    <img src="/static/images/login/logo.png"
                        alt />
                    <h2>{{ info.title }}</h2>
                    <small></small>
                </div>
                <input type="text"
                    v-model="username"
                    @keyup="submit"
                    class="username"
                    autofocus
                    placeholder="请输入账号" />
                <input type="password"
                    v-model="password"
                    @keyup="submit"
                    class="password"
                    placeholder="请输入密码" />
                <!--<div class="remenber">
                    <label for="remenber" class="remenber1"><input type="checkbox" ng-model="remember">记住我</label>
                </div>-->
                <button type="button"
                    @click="submit()"
                    class="sign-in">登录 Login</button>
                <button type="button"
                    @click="close"
                    class="exit">退出 Exit</button>
            </div>
        </div>
        <div class="cpt">{{ info.copyright }}</div>
    </div>
</template>
<script>
    import { mapState, mapActions } from 'vuex';
    import { mixinPage } from '/src/index.js';
    import permissionApi from '../../../api/permission';

    // 转换菜单
    function convertMenu(source) {
        if (!source) {
            return null;
        }

        return source.map(item => {
            return {
                path: item.url.replace('app', '').replace(/\./g, '/').split('?')[0],
                title: item.name,
                subTitle: item.subName,
                header: 'home',
                custom: item.icon,
                children: convertMenu(item.subPermissions)
            };
        });
    }

    export default {
        mixins: [mixinPage],
        components: {},
        data() {
            return {
                username: '',
                password: '',
                autoLogin: true
            };
        },
        created() {},
        computed: {
            ...mapState('admin/setting', ['info'])
        },
        methods: {
            ...mapActions('admin/account', ['login']),
            /**
             * @description 登录
             * 表单校验已有 iView Pro 自动完成，如有需要修改，请阅读 iView Pro 文档
             */
            async submit(e) {
                if (e) {
                    var keycode = window.event ? e.keyCode : e.which;

                    if (!keycode) {
                        return;
                    }

                    if (keycode !== 0 && keycode !== 1 && keycode !== 13) {
                        return;
                    }
                }

                if (this.username && this.password) {
                    await this.login({
                        username: this.username,
                        password: this.password
                    });

                    // 初始化菜单和权限
                    let res = await permissionApi.query();

                    // 默认包含首页
                    res.menus.unshift({
                        name: '首页',
                        subName: 'Home',
                        parentID: null,
                        url: 'home',
                        templateUrl: '@/home',
                        icon: 'fa fa-home'
                    });

                    this.$store.dispatch('admin/menu/setSider', res.menus);
                    this.$store.dispatch('admin/permission/set', res.permissions);

                    // 重定向对象不存在则返回顶层路径
                    setTimeout(() => {
                        this.$router.replace(this.$route.query.redirect || '/home');
                    });
                }
            },
            close(e) {
                this.confirm('确定要关闭系统吗？\r\nAre you sure to exit?', () => {
                    window.location.href = 'about:blank';
                    window.close();
                });
            }
        }
    };
</script>

<style src="../../../styles/css/login.css" scoped>
</style>
