<template>
  <div class="scrollView">
    <div class="room-grid">
      <div class="room-list">
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
      </div>
      <div class="room-list">
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
      </div>
      <div class="room-list">
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
      </div>
    </div>
    <div class="room-grid">
      <div class="room-list">
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
      </div>
      <div class="room-list">
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
      </div>
      <div class="room-list">
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
      </div>
      <div class="room-list">
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
      </div>
      <div class="room-list">
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
      </div>
      <div class="room-list">
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
      </div>
    </div>
    <div class="room-grid">
      <div class="room-list">
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
      </div>
      <div class="room-list">
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
      </div>
      <div class="room-list">
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
      </div>
      <div class="line"></div>
      <div class="line1"></div>
      <div class="line line-left1"></div>
      <div class="line line-center1"></div>
      <div class="line1 line-center2"></div>
      <div class="line line-center3"></div>
      <div class="line2"></div>
      <div class="line line-center4"></div>
      <div class="line1 line-center5"></div>
      <div class="line line-center6"></div>
      <div class="line line-right1"></div>
      <div class="line1 line-right2"></div>
      <div class="line line-right3"></div>
      <div class="line2 line2-left"></div>
      <div class="line2 line2-right"></div>
      <div class="line3"></div>
      <div class="line3 line3-bottom"></div>
      <div class="line3 line3-right-top"></div>
      <div class="line3 line3-right-bottom"></div>
      <div class="line4"></div>
      <div class="line4 line4-bottom"></div>
    </div>
    <div id="drawPanel">

    </div>
  </div>
</template>

<script>
  import drawingBoard from '../utils/drawingBoard';
  export default {
    name: "robotCanvas",
    methods: {
      goUp() {
        if(window._drawingBoard.valTrue) {
          this.$message('请先停止机器人自动操作！')
        } else {
          // window._drawingBoard.GoUp();
          this.$message('因不可抗力因素，暂时无法使用！');
        }
      },
      goLeft() {
        if(window._drawingBoard.valTrue) {
          this.$message('请先停止机器人自动操作！')
        } else {
          // window._drawingBoard.GoLeft();
          this.$message('因不可抗力因素，暂时无法使用！');
        }
      },
      goRight() {
        if(window._drawingBoard.valTrue) {
          this.$message('请先停止机器人自动操作！')
        } else {
          // window._drawingBoard.GoRight();
          this.$message('因不可抗力因素，暂时无法使用！');
        }
      },
      goBottom() {
        if(window._drawingBoard.valTrue) {
          this.$message('请先停止机器人自动操作！')
        } else {
          // window._drawingBoard.GoDown();
          this.$message('因不可抗力因素，暂时无法使用！');
        }
      },
      startInterval() {
        window._drawingBoard.startInterval();
      },
      stopInterval() {
        // window._drawingBoard.stopInterval();
      }
    },
    created() {
      window._drawingBoard = new drawingBoard();
    },
    mounted() {
      //DOMContentLoaded
      // document.addEventListener('load', function() {
        // console.log(window._drawingBoard);
        window._drawingBoard.init({
          drawPanel: "drawPanel",
          //backgroundImg: "map.png",
          width:1200,
          height:270,
          penColor: "#03A9F4",
          lineWidth:3, //路径宽度 2-6
          assist: true, //是否开启辅助线
        }, function(e) {
          // console.log(e);
        });

      // })
    }
  }
</script>

<style scoped>
  * {
    padding: 0;
    margin: 0;
  }
  #drawPanel{
    outline: 2px solid #000;

  }
  .scrollView {
    margin: 0 auto;
    position: relative;
    width:1200px;
    height:270px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
  }
  .menuListView{

    margin: 1em;
    text-align: center;
  }
  .menuList {
    position: relative;
    display: inline-block;
    vertical-align: middle;
  }
  .menuList>button{
    position: relative;
    display: inline-block;
    float: left;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 13px;
    font-weight: 400;
    /* line-height: 1.42857143; */
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #333;
    background-color: #fff;
    border-color: #ccc;
    outline: none;
    transition: all 0.3s;
  }
  .menuList>button:hover{
    opacity:0.7;
    border-color: #AAA;
    background-image: -webkit-gradient(linear,left top,left bottom,from(#f2f2f2),to(#ebebeb));
    background-image: -webkit-linear-gradient(top,#f2f2f2 0,#ebebeb 100%);
    background-image: -o-linear-gradient(top,#f2f2f2 0,#ebebeb 100%);
    background-image: linear-gradient(to bottom,#f2f2f2 0,#ebebeb 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFF2F2F2", endColorstr="#FFEBEBEB", GradientType=0);
    color: #222;
    text-decoration: none;
  }
  .menuList>button:active{
    border-color: #AAA;
    background-image: -webkit-gradient(linear,left top,left bottom,from(#f2f2f2),to(#ebebeb));
    background-image: -webkit-linear-gradient(top,#f2f2f2 0,#ebebeb 100%);
    background-image: -o-linear-gradient(top,#f2f2f2 0,#ebebeb 100%);
    background-image: linear-gradient(to bottom,#f2f2f2 0,#ebebeb 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFF2F2F2", endColorstr="#FFEBEBEB", GradientType=0);
    color: #222;
    text-decoration: none;
  }
  .menuList>button:first-child:not(:last-child){
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .menuList>button:last-child:not(:first-child){
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding: 7px 12px;
  }
  .menuList>button:not(:first-child):not(:last-child) {
    border-radius: 0;
  }
  .menuList>button+button{
    margin-left: -1px;
  }
  .room-grid{
    display:flex;
    flex-wrap:wrap;
    width:100%;
    justify-content:space-between;
  }
  .room-list{
    display:flex;

  }
  .room{
    width:50px;
    height:50px;
    border:1px solid #416C2B;
    margin-left:3px;
  }
  .room-list>.room:first-child{
    margin-left:0px;
  }
  .line {
    width: 4px;
    height: 52px;
    position: absolute;
    background-color: #416C2B;
    top: 0;
    left: 272px;
  }
  .line1 {
    width: 4px;
    height: 104px;
    position: absolute;
    background-color: #416C2B;
    top: 83px;
    left: 272px;
  }
  .line2 {
    width: 5px;
    height: 270px;
    position: absolute;
    background-color: #416C2B;
    top: 0;
    left: 598px;
  }
  .line2-left {
    left: -2px;
  }
  .line2-right {
    left: 1195px;
  }
  .line-left1 {
    top: 218px;
  }
  .line-center1 {
    left: 323px;
  }
  .line-center2 {
    left: 323px;
  }
  .line-center3 {
    left: 323px;
    top: 218px;
  }
  .line-center4 {
    left: 873px;
  }
  .line-center5 {
    left: 873px;
  }
  .line-center6 {
    top: 218px;
    left: 873px;
  }
  .line-right1 {
    left: 925px;
  }
  .line-right2 {
    left: 925px;
  }
  .line-right3 {
    left: 925px;
    top: 218px;
  }
  .line3 {
    width: 278px;
    height: 5px;
    position: absolute;
    background-color: #416C2B;
    top: -2px;
    left: 0;
  }
  .line3-bottom {
    top: 267px;
  }
  .line3-right-top {
    left: 920px;
  }
  .line3-right-bottom {
    left: 920px;
    top: 267px;
  }
  .line4 {
    width: 560px;
    height: 5px;
    position: absolute;
    background-color: #416C2B;
    top: -2px;
    left: 320px;
  }
  .line4-bottom {
    top: 267px;
  }
</style>
