<template>
    <div class="app">
        <transition>
            <router-view v-if="$store.state.appStatus=='success'" />
        </transition>
        <transition>

            <div
                v-if="$store.state.appStatus!='success'"
                class="loader"
            >
                <div class="pl-logo-lg fadeInUp animated">
                    <img
                        :src="logoSrc"
                        v-if="logoSrc!=''"
                    >
                </div>
                <span class="txt">
                    <span v-for="str in loadTexts">{{str}}</span>
                    <span v-if="$store.state.appStatus=='loading'">{{$lang('sysLoading')||'系统加载中...'}}</span>
                    <span
                        v-if="$store.state.appStatus!='loading'"
                        style="color:red"
                        @click="handleReload"
                    >{{$lang('loadedFailClickRefresh')||'加载失败,点我重试!'}}</span>
                </span>
            </div>
        </transition>
    </div>
</template>
<script>
import LoginPic from "@main/assets/logo_max.png"
export default {
    data() {
        return {
            loadTexts: "",
            logoSrc: ""
        };
    },
    methods: {
        handleReload() {
            window.location.reload();
        },        
        detectZoom (){
            var ratio = 0,
                screen = window.screen,
                ua = navigator.userAgent.toLowerCase();
            if (window.devicePixelRatio !== undefined) {
                ratio = window.devicePixelRatio;
            }
            else if (~ua.indexOf('msie')) {
                if (screen.deviceXDPI && screen.logicalXDPI) {
                ratio = screen.deviceXDPI / screen.logicalXDPI;
                }
            }
            else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
                ratio = window.outerWidth / window.innerWidth;
            }
            if (ratio){
                ratio = Math.round(ratio * 100);
            }
            return ratio;
        },
        checkZoom(){
            let ratio = this.detectZoom();
            if(ratio!=100){
                // this.$message.error('警告，浏览器没有按正常比例显示会影响部份功能！')
            }
        },
    },
    mounted() {
        // this.checkZoom();
        // window.addEventListener('resize',()=>{
        //     this.checkZoom();
        // });
        let me=this;
        window.Scp = {
            User: {
                id: "admin",
                name: "管理员",
                deptId: "",
                deptName: "",
                positionId: "GLY",
                postionName: "管理员",
                bzId: "admin_3",
                bzName: "管理员岗位3",
                bzDeptId: ".WLDJT.DGS",
                bzDeptName: "D公司",
                bzPositionId: "HQRY",
                bzPositionName: "后勤人员",
                orgId: "admin_3",
                defOrgId: "admin_3"
            }
        }
        window.__guid = new Date().valueOf();
        setTimeout(()=>{
            window.__sysConfig = _.merge({
                events: {
                    onLoad1: function () {

                    }
                },
                projectName: "eaptpl",
                /*sysProjectMange: {
                    id: __guid++,
                    name: '工程树',
                    iconClass: 'icon-tree',
                    uri: 'amreport/designer/tree/design.do',
                    url: '/amrept-web/amreport/designer/tree/design.do'
                },*/
                sysList: [

                ],
                userInfo:{
                    id: __guid++,
                    name: '${fusername}',
                    type: 'userInfo',
                    iconClass: 'icon-user',
                    children: [
                        {
                            id: __guid++,
                            name:'用户编号：${fusername}/${fuserid}',
                            iconClass:'icon-user',
                        },            
                        {
                            id: __guid++,
                            name:'岗位编制：${fbzname}/${fbzid}',
                            iconClass:'icon-user',
                            type:"orgBz",
                        }, 
                        {
                            id: __guid++,
                            name:'机构名称：${forgname}/${forgid}',
                            iconClass:'icon-user',
                        },
                        {
                            id: __guid++,
                            name:'岗位名称：${frolename}/${froleid}',
                            iconClass:'icon-user',
                        },
                        /*{
                            id: __guid++,
                            iconClass:'icon-edit',
                            name:'修改用户信息',
                            type:'modifyUserInfo',
                        },*/
                        {
                            id: __guid++,
                            iconClass:'icon-edit',
                            name:'修改密码',
                            type:'modifyPw',
                        },
                    ]
                },
            },window.customSysCofig);
            this.$store.dispatch("app/getSysConfig").then(res=>{
                let cfg = this.$store.state.app.config || {};
                let loadText = (cfg.sysLoadLogo && cfg.sysLoadLogo.title) || "";
                let logoSrc = (cfg.sysLoadLogo && cfg.sysLoadLogo.src) || ""; 
                this.loadTexts=loadText.split("");
                this.logoSrc=logoSrc||LoginPic;
            });
        },0);
    }
};
</script>
<style scoped>
.app {
    height: 100%;
    background: linear-gradient(
        rgb(255, 255, 255) 0px,
        rgb(243, 248, 253) 50%,
        rgb(229, 240, 250)
    );
}
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}
@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

