<template>

    <div style="width: 100%,height: 100%;">
    <canvas ref="canvasRefId" id="canvasId" :width="canvasWidth" :height="canvasHeight"></canvas>
    </div>
</template>
<script>
 /*eslint-disable */
export default {
  name: 'FabricCanvas',
  props: {
    msg: String
  },

  data(){
    return {
        redPackImg:null,
        canvasins:null,
        refreshImageTimer :null,
        createImageTimer:null,
        canvasWidth: null,
        canvasHeight: null, 
        imageArray:[],
        rowNum :1,
        imgHeight:50,
        imgWidth:50,
        columnNum:null,
        columnWidth :null
      
    }
  },
  methods:{
    computeNumber(){

    },
    createCanvas(){
       let canvasins =   new fabric.Canvas('canvasId',{
          backgroundColor: 'rgb(100,100,200)'
        });
         this.canvasins = canvasins;;
         return canvasins;
    },
    createImage(score,left,top,_this){
          fabric.Image.fromURL('img/red_pack.png',(imgIns)=>{
/*           imgIns.set("width",50);
           imgIns.set("height",50);*/
           imgIns.set("left",left);
           imgIns.set("top",top);
           imgIns.set("scaleX",0.1);
           imgIns.set("scaleY",0.1);
           imgIns.set("selectable",false);
           imgIns.set("isOpen",false);
           imgIns.set("isClick",false);
           imgIns.set("isRemove",false);
           imgIns.set("score",score);
           _this.canvasins.add(imgIns);
            _this.imageArray.push(imgIns);
           
 
        });
    },
    addEvent(canvasins){
      let _this = this;
      canvasins.on('mouse:down', function(options) {

          if (options.pointer ) {
            let x = options.pointer.x;
            let y = options.pointer.y;
            for(let i = 0;i<_this.imageArray.length;i++){
              let item = _this.imageArray[i];
                 let left = item.get("left");
                 let top = item.get("top");
                 let isClick = item.get("isClick");
                 if(!isClick){
                     let leftIn = x  - left;
                     let topIn = y -top;
                     if(leftIn > 0 && leftIn<50  ){
                       if(topIn > 0 && topIn<50  ){
                           item.set("isClick",true);
                           item.setSrc('img/red_open_pack.png',function(imgOpen) {
                              item.set("scaleX",0.11);
                              item.set("scaleY",0.11);
                              item.set("selectable",false);
                              item.set("isOpen",true);
                            console.log("isOpen==true");
                          });
                       }
                     }
                 }
                
            }
          }
          
           
        });
    },
    init(){
        let canvasins = this.createCanvas();
        this.addEvent(canvasins);
        this.creatTimer(); 
       console.log('fini1sh');
      // this.createImage(50,10,10,this);
    },
    creatTimer(){
        let _this = this;
        this.refreshImageTimer = setInterval(() => {
            _this.refreshImagesWorker(_this);
          }, 100);
        this.createImageTimer = setInterval(() => {
            _this.createImagesWorker(_this);
          }, 1000);
    },
    
    getColumnIndex(leftArray,_this){
            let columnIndex  = parseInt(Math.random()*_this.columnNum) ;
            for(let j =0;j<leftArray.length;j++){
                if(leftArray[j] && leftArray[j] == columnIndex){
                    return _this.getColumnIndex(leftArray);
                }
            }
            leftArray.push(columnIndex);
            return columnIndex;
    },
    createImagesWorker(_this){
         let leftArray = [];
        for(let i = 0;i<_this.rowNum; i++){
           let columnIndex = _this.getColumnIndex(leftArray,_this);
            let left =  columnIndex*_this.columnWidth+10;
            _this.createImage(50,left,10,_this);
        }
        _this.canvasins.renderAll();
    },
    refreshImagesWorker(_this){
       let removeArray = new Array();
       for(let i=0;i<_this.imageArray.length;i++){
          let item =  _this.imageArray[i];
          let isRemove = item.get("isRemove");
          if(!isRemove){
              let top = item.get("top")+3;
              if(top > _this.canvasHeight){
                item.set("isRemove",true);
                removeArray.push(item);
              }else{
                 item.set("top",top+3);
              }
          }
         
       }
      /*
        if(removeArray.length>0){
          for(let i =0;i<removeArray.length;i++){
            _this.canvasins.remove(removeArray[i]);
          }
      }*/
        _this.canvasins.renderAll();
    },
    removeOpenImage(){
      let  length = this.canvasins.size();
      let removeArray = new Array();
      for(let i =0;i<length;i++){
          let item = this.canvasins.item(i);
          if(item.type && item.type=='image'){
              let openflag = item.get("isOpen");
              if( openflag == true){
                 removeArray.push(item);
              }
          }
      }
      if(removeArray.length>0){
          for(let i =0;i<removeArray.length;i++){
            this.canvasins.remove(removeArray[i]);
          }
        
        //this.canvasins.renderAll();
      }

    }
  },

  created(){
        this.canvasWidth = document.body.clientWidth ;
        this.canvasHeight = document.body.clientHeight; 
        this.columnNum=  parseInt(this.canvasWidth/ (this.imgWidth+20));
        this.columnWidth = parseInt(this.canvasWidth/ this.columnNum);
  },
  mounted(){
        let urlTemp = "assets/red_pack.png";
        this.redPackImg = require("@/"+urlTemp)
        this.init();
  }
}
</script>