<template>
  <div>
    <div id="container">
      <el-collapse accordion>
        <el-collapse-item>
          <template slot="title">
            <i class="el-icon-s-promotion"></i>
            <el-input placeholder="搜索位置" v-model="mapvalue"></el-input>
            <i class="el-icon-search" @click="getmap()"></i>
          </template>
          <div>
            <el-checkbox-group v-model="checkboxGroup1">
              <el-checkbox-button
                v-for="city in cities"
                :label="city"
                :key="city"
                >{{ city }}</el-checkbox-button
              >
            </el-checkbox-group>
          </div>
          <div class="toolbox">
            <ul>
              <li @click="Animamap()">
                <span><i class="el-icon-position"></i> 轨迹回放 </span>
                <i class="el-icon-arrow-right"></i>
              </li>
            </ul>
          </div>
        </el-collapse-item>
      </el-collapse>
      <h4 id="status"></h4>
      <!-- <div class="hold-all" @click="drawer = true">工具箱</div> -->
      <div class="iconbox" v-if="startShow">
        <i class="el-icon-refresh" @click="startAnimation()"></i>
        <i
          :class="start ? 'el-icon-video-pause' : 'el-icon-video-play'"
          @click="start ? pauseAnimation() : resumeAnimation()"
        ></i>
      </div>
    </div>
    <div id="panel"></div>
  </div>
</template>

<script>
let marker,
  lineArr = [
    [116.478935, 39.997761],
    [116.478939, 39.997825],
    [116.478912, 39.998549],
    [116.478912, 39.998549],
    [116.478998, 39.998555],
    [116.478998, 39.998555],
    [116.479282, 39.99856],
    [116.479658, 39.998528],
    [116.480151, 39.998453],
    [116.480784, 39.998302],
    [116.480784, 39.998302],
    [116.481149, 39.998184],
    [116.481573, 39.997997],
    [116.481863, 39.997846],
    [116.482072, 39.997718],
    [116.482362, 39.997718],
    [116.483633, 39.998935],
    [116.48367, 39.998968],
    [116.484648, 39.999861],
  ]
