<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 class="chooseTable" :data="tableData" style="width: 100%" @row-click="rowClick" :height="(totalHeight-500)+'px'">
                <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:'区域表格(未选ID)'}}</el-button>
            </el-popover>
          </el-form-item>
          <el-form-item>
            <el-button @click="saveMapInfo" type="warning">保存</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="add" icon="el-icon-plus" circle></el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="danger" @click="subtraction" icon="el-icon-minus" circle></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:mapHeight+'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>-->
        <canvas ref="canvas" class="gridCanvas" @mousedown="drawStart" @mousemove="drawMove"></canvas>
      </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.2)', '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() {
    if (!this.mapWidth) {
      setTimeout(() => {
        this.mapHeight = this.totalHeight - 100
      }, 300)
      setTimeout(() => {
        this.mapWidth = this.$refs.bgImg.offsetWidth
        this.$refs.canvas.width = this.mapWidth
        this.$refs.canvas.height = this.mapHeight
        this.drawContent()
      }, 1000)
    }
  },
  computed: {
    ...mapState(['totalHeight']),
  },
  watch: {
    mapInfo() {

      this.drawContent()
    }
  },
  methods: {
    add() {
      // if (this.mapHeight <= (this.totalHeight - 100) * 3) {
        this.mapHeight += (this.totalHeight - 100) /2

        setTimeout(() => {
          this.mapWidth = this.$refs.bgImg.offsetWidth
          this.$refs.canvas.width = this.mapWidth
          this.$refs.canvas.height = this.mapHeight
          this.drawContent()
        }, 500)
      // }

    },
    subtraction() {
      if (this.mapHeight > this.totalHeight - 100) {
        this.mapHeight -= (this.totalHeight - 100) / 2
        if (this.mapHeight < this.totalHeight - 100) {
          this.mapHeight = this.totalHeight - 100
        }
        setTimeout(() => {
          this.mapWidth = this.$refs.bgImg.offsetWidth
          this.$refs.canvas.width = this.mapWidth
          this.$refs.canvas.height = this.mapHeight
          this.drawContent()
        }, 500)
      }
    },
    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 = this.mapWidth / this.width
      var height = this.mapHeight / this.height
      var list = [...this.oldMapInfo]
      var ctx = this.$refs.canvas.getContext('2d')
      ctx.clearRect(0, 0, this.mapWidth, this.mapHeight);
      ctx.fillStyle = this.color[0];
      ctx.fillRect(0, 0, this.mapWidth, this.mapHeight);
      for (var i = 0; i < list.length; i++) {
        if (list[i] > 0) {
          ctx.clearRect(width * this.getX(i), height * this.getY(i), width, height);
          ctx.fillStyle = this.color[list[i]];
          ctx.fillRect(width * this.getX(i), height * this.getY(i), width, height);
        }
      }

      var lineWidth = 2
      if (list.length > 1000) {
        lineWidth = 1
      }
      else if (list.length > 10000) {
        lineWidth = 0.5
      }

      for (var i = 0; i < this.width; i++) {
        ctx.beginPath();
        ctx.lineWidth = lineWidth;
        ctx.moveTo(width * i, 0);
        ctx.lineTo(width * i, this.mapHeight);
        ctx.strokeStyle = 'rgb(255,255,255,255)';
        ctx.stroke();
      }

      for (var i = 0; i < this.height; i++) {
        ctx.beginPath();
        ctx.lineWidth = lineWidth;
        ctx.moveTo(0, height * i);
        ctx.lineTo(this.mapWidth, height * i);
        ctx.strokeStyle = 'rgb(255,255,255,255)';
        ctx.stroke();
      }
      var idList = [...this.mapInfo]
      var fontSize = 24
      if (idList.length > 1000) {
        fontSize = 12
      }
      if (idList.length > 10000) {
        fontSize = 9
      }
      for (var i = 0; i < idList.length; i++) {
        if (parseInt(idList[i]) > 0) {
          ctx.fillStyle = '#fff';
          ctx.font = "bold " + fontSize + "px '微软雅黑'";
          ctx.textBaseline = 'middle';
          ctx.fillText(idList[i], width * this.getX(i) + width / 2 - fontSize / 3, height * this.getY(i) + height / 2);
        }
      }
    },
    drawStart(e) {
      var width = this.mapWidth / this.width
      var height = this.mapHeight / this.height
      var x = parseInt(e.offsetX / width)
      var y = parseInt(e.offsetY / height)
      console.log(y * this.width + x)
      this.addStart(y * this.width + x)
    },
    drawMove(e) {
      var width = this.mapWidth / this.width
      var height = this.mapHeight / this.height
      var x = parseInt(e.offsetX / width)
      var y = parseInt(e.offsetY / height)
      this.changeMap(y * this.width + x)
    },
    addStart(index) {
      console.log(index)
      if (this.bgMove) {
        return
      }
      this.nowMapInfo = [...this.mapInfo]
      this.startMoveIndex = index
      console.log(this.mapInfo.length)
      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>
