<template>
  <el-container class="content">
    <el-main>
      <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="primary" @click="nowAdd=0,bgMove=false">删除区域</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="danger" @click="bgMove=true">取消添加</el-button>
          </el-form-item>
          <el-form-item>
            <el-popover placement="right" width="400" trigger="hover">
              <el-table :data="tableData" style="width: 100%" @row-click="rowClick">
                <el-table-column prop="id" label="区域id"></el-table-column>
                <el-table-column prop="cityId" label="城市ID"></el-table-column>
                <el-table-column prop="areaName" label="区域名称"></el-table-column>
              </el-table>
              <el-button slot="reference" type="success" plain size="mini">{{nowAdd?'当前已选区域ID'+nowAdd:'区域表格'}}</el-button>
            </el-popover>
          </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" style="z-index:2">
          <div class="grid-item" v-for="(item,index) in oldMapInfo" :style="{width:100/width/rate+'%',height:100/height/rate+'%',backgroundColor:color[item]}"></div>
        </div>
        <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:colorArea[0]}">{{item&&item!='0'?item:''}}</div>
        </div>
      </div>
    </el-main>
  </el-container>
</template>
<script>
import { mapState } from 'vuex'
import { format } from 'date-fns'
import zh from 'date-fns/locale/zh_cn'
export default {
  created() {

    var data = {}
    if (this.$route.query.column) {
      var columnList = this.$route.query.column.split(';')
      columnList.forEach(item => {
        var tempColumn = item;
        data[tempColumn.split(',')[1]] = tempColumn.split(',')[0];
      })

    }
    this.landmarkId = data.landmarkId
    this.mapHeight = this.totalHeight - 100
    if (this.$route.query.column) {
      this.$http.get({
        url: '/landMark/getOne',
        data: {
          id: data.landmarkId
        }
      }).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.oldMapInfo = res.data.mapInfo.split('');
          }

          if (res.data.areaMapInfo) {
            this.mapInfo = res.data.areaMapInfo.split(',')
          }
          else {
            var list = []
            this.oldMapInfo.forEach(item => {
              list.push(0)
            })
            this.mapInfo = list
          }

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

        }
      })





      this.$http.get({
        url: '/areaInfo/all',
        data: data
      }).then(res => {
        if (res.success) {
          this.tableData = res.data
        }
      })
    }


  },
  data() {
    return {
      landmarkId: 0,
      isDown: false,
      bgMove: false,
      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)'],
      colorArea: ['rgba(255,255,255,0)'],
      nowAdd: 0,
      startMoveIndex: 0,
      nowMoveIndex: 0,
      nowMapInfo: [],
      mapImage: '',
      mapWidth: '',
      mapHeight: '',
      oldMapInfo: [],
      tableData: []
    }
  },
  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) {
      if (this.bgMove) {
        return
      }
      this.nowMapInfo = [...this.mapInfo]
      this.startMoveIndex = index
      if (parseInt(this.nowAdd) != 0 && parseInt(this.mapInfo[index]) > 0) {

      }
      else {
        this.mapInfo.splice(index, 1, this.nowAdd)
      }

    },
    changeMap(index) {
      if (this.bgMove) {
        return
      }
      if (this.isDown) {
        this.nowMoveIndex = index
        this.mapInfo = [...this.nowMapInfo]
        this.getChangeList(this.startMoveIndex, index).forEach(item => {
          if (parseInt(this.nowAdd) != 0 && parseInt(this.mapInfo[item]) > 0) {
          }
          else {
            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.landmarkId) {


        var data = {
          id: this.landmarkId,
          mapWidth: this.width,
          mapHeight: this.height,
          rate: this.rate,
          areaMapInfo: this.mapInfo.join(','),
        };

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

      }
    },
    rowClick(row, event, column) {
      this.nowAdd = row.id
      this.bgMove = false
    }

  }
}



</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);
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-weight: bold;
      font-size: 24px;
    }
  }

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