<template>
    <div id="canvasView">
        <canvas id="graphyCanvas" :width="width" :height="height"></canvas>
        <!-- <img class="graphy-point" src="./../assets/images/point.png"> -->
        <div class="cainter-view">
            <button @click="drawBall">拖动小球</button>
            <button @click="addBrush">{{isDraw ? "取消" : "画笔"}}</button>
            <button @click="undo">撤回</button>
        </div>
    </div>
</template>

<script>
import graphy from "@/assets/js/graphyCanvas";
export default {
  data() {
    return {
      el: "",
      x: 1111,
      startLine: {},
      isDraw: false, //是否显示画笔
      width: 400,
      height: 400,
      json: require("./../assets/json/cxds5.json")
    };
  },
  created() {
    // console.log(graphy)
  },
  mounted() {
    this.changeSize();
    window.addEventListener("resize", this.changeSize);
    this.el = new graphy("graphyCanvas",this.json);
    
    this.$nextTick(() => {
        this.createArc()
    });
    // console.log(this.json)
    // let doms = document.getElementsByClassName('graphy-point')
    // for(let i = 0; i < doms.length; i++){
    //     doms[i].addEventListener('mousedown',this.pointDown)
    // }
  },
  methods: {
    changeSize(e) {
      let wWidth = document.body.clientWidth;
      this.width = wWidth - 605;
      this.height = document.body.clientHeight - 5;
    },
    createArc() {
        let data = this.json.WallList
        this.el.line(data[0].PointList)
        // for(let i = 0; i < data.length; i++){
        // }
        this.el.ball()
    },

    pointDown(e){
        // console.log(e.target)
        e.target.addEventListener("mousemove",this.pointMove)
    },

    pointMove(e){
        e.target.style.left = 200 + 'px'
    },

    drawBall(){
        this.el.ballDraw()
    },

    addBrush() {
      if (!this.isDraw) {
        this.el.drawLine();
      } else {
        this.el.stopdrawLine();
      }
      this.isDraw = !this.isDraw;
    },

    undo() {
      this.el.undo();
    }
  }
};
</script>

<style lang="less" scoped>
#canvasView {
    position: relative;
  #graphyCanvas {
    //   border: 1px solid #ccc;
  }
  img{
      width: 20px;
      height: 20px;
      position: absolute;
      top: 10px;
      left: 10px;
  }
  .cainter-view {
    position: absolute;
    bottom: 20px;
    left: 30px;
  }
}
</style>
