<template>
  <div class="map-content">
    <div class="map-box" id="mapContainer" @drop="handleMapDrop" @dragover.prevent></div>
    <div class="device-box">
      <div class="box-content">
        <div class="box-title">
          <span>场内布点</span>
          <el-button type="primary" @click="addPoint" size="medium">添加点位</el-button>
        </div>
        <!-- <vue-scroll :ops="{ scrollPanel: { overflowX: false } }">
            <div style="margin: 5px 0"></div>
            <div
              v-for="item in pointList"
              :key="item.devSn"
              class="point-item"
              draggable="true"
              @dragstart="handleDragStart(item)"
              @click="handleClick(item)"
            >
              <div class="point-name">{{ item.name }}</div>
              <div @click="deletePoint(item)" class="delete-point" v-if="item.lng && item.lat">
                <i class="el-icon-delete"></i>
                清除位置
              </div>
            </div>
          </vue-scroll> -->
        <el-table :data="pointList">
          <el-table-column label="点位名称" prop="name"></el-table-column>
          <el-table-column label="图标" prop="coverImage" width="50px">
            <template #default="scope">
              <img
                v-if="scope.row.coverImage"
                :src="$store.state.FILEURL + scope.row.coverImage"
                alt=""
                style="width: 20px; height: 20px"
              />
            </template>
          </el-table-column>
          <el-table-column label="备注" prop="remark"></el-table-column>
          <el-table-column label="操作" prop="operation">
            <template #default="scope">
              <div class="operation-box">
                <i class="el-icon-edit" @click="editPoint(scope.row)"></i>
                <i class="el-icon-delete" @click="deletePoint(scope.row)"></i>
                <el-link v-if="scope.row.lat && scope.row.lng" type="danger" :underline="false" @click="clearPoint(scope.row)"
                  >清除位置</el-link
                >
                <el-link v-else type="primary" :underline="false" @click="goPoint(scope.row)">去标点</el-link>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <add-point-dialog :visible.sync="dialogVisible" :data-info="dialogDataInfo" @refresh="getPointList()"></add-point-dialog>
  </div>
</template>

<script>
import addPointDialog from './components/addPointDialog.vue'
import {
  getDevListApi,
  editDevicePositionApi,
  clearLocateApi,
  addDevicePositionApi,
  deleteDevicePositionApi
} from '@/assets/js/api/smartSafeHat/smartSafeHat'

