<template>
  <div>
    <el-button
      v-show="drawShow"
      type="primary"
      icon="el-icon-edit-outline"
      size="mini"
      @click.prevent="drawGeometry"
      style="margin-left: 20px; margin-bottom: 10px"
    >
      绘制图形
    </el-button>

    <el-select
      v-show="selectShow"
      v-model="drawMode"
      clearable
      size="small"
      placeholder="请选择形状"
      class="filter-item"
      style="width: 280px"
      @change="changeShape"
    >
      <el-option
        v-for="item of shapeOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <div :id="mapDivId" style="height: 700px"></div>
  </div>
</template>
<!--
数据结构
v-model, background
{
  buildId: '',//必填
  floorNo: 0,//必填
  geometries: [{
    type: 'Point',//必填
    points: [{ x: 0, y: 0 }],//必填，根据图形决定个数
    symbol: {},//选填，不填根据symbols的值使用默认值
    radius: 0,//选填，图形为圆形时必填
    width: 0, //选填，图形为矩形或者椭圆形时必填
    height: 0,//选填，图形为矩形或者椭圆形时必填
    infoWindow: {
      title: '',
      width: 150,
      content: '',
    },//选填，不填没有弹出窗
    openInfoWindow: true,//选填
  }]//必填
}
symbols//设定各个图形的默认样式
{
  Point:{},
  Polygon:{},
  Circle: {},
  Ellipse: {},
  Rectangle: {}
}
-->
<script>
import 'maptalks/dist/maptalks.css'
import * as maptalks from 'maptalks'

