<template>
  <div class="app-container">
    <div class="scoped-select">
      <div :class="`${curStoreBrand === item.val ? 'cur' : ''} ss-op`" v-for="(item, index) in sbArr" @click="brandHandle(item)" :key="index">{{ item.key }}</div>
    </div>
    <el-amap
      class="amap-box"
      :vid="'amap-vue'"
      :amap-manager="amapManager"
      :zoom="mapDiyObj.zoom"
      :zooms="mapDiyObj.zooms"
      :mapStyle="mapDiyObj.mapStyle"
      :center="mapDiyObj.center"
      :events="mapEvents"
    >
      <el-amap-marker class="scoped-m-box" v-for="(marker, index) in markerList" :key="3000 + index"
          icon="https://img2.honglounews.com/20220110041435-6276.png"
          width="20"
          height="20"
          :position="marker.position"
          :title="marker.store_name"
          :label="{ content: `${marker.signing == 1 ? 'Y' : 'N'}${marker.store_name}[${marker.clerk_num}]`, offset: [-10 * marker.store_name.length / 2, -20]}"
          :extData="{id: marker.id}"
          >
          <!-- :content='`
            <div class="scoped-m-box" style="background: ${storeBrandObj[marker.store_brand]};">
              ${marker.signing}${marker.store_name}[${marker.clerk_num}]
            </div>
          `' -->
          <!-- :label="{ content: `${marker.signing == 1 ? 'Y' : 'N'}${marker.store_name}[${marker.clerk_num}]`, offset: [-10 * marker.store_name.length / 2, -20]}" -->
        </el-amap-marker>
        
    </el-amap>
  </div>
</template>
<script>
import { AMapManager, lazyAMapApiLoaderInstance } from 'vue-amap'
const amapManager = new AMapManager()
import { arrToObj } from '@/utils'
export default {
  name: 'shopMap',
  components: {},
  mixins,
  data() {
    const that = this
    return {
      storeBrandObj: {},
      markerList: [],
      curStoreBrand: '',
      mapDiyObj: {
        center: [115.852386, 28.624076],
        zoom: 13,
        zooms: [11, 23],
      },
      sbArr: [],
      amapManager,
      mapEvents: {
        init(map) {
          // map.setFeatures(['road', 'point', 'bg', 'building']); // 多个种类要素显示
          map.setFeatures(['road', 'bg', 'building']); // 多个种类要素显示
          // map.setMapStyle('amap://styles/647a4a7f773b3c7143b46e7c3e499f1f');
          // AMapUI.loadUI(['control/BasicControl'], function(BasicControl) {
          //   //图层切换控件
          //   var layerControl = new BasicControl.LayerSwitcher({
          //     baseLayers: [
          //       {
          //         id: 'basic',//图层id，需唯一
          //         enable: false, //是否启用
          //         name: '基础地图',//显示名称，html
          //         layer: new AMap.TileLayer()
          //       },
          //       // {
          //       //   id: 'Satellite',//图层id，需唯一
          //       //   enable: true, //是否启用
          //       //   name: '卫星图',//显示名称，html
          //       //   layer: new AMap.TileLayer.Satellite()
          //       // },
          //     ],
          //     overlayLayers:[
          //     ],
          //     position: {
          //       left:'230px',
          //       top:'2px',
          //     },
          //   });
          //   map.addControl(layerControl);
          // })
        },
        // zoomchange (e) {
        //   const curMap = amapManager.getMap()
        //   that.mapDiyObj.zoom = curMap.getZoom() || 17
        // },
        // moveend () {
        //   // console.log(this.mapDiyObj.center)
        // },
        // click(e) {
        //   if (!that.isDbShow) {
        //     return
        //   }
        //   const { lng, lat } = e.lnglat
        //   // console.log(lng, lat)
        //   that.mapDiyObj.center = [lng, lat]
        // },
      },
      // plugin: [{
      //   pName: 'MouseTool',
      // }],
    }
  },
  computed: {},
  created() {
    let sbArr = this.$dictData.store_brand || []
    let storeBrandObj = {}
    let nArr = []
    this.$api.shop.admstorecount().then(res => {
      const brandCount = res.brand_count || []
      brandCount.forEach(bc => {
        sbArr.forEach(item => {
          if (bc.store_brand === item.val) {
            nArr.push({
              total: bc.total,
              val: bc.store_brand,
              key: `${bc.store_brand}(${bc.total})`,
            })
            storeBrandObj[item.val] = item.option1 || '#673ab7'
          }
        })
      })
      nArr.sort( (a, b)=> {
        return b.total - a.total
      })
      this.sbArr = [{key: '全部', val: ''},...nArr]
      this.storeBrandObj = {...storeBrandObj}
    })
    this.getData()
  },
  mounted() {},
  methods: {
    brandHandle (item) {
      this.curStoreBrand = item.val
      this.getData()
    },
    getData () {
      this.$api.shop.admstorelist({
        page_size: 10000,
        page: 1,
        store_brand: this.curStoreBrand
      }).then(res => {
        const list = res.list || []
        let markerList = list.map(item => {
          return {
            position: [item.longitude, item.latitude],
            id: item.id,
            store_name: item.store_name,
            clerk_num: item.clerk_num,
            signing: item.signing,
            store_brand: item.store_brand
          }
        })
        this.markerList = [...markerList]
      })
    },

  }
}
</script>
<style lang="scss" scoped>
.app-container {
  height: calc(100vh - 84px);
  padding: 0;
  margin: 0;
  position: relative;
  .amap-box {
    height: 100%;
  }
}



::v-deep .amap-marker-label {
  border-color: #dcdcdc;
  border-radius: 2px;
  padding: 3px 5px;
  color: #666;
  background: #fff;
  box-shadow: 0 0 3px #ccc;
}
::v-deep .amap-logo{
    display: none!important;;
}
::v-deep .amap-copyright {
  opacity:0;
}
::v-deep .amap-icon img {
  width: 11px !important;
  height: 11px !important;
  // width: 20px !important;
  // height: 20px !important;
}




::v-deep .scoped-m-box {
  color: #fff;
  padding: 0;
  border-radius: 6px;
  font-size: 12px;
}


.scoped-select {
  padding-top: 10px;
  padding-left: 10px;
  .ss-op {
    color: #666;
    background: #ccc;
    border-radius: 6px;
    padding: 3px 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    display: inline-block;
    cursor: pointer;
    user-select: none;
    &.cur {
      color: #fff;
      background: #2d8cf0;
    }
  }
}
</style>