<!--
 * @Description: 
 * @Author: wangcc
 * @Date: 2022-06-10 11:51:36
 * @LastEditors: wangcc
 * @LastEditTime: 2022-06-16 09:31:01
 * @FilePath: \castgroup_bigscreen\src\components\map.vue
 * @Copyright: Copyright (c) 2016~2022 by wangcc, All Rights Reserved. 
-->
<!--
 * @LastEditors: gcz
-->
<template>
  <div class="map-wrap">
    <div id="container"></div>
    <div id="mask"></div>
    <div class="yun-wrap">
      <img class="yun yun1" src="../assets/img/云1.png" alt />
    </div>
    <div class="yun-wrap">
      <img class="yun yun2" src="../assets/img/云2.png" alt />
    </div>
    <div class="yun-wrap">
      <img class="yun yun3" src="../assets/img/云3.png" alt />
    </div>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import { mapMutations, mapGetters } from 'vuex';
export default {
  name: '',
  components: {},
  data() {
    return {
      AMap: null,
      map: null,
      lngLat: [106.628201, 26.646694],
      zoom: 9,
      adcode: '520000',
      mapLevel: 'province',
      province: '',
      cityList: [], //市
      districtList: [], //区县
      streetList: [] //街道,乡
    };
  },
  watch: {
    vuexSelectCity: {
      handler: function () {
        // console.log('vuexSelectCity',this.vuexSelectCity);
        // console.log('vuexCityList',this.vuexCityList);
        // this.vuexCityList.forEach(element => {
        //   if(this.vuexSelectCity==element.value){
        //     this.mapLevel= element.level
        //   }
        // });
        this.mapLevel = 'city';
        this.adcode = this.vuexSelectCity;
        this.getMap(this.AMap);
      },
      deep: true
    },
    vuexSelectDistrict: {
      handler: function () {
        console.log('vuexSelectDistrict', this.vuexSelectDistrict);
        if (this.vuexSelectDistrict) {
          this.mapLevel = 'district';
          this.adcode = this.vuexSelectDistrict;
          this.getMap(this.AMap);
        }
      },
      deep: true
    },
    vuexSelectStreet: {
      handler: function () {
        console.log('vuexSelectStreet', this.vuexSelectStreet);
        if (this.vuexSelectStreet) {
          this.mapLevel = 'street';
          this.adcode = this.vuexSelectStreet;
          this.getMap(this.AMap);
        }
      },
      deep: true
    }
  },
  computed: {
    // 引入getters中的计算属性，需要在 computed 中引入
    ...mapGetters([
      'vuexCityList',
      'vuexDistrictList',
      'vuexStreetList',
      'vuexSelectCity',
      'vuexSelectDistrict',
      'vuexSelectStreet'
    ])
  },
  created() {
    
  },
  mounted() {
    this.initMap();
    // setTimeout(() => {
    //   this.getMap();
    // }, 1000);
  },
  methods: {
    ...mapMutations([
      'changeCityList',
      'changeDistrictList',
      'changeStreetList'
    ]),
    initMap() {
      window._AMapSecurityConfig = {
        securityJsCode: '4a6a8d8ea053d9aa8f4677ee1179fe57' // 密钥
      };
      AMapLoader.load({
        key: '58f9d9f14f2700689ddbc618495693b7', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '1.4.15' // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        // plugins:['AMap.ToolBar','AMap.DistrictSearch','AMap.Object3DLayer','AMap.Object3D'],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.AMap = AMap;
          this.map = new AMap.Map('container', {
            //设置地图容器id
            viewMode: '3D', //是否为3D地图模式
            pitch: 30,
            zoom: this.zoom, //初始化地图级别
            center: this.lngLat, //初始化地图中心点位置
            layers: [
              new AMap.TileLayer.Satellite(),
              new AMap.TileLayer.RoadNet()
            ],
            // mapStyle: 'amap://styles/db9efe6a1745ac24b7269b862f359536'
          });
          this.$nextTick(() => {
            this.getMap(AMap);
          });
          // this.map.on('complete', () => {
          //   console.log('map complete');
          //   this.getMap(AMap);
          // })
        })
        .catch((e) => {
          console.log(e);
        });
    },
    getMap(AMap) {
      let that = this;
      // console.log('AMap',AMap);
      AMap.plugin(['AMap.DistrictSearch'], function () {
        // console.log('1111');
        // 创建行政区查询对象
        var district = new AMap.DistrictSearch({
          // 返回行政区边界坐标等具体信息
          extensions: 'all',
          // 设置查询行政区级别为 区 （district）
          level: that.mapLevel,
          //  显示下级行政区级数，1表示返回下一级行政区
          subdistrict: 1
        });

        district.search(that.adcode, function (status, result) {
            that.map.clearMap();
            var outer = [
              new AMap.LngLat(-360, 90, true),
              new AMap.LngLat(-360, -90, true),
              new AMap.LngLat(360, -90, true),
              new AMap.LngLat(360, 90, true)
            ];
            // console.log(result);
            var holes = result.districtList[0].boundaries;
            // that.lngLat = [
            //   result.districtList[0].center.lng,
            //   result.districtList[0].center.lat
            // ];
            var pathArray = [outer];
            pathArray.push.apply(pathArray, holes);
            var polygon = new AMap.Polygon({
              map: that.map,
              path: pathArray,
              strokeColor: '#00eeff',
              strokeWeight: 1,
              fillColor: '#1c212a', // 遮罩背景色黑色
              fillOpacity: 0.8
            });
            polygon.setPath(pathArray);
            that.map.add(polygon);
          console.log('result', result);
          let districtList = result.districtList[0].districtList;
          switch (that.mapLevel) {
            case 'province':
              console.log('province districtList', districtList);
              let cityList = [];
              districtList.forEach((element) => {
                cityList.push({
                  label: element.name,
                  value: element.adcode,
                  level: element.level
                });
              });
              that.changeCityList(cityList);
              break;
            case 'city':
              console.log('city districtList', districtList);
              let districtLists = [];
              districtList.forEach((element) => {
                districtLists.push({
                  label: element.name,
                  value: element.adcode,
                  level: element.level
                });
              });
              that.changeDistrictList(districtLists);
              break;
            case 'street':
              console.log('street districtList', districtList);
              let streetLists = [];
              districtList.forEach((element) => {
                streetLists.push({
                  label: element.name,
                  value: element.adcode,
                  level: element.level
                });
              });
              that.changeStreetList(districtLists);
              break;
            default:
              break;
          }

          // console.log('result.districtList',result.districtList);
          if (!result.districtList) {
            return;
          }

          // console.log('map',that.map);
          // 获取边界信息
          // var bounds = result.districtList[0].boundaries;
          // var polygons = [];
          // if (bounds) {
          //   that.map.clearMap();
          //   //   for (var i = 0, l = bounds.length; i < l; i++) {
          //   //   //生成行政区划polygon
          //   //   var polygon = new AMap.Polygon({
          //   //     map: that.map,
          //   //     strokeWeight: 1,
          //   //     path: bounds[i],
          //   //     fillOpacity: 0.7,
          //   //     fillColor: '#CCF3FF',
          //   //     strokeColor: '#CC66CC'
          //   //   })
          //   //   // console.log('polygon',polygon);
          //   //   polygons.push(polygon)
          //   // }

          //   // 地图自适应
          //   that.map.setFitView();
          //   // console.log('AMap.Object3DLayer',AMap.Object3DLayer);
          // AMap.plugin(['AMap.Object3DLayer', 'AMap.Object3D'], function () {
          //   // console.log('2222');
          //   //object3Dlayer可以看做一个容器,用来放多个3d对象
          //   let object3Dlayer = new AMap.Object3DLayer();
          //   //把object3Dlayer添加到map对象中
          //   that.map.add(object3Dlayer);
          //   var wall = new AMap.Object3D.Wall({
          //     //版块边界线
          //     path: bounds,
          //     //墙的高度
          //     height: 80000,
          //     //墙的颜色
          //     color: '#0dcdd1'
          //   });
          //   //wall 有两个面,该属性表示哪个面可见,可选值:back ,front ,both表示两面  默认为front
          //   wall.backOrFront = 'both';
          //   // 是否允许使用透明颜色
          //   wall.transparent = true;
          //   //将wall放到object3Dlayer中
          //   object3Dlayer.add(wall);
          //   console.log('object3Dlayer');
          // });
          // }
        });
      });
    }
  }
};
</script>

