<template>
 <div class="div-box">
  <!--渲染xml的div-->
  <div class="outerContainer">
   <div id="graphContainer" class="mxContainers"  ref="mygraphContainer">
   </div>
  </div>
 </div>
</template>
<script>
    mxPanningHandler.prototype.useLeftButtonForPanning = true;//画面较大时候允许鼠标左键平移
    export default {
        name:'Monitor',
        data() {
            return {
                loadflag:false, //是否显示加载中转动
                windowresize:null, //画面改变绑定事件
                reg:null,//注册机
                viewer:null,//画面内容所存储
                graph:null,//mxgraph，操作画布底层的内容
                currentMenuId:this.menuId,//当前的画面渲染的数据库中的id
            };
        },
        props:{
            menuId:{
                type:String(),
               // default:'11266'
              //  default:'11213'
            default:'11294'
            },
            menuMap:{
                type:Object,
                default:null
            }
        },
        watch: {
            currentMenuId(){
                this.pushAndOpen();
            },
            menuId(val){
                this.currentMenuId = val;
            }
        },
        computed: {
        },
        mounted() {
            this.loadflag = true;
            //获取模型
           /* this.getModels(()=>{
                //初始化当前界面
                this.initGraph();
            });*/
            this.initGraph();
            window.btnEvents = this.btnEvents;
        },
        methods: {
            initGraph() {
                //注册当前画布
                this.reg = new gEngine.gRegister({ target:'graphContainer' });
                //有可能会渲染不出来
                this.$nextTick(()=>{
                    //gEngine.init要请求接口，等请求完接口再进行组态初始化
                    //注册并打开一整视图（与初始化视图器的区别在于无需给target赋值，注册机自动在自己的target中生成视图容器）
                    this.pushAndOpen();
                })
            },
            pushAndOpen() {//打开指定视图器
                if (!this.currentMenuId) {
                   // this.$message.error('组态id不能为空');
                    this.$notify({ type: 'danger', message: '组态id不能为空'});
                    return false;
                }
                /*通过参数传递，把new gEngine的js 名称改了*/
                this.reg.pushAndOpen({
                    target: 'graphContainer',            //容器
                    fileId: this.currentMenuId,
                    initialize: true,            //是否自动化
                    twiceTopology: true,         //是否二次拓扑
                    isEVLColours: false,         //是否按照带电电压等级着色
                    initToolbar: true,           //是否初始化工具条
                    initLayers: true,             //是否增加图层
                    initWheelScroll: true,       //是否滚轮缩放大小
                    // fileConent: fileConent,        //svg 内容
                    /* menuInitFunc: function (eventData, menuMap, callback) { //右键菜单为空
                         callback([]);
                     },*/
                    //定制右键菜单内容
                   // menuMap: this.menuMap,
                    postprocessing:() => {  //是否在初始化完成时执行其他操作
                        this.loadflag = false;
                        this.viewer = this.reg.getViewer();
                        window['viewer'] = this.viewer;
                        this.graph = this.viewer.renderer.graph;
                        window['graph'] = this.graph;
                        this.viewer.viewOverlook();//界面可以全部显示到画面中
                        //改变屏幕尺寸自适应画面内容
                        this.windowresize = () => {
                            this.viewer.viewOverlook();
                        };
                        window.addEventListener("resize", this.windowresize);
                    }
                });
            },
            //获取模型,当前模型在gEngine.js中已经调用，如果需要做相关处理可以单独拿出来
            /*async getModels( callback){
                await this.$axios.get( RT_QUERY_URL + '/SysModels/selectModelsList').then(
                    response => {
                        let data = response.data.data;
                        var shape = '<shapes name="gl">';
                        data.forEach(function (item) {
                            shape += item.shapexml;
                        });
                        shape += '</shapes>';
                        GModel.registryParseStencil(shape);
                        this.loadflag = false;
                        if(callback){
                            callback()
                        }
                    },
                    error => {

                        console.log('请求失败了',error.message)
                        if(callback){
                            callback()
                        }
                    }
                )
            },*/
            //组态图按钮事件   <Object click="function(cell){btnEvents(cell)}" as="events"/>
            btnEvents(cell) {
                var cellObj = cell.gobj.btnAction;
                var actionType = String(cellObj.actionType);
                switch (actionType) {
                    case "1":
                        var linkName = cellObj.linkName.split("|");
                        if (linkName.length === 2) {
                            this.currentMenuId = linkName[1];
                        }
                        //打开新的组态图
                        break;
                    case "3":
                        window.open(cellObj.outUrl);
                        break;
                }
            },
            //空的事件没有会报一个js错误
            GButtonClick(cell){},
            setFlicker(cell){

            },

        },

        beforeDestroy() {
            //销毁前状态
            window.removeEventListener("resize", this.windowresize);
            if (this.viewer) {
                this.viewer.destroy();
            }
        }
    };
</script>

<style scoped>
.div-box{
 width: 100%;
 height: 100%;
 background: azure;
}
.outerContainer{position: relative;width: 100%;height: 100%;cursor: default;}
.mxContainers {position: relative;overflow: auto;width: 100%;height: 100%;cursor: default;}
</style>
