<template>
  <div class="content">
    <el-row style="z-index:3">
      <el-form :inline="true" class="demo-form-inline" size="mini">
        <el-form-item>
          <el-button @click="bgMove=!bgMove">{{bgMove?'固定':'拖拽'}}底图</el-button>
        </el-form-item>
        <el-form-item label="宽">
          <el-input-number v-model="width" :min="1" label="描述文字"></el-input-number>
        </el-form-item>
        <el-form-item label="高">
          <el-input-number v-model="height" :min="1" label="描述文字"></el-input-number>
        </el-form-item>
        <el-form-item label="比率">
          <el-input-number v-model="mapRate" label="描述文字"></el-input-number>
        </el-form-item>
        <el-form-item>
          <el-button @click="createMap">生成网格</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="nowAdd=0,bgMove=false">添加可行走</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" @click="nowAdd=1,bgMove=false">添加不可行走</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="nowAdd=2,bgMove=false">添加主干道</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="saveMapInfo" type="warning">保存</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <div class="dragContent" :style="{cursor:isDown&&bgMove?'move':(bgMove?'default':'crosshair'),top:bgPosition.top+'px',left:bgPosition.left+'px'}" @mousedown="isDown=true" @mousemove="bgMouseMove" @mouseup="isDown=false">
      <img :src="mapImage" ref="bgImg" class="bgImg" :style="{height:totalHeight - 100+'px'}" alt>
      <div class="gridInfo">
        <div class="grid-item" @mousedown="addStart(index)" @mouseover="changeMap(index)" v-for="(item,index) in mapInfo" :style="{width:100/width/rate+'%',height:100/height/rate+'%',backgroundColor:color[item]}"></div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import { format } from 'date-fns'
import zh from 'date-fns/locale/zh_cn'
export default {
  created() {
    this.mapHeight = this.totalHeight - 100
    if (this.$route.query.id) {
      this.$http.get({
        url: '/landMark/getOne',
        data: {
          id: this.$route.query.id
        }
      }).then(res => {
        if (res.success) {


          this.width = res.data.mapWidth || 20;
          this.height = res.data.mapHeight || 20;
          this.mapRate = res.data.mapRate || 1;
          if (res.data.mapInfo) {
            this.mapInfo = res.data.mapInfo.split('');
          }

          this.mapImage = res.data.mapSprite || require('../assets/demo_picture.jpg');

        }
      })
    }


  },
  data() {
    return {
      isDown: false,
      bgMove: true,
      bgPosition: {
        left: 0,
        top: 60
      },
      width: 32,
      height: 22,
      rate: 1,
      mapRate: 1,
      mapInfo: [],
      color: ['rgba(111, 189, 39,0.5)', 'rgba(227,98,100,0.4)', 'rgba(83,147,255,0.4)'],
      nowAdd: 0,
      startMoveIndex: 0,
      nowMoveIndex: 0,
      nowMapInfo: [],
      mapImage: '',
      mapWidth: '',
      mapHeight: '',
    }
  },
  mounted() {

  },
  computed: {
    ...mapState(['totalHeight']),
  },
  methods: {
    bgMouseMove(e) {
      if (this.isDown) {
        if (this.bgMove) {
          this.bgPosition = {
            left: this.bgPosition.left + e.movementX,
            top: this.bgPosition.top + e.movementY
          }
        }

      }
    },
    createMap() {
      var sum = this.width * this.rate * this.height * this.rate
      var list = []
      for (var i = 0; i < sum; i++) {
        list.push(0)
      }
      this.mapInfo = list
      this.nowAdd = 0
      //   this.drawContent()

    },
    drawContent() {
      var width = document.getElementById("gridInfo").offsetWidth
      var height = document.getElementById('gridInfo').offsetHeight
      var gridWidth = width / this.width
      var gridHeight = height / this.height
      var canvas = document.getElementById("gridInfo");
      var ctx = canvas.getContext("2d");
      ctx.clearRect(0, 0, width, height);
      for (var i = 0; i < this.mapInfo.length; i++) {
        ctx.fillStyle = this.color[this.mapInfo[i]];
        ctx.fillRect(this.getX(i) * gridWidth, this.getY(i) * gridHeight, gridWidth, gridHeight);
        ctx.rect(this.getX(i) * gridWidth, this.getY(i) * gridHeight, gridWidth, gridHeight)
        ctx.lineWidth = 3;
        ctx.strokeStyle = 'rgba(255,255,255.5)'
        ctx.stroke();//绘制边框
      }
    },
    drawStart(e) {

      var width = document.getElementById("gridInfo").offsetWidth
      var height = document.getElementById('gridInfo').offsetHeight
      var perX = width / this.width
      var perY = height / this.height
      var x = parseInt(e.offsetX / perX)
      var y = parseInt(e.offsetY / perY)

      this.addStart(y * this.width + x)
    },
    addStart(index) {
      console.log(index)
      this.nowMapInfo = [...this.mapInfo]
      this.startMoveIndex = index
      this.mapInfo.splice(index, 1, this.nowAdd)
    },
    changeMap(index) {
      if (this.isDown) {
        this.nowMoveIndex = index
        console.log(this.getChangeList(this.startMoveIndex, index))
        this.mapInfo = [...this.nowMapInfo]
        this.getChangeList(this.startMoveIndex, index).forEach(item => {
          this.mapInfo.splice(item, 1, this.nowAdd)
        })
      }

    },
    getX(index) {
      return index % (this.width * this.rate)
    },
    getY(index) {
      return parseInt(index / (this.width * this.rate))
    },
    getChangeList(index1, index2) {
      var list = []
      var list1 = [this.getX(index1), this.getX(index2)].sort((a, b) => { return a - b })
      var list2 = [this.getY(index1), this.getY(index2)].sort((a, b) => { return a - b })
      for (var i = list1[0]; i <= list1[1]; i++) {
        for (var j = list2[0]; j <= list2[1]; j++) {
          if (list.indexOf(this.getIndex(i, j)) == -1) {
            list.push(this.getIndex(i, j))
          }
        }
      }
      return list
    },
    getIndex(x, y) {
      return y * (this.width * this.rate) + x
    },
    saveMapInfo() {

      if (this.$route.query.id) {


        var data = {
          id: this.$route.query.id,
          mapWidth: this.width,
          mapHeight: this.height,
          rate: this.rate,
          mapRate: this.mapRate,
          mapInfo: this.mapInfo.join(''),
        };

        this.$http.post({
          url: '/landMark/update',
          data: data
        }).then(res => {
          if (res.success) {
            this.$message.success('成功');
          } else {
            this.$message.warning('失败')
          }
        });

      }
    },


  }
}



</script>
<style lang="less" scoped>
.content {
    position: relative;
}
.dragContent {
    position: absolute;
    top: 60px;
    left: 0;
    border: 2px dashed #ccc;
    // cursor: move;
    z-index: 1;
    .gridInfo {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 3;
        display: flex;
        flex-wrap: wrap;

        .grid-item {
            background-color: rgba(0, 0, 0, 0.3);
            box-sizing: border-box;
            border: 1px solid rgba(255, 255, 255, 1);
        }
    }

    .gridCanvas {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 3;
    }
}
.bgImg {
    position: relative;
    width: auto;
    z-index: 2;
}
</style>
