<template>
    <div id="monitorCenter" class="monitor-center-style">
        <img :src="topImgUrl"/>
        <div class="page-left-style" :style="{width:leftWidth + '%'}">
            <!--<div class="page-left-style">-->
            <div class="page-title-style">
                <span class="text">{{title}}</span>
            </div>
            <div class="page-menu-style">
                <template v-for="menu in menuAry">
                    <div v-if="menu.title !== ''"
                         :class="'menu-item-style' + (!menu.disable && menuPath === menu.path?' menu-select-style':'') + (menu.disable?' disable-menu-style':'')"
                         @click="menuClick(menu)" :key="menu.path"
                    >
                        <span class="menu-title-style">{{menu.title}}</span>
                    </div>
                </template>
            </div>
        </div>
        <div class="page-right-style" :style="{width:rightWidth + '%'}">
            <!--<div class="page-right-style">-->
            <div v-if="showWorkBenchButton" class="bench-top-btn-box-style">
                <BenchBtnBox iconType="icon-lingdangxiaoxi" title="消息处理" :count="msgCount"
                             @btnClick="onBtnClick('noticeRemind')"/>
                <BenchBtnBox iconType="icon-youjian" title="邮件查看" :count="mailCount" @btnClick="onBtnClick('mail')"/>
                <BenchBtnBox iconType="icon-caidan" title="更多应用" btnType="popover" ref="systemListRef">
                    <system-list
                            :crmData="systemData"
                            @accessSubsystem="onAccessSubsystem"
                            @servicePlatform="servicePlatform"
                    />
                </BenchBtnBox>
                <BenchBtnBox iconType="icon-huanfu" title="版面设置" @btnClick="onBtnClick('setting')"/>
            </div>
            <span class="text"><Time/></span>
            <span class="text">
               <!-- <div class="back-style" title="回到首页" @click="toMainPage"><a-icon type="home" theme="filled" /></div>-->
               <PersonInfo :operateType="2"/>
            </span>
        </div>
        <FusionModalPanel v-bind="modalProps" @callback="onModalCallback">
            <component
                    v-if="modalProps.show === true && modalUrl !== ''"
                    :is="com"
                    v-bind="params"
                    ref="modalPanel"
            ></component>
        </FusionModalPanel>
    </div>
