<template>
    <div class="layout-wrap" ref="watermarkContainer">
        <LayoutHeader />
        <div class="layout-bottom-wrap">
            <!-- <SideMenu /> -->
            <div class="layout-bottom-right-content" :class="(currentName == '/workbench' || currentName == '/workbenchcm') ? '':' p-16'">
                <el-scrollbar :style="'height:'+`${contentHeight}`+'px'">
                    <router-view></router-view>
                </el-scrollbar>
            </div>
        </div>
    </div>
</template>
<script>
import watermark from 'watermark-dom';
export default {
    components: {
        LayoutHeader: () => import('./components/LayoutHeader'),
        // SideMenu: () => import('./components/SideMenu'),
    },
    computed:{
        // 获取抽屉drawer的内容高度
        contentHeight(){
            let oh = document.documentElement.clientHeight;
            return oh-85

        } ,
        currentPath() {
            return this.$route.path; // 获取当前路由的路径
        },
        currentName() {
            return this.$route.name; // 获取当前路由的名称
        }
    },
    mounted() {
        this.addWatermark();
    },
    methods: {
        addWatermark() {
           
            let userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
            let watermark_txt = userInfo.realName + ' '+ userInfo.phone
            let options = {
                watermark_parent_node: this.$refs.watermarkContainer,
                // 水印内容
                watermark_txt: watermark_txt,
                // 水印起始位置x轴坐标
                watermark_x: 20,
                // 水印起始位置Y轴坐标
                watermark_y: 20,
                // 水印行数
                watermark_rows: 5,
                // 水印列数
                watermark_cols: 10,
                // 水印x轴间隔
                watermark_x_space: 150,
                // 水印y轴间隔
                watermark_y_space: 150,
                // 水印字体颜色
                watermark_color: '#aaa',
                // 水印透明度
                watermark_alpha: 0.2,
                // 水印字体大小
                watermark_fontsize: '15px',
                // 水印字体
                watermark_font: '微软雅黑',
                // 水印宽度
                watermark_width: 210,
                // 水印长度
                watermark_height: 80,
                // 水印倾斜度数
                watermark_angle: 15
            }

            watermark.load(options);
            // watermark.load({
            //     watermark_txt: '水印文本',
            //     watermark_parent_node: this.$refs.watermarkContainer,
            //     options11
            // });
        },
    },
}
</script>
<style lang="scss">
.layout-wrap{
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
.layout-bottom-wrap{
    display: flex;
    height: calc(100% - 56px);
}
.layout-bottom-right-content{
    width: calc(100% - 0px);
    height: calc(100%);
    background-color: #f6f4f4;
    font-size: 14px;
}
.layout-content-wrap{
    width: 100%;
    height: calc(100%);
}
</style>