<template>
<div class="mainpage" id="rootElement" ref="rootElement"></div>
  
</template>

 <script>
import Vue from 'vue'
import { Topology, Lock, Options, Pen } from '@topology/core'
import * as FileSaver from 'file-saver'
import { Store } from 'le5le-store'


import { network } from '@/network/network'

import example from '@/static/json/example.json'



export default {
  data()
  {
    return {
      dataSubscribe: '',
      nodes: {},//k:tagName, v:[node1,node2]
      pullDataTimer: ''
    }
  },
  created()
  {
    this.open();
  },
  mounted()
  {
    this.init();
    this.pullDataTimer = setInterval(this.pullTagData, 1000);
  },

  methods: {
    con(){
      console.log(this.$route.params.path)
    },
    init()
    {
      window.scrollTo(0, 0);
      //this.canvasOptions.on = this.onMessage;
      this.canvas = new Topology('rootElement', this.canvasOptions);
      this.canvasHeight = this.canvas.canvas.height;
      //this.$store.state.canvas = this.canvas;
      window.v = this.canvas;
      window.s = this.$store;

      this.canvas.open(JSON.stringify(example));
      this.canvas.lock(2);

      this.dataSubscribe = Store.subscribe('wxwData', value =>
      {
        for (let i = 0; i < value.length; i++) {
          if (this.nodes[value[i].point]) {
            let penArray = this.nodes[value[i].point];
            for (let e in penArray) {
              let pent = penArray[e].binding.type;

              switch (pent.toLowerCase()) {
                case 'di': {
                  penArray[e].fillStyle = parseInt(value[i].latestValue) % 2 == 0 ? "#e00404ff" : "#21e004ff";
                } break;
                case 'ai': {
                  penArray[e].text = value[i].latestValue;
                } break;
                default:
                  { }
                  break;
              }
            }
          }
          else {
            // console.log(value[i].point);
            //console.log(this.nodes[value[i].point]) 
          }
        }
        this.canvas.render();
      });
    },
    open()
    {

      console.log("this.$route.query");
      console.log(this.$route.query);
      if (!this.$route.query.id) {
        return
      }
      else {
        let path = this.$route.query.id;
        console.log(path);
        network.getJsonFile(this.$axios, path);
      }


      let s = JSON.stringify(example);
      console.log(s)

      this.canvas.open(s);


      // if (data && data.id) {
      //   canvas.open(data.data)
      // }  %2Fstatic%2Fjson%2Fexample.json
    },
    pullTagData()
    {
      window.nnn = this.nodes;

      //if ((!this.nodes || Object.keys(this.nodes).length == 0) && this.canvas && this.canvas.data.pens.length > 0) {
      if (this.canvas && this.canvas.data.pens.length > 0) {
        // 遍历出所有要查询的节点
        for (let i = 0; i < this.canvas.data.pens.length; i++) {
          let node = this.canvas.data.pens[i];
          /**    
          bingding:{
            tagName:string;
            type:string;
          };
          //k:tagName, v:[node1,node2]
          */
          if (node.binding && node.binding.tagName != "") {

            if (!this.nodes[node.binding.tagName]) {

              this.nodes[node.binding.tagName] = [];
              //this.nodes[node.binding.tagName] = [];
            }

            if (!this.nodes[node.binding.tagName][node.id]) {
              this.nodes[node.binding.tagName][node.id] = node;
            }
          }
        }
      }
      // else
      // {
      //   //console.log("----------------------------------------");
      //   console.log(!this.nodes || Object.keys(this.nodes).length == 0)
      // }

      //this.getTagValues();
      network.getTagValues(this.$axios, Object.keys(this.nodes));
    }





  },
  beforeDestroy()
  {
    if (this.dataSubscribe != '') {
      this.dataSubscribe.unsubscribe();
    }
    if (this.pullDataTimer != '') {
      clearTimeout(this.pullDataTimer);
    }

  }
}
 </script> 
 <style lang="css" scoped>
 .mainpage{
   height: 100%;
   width:100%;
 }
 </style>