.loader {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -mos-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
}
.loader .txt {
    display: inline-block;
    word-break: normal;
    white-space: nowrap;
    margin: auto;
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9,
        0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1),
        0 1px 3px rgba(0, 0, 0, 0.1), 0 3px 5px rgba(0, 0, 0, 0.1),
        0 5px 10px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.1),
        0 20px 20px rgba(0, 0, 0, 0.15);
}
.loader .txt span {
    display: inline-block;
    font-size: 68px !important;
    padding: 0 5px;
    -webkit-animation: text cubic-bezier(0.75, 0, 0.5, 1) 1.2s infinite;
    -moz-animation: text cubic-bezier(0.75, 0, 0.5, 1) 1.2s infinite;
    -moz-animation: text cubic-bezier(0.75, 0, 0.5, 1) 1.2s infinite;
    -ms-animation: text cubic-bezier(0.75, 0, 0.5, 1) 1.2s infinite;
    -o-animation: text cubic-bezier(0.75, 0, 0.5, 1) 1.2s infinite;
    animation: text cubic-bezier(0.75, 0, 0.5, 1) 1.2s infinite;
    color: #0066cc;
}
.loader .txt span:nth-child(1) {
    -webkit-animation-delay: 0ms;
    -moz-animation-delay: 0ms;
    -ms-animation-delay: 0ms;
    -o-animation-delay: 0ms;
    animation-delay: 0ms;
}
.loader .txt span:nth-child(2) {
    -webkit-animation-delay: 100ms;
    -moz-animation-delay: 100ms;
    -ms-animation-delay: 100ms;
    -o-animation-delay: 100ms;
    animation-delay: 100ms;
}
.loader .txt span:nth-child(3) {
    -webkit-animation-delay: 200ms;
    -moz-animation-delay: 200ms;
    -ms-animation-delay: 200ms;
    -o-animation-delay: 200ms;
    animation-delay: 200ms;
}
.loader .txt span:nth-child(4) {
    -webkit-animation-delay: 300ms;
    -moz-animation-delay: 300ms;
    -ms-animation-delay: 300ms;
    -o-animation-delay: 300ms;
    animation-delay: 300ms;
}
.loader .txt span:nth-child(5) {
    -webkit-animation-delay: 400ms;
    -moz-animation-delay: 400ms;
    -ms-animation-delay: 400ms;
    -o-animation-delay: 400ms;
    animation-delay: 400ms;
}
.loader .txt span:nth-child(6) {
    -webkit-animation-delay: 500ms;
    -moz-animation-delay: 500ms;
    -ms-animation-delay: 500ms;
    -o-animation-delay: 500ms;
    animation-delay: 500ms;
}
.loader .txt span:nth-child(7) {
    -webkit-animation-delay: 600ms;
    -moz-animation-delay: 600ms;
    -ms-animation-delay: 600ms;
    -o-animation-delay: 600ms;
    animation-delay: 600ms;
}
.loader .txt span:nth-child(8) {
    -webkit-animation-delay: 700ms;
    -moz-animation-delay: 700ms;
    -ms-animation-delay: 700ms;
    -o-animation-delay: 700ms;
    animation-delay: 700ms;
}
.loader .txt span:nth-child(9) {
    -webkit-animation-delay: 800ms;
    -moz-animation-delay: 800ms;
    -ms-animation-delay: 800ms;
    -o-animation-delay: 800ms;
    animation-delay: 800ms;
}
.loader .txt span:nth-child(10) {
    -webkit-animation-delay: 900ms;
    -moz-animation-delay: 900ms;
    -ms-animation-delay: 900ms;
    -o-animation-delay: 900ms;
    animation-delay: 900ms;
}
.loader .txt span:last-child {
    display: block;
    padding-top: 15px;
    font-size: 16px !important;
    text-shadow: none;
    color: #0272bd;
    text-shadow: none;
    animation: none;
    -webkit-animation: none;
}
@-webkit-keyframes text {
    0% {
        color: #0066cc;
    }
    40% {
        color: #fff;
    }
    70%,
    100% {
        color: #0066cc;
    }
}
@-moz-keyframes text {
    0% {
        color: #0066cc;
    }
    40% {
        color: #fff;
    }
    70%,
    100% {
        color: #0066cc;
    }
}
@-mos-keyframes text {
    0% {
        color: #0066cc;
    }
    40% {
        color: #fff;
    }
    70%,
    100% {
        color: #0066cc;
    }
}
@-o-keyframes text {
    0% {
        color: #0066cc;
    }
    40% {
        color: #fff;
    }
    70%,
    100% {
        color: #0066cc;
    }
}
@keyframes text {
    0% {
        color: #0066cc;
    }
    40% {
        color: #fff;
    }
    70%,
    100% {
        color: #0066cc;
    }
}
</style>