<style lang='scss' scoped>
#container {
  width: 100%;
  height: 100vh;
  /deep/ .tdt-pane {
    z-index: auto;
  }
}
#mask {
  width: 100%;
  height: 100vh;
  box-shadow: inset 0px 0px 10vw 8vw rgba(38, 80, 179, 0.54);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}
@keyframes imageAnimation_32630606 {
  0% {
    // opacity: 0;
    transform: none;
  }
  34% {
    // opacity: 1;
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1)
      translate3d(34vw, 0px, 0px);
  }
  67% {
    // opacity: 1;
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1)
      translate3d(67vw, 0px, 0px);
  }
  100% {
    // opacity: 0;
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1)
      translate3d(160vw, 0px, 0px);
  }
}

.yun-wrap {
  position: fixed;
  left: 0;
  top: 350px;
  width: 100vw;
  pointer-events: none;
}
.yun {
  position: fixed;
  left: -500px;
  animation-name: imageAnimation_32630606;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 110s;
  animation-delay: 0s;
  -webkit-user-drag: none;
  filter: none;
  pointer-events: none;
}
.yun2 {
  bottom: 20px;
  animation-duration: 90s;
  animation-delay: 10s;
}
.yun3 {
  top: 100px;
  animation-duration: 120s;
  animation-delay: 15s;
}
</style>