export default {
  props: {
    value: {
      type: Array,
      require: true,
      default: () => [],
    },
    buildFloor: {
      type: Object,
      default: () => {},
    },
    symbols: {
      type: Object,
      default: () => {
        return {
          Point: null,
          LineString: {
            lineColor: 'rgb(0,196,240)',
            lineWidth: 2,
            lineOpacity: 1,
          },
          Polygon: {
            lineColor: 'rgb(0,196,240)',
            lineWidth: 2,
            lineOpacity: 1,
            polygonFill: 'rgb(135,196,240)',
            polygonOpacity: 0.6,
            textName: '',
            textSize: 18,
            textFill: '#eb4848',
          },
          Circle: {
            lineColor: 'rgb(0,196,240)',
            lineWidth: 2,
            lineOpacity: 1,
            polygonFill: 'rgb(135,196,240)',
            polygonOpacity: 0.6,
          },
          Ellipse: {
            lineColor: 'rgb(0,196,240)',
            lineWidth: 2,
            lineOpacity: 1,
            polygonFill: 'rgb(135,196,240)',
            polygonOpacity: 0.6,
          },
          Rectangle: {
            lineColor: 'rgb(0,196,240)',
            lineWidth: 2,
            lineOpacity: 1,
            polygonFill: 'rgb(135,196,240)',
            polygonOpacity: 0.6,
          },
        }
      },
    },
    background: {
      type: Array,
      default: () => [],
    },
    drawShow: {
      type: Boolean,
      default: false,
    },
    selectShow: {
      type: Boolean,
      default: false,
    },
    lineLengthShow: {
      type: Boolean,
      default: false,
    },
    drawMode: {
      type: String,
      default: 'Point',
    },
  },
  data() {
    return {
      mapDivId: '',
      locationData: null,
      baseRelativeCoordinate0: null,
      baseRelativeCoordinate1: null,
      baseRelativeExtent: null,
      baseExtent: null,
      baseGPSCoordinate0: null,
      baseGPSCoordinate1: null,
      baseGPSExtent: null,
      // GPSCoordinate0: null,

      buildNo: 0,
      buildPanelPos: 0,
      floorNo: 0,
      floorPanelPos: 0,
      floorNoArray: null,

      buildData: null,
      map: null,
      mapLayer: null,
      geometryLayer: null,
      backgroundLayer: null,
      foregroundLayer: null,
      drawTool: null,

      floorPanel: null,
      buildPanel: null,

      shapeOptions: [
        { label: '点', value: 0, shapeType: 'marker', mode: 'Point', max: 1, min: 1 },
        { label: '线', value: 1, shapeType: 'line', mode: 'LineString', max: 999, min: 2 },
        { label: '矩形', value: 2, shapeType: 'rectangle', mode: 'Rectangle', max: 4, min: 4 },
        { label: '圆形', value: 3, shapeType: 'round', mode: 'Circle', max: 1, min: 1 },
        { label: '椭圆', value: 4, shapeType: 'round2', mode: 'Ellipse', max: 1, min: 1 },
        { label: '多边形', value: 5, shapeType: 'polygon', mode: 'Polygon', max: 999, min: 3 },
      ],
      drawToolOption: [
        'Point',
        'LineString',
        'Polygon',
        'Circle',
        'Ellipse',
        'Rectangle',
        'FreeHandLineString',
        'FreeHandPolygon',
      ],
    }
  },
  created() {
    window.moveBuildPanel = this.moveBuildPanel
    window.changeBuild = this.changeBuild
    window.moveFloorPanel = this.moveFloorPanel
    window.changeFloor = this.changeFloor
    this.mapDivId = Math.random().toString(16)
  },
  mounted() {
    this.getLocationData()
  },
  watch: {
    value(newValue, oldValue) {
      this.refreshGeometry()
    },
    background(newValue, oldValue) {
      this.refreshGeometry()
    },
    buildFloor(newValue, oldValue) {
      if (newValue && newValue.buildId) {
        if (newValue.buildId != this.buildData.BuildId) {
          let b = this.locationData.BuildList.findIndex((a) => a.BuildId == this.buildFloor.buildId)
          if (b > -1) this.changeBuild(b)
        } else if (newValue.floorNo && this.floorNoArray.indexOf(newValue.floorNo) == -1) {
          let f = this.buildData.FloorList.findIndex((a) => a.No == this.buildFloor.floorNo)
          if (f > -1) this.changeFloor(f)
        }
      }
    },
  },
  methods: {
    getLocationData() {
      this.locationData = this.$setting
      if (this.locationData) {
        this.buildNo = this.locationData.DefaultBuild // 默认建筑(在BuildList数组的位置)

        if (this.buildFloor && this.buildFloor.buildId) {
          let b = this.locationData.BuildList.findIndex((a) => a.BuildId == this.buildFloor.buildId)
          if (b > -1) this.buildNo = b
        }

        this.buildData = this.locationData.BuildList[this.buildNo] //建筑数据
        this.mapBaseLayer = this.locationData.MapBaseLayer //地图底图

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

        if (this.buildData.DefaultFloor >= this.buildData.FloorList.length)
          this.buildData.DefaultFloor = 0

        this.floorNo = this.buildData.DefaultFloor

        if (
          this.buildFloor &&
          this.buildFloor.buildId &&
          this.buildData.BuildId == this.buildFloor.buildId &&
          this.buildFloor.floorNo
        ) {
          let f = this.buildData.FloorList.findIndex((a) => a.No == this.buildFloor.floorNo)
          if (f > -1) this.floorNo = f
        }

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

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

        //areaMap
        if (this.buildData.MultiMap) {
          //同一个服务器上是否有同一个BuildId的多个地图
          this.postExtent = [
            this.baseRelativeCoordinate0.x,
            this.baseRelativeCoordinate0.y,
            this.baseRelativeCoordinate1.x,
            this.baseRelativeCoordinate1.y,
          ]
        } else {
          this.postExtent = null
        }

        this.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()
        // console.log(pointList);
      } else {
        console.log('获取定位配置文件失败')
      }
    },
    createMap() {
      if (this.map) this.map.remove()
      let _this = this
      this.map = new maptalks.Map(this.mapDivId, {
        center: this.baseExtent.getCenter(),
        //centerCross: true,
        zoom: this.buildData.RelativeMapZoom,
        maxZoom: this.buildData.RelativeMapMaxZoom,
        minZoom: this.buildData.RelativeMapMinZoom,
        bearing: this.buildData.MapBearing,
        pitch: this.buildData.MapPitch,
        dragRotate: false,
        maxExtent: this.baseExtent,
        zoomControl: {
          position: 'top-left',
          slider: false,
          zoomLevel: false,
        },
        attribution: {
          content: '',
        },
        spatialReference: {
          projection: 'identity',
          resolutions: (function () {
            const resolutions = []
            for (let i = 0; i < _this.buildData.RelativeResolutionMax; i++) {
              resolutions[i] = _this.buildData.RelativeResolution0 / Math.pow(2, 10 - i)
            }
            return resolutions
          })(),
          fullExtent: this.baseExtent,
        },
      })
      //将地图设置为适合给定范围的最大缩放级别
      this.map.fitExtent(this.baseExtent, 0)
      // 图片图层
      this.mapLayer = new maptalks.ImageLayer(
        'map',
        [
          {
            url: this.buildData.FloorList[this.floorNo].MapPath,
            extent: this.baseExtent,
            opacity: 1,
          },
        ],
        {
          forceRenderOnMoving: true,
          forceRenderOnZooming: true,
          forceRenderOnRotating: true,
        }
      ).addTo(this.map)
      // 图形图层
      this.geometryLayer = new maptalks.VectorLayer('geometry', {
        zIndex: 10,
        visible: true,
        forceRenderOnMoving: true,
        forceRenderOnZooming: true,
        forceRenderOnRotating: true,
      }).addTo(this.map)
      // 背景图层
      this.backgroundLayer = new maptalks.VectorLayer('background', {
        zIndex: 1,
        visible: true,
        forceRenderOnMoving: true,
        forceRenderOnZooming: true,
        forceRenderOnRotating: true,
      }).addTo(this.map)
      // 前景图层
      this.foregroundLayer = new maptalks.VectorLayer('foreground', {
        zIndex: 20,
        visible: true,
        forceRenderOnMoving: true,
        forceRenderOnZooming: true,
        forceRenderOnRotating: true,
      }).addTo(this.map)

      this.drawTool = new maptalks.DrawTool({
        mode: 'Polygon',
        once: true,
      })
        .addTo(this.map)
        .disable()

      this.drawTool.on('drawend', (param) => {
        // console.log(param)
        this.geometryLayer.addGeometry(param.geometry)
        let gs = []
        let geometries = this.geometryLayer.getGeometries()
        if (geometries) {
          geometries.forEach((geometry) => {
            if (geometry instanceof maptalks.Marker) {
              gs.push({
                type: 'Point',
                points: [this.getOriginalCoordinate(geometry.getCoordinates())],
              })
              return true
            }
            if (geometry instanceof maptalks.LineString) {
              gs.push({
                type: 'LineString',
                points: geometry.getCoordinates().map((a) => this.getOriginalCoordinate(a)),
              })
              if (this.lineLengthShow) {
                this.addLineLength(geometry.getCoordinates())
              }
              return true
            }
            if (geometry instanceof maptalks.Polygon) {
              gs.push({
                type: 'Polygon',
                points: geometry.getCoordinates()[0].map((a) => this.getOriginalCoordinate(a)),
              })
              return true
            }
            if (geometry instanceof maptalks.Circle) {
              gs.push({
                type: 'Circle',
                points: [this.getOriginalCoordinate(geometry.getCoordinates())],
                radius: geometry.getRadius(),
              })
              return true
            }
            if (geometry instanceof maptalks.Ellipse) {
              gs.push({
                type: 'Ellipse',
                points: [this.getOriginalCoordinate(geometry.getCoordinates())],
                width: geometry.getWidth(),
                height: geometry.getHeight(),
              })
              return true
            }
            if (geometry instanceof maptalks.Rectangle) {
              gs.push({
                type: 'Rectangle',
                points: [this.getOriginalCoordinate(geometry.getCoordinates())],
                width: geometry.getWidth(),
                height: geometry.getHeight(),
              })
              return true
            }
          })
        }
        this.$emit('input', [
          { buildId: this.buildData.BuildId, floorNo: this.floorNoArray[0], geometries: gs },
        ])
      })
      //右上角工具栏
      new maptalks.control.Toolbar({
        items: [
          {
            item: '复位地图',
            click: function () {
              _this.map.animateTo(
                {
                  //center: baseRelativeExtent.getCenter(),
                  // zoom: 13,
                  bearing: _this.buildData.MapBearing,
                  pitch: _this.buildData.MapPitch,
                },
                {
                  duration: 1000,
                },
                (frame) => {
                  if (frame.state.playState === 'finished') {
                    _this.map.fitExtent(_this.baseExtent, 0, {
                      duration: 1000,
                    })
                  }
                }
              )
            },
          },
        ],
      }).addTo(this.map)
      // 楼层控制器
      if (this.buildData.FloorPanelDisplay) {
        this.createFloorPanel()
      }
      // 地图选择器
      if (this.locationData.BuildPanelDisplay) {
        this.createBuildPanel()
      }

      this.refreshGeometry()
    },
    setDrawTool() {
      // console.log(mode)
      this.drawTool.setMode(this.drawMode) //选择绘画工具的模式

      this.drawTool.setSymbol(this.symbols[this.drawMode])

      // if (this.drawMode != 'Point') {
      //   drawTool.setSymbol(this.symbols[this.drawMode])
      // } else {
      //   // 从其他模式切换成点后，需要删除symbol属性，否则无法正常切换
      //   if (drawTool.options.hasOwnProperty('symbol')) {
      //     delete drawTool.options.symbol
      //   }
      // }
      this.drawTool.enable()
      // console.log(drawTool)
    },
    drawGeometry() {
      this.geometryLayer.clear()
      this.foregroundLayer.clear()
      this.setDrawTool()
    },
    refreshGeometry() {
      this.geometryLayer.clear()
      this.foregroundLayer.clear()
      this.backgroundLayer.clear()

      if (this.value) {
        let vList = this.value.filter(
          (a) =>
            a.buildId == this.buildData.BuildId &&
            (this.floorNoArray.indexOf(a.floorNo) != -1 || a.floorNo == 0)
        )
        if (vList && vList.length > 0) vList.forEach((a) => this.addDataGeometry(a.geometries))
      }

      if (this.background) {
        let bList = this.background.filter(
          (a) =>
            a.buildId == this.buildData.BuildId &&
            (this.floorNoArray.indexOf(a.floorNo) != -1 || a.floorNo == 0)
        )
        if (bList && bList.length > 0)
          bList.forEach((a) => this.addBackgroundGeometry(a.geometries))
      }
    },
    addDataGeometry(geometries) {
      geometries.forEach((it, i) => {
        if (it.type) {
          switch (it.type) {
            case 'Point':
              let point = new maptalks.Marker(this.getNewCoordinate(it.points[0]), {
                symbol: it.symbol || this.symbols[it.type],
              }).addTo(this.geometryLayer)
              if (it.infoWindow) point.setInfoWindow(it.infoWindow)
              if (it.openInfoWindow) point.openInfoWindow()
              break
            case 'LineString':
              let line = new maptalks.LineString(
                it.points.map((a) => this.getNewCoordinate(a)),
                { symbol: it.symbol || this.symbols[it.type] }
              ).addTo(this.geometryLayer)
              if (it.infoWindow) line.setInfoWindow(it.infoWindow)
              if (it.openInfoWindow) line.openInfoWindow()
              if (this.lineLengthShow) {
                this.addLineLength(it.points.map((a) => this.getNewCoordinate(a)))
              }
              break
            case 'Polygon':
              if (it.mark) {
                //console.log(it.mark)
                this.symbols[it.type].textName = it.mark
              }
              let polygon = new maptalks.Polygon(
                it.points.map((a) => this.getNewCoordinate(a)),
                { symbol: it.symbol || this.symbols[it.type] }
              ).addTo(this.geometryLayer)
              if (it.infoWindow) polygon.setInfoWindow(it.infoWindow)
              if (it.openInfoWindow) polygon.openInfoWindow()
              break
            case 'Circle':
              let circle = new maptalks.Circle(this.getNewCoordinate(it.points[0]), it.radius, {
                symbol: it.symbol || this.symbols[it.type],
              }).addTo(this.geometryLayer)
              if (it.infoWindow) circle.setInfoWindow(it.infoWindow)
              if (it.openInfoWindow) circle.openInfoWindow()
              break
            case 'Ellipse':
              let ellipse = new maptalks.Ellipse(
                this.getNewCoordinate(it.points[0]),
                it.width,
                it.height,
                {
                  symbol: it.symbol || this.symbols[it.type],
                }
              ).addTo(this.geometryLayer)
              if (it.infoWindow) ellipse.setInfoWindow(it.infoWindow)
              if (it.openInfoWindow) ellipse.openInfoWindow()
              break
            case 'Rectangle':
              let rectangle = new maptalks.Polygon(
                this.getNewCoordinate(it.points[0]),
                it.width,
                it.height,
                {
                  symbol: it.symbol || this.symbols[it.type],
                }
              ).addTo(this.geometryLayer)
              if (it.infoWindow) rectangle.setInfoWindow(it.infoWindow)
              if (it.openInfoWindow) rectangle.openInfoWindow()
              break
          }
        }
      })
    },
    addBackgroundGeometry(geometries) {
      geometries.forEach((it, i) => {
        if (it.type) {
          switch (it.type) {
            case 'Point':
              let point = new maptalks.Marker(this.getNewCoordinate(it.points[0]), {
                symbol: it.symbol || this.symbols[it.type],
              }).addTo(this.backgroundLayer)
              if (it.infoWindow) point.setInfoWindow(it.infoWindow)
              break
            case 'LineString':
              let line = new maptalks.LineString(
                it.points.map((a) => this.getNewCoordinate(a)),
                { symbol: it.symbol || this.symbols[it.type] }
              ).addTo(this.backgroundLayer)
              if (it.infoWindow) line.setInfoWindow(it.infoWindow)
              break
            case 'Polygon':
              let polygon = new maptalks.Polygon(
                it.points.map((a) => this.getNewCoordinate(a)),
                { symbol: it.symbol || this.symbols[it.type] }
              ).addTo(this.backgroundLayer)
              if (it.infoWindow) polygon.setInfoWindow(it.infoWindow)
              break
            case 'Circle':
              let circle = new maptalks.Circle(this.getNewCoordinate(it.points[0]), it.radius, {
                symbol: it.symbol || this.symbols[it.type],
              }).addTo(this.backgroundLayer)
              if (it.infoWindow) circle.setInfoWindow(it.infoWindow)
              break
            case 'Ellipse':
              let ellipse = new maptalks.Ellipse(
                this.getNewCoordinate(it.points[0]),
                it.width,
                it.height,
                {
                  symbol: it.symbol || this.symbols[it.type],
                }
              ).addTo(this.backgroundLayer)
              if (it.infoWindow) ellipse.setInfoWindow(it.infoWindow)
              break
            case 'Rectangle':
              let rectangle = new maptalks.Polygon(
                this.getNewCoordinate(it.points[0]),
                it.width,
                it.height,
                {
                  symbol: it.symbols || this.symbols[it.type],
                }
              ).addTo(this.backgroundLayer)
              if (it.infoWindow) rectangle.setInfoWindow(it.infoWindow)
              break
          }
        }
      })
    },
    // 创建地图选择按钮模块
    createBuildPanel() {
      if (this.buildNo <= 1) {
        this.buildPanelPos = 0
      } else if (this.buildNo >= this.locationData.BuildList.length - 3) {
        this.buildPanelPos = this.locationData.BuildList.length - 3
      } else {
        this.buildPanelPos = this.buildNo - 1
      }

      let mapdiv = document.getElementById(this.mapDivId)
      let mapdivh = mapdiv.clientHeight || mapdiv.offsetHeight

      this.buildPanel = new maptalks.control.Panel({
        position: { top: mapdivh / 2 - 60, left: '20' },
        draggable: false,
        custom: true,
        content: this.makeBuildPanelContent(),
        closeButton: false,
      }).addTo(this.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 = this.buildPanelPos; i <= this.buildPanelPos + 2; i++) {
        if (i == this.buildNo) {
          content +=
            '<tr><td><button style="background: rgb(28,188,156)">' +
            this.locationData.BuildList[i].BuildAbbName +
            '</button></td></tr>'
        } else {
          if (this.locationData.BuildList[i]) {
            content +=
              '<tr><td><button onclick="changeBuild(' +
              i +
              ')">' +
              this.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 = this.buildPanelPos
      if (s == 0) {
        if (b > 0) b--
      } else if (s == 1) {
        if (b < this.buildData.FloorList.length - 3) b++
      }
      if (b != this.buildPanelPos) {
        this.buildPanelPos = b
        this.buildPanel.setContent(this.makeBuildPanelContent())
      }
    },
    // 切换地图按钮操作
    changeBuild(b) {
      this.buildNo = b
      this.buildPanel.setContent(this.makeFloorPanelContent())

      this.buildData = this.locationData.BuildList[this.buildNo]

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

      this.floorNo = this.buildData.DefaultFloor

      if (
        this.buildFloor &&
        this.buildFloor.buildId &&
        this.buildData.BuildId == this.buildFloor.buildId &&
        this.buildFloor.floorNo
      ) {
        let f = this.buildData.FloorList.findIndex((a) => a.No == this.buildFloor.floorNo)
        if (f > -1) this.floorNo = f
      }

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

      if (this.buildData.MultiMap) {
        this.postExtent = [
          this.baseRelativeCoordinate0.x,
          this.baseRelativeCoordinate0.y,
          this.baseRelativeCoordinate1.x,
          this.baseRelativeCoordinate1.y,
        ]
      } else {
        this.postExtent = null
      }

      this.baseRelativeCoordinate0 = new maptalks.Coordinate(this.buildData.RelativeCoordinate0)
      this.baseRelativeCoordinate1 = new maptalks.Coordinate(this.buildData.RelativeCoordinate1)
      this.baseRelativeExtent = new maptalks.Extent(
        this.baseRelativeCoordinate0,
        this.baseRelativeCoordinate1
      )
      this.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()
    },
    // 创建右下楼层切换按钮模块
    createFloorPanel() {
      if (this.floorNo <= 1) {
        this.floorPanelPos = 0
      } else if (this.floorNo >= this.buildData.FloorList.length - 3) {
        this.floorPanelPos = this.buildData.FloorList.length - 3
      } else {
        this.floorPanelPos = this.floorNo - 1
      }

      let mapdiv = document.getElementById(this.mapDivId)
      let mapdivh = mapdiv.clientHeight || mapdiv.offsetHeight

      if (this.floorPanel) this.floorPanel.remove()

      this.floorPanel = new maptalks.control.Panel({
        position: { top: mapdivh / 2 - 60, right: '20' },
        draggable: false,
        custom: true,
        content: this.makeFloorPanelContent(),
        closeButton: false,
      }).addTo(this.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 = this.floorPanelPos; i <= this.floorPanelPos + 2; i++) {
        if (i == this.floorNo) {
          content +=
            '<tr><td><button style="background: rgb(28,188,156)">' +
            this.buildData.FloorList[i].Name +
            '</button></td></tr>'
        } else {
          if (this.buildData.FloorList[i]) {
            content +=
              '<tr><td><button onclick="changeFloor(' +
              i +
              ')">' +
              this.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 = this.floorPanelPos
      if (s == 0) {
        if (f > 0) f--
      } else if (s == 1) {
        if (f < this.buildData.FloorList.length - 3) f++
      }
      if (f != this.floorPanelPos) {
        this.floorPanelPos = f
        this.floorPanel.setContent(this.makeFloorPanelContent())
      }
    },
    // 点击切换楼层
    changeFloor(f) {
      this.floorNo = f

      this.floorPanel.setContent(this.makeFloorPanelContent())

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

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

      this.refreshGeometry()
    },
    //清除图形图层
    changeShape() {
      this.geometryLayer.clear()
      this.foregroundLayer.clear()
      // console.log(this.shapeType);
    },
    //areaMap
    sendMes(f) {
      this.$message({
        showClose: true,
        message: '楼层切换至' + f + '层',
        type: 'success',
      })
    },
    getNewCoordinate(c) {
      return new maptalks.Coordinate(
        c.x - this.baseRelativeCoordinate0.x,
        this.baseRelativeCoordinate0.y - c.y
      )
    },
    getOriginalCoordinate(c) {
      return new maptalks.Coordinate(
        Math.round(c.x) + this.baseRelativeCoordinate0.x,
        -Math.round(c.y) - this.baseRelativeCoordinate0.y
      )
    },
    addLineLength(points) {
      if (points && points.length > 1) {
        for (let i = 0; i < points.length - 1; i++) {
          let d = this.map.computeLength(points[i], points[i + 1])
          let c = new maptalks.LineString([points[i], points[i + 1]]).getCenter()
          this.foregroundLayer.addGeometry(
            new maptalks.Marker(c, {
              symbol: {
                textName: (d / 1000).toFixed(3) + '米',
                textSize: 10,
              },
            })
          )
        }
      }
    },
  },
}
</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>
