<!--
 * 严肃声明：
 * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
 * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
 * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
 * Copyright (c) 2020 陈尼克 all rights reserved.
 * 版权所有，侵权必究！
 *
-->
<template>
    <div id="app">
        <!-- :style="{ height: showTab ?appHeight:'100%' }"   之前是给id为app-content 设置的内联样式  id="app-content" -->
        <div>
            <transition :name="transitionName">
                <keep-alive :include="cachePage">
                    <router-view class="router-view" />
                </keep-alive>
            </transition>
        </div>
        <tab-bar v-if="showTab"></tab-bar>
        <!-- 推送权限请求组件 -->
        <push-permission ref="pushPermission" />
    </div>
</template>

<script>
import tabBar from "@/components/TabBar";
import PushPermission from "@/components/PushPermission";
import pushInstance from "@/utils/push";

export default {
    components: {
        tabBar,
        PushPermission,
    },
    data() {
        return {
            appHeight: "",
            tabH: "",
            rempx: 0,
            headH: "",
            screenH: "",
            transitionName: "slide-left",
            cachePage: [
                "add-danger",
                "change-info",
                "affirm-danger",
                "risk-affirm",
                "manager-survey",
                "super-survey",
                // "major-survey",
                "risk-add",
                "noticeList",
                "confirmNote",
            ],
            // 不需要展示底部tabbar的页面
            noTab:["login", "login2", "choose-people","scan",'success','fail','warn','center','reset-pas-two'],
             // cachePage预先定义的缓存页面
            otherCache: [],
             // 专门处理列表缓存的页面，这些页面缓存逻辑与其他缓存不一样去详情返回列表缓存，但是进入列表必须刷新,如何有需要缓存的列表请放到这里来。
            listCache:['insert-danger','confirme-danger','report-return','change-danger','review-danger','stand-book','major-danger','delay-approval',
            'my-delay','risk-return','risk-account','risk-confirme','my-delay'],
        };
    },

    mounted() {
        // 这个配合列表路由使用缓存初始缓存页面
        this.otherCache=[...this.cachePage];
        let tabH =
            document
                .getElementsByTagName("html")[0]
                .style.fontSize.split("px")[0] * 1.33333;
        let sH = document.documentElement.clientHeight;
        this.headH =
            document
                .getElementsByTagName("html")[0]
                .style.fontSize.split("px")[0] * 1.5;
        +"px";
        this.appHeight = sH - tabH + "px";
        this.tabH = tabH + "px";
        this.screenH = sH + "px";
        
        // 初始化推送功能（启用 force_notification:true 模式）
        this.initPush();
    },
    computed: {
        showTab() {
            return !this.noTab.includes(
                this.$route.name
            );
        },
    },
    watch: {
        $route(to, from) {
            // 列表页面动态添加缓存
            if(from.name=='save-workbench'){
                // 如何使从工作台进入列表页面在cachePage里添加页面
                if((!this.cachePage.includes(to.name))&&this.listCache.includes(to.name)){
                    this.cachePage.push(to.name)
                }
            }
            if(to.name=='save-workbench'){
                // 如何回到工作台默认恢复预定义缓存页面
               this.cachePage=[...this.otherCache];
            }

            // 有主级到次级
            if (to.meta.index > from.meta.index) {
                this.transitionName = "slide-left"; // 向左滑动
            } else if (to.meta.index < from.meta.index) {
                // 由次级到主级
                this.transitionName = "slide-right";
            } else {
                this.transitionName = ""; //同级无过渡效果
            }
        },
    },
    
    methods: {
        // 初始化推送功能
        async initPush() {
            try {
                // 启用 force_notification:true 模式
                pushInstance.setForceNotificationMode(true);
                
                // 设置推送消息处理回调
                pushInstance.onMessage = this.handlePushMessage;
                pushInstance.onClick = this.handlePushClick;
                
                console.log('推送功能初始化完成（force_notification模式已启用）');
            } catch (error) {
                console.error('推送功能初始化失败:', error);
            }
        },
        
        // 处理推送消息
        handlePushMessage(message) {
            console.log('收到推送消息（使用 force_notification:true 时在线不会触发）:', message);
            
            // 注意：当后端使用 force_notification:true 时，应用在线时不会触发此方法
            // 消息会直接显示在通知栏，用户点击后才会触发 handlePushClick
            
            // 如果不使用 force_notification:true，可以在此处显示消息提示
            if (!pushInstance.forceNotificationMode && message.data && message.data.title) {
                this.$toast({
                    message: message.data.title,
                    duration: 3000
                });
            }
            
            // 更新未读消息数量
            this.updateUnreadCount();
        },
        
        // 处理推送点击
        handlePushClick(message) {
            console.log('用户点击推送消息:', message);
            
            // 根据消息类型跳转到对应页面
            if (message.data && message.data.page) {
                this.navigateToPage(message.data.page, message.data.params);
            }
        },
        
        // 更新未读消息数量
        async updateUnreadCount() {
            try {
                // 这里可以调用API获取未读消息数量
                // const count = await pushService.getUnreadCount(userId);
                // 更新store中的未读消息数量
            } catch (error) {
                console.error('更新未读消息数量失败:', error);
            }
        },
        
        // 页面跳转
        navigateToPage(page, params = {}) {
            const routes = {
                'message': '/messageCenter',
                'workbench': '/saveWorkbench',
                'danger': '/danger',
                'risk': '/risk'
            };
            
            const route = routes[page] || '/';
            this.$router.push({
                path: route,
                query: params
            });
        }
    },
};
</script>


<style lang="less">
body{
  background-color: #f0f1f5;
}
#app {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    // text-align: center;
    color: #2c3e50;
    // box-sizing: border-box;
    // overflow: hidden;
    // position: relative;
    // overflow: hidden;
    // height: 100vh;
    // background-color: #f0f1f5;
    // z-index:999999999999
}
#app-content {
    box-sizing: border-box;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    overflow: hidden;
    // padding-bottom: 1.3333rem;
    height: 100%; // 此处新增height 为了解决ios适配问题
}

.router-view {
    // width: 100%;
    // height: 100%;
    // position: absolute;
    // top: 0;
    // bottom: 0;
    // margin: 0 auto;
    // -webkit-overflow-scrolling: touch;
    // background-color: #f0f1f5;
    // overflow: auto;



    width: 100%;
    height: auto;
    -webkit-overflow-scrolling: touch;
    background-color: #f0f1f5;
    overflow: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: 0 auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 50px;
    box-sizing: border-box;
}

.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
    height: 100%;
    will-change: transform;
    transition: all 500ms;
    position: absolute;
    backface-visibility: hidden;
}
.slide-right-enter {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
}
</style>