export default {
  data() {
    return {
      mapvalue: '',
      map: '',
      markers: '',
      lnglatvalue: [106.545034, 29.549649],
      drawer: false,
      direction: 'rtl',
      start: true,
      startShow: false,
      cities: ['桥梁', '隧道', '涵洞', '边坡'],
      checkboxGroup1: ['桥梁'],
    }
  },
  methods: {
    handleClose(done) {
      done()
    },
    //初始化地图
    initMap() {
      let map = new AMap.Map('container', {
        resizeEnable: true,
        // center: [106.544857, 29.549371],
        zoom: 17,
      })

      map.on('click', (e) => {
        console.log(e)
        this.lnglatvalue = [e.lnglat.getLng(), e.lnglat.getLat()]
        this.addMaker(this.lnglatvalue)
      })
      this.map = map
    },
    //定位
    location() {
      let map = this.map
      this.startShow=false
      AMap.plugin('AMap.Geolocation', function () {
        
        var geolocation = new AMap.Geolocation({
          enableHighAccuracy: true, //是否使用高精度定位，默认:true
          timeout: 10000, //超过10秒后停止定位，默认：5s
          buttonPosition: 'RB', //定位按钮的停靠位置
          buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
          zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
        })
        map.addControl(geolocation)

      })
    },
    //轨迹回放
    Animamap() {
      this.drawer = false
      this.startShow = true
      this.map.clearMap()
      let map = this.map
      marker = new AMap.Marker({
        map: map,
        position: [116.478935, 39.997761],
        icon: 'https://webapi.amap.com/images/car.png',
        offset: new AMap.Pixel(-26, -13),
        autoRotation: true,
        angle: -90,
      })
      //为走过
      let polyline = new AMap.Polyline({
        map: map,
        path: lineArr,
        showDir: true,
        strokeColor: '#28F', //线颜色
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6, //线宽
        // strokeStyle: "solid"  //线样式
      })
      //走过
      let passedPolyline = new AMap.Polyline({
        map: map,
        // path: lineArr,
        strokeColor: '#AF5', //线颜色
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6, //线宽
        // strokeStyle: "solid"  //线样式
      })

      marker.on('moving', function (e) {
        passedPolyline.setPath(e.passedPath)
      })
      this.markers = marker
      map.setFitView()
    },
    startAnimation() {
      this.start = true
      this.stopAnimation()
      marker.moveAlong(lineArr, 200)
    },
    pauseAnimation() {
      this.start = !this.start
      marker.pauseMove()
    },
    resumeAnimation() {
      this.start = !this.start
      marker.resumeMove()
    },
    stopAnimation() {
      marker.stopMove()
    },
    removemaker() {
      this.map.remove(this.markers)
    },
    getmap() {
      this.map.clearMap()
      let map = this.map
      let placeSearch = new AMap.PlaceSearch({
        // city 指定搜索所在城市，支持传入格式有：城市名、citycode和adcode
        city: '全国',
      })
      if (this.mapvalue) {
        placeSearch.search(this.mapvalue, function (status, result) {
          // 查询成功时，result即对应匹配的POI信息
          console.log(result)
          let pois = result.poiList.pois
          for (let i = 0; i < pois.length; i++) {
            let poi = pois[i]
            let marker = []
            marker[i] = new AMap.Marker({
              position: poi.location, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
              title: poi.name,
            })
            // 将创建的点标记添加到已有的地图实例：
            map.add(marker[i])
            console.log(marker[i])
          }
          map.setFitView()
        })
      } else {
        this.$message.error('请输入关键字')
      }
    },
    //地图点击标点
    addMaker(lnglatvalue) {
      this.map.clearMap()
      let map = this.map
      let icon = new AMap.Icon({
        size: new AMap.Size(25, 34),
        image:
          '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
        imageSize: new AMap.Size(135, 40),
        imageOffset: new AMap.Pixel(-95, -3),
      })
      let marker = new AMap.Marker({
        icon: icon,
        position: lnglatvalue,
        offset: new AMap.Pixel(-13, -30),
      })
      marker.setMap(map)
      // 设置鼠标划过点标记显示的文字提示
      marker.setTitle('我是marker的title')
      // 设置label标签
      // label默认蓝框白底左上角显示，样式className为：amap-marker-label
      marker.setLabel({
        offset: new AMap.Pixel(20, 20), //设置文本标注偏移量
        content: this.mapvalue, //设置文本标注内容
        direction: 'right', //设置文本标注方位
      })
    },
  },
  mounted() {
    setTimeout(() => {
      this.initMap()
      this.location()
      this.startShow=false
    }, 1000)
  },
}
</script>

<style lang="scss" scoped>
#container {
  width: 100%;
  height: 100%;
  position: relative;
}
#panel {
  z-index: 999;
  position: absolute;
  background-color: white;
  max-height: 100%;
  overflow-y: auto;
  right: 0;
  width: 280px;
}
.el-card > .el-card__body {
  height: calc(100% - 20px) !important;
}
.single-page-component {
  height: 100%;
}
.hold-all {
  width: 20px;
  height: 50px;
  position: absolute;
  margin: auto;
  right: 11px;
  // top: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  color: #fff;
  background-color: #211bce;
  border-color: #211bce;
  padding: 10px;
  justify-content: center;
  /* align-content: normal; */
  text-align: center;
  border-radius: 15px;
  cursor: pointer;
}
.iconbox {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  // top: 0;
  z-index: 1000;
  margin: auto;
  width: 150px;
  height: 50px;
  i {
    font-size: 40px;
    cursor: pointer;
  }
}
.toolbox {
  width: 100%;
  height: 100%;
  padding-top: 10px;
  ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    span {
      font-size: 14px;
      font-weight: 500;
      color: #333;
    }
    i {
      font-size: 16px;
      margin: 0 10px;
    }
  }
}
.el-collapse {
  position: absolute;
  z-index: 1000;
  left: 1%;
  top: 1%;
  i {
    font-size: 25px;
    margin: 0 10px;
  }
}
.el-checkbox-group{
  text-align: center;
}
</style>