<template>
  <div>
    <el-button
      type="primary"
      icon="el-icon-edit-outline"
      size="mini"
      @click.prevent="drawRail"
      style="margin-left: 20px; margin-bottom: 10px"
    >
      绘制点位
    </el-button>
    <div id="map" style="height: 600px"></div>
  </div>
</template>

<script>
import 'maptalks/dist/maptalks.css'
import * as maptalks from 'maptalks'
import { _locate } from '@/utils'
var locationData, baseRelativeCoordinate0, baseRelativeCoordinate1, baseRelativeExtent, baseExtent
var buildNo = 0,
  buildPanelPos = 0,
  floorNo = 0,
  floorPanelPos = 0,
  floorNoArray
var buildData
var map, mapLayer, personLayer, PointLayer
var floorPanel, buildPanel
var drawTool

export default {
  props: {
    form: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      PointLayer: undefined,
      baseRelativeCoordinate0: null,
      baseRelativeCoordinate1: null,
    }
  },
  created() {
    window.moveBuildPanel = this.moveBuildPanel
    window.changeBuild = this.changeBuild
    window.moveFloorPanel = this.moveFloorPanel
    window.changeFloor = this.changeFloor
  },
  mounted() {
    this.$nextTick((_) => {
      this.getLocationData()
    })
  },
  methods: {
    getLocationData() {
      locationData = this.$setting
      if (locationData) {
        buildNo = locationData.DefaultBuild // 默认建筑(在BuildList数组的位置)
        buildData = locationData.BuildList[buildNo] //默认建筑数据

        floorNo = buildData.DefaultFloor //默认楼层(在FloorList数组的位置)

        if (buildData.FloorList[floorNo].No instanceof Array) {
          floorNoArray = buildData.FloorList[floorNo].No
        } else {
          floorNoArray = [buildData.FloorList[floorNo].No]
        }

        this.baseRelativeCoordinate0 = new maptalks.Coordinate(buildData.RelativeCoordinate0)
        this.baseRelativeCoordinate1 = new maptalks.Coordinate(buildData.RelativeCoordinate1)
        baseRelativeExtent = new maptalks.Extent(
          this.baseRelativeCoordinate0,
          this.baseRelativeCoordinate1
        )

        baseExtent = new maptalks.Extent(
          new maptalks.Coordinate(0, 0),
          new maptalks.Coordinate(
            this.baseRelativeCoordinate1.x - this.baseRelativeCoordinate0.x,
            this.baseRelativeCoordinate0.y - this.baseRelativeCoordinate1.y
          )
        )

        this.createMap()
        const { x, y } = this.form
        if (x && y) {
          let point = new maptalks.Coordinate(
            x - this.baseRelativeCoordinate0.x,
            -y + this.baseRelativeCoordinate0.y
          )
          this.PointLayer.addGeometry(new maptalks.Marker(point))
        }
      } else {
        console.log('获取定位配置文件失败')
      }
    },
    createMap() {
      if (map) map.remove()
      map = new maptalks.Map('map', {
        center: baseExtent.getCenter(),
        //centerCross: true,
        zoom: buildData.RelativeMapZoom,
        maxZoom: buildData.RelativeMapMaxZoom,
        minZoom: buildData.RelativeMapMinZoom,
        bearing: buildData.MapBearing,
        pitch: buildData.MapPitch,
        dragRotate: false,
        maxExtent: baseExtent,
        zoomControl: {
          position: 'top-left',
          slider: false,
          zoomLevel: false,
        },
        attribution: {
          content: '',
        },
        spatialReference: {
          projection: 'identity',
          resolutions: (function () {
            const resolutions = []
            for (let i = 0; i < buildData.RelativeResolutionMax; i++) {
              resolutions[i] = buildData.RelativeResolution0 / Math.pow(2, 10 - i)
            }
            return resolutions
          })(),
          fullExtent: baseExtent,
        },
      })
      map.fitExtent(baseExtent, 0)
      mapLayer = new maptalks.ImageLayer(
        'map',
        [
          {
            url: buildData.FloorList[floorNo].MapPath,
            extent: baseExtent,
            opacity: 1,
          },
        ],
        {
          forceRenderOnMoving: true,
          forceRenderOnZooming: true,
          forceRenderOnRotating: true,
        }
      ).addTo(map)
      this.PointLayer = new maptalks.VectorLayer('rail', {
        zIndex: 1,
        forceRenderOnMoving: true,
        forceRenderOnZooming: true,
        forceRenderOnRotating: true,
      }).addTo(map)
      drawTool = new maptalks.DrawTool({
        mode: 'Point',
        // symbol: {
        //   //'lineColor': '#FFFFFF',
        //   lineColor: 'rgb(0,196,240)',
        //   lineWidth: 2,
        //   lineOpacity: 1,
        //   polygonFill: 'rgb(135,196,240)',
        //   polygonOpacity: 0.6
        // },
        once: true,
      })
        .addTo(map)
        .disable()

      drawTool.on('drawend', (param) => {
        console.log(param)
        const { coordinate } = param
        this.form.x = Math.round(coordinate.x) + this.baseRelativeCoordinate0.x + ''
        this.form.y = -Math.round(coordinate.y) - this.baseRelativeCoordinate0.y + ''
        this.PointLayer.addGeometry(param.geometry)
      })
      new maptalks.control.Toolbar({
        items: [
          {
            item: '复位地图',
            click: function () {
              map.animateTo(
                {
                  //center: baseRelativeExtent.getCenter(),
                  //zoom: 1,
                  bearing: buildData.MapBearing,
                  pitch: buildData.MapPitch,
                },
                {
                  duration: 1000,
                }
              )
              map.fitExtent(baseExtent, 0, {
                duration: 1000,
              })
            },
          },
        ],
      }).addTo(map)

      if (buildData.FloorPanelDisplay) {
        this.createFloorPanel()
      }

      if (locationData.BuildPanelDisplay) {
        this.createBuildPanel()
      }
    },

    drawRail() {
      this.PointLayer.clear()
      drawTool.enable()
    },

    createBuildPanel() {
      if (buildNo <= 1) {
        buildPanelPos = 0
      } else if (buildNo >= locationData.BuildList.length - 3) {
        buildPanelPos = locationData.BuildList.length - 3
      } else {
        buildPanelPos = buildNo - 1
      }

      let mapdiv = document.getElementById('map')
      let mapdivh = mapdiv.clientHeight || mapdiv.offsetHeight

      buildPanel = new maptalks.control.Panel({
        position: { top: mapdivh / 2 - 60, left: '20' },
        draggable: false,
        custom: true,
        content: this.makeBuildPanelContent(),
        closeButton: false,
      }).addTo(map)
    },

    makeBuildPanelContent() {
      let content
      content = '<table class="map-buildpanel" cellpadding="0" frame=void rules=none>'
      content +=
        '<tr><td><button onclick="moveBuildPanel(0)"><div class="up-arrows"></div></button></td></tr>'
      for (let i = buildPanelPos; i <= buildPanelPos + 2; i++) {
        if (i == buildNo) {
          content +=
            '<tr><td><button style="background: rgb(28,188,156)">' +
            locationData.BuildList[i].BuildAbbName +
            '</button></td></tr>'
        } else {
          if (locationData.BuildList[i]) {
            content +=
              '<tr><td><button onclick="changeBuild(' +
              i +
              ')">' +
              locationData.BuildList[i].BuildAbbName +
              '</button></td></tr>'
          } else {
            content += '<tr><td><button></button></td></tr>'
          }
        }
      }

      content +=
        '<tr><td><button onclick="moveBuildPanel(1)"><div class="down-arrows"></div></button></td></tr>'
      content += '</table>'
      return content
    },

    moveBuildPanel(s) {
      let b = buildPanelPos
      if (s == 0) {
        if (b > 0) b--
      } else if (s == 1) {
        if (b < buildData.FloorList.length - 3) b++
      }
      if (b != buildPanelPos) {
        buildPanelPos = b
        buildPanel.setContent(this.makeBuildPanelContent())
      }
    },

    changeBuild(b) {
      buildNo = b
      buildPanel.setContent(this.makeFloorPanelContent())

      buildData = locationData.BuildList[buildNo]

      buildData.FloorList = buildData.FloorList.filter(
        (f) => f.No != undefined && typeof f.No === 'number' && !isNaN(f.No) && f.No != 0
      )
      if (buildData.DefaultFloor >= buildData.FloorList.length) buildData.DefaultFloor = 0

      floorNo = buildData.DefaultFloor
      if (buildData.FloorList[floorNo].No instanceof Array) {
        floorNoArray = buildData.FloorList[floorNo].No
      } else {
        floorNoArray = [buildData.FloorList[floorNo].No]
      }

      this.baseRelativeCoordinate0 = new maptalks.Coordinate(buildData.RelativeCoordinate0)
      this.baseRelativeCoordinate1 = new maptalks.Coordinate(buildData.RelativeCoordinate1)
      baseRelativeExtent = new maptalks.Extent(
        this.baseRelativeCoordinate0,
        this.baseRelativeCoordinate1
      )
      baseExtent = new maptalks.Extent(
        new maptalks.Coordinate(0, 0),
        new maptalks.Coordinate(
          this.baseRelativeCoordinate1.x - this.baseRelativeCoordinate0.x,
          this.baseRelativeCoordinate0.y - this.baseRelativeCoordinate1.y
        )
      )

      this.createMap()

      drawTool.disable()
      this.PointLayer.clear()
    },

    createFloorPanel() {
      if (floorNo <= 1) {
        floorPanelPos = 0
      } else if (floorNo >= buildData.FloorList.length - 3) {
        floorPanelPos = buildData.FloorList.length - 3
      } else {
        floorPanelPos = floorNo - 1
      }

      let mapdiv = document.getElementById('map')
      let mapdivh = mapdiv.clientHeight || mapdiv.offsetHeight

      if (floorPanel) floorPanel.remove()

      floorPanel = new maptalks.control.Panel({
        position: { top: mapdivh / 2 - 60, right: '20' },
        draggable: false,
        custom: true,
        content: this.makeFloorPanelContent(),
        closeButton: false,
      }).addTo(map)
    },

    makeFloorPanelContent() {
      let content
      content = '<table class="map-floorpanel" cellpadding="0" frame=void rules=none>'
      content +=
        '<tr><td><button onclick="moveFloorPanel(0)"><div class="up-arrows"></div></button></td></tr>'
      for (let i = floorPanelPos; i <= floorPanelPos + 2; i++) {
        if (i == floorNo) {
          content +=
            '<tr><td><button style="background: rgb(28,188,156)">' +
            buildData.FloorList[i].Name +
            '</button></td></tr>'
        } else {
          if (buildData.FloorList[i]) {
            content +=
              '<tr><td><button onclick="changeFloor(' +
              i +
              ')">' +
              buildData.FloorList[i].Name +
              '</button></td></tr>'
          } else {
            content += '<tr><td><button></button></td></tr>'
          }
        }
      }

      content +=
        '<tr><td><button onclick="moveFloorPanel(1)"><div class="down-arrows"></div></button></td></tr>'
      content += '</table>'
      return content
    },

    moveFloorPanel(s) {
      let f = floorPanelPos
      if (s == 0) {
        if (f > 0) f--
      } else if (s == 1) {
        if (f < buildData.FloorList.length - 3) f++
      }
      if (f != floorPanelPos) {
        floorPanelPos = f
        floorPanel.setContent(this.makeFloorPanelContent())
      }
    },

    changeFloor(f) {
      floorNo = f
      floorPanel.setContent(this.makeFloorPanelContent())

      if (buildData.FloorList[floorNo].No instanceof Array) {
        floorNoArray = buildData.FloorList[floorNo].No
      } else {
        floorNoArray = [buildData.FloorList[floorNo].No]
      }

      mapLayer.setImages([
        {
          url: buildData.FloorList[floorNo].MapPath,
          extent: baseExtent,
          opacity: 1,
        },
      ])

      drawTool.disable()
      this.PointLayer.clear()
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .map-floorpanel {
  background: rgb(52, 73, 94);
  width: 40px;
  height: 120px;
  padding: 0px;
  color: #fff;
  border: 0px solid rgb(231, 234, 236) !important;
}

::v-deep .map-floorpanel tr {
  text-align: center;
  height: 30px;
}

::v-deep .map-floorpanel td {
  text-align: center;
  height: 30px;
}

::v-deep .map-floorpanel button {
  width: 40px;
  height: 30px;
  border: none;
  background: rgb(52, 73, 94);
  color: #fff;
}

::v-deep .map-buildpanel {
  background: rgb(52, 73, 94);
  width: 40px;
  height: 120px;
  padding: 0px;
  color: #fff;
  border: 0px solid rgb(231, 234, 236) !important;
}

::v-deep .map-buildpanel tr {
  text-align: center;
  height: 30px;
}

::v-deep .map-buildpanel td {
  text-align: center;
  height: 30px;
}

::v-deep .map-buildpanel button {
  width: 40px;
  height: 30px;
  border: none;
  background: rgb(52, 73, 94);
  color: #fff;
}

::v-deep .up-arrows {
  width: 0;
  height: 0;
  border-bottom: 20px solid white;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}

::v-deep .down-arrows {
  width: 0;
  height: 0;
  border-top: 20px solid white;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
