<template>
  <div>
    <canvas
      id="mycanvas"
      width="1000"
      height="1000"
      style="text-align: center"
    ></canvas>
  </div>
</template>

<script>
import Vue from "vue";
import vueJsonTreeView from "vue-json-tree-view";
import * as flexranAPI from "../../../utils/flexranAPI";
import Tooltip from "element-ui";
Vue.use(vueJsonTreeView);
Vue.use(Tooltip);
export default {
  data() {
    return {
      hover: false,
      ue_list: [],
      slice_conf: [],
      color_arrs:["#909399","#F56C6C","#E6A23C","#67C23A"],      
      pingInfo:
        "PING 172.16.0.x (172.16.0.x) 56(84) bytes of data.<br/>64 bytes from 172.16.0.6: icmp_seq=1 ttl=64 time=39.5 ms<br/>64 bytes from 172.16.0.6: icmp_seq=2 ttl=64 time=39.1 ms<br/>64 bytes from 172.16.0.6: icmp_seq=3 ttl=64 time=28.7 ms<br/>64 bytes from 172.16.0.6: icmp_seq=4 ttl=64 time=45.6 ms<br/><br/>--- 172.16.0.6 ping statistics ---<br/>4 packets transmitted, 4 received, 0% packet loss, time 242ms<br/>rtt min/avg/max/mdev = 28.799/38.307/45.687/6.068 ms<br/>",
      visible: false,
    };
  },
    computed: {
    slices(){
        return this.$store.state.slice_info
    },
    dataList(){
        return this.$store.state.ue_list
    },
    prb_info(){
        return this.$store.state.prb_info
    }
  },
  mounted() {

    console.log(this.$store.state.prb_info)
    let canvas = document.getElementById("mycanvas");
    let ctx = canvas.getContext("2d");
    canvas.width = 600;
    canvas.height = 500;
    let width = 600;
    let height = 500;
    let rectH = 20;
    let rectW = 20;
    ctx.lineWidth = 0.5;
 	ctx.font="25px 宋体";
            //绘制表格
        // 第一步： 绘制横线
        for(let i=0;i<=width/20;i++){
            ctx.moveTo(rectW*i,0);
            //如果不设置moveTo，当前画笔没有位置
            ctx.lineTo(rectW*i,height);
            if(i==0){
              ctx.lineTo((rectW+1)*i,height);
            }
        }
        //第二步：绘制竖线：如果绘制的格子的宽高相等，可以将for循环放到一个里面；
        for(let i=0;i<=height/20;i++){
            ctx.moveTo(0,rectH*i);
            ctx.lineTo(width,rectH*i);
        }

	 		//strokeText(text: String, x: Number, y: Number, maxWidth: Number): none
        
        ctx.stroke();    
  


  },
  methods: {
    async getping(imsi) {
      this.timer = setInterval(() => {
        flexranAPI.SEND_PING({ imsi: imsi }).then((result) => {
          this.pingInfo = result.output.split("\n").join("<br/>");
        });
      }, 1000);
    },
    drawCell(x,y){
            let canvas=document.getElementById("mycanvas");
            let ctx=canvas.getContext('2d');
            ctx.fillStyle="#aaa"
            ctx.fillRect(x,y,19,19);
            ctx.font="700";
            ctx.stroke();    
            return ctx

    },
    clearClomnCell(x){
            for(let i=0;i<25;i++){
                let canvas=document.getElementById("mycanvas");
                let ctx=canvas.getContext('2d');
                ctx.clearRect(x,i*20,19,19);
                ctx.stroke();                
            }
    },
    drawClomnCell(x,data){
        let count=0
        this.clearClomnCell(x)

        for(let i =0;i<data.length;i++){
            let prb
            if(data[i].id!="0"){
                if(count<24 && data[i].ddqn.mrb>0){
                 prb = (data[i].ddqn.mrb+1)*2>25?25:(data[i].ddqn.mrb)*2
                }
                else{
                 prb = (data[i].ddqn.mrb+1)*2>25?25:((data[i].ddqn.mrb)*2)    
                }
                
            }
            else{
                 prb = (data[i].ddqn.mrb)*2>25?25:data[i].ddqn.mrb*2
            }
            for(let j=count;j<prb+count;j++){
                let canvas=document.getElementById("mycanvas");
                let ctx=canvas.getContext('2d');
                ctx.fillStyle=this.color_arrs[data[i].id]
                ctx.fillRect(x,j*20,19,19);
                ctx.stroke();    
                           
            }
          count+=prb

        }



    }
  },
  watch: {
    prb_info: {
      handler(newValue, oldValue) {
        newValue.forEach((v,i)=>{
           this.drawClomnCell(i*20,v)
        })

      },
      deep: true,
    },      
    hover: {
      handler(newValue, oldValue) {
        console.log(this.hover);
        if (this.hover !== false) {
          this.getping(this.hover);
        }
        if (this.hover == false) {
          clearInterval(this.timer);
        }
      },
      deep: true,
    },
  },
};
</script>

<style scoped>
.title {
  color: #888;
  font-size: 18px;
  font-weight: initial;
  letter-spacing: 0.25px;
  margin-top: 10px;
}

.items {
  margin-top: 8px;
}

.item {
  display: flex;
  margin-bottom: 6px;
}

.item .name {
  color: #6a6a6a;
  margin-right: 6px;
}

.item .value {
  color: #35495e;
  font-weight: bold;
}
</style>