</template>
<script>
    import Time from '../homePages/menuTop/time.vue';
    import {Icon, Select} from 'ant-design-vue';
    import {menuConfig} from '../../menuConfig';
    import PersonInfo from '../homePages/menuTop/personInfo.vue';
    import BenchBtnBox from './benchBtnBox.vue';
    import GlobalParams from '../adminCenter/global_params';
    const topImg01 = require('../../assets/images/secondPageTop01.png');
    const topImg02 = require('../../assets/images/secondPageTop02.png');
    import FusionModalPanel from "../../../../components/common/fusionModal/FusionModalPanel";
    import SystemList from "../adminCenter/SystemList";
    export default{
        data(){
            return {
                loading: true,
//                menuAry: [{id: 1, value: "校园日常情况",path:"/monitorCenter/daily"}, {id: 2, value: "信息化应用情况",path:"/monitorCenter/information"}],
                menuAry: [],
                menuPath: "",
                title: "",
                rightWidth: 40,
                screenWidth: document.body.clientWidth,
                topImgUrl: "",
                msgCount: 0,//消息徽标数
                totalCount: 0,//总待办数量
                mailCount: 0,//邮件徽标数
                clickItem: "",
                modalUrl: "",
                params: null,
                modalProps: {
                    modalTitle: "",
                    show: false,
                    CancelButton: true,
                    OKButton: true,
                },
                systemData: [],
                layoutData: {},
                showWorkBenchButton: true,//是否展示工作台顶部操作按钮
            }
        },
        computed: {
            leftWidth: function () {
                return 100 - this.rightWidth;
            },
            com: function () {
                let url = this.modalUrl;
                return () => import(`@/views/screenAdaptation/pages/adminCenter/${url}`);
            },
        },
        watch: {
            $route: {
                handler(val, oldval){
                    this.emitRouteChange(val.path);
                },
                // 深度观察监听
                deep: true
            }
        },
        beforeMount(){
            //解决二级页面刷新后，顶部导航菜单消失问题
            let menuOptions = this.$store.state.userStore.menuOptions;
            if (menuOptions) {
                this.title = menuOptions.title;
                this.menuAry = menuOptions.menuAry;
                this.menuPath = menuOptions.menuPath;
            }
        },
        mounted(){
            this.emitRouteChange(this.$route.path);
            this.$bus.on("topCountChange", this.changeCount);
            this.$bus.on("totalCountChange", this.changeTotalCount);
            this.$bus.on("systemDataChange", this.changeSystemData);
            this.$bus.on("layOutSettingChange", this.changeLayOutSetting);
            this.$bus.on("toDoBtnClick", this.toDoBtnClick);
        },
        methods: {
            filterMenuAry: function (path) {
                const menuAry = menuConfig.filter(item => {
                    return item.path === path;
                });
                let childrenMenu = [];
                if (menuAry && menuAry.length > 0) {
                    this.title = menuAry[0].title;
                    childrenMenu = menuAry[0].children && menuAry[0].children.length > 0 ? menuAry[0].children : [];
                }
                return childrenMenu;
            },
            //顶部子路由地址跳转
            emitRouteChange: function (routePath) {
                //let routePath = this.$route.path;
                if (routePath && routePath !== "") {
                    let routePathAry = routePath.split("/");
                    if (routePathAry.length > 0) {
                        //过滤掉空元素
                        routePathAry = routePathAry.filter(path => {
                            return path !== ""
                        })
                    }
                    if (routePathAry.length > 1) {
                        //子路由
                        this.menuPath = routePath;
                        this.changeBackImg(this.menuPath);
                        this.$emit("modelChange", this.menuPath);
                        return;
                    }

                    //二级菜单路由重组
                    routePath = "/" + routePathAry[0];
                }
                this.menuAry = this.filterMenuAry(routePath);
                this.menuPath = this.menuAry && this.menuAry.length > 0 ? this.menuAry[0].path : "";
                this.$store.commit('userStore/setMenuOptions', {
                    title: this.title,
                    menuAry: this.menuAry,
                    menuPath: this.menuPath
                });
                this.changeBackImg(this.menuPath);
                this.$emit("modelChange", this.menuPath);
            },
            menuClick: function (menu) {
                if (!menu.disable) {
                    this.menuPath = menu.path;
                    this.changeBackImg(this.menuPath);
                    this.$emit("modelChange", this.menuPath);
                }
            },
            changeBackImg: function (path) {
                if (path.indexOf("workBench") > 0) {
                    //工作台
                    if (path === "/workBench/application") {
                        //更多应用
                        this.rightWidth = 30;
                        this.topImgUrl = topImg01;
                        this.showWorkBenchButton = false;
                    } else {
                        this.rightWidth = 40;
                        this.topImgUrl = topImg02;
                        this.showWorkBenchButton = true;
                    }
                } else {
                    this.rightWidth = 30;
                    this.topImgUrl = topImg01;
                    this.showWorkBenchButton = false;
                }
            },
            toMainPage: function () {
                this.$router.replace({path: '/dynamic'});
            },
            //改变顶部按钮徽标数量
            changeCount: function (config) {
                this.msgCount = config[0].count;
                this.mailCount = config[0].count;
            },
            //总待办数
            changeTotalCount: function (totalCount) {
                this.totalCount = totalCount;
            },
            //配置更多应用
            changeSystemData: function (config) {
                this.systemData = config;
            },
            //版面设置信息
            changeLayOutSetting: function (config) {
                this.layoutData = config;
            },
            //待办点击回调
            toDoBtnClick: function (config) {
                this.onBtnClick("noticeRemind", config)
            },
            //导航菜单点击回调
            onBtnClick: function (type, extraParams = null) {
                this.clickItem = type;
                switch (type) {
                    case "noticeRemind":
                        this.params = {message: this.msgCount, todo: this.totalCount};
                        if (extraParams !== null) {
                            this.params.messageType = extraParams.messageType;
                            this.params.todoType = extraParams.todoType;
                        }
                        this.$set(this.modalProps, "modalTitle", "消息");
                        this.$set(this.modalProps, "modalWidth", "800px");
                        this.$set(this.modalProps, "modalClassName", "notice-style");
                        this.$set(this.modalProps, "OKButton", false);
                        this.$set(this.modalProps, "show", true);
                        this.modalUrl = "messageProcessing/MessageProcessingMain.vue";
                        break;
                    case "mail":
                        this.params = {mailCount: this.mailCount};
                        this.$set(this.modalProps, "modalTitle", "邮件");
                        this.$set(this.modalProps, "modalWidth", "794px");
                        this.$set(this.modalProps, "OKButton", false);
                        this.$set(this.modalProps, "show", true);
                        this.modalUrl = "mail/MailMain.vue";
                        break;
                    case "setting":
                        this.$set(this.modalProps, "modalTitle", "版面设置");
                        this.$set(this.modalProps, "modalWidth", "772px");
                        this.$set(this.modalProps, "modalClassName", "");
                        this.$set(this.modalProps, "OKButton", true);
                        this.$set(this.modalProps, "show", true);
                        this.params = {layout: this.layoutData};
                        this.modalUrl =
                            "ModuleAndLaySetting.vue";
                        break;
                    case "driver":
                        break;
                }
            },
            onModalCallback: function (type) {
                if (type === "ok") {
                    if (this.clickItem === "setting" && this.$refs.modalPanel) {
                        this.$refs.modalPanel.getModuleAndLayoutAndTheme();
                    }
                    this.$set(this.modalProps, "show", false);
                } else {
                    this.clickItem = "";
                    this.$set(this.modalProps, "show", false);
                }
            },
            onAccessSubsystem: function (systemData) {
                this.$refs.systemListRef.clicked = false;
                this.$bus.emit("accessSubsystem", systemData);
            },
            //跳转综合服务平台管理中心
            servicePlatform: function (systemData) {
                this.$refs.systemListRef.clicked = false;
                //this.$router.replace({name:"servicePlatform",params:{id:systemData.id,name:systemData.title}});
                this.$router.push({
                    path: '/workBench/servicePlatform/:id/:name',
                    name: 'servicePlatform',
                    params: {id: systemData.id, name: systemData.title}
                });
            }
        },
        beforeDestroy(){
            this.$bus.off("topCountChange", this.changeCount)
            this.$bus.off("totalCountChange", this.changeTotalCount)
            this.$bus.off("systemDataChange", this.changeSystemData)
            this.$bus.off("layOutSettingChange", this.changeLayOutSetting)
            this.$bus.off("toDoBtnClick", this.toDoBtnClick)
        },
        components: {
            AIcon: Icon,
            ASelect: Select,
            ASelectOption: Select.Option,
            Time,
            PersonInfo,
            BenchBtnBox,
            FusionModalPanel,
            SystemList
        }
    }
