<template>
    <div class="map-container">
      <div id="mapContainer" class="map"></div>
<!--      <div v-if="map" class="tool-bar">-->
<!--        <div class="tool-item" @click="setLocation()">-->
<!--          <img-->
<!--            src="../../../assets/img/location.png"-->
<!--            class="tool-icon tool-icon-default"-->
<!--          />-->
<!--          <img-->
<!--            src="../../../assets/img/active-location.png"-->
<!--            class="tool-icon tool-icon-active"-->
<!--          />-->
<!--        </div>-->
<!--        <div class="tool-item" @click="zoomIn()">+</div>-->
<!--        <div class="tool-item" @click="zoomOut()">-</div>-->
<!--      </div>-->
    </div>
  </template>

  <script>
  import AMapLoader from '@amap/amap-jsapi-loader'
  import blueIcon from '@/assets/images/location.png'

  export default {
    props: {
      data: {
        type: Array,
        default: () => {
          return []
        }
      },
    },
    data() {
      return {
        map: null,
        list: [],
        centerPoint: {
          lng: 116.367683,
          lat: 39.978279
        },
        circlePoint: {
          lng: 116.367837,
          lat: 39.978076
        },
        screenWidth: null,
        zoomCtrl: null,
        infoWindow: null,
        infoWarning: null,
        defaultZoom: 5,
        active: 0,
        emergency: []
      }
    },
    watch: {
      data: {
        immediate: true,
        deep: true,
        handler(val) {
          console.log("val",val)
          this.list = val || []
          this.defaultZoom = 5
          console.log("this.listq",this.list)
          if (!this.map) {
            this.initMap()
          }
          setTimeout(() => {
            this.refreshMap()
          }, 300)
        }
      },
    },
    mounted() {
      this.initMap()
    },
    methods: {
      initMap() {
        window._AMapSecurityConfig = {
          securityJsCode: process.env.VUE_APP_AMAP_CODE
        }
        AMapLoader.load({
          key: process.env.VUE_APP_AMAP_KEY,
          version: '2.0',
          plugins: ['AMap.ToolBar'],
          AMapUI: {
            version: '1.1',
            plugins: ['control/BasicControl']
          }
        })
          .then(AMap => {
            const options = {
              viewMode: '2D',
              pitch: 40,
              center: [this.centerPoint.lng, this.centerPoint.lat],
              zoom: this.defaultZoom,
              layers: [
                // 卫星
                new AMap.TileLayer.Satellite(),
                // 路网
                new AMap.TileLayer.RoadNet()
              ],
              // scrollWheel: true
            }
            this.map = new AMap.Map('mapContainer', options)
            // this.map.on('click', () => {
            //   if (this.infoWindow) {
            //     this.infoWindow.close()
            //     this.infoWindow = null
            //     this.infoWarning = null
            //   }
            // })
            this.refreshMap()
          })
          .catch(e => {
            console.error('地图加载失败', e)
          })
      },

      zoomIn() {
        this.map.zoomIn()
      },
      zoomOut() {
        this.map.zoomOut()
      },

      setLocation(lng, lat) {
        console.log("lnglat",lng,lat)
        if (lng && lat) {
          console.log("mapref")
          let pointCenter = [lng, lat]
          this.map.setZoomAndCenter(15, pointCenter, true)
          this.refreshMap()

        } else {
          const center = [this.centerPoint.lng, this.centerPoint.lat]
          this.map.setZoomAndCenter(this.defaultZoom, center, true)
        }

      },

      refreshMap() {
        if (!this.map) {
          return
        }
        this.map.clearMap()
        console.log("this.list",this.list)
        this.list.forEach(async (item, index) => {
          const point = new AMap.LngLat(item.f_jd, item.f_wd)
          console.log("point",point)
          var blueMark = new AMap.Icon({
            size: new AMap.Size(30, 38), // 图标尺寸
            image: blueIcon, // Icon的图像，本地图标Vue引入
            imageSize: new AMap.Size(30, 38), // 根据所设置的大小拉伸或压缩图片
          });
          const marker = new AMap.Marker({
            icon: blueMark,
            position: point,
            clickable: true,
            offset: new AMap.Pixel(-25, -25),
          })

          // marker.on('click', () => {
          //   this.displayInfo(point, item)
          // })
          this.map.add(marker)
        })
      },

      async displayInfo(point, item) {
        this.centerPoint = {
          lng: item.f_jd,
          lat: item.f_wd
        }
        let pointer = new AMap.LngLat(item.f_jd, item.f_wd)
        this.map.setCenter([pointer.KL,pointer.kT])
        const content = `<div class='info-window'>
            <div class='title'>气瓶信息</div>
            <div class='line'></div>
            <div>气瓶编号：${item.f_qpbh}</div>
            <div>气瓶规格： ${item.f_qpgg}${item.F_czjz}</div>
            <div>地址： ${item.F_dqs}${item.F_dqq}${item.F_dqjd}</div>
        </div>`
        this.infoWindow = new AMap.InfoWindow({
          isCustom: true,
          content: [content],
          offset: new AMap.Pixel(150, -50)
        })
        this.infoWindow.open(this.map, point)
      },
    }
  }
  </script>

  <style scoped lang="scss">
  @import './style';

  .map-container {
    width: 100%;
    height: 100%;
    position: relative;

    .tool-bar {
      position: absolute;
      bottom: 30px;
      right: 30px;
      background-color: #2b2b2b;
      color: #ffffff;

      .tool-item {
        width: 26px;
        height: 26px;
        cursor: pointer;
        box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.15);
        display: flex;
        justify-content: center;
        align-items: center;
        color: #999999;
        font-size: 20px;

        .tool-icon {
          width: 16px;
          height: 16px;
        }

        .tool-icon-default {
          display: inline-block;
        }

        .tool-icon-active {
          display: none;
        }

        &:hover {
          color: #1782e5;

          .tool-icon-active {
            display: inline-block !important;
          }

          .tool-icon-default {
            display: none !important;
          }
        }
      }
    }
    ::v-deep .amap-info-contentContainer {
      display: flex;
    }
    .map {
      width: 100%;
      height: 100%;

      ::v-deep {
        .anchorBL {
          display: none;
        }

        .amap-logo {
          display: none !important;
        }
        .info-warning {
          width: 300px;
          height: 240px;
          //background-color: #051d4f;
          font-family: SourceHanSansCN-Medium;
          box-sizing: border-box;
          color: #ffffff;
          border-radius: 10px;
          border: 2px solid #98333b;
          padding: 13px 15px 0px 20px;
          .warning-h3 {
            text-align: center;
            font-weight: normal;
            font-size: 16px;
            margin: 0px 0px 7px 0px;
            padding: 0px;
          }
          .info-warning-row {
            display: flex;
            flex-direction: column;
            width: 100%;
            overflow: auto;
            .info-warning-title {
              display: flex;
              width: 100%;
              justify-content: space-between;
              margin-bottom: 15px;
              .info-depth,
              .info-depth-active {
                width: 30%;
                text-align: center;
                background-color: #475676;
                border-radius: 16px;
                padding: 3px 8px;
              }
              .info-depth-active {
                background-color: #0041c3;
              }
              .info-depth:nth-child(1),
              .info-depth:nth-child(2) {
                margin-right: 15px;
              }
            }
            .info-dataWarning {
              width: 100%;
              height: 127px;
              overflow: hidden;
              overflow: auto;
            }
            #info-dataWarning {
              color: #fff;
            }
            // 预警处理方案的滚动条
            .info-dataWarning::-webkit-scrollbar {
              // display: none; //隐藏滚动条
            }
            /*定义整体的宽度*/
            .info-dataWarning::-webkit-scrollbar {
              width: 6px;
            }
            /*定义滚动条轨道*/
            .info-dataWarning::-webkit-scrollbar-track {
              border-radius: 5px;
            }
            /*定义滑块*/
            .info-dataWarning::-webkit-scrollbar-thumb {
              border-radius: 5px;
              background: rgba(27, 140, 236, 0.5);
            }
          }
        }
        .info-window {
          background-color: #ffffff;
          width: 300px;
          min-height: 150px;
          height: auto;
          box-sizing: border-box;
          font-family: SourceHanSansCN-Medium;
          position: relative;
          border-radius: 10px;
          padding: 20px 10px 10px 10px;
          .title {
            color: gray;
            font-size: 18px;

          }
          div {
            height: 24px;
            line-height: 24px;
          }
          .line {
            width: 100%;
            height: 1px;
            background-color: gray;
            margin: 10px 0;
          }
          .commondis {
            display: flex;
            justify-content: space-around;
            align-items: center;
          }
        }

        .BMap_stdMpZoom {
          bottom: 180px;

          .BMap_stdMpZoomIn {
            background-color: #2b2b2b;
            border-bottom-color: #000;
          }

          .BMap_stdMpZoomOut {
            background-color: #2b2b2b;
          }
        }
      }
    }

    @media all and (max-width: 1600px) {
      .tool-bar {
        right: calc(30% + 40px) !important;
      }
    }
  }
  </style>