var mouseTool
var map
export default {
  components: {
    addPointDialog
  },
  data() {
    return {
      dialogVisible: false,
      dialogDataInfo: null,
      deviceType: 3, // 类别(1、视频监控；2、扬尘设备；3、场站；11、塔吊；12、架桥机；13、龙门吊；14、升降机；)
      addForm: {
        locationList: [
          {
            fenceId: 0,
            id: 0,
            latitude: '',
            longitude: '',
            sortNum: 0
          }
        ],
        projectSn: '',
        enterpriseId: ''
      },
      pointList: [],
      markers: {},
      curItem: {},
      selectPointStatus: false
    }
  },
  mounted() {
    this.initMap()
    this.getPointList(true)
  },
  methods: {
    // 围栏定位地图
    initMap() {
      var that = this
      //地图加载
      map = new AMap.Map('mapContainer', {
        resizeEnable: true
      })
      map.on('click', e => {
        if (!this.selectPointStatus) {
          return
        }
        console.log('您在 [ ' + e.lnglat.getLng() + ',' + e.lnglat.getLat() + ' ] 的位置单击了地图！')
        this.curItem.lng = e.lnglat.getLng()
        this.curItem.lat = e.lnglat.getLat()
        this.addMarker(this.curItem)
        this.savePointPosition(this.curItem)
        console.log('当前位置列表', this.locationList)
      })
    },
    addPoint() {
      this.dialogVisible = true
      this.dialogDataInfo = null
    },
    editPoint(data) {
      this.dialogDataInfo = data
      this.dialogVisible = true
    },
    handleClick(item) {
      if (item.lng && item.lat) {
        map.setCenter([item.lng, item.lat])
      }
    },
    handleDragStart(item) {
      // 将拖拽数据存储在事件中
      event.dataTransfer.setData('text/plain', JSON.stringify(item))
    },

    handleMapDrop(event) {
      // 获取拖拽数据
      const item = JSON.parse(event.dataTransfer.getData('text/plain'))
      // 获取地图坐标
      const { lng, lat } = map.getCenter()

      console.log('handleMapDrop', event, item)

      // 检查是否已存在marker
      if (this.markers[item.devSn]) {
        this.$message.warning('设备已存在')
      } else {
        item.lng = lng
        item.lat = lat
        this.addMarker(item)
        // 保存位置信息
        this.savePointPosition(item)
      }
    },
    async savePointPosition(item) {
      const api = item.monitorId ? editDevicePositionApi : addDevicePositionApi
      api({ ...item, projectSn: this.$store.state.projectSn }).then(res => {
        if (res.success) {
          this.$message.success(res.message)
          this.getPointList()
        }
      })
    },
    deletePoint(item) {
      deleteDevicePositionApi({ monitorId: item.monitorId }).then(res => {
        if (res.success) {
          this.$message.success(res.message)
          if (this.markers[item.devSn]) {
            map.remove(this.markers[item.devSn])
            delete this.markers[item.devSn]
          }
          this.getPointList()
        }
      })
    },
    clearPoint(item) {
      clearLocateApi({ monitorId: item.monitorId }).then(res => {
        if (res.success) {
          this.$message.success(res.message)
          map.remove(this.markers[item.devSn])
          delete this.markers[item.devSn]
          this.getPointList()
        }
      })
    },
    goPoint(data) {
      this.curItem = data
      this.selectPointStatus = true
    },
    getPointList(loadMap = false) {
      let data = {
        category: this.deviceType,
        projectSn: this.$store.state.projectSn
      }
      getDevListApi(data).then(res => {
        if (res.success) {
          this.pointList = res.result
          console.log('围栏', this.pointList)
          if (loadMap) {
            this.markers = {}
            this.clearFn()
            this.initAllMarker()
          }
        }
      })
    },
    //清空地图
    clearFn() {
      map.clearMap()
    },
    //添加点标记
    addMarker(item) {
      // 创建新marker
      const marker = new AMap.Marker({
        position: [item.lng, item.lat],
        draggable: true
      })
      this.markers[item.devSn] = marker
      marker.setMap(map)
      marker.on('dragend', e => {
        console.log('拖拽结束', e)
        item.lng = e.lnglat.lng
        item.lat = e.lnglat.lat
        // 保存位置信息
        this.savePointPosition(item)
      })
      marker.setLabel({
        offset: new AMap.Pixel(0, -8), //设置文本标注偏移量
        content: item.name, //设置文本标注内容
        direction: 'top' //设置文本标注方位
      })
      this.selectPointStatus = false;
    },
    initAllMarker() {
      this.pointList.forEach(item => {
        if (item.lng && item.lat) {
          this.addMarker(item)
        }
      })
      map.setFitView()
    }
  }
}
</script>

<style lang="scss" scoped>
.map-content {
  width: 100%;
  height: 100%;
  position: relative;
}
#mapContainer {
  width: 100%;
  height: 100%;
}
// 围栏弹窗
.device-box {
  position: absolute;
  background: #fff;
  box-sizing: border-box;
  padding: 25px;
  left: 2%;
  top: 20px;
  width: 550px;
  height: 500px;
  z-index: 1;
  .fence-dialog-modal {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    z-index: 3;
    background: rgba(39, 45, 69, 0.5);
  }
  .close-icon {
    position: absolute;
    top: 0px;
    right: 0px;
    cursor: pointer;
  }
  .box-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    span {
      border-left: 4px solid #5c81ee;
      font-size: 15px;
      color: #272d45;
      padding-left: 10px;
      font-weight: 600;
      font-family: Source Han Sans CN, Source Han Sans CN;
    }
  }
}
.box-content {
  position: relative;
  .fence-tool {
    display: flex;
    justify-content: space-around;
    padding: 0 25px;
    .tool {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 80px;
      height: 33px;
      font-size: 14px;
      cursor: pointer;
      background: #ffffff;
      color: #5181f6;
      border-radius: 2px 2px 2px 2px;
      border: 1px solid #5181f6;
    }
  }
  .box-select {
    margin: 15px 0;
  }
  .box-list {
    height: 160px;
  }
}
.point-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  cursor: move;
  .point-name {
    font-size: 14px;
    color: #272d45;
    flex: 1;
  }
  .delete-point {
    font-size: 14px;
    color: #ea3941;
    cursor: pointer;
  }
}
.operation-box {
  display: flex;
  align-items: center;
  gap: 10px;
  i {
    cursor: pointer;
    color: #5181f6;
  }
}
</style>