</script>
<style scoped lang="scss">
    @import "../../assets/scss/style";

    .monitor-center-style {
        width: 100%;
        height: 130px;
        img {
            width: 100%;
            height: 100%;
        }
        display: flex;
        justify-content: space-between;
        position: relative;
        /*background-image: url('../../assets/images/secondPageTop01.png');*/
        .page-left-style {
            /*width: calc(100% - 480px);*/
            display: flex;
            position: absolute;
            top: 0;
            left: 0;
            .page-title-style {
                font-size: 18px;
                width: 450px;
                height: 126px;
                line-height: 126px;
                text-align: center;
                color: white;
                .text {
                    display: inline-block;
                    font-family: "Microsoft YaHei";
                    font-size: 32px;
                }
            }
            .page-menu-style {
                font-size: 18px;
                width: calc(100% - 450px);
                height: 96px;
                line-height: 96px;
                text-align: center;
                transform: skewX(-35deg);
                margin-left: 10px;
                display: flex;
                justify-content: center;
                align-items: center;
                color: white;
                .menu-item-style {
                    padding: 20px 20px;
                    height: 30px;
                    line-height: 30px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-left: 10px;
                    cursor: pointer;
                    .menu-title-style {
                        transform: skewX(35deg);
                    }
                }
                .menu-select-style {
                    background-color: #227cb5;
                    border: 1px solid $color-default-bright;
                    cursor: default;
                }
                .disable-menu-style {
                    cursor: auto;
                }
            }
        }
        .page-right-style {
            position: absolute;
            right: 0;
            font-size: 18px;
            /*width: 450px;*/
            height: 66px;
            line-height: 66px;
            text-align: center;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            padding-right: 10px;
            .bench-top-btn-box-style {
                display: flex;
                height: 54px;
                justify-content: center;
                align-items: center;

            }
            .text {
                margin-left: 5px;
            }
        }
    }
</style>
