<template>
    <div class="bmap" id="container" style="float: left"></div>
    <div
            style="
      border: 1px solid pink;
      margin-left: 5px;
      height: 600px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    "
    >
        <!--            @change="handleCheckedCitiesChange"-->
        <el-checkbox-group v-model="reservationIds">
            <el-col v-for="(item, index) in reservationData">
                <el-checkbox :label="item.id" :key="item.id"
                >{{ item.consignee }}&emsp;{{ item.deliveryAddress }}&emsp;{{
                    item.deliveryPhone
                    }}</el-checkbox
                >
            </el-col>
        </el-checkbox-group>
    </div>

    <div style="margin-left: 40%; margin-top: 5%; float: bottom">
        <el-button icon="el-icon-circle-close" @click="back">返 回</el-button>
    </div>
</template>

<script setup>
  import { useStore } from 'vuex';
  import { getReservationAddr } from '@/api/distribution/distributionReservation';
  import { getDictionaryBiz } from '@/api/system/dict';
  import { onMounted, reactive, toRefs, watchEffect } from 'vue';
  import { useRouter } from 'vue-router';
  import { selectStockArticleAtlasInfo } from '@/api/distribution/distributionDeliveryList';
  let router = useRouter();
  let details = reactive({
    name: 'BmapDemo',
    item: null,
    error: null,
    addressList: [],
    reservationData: [],
    reservationIds: [],
    mapLoc: null,
  });
  onMounted(() => {
    details.item = JSON.parse(router.currentRoute.value.query.item);
    selectStockArticleAtlasInfo(details.item.id).then(res => {
      const data = res.data.data;
      console.log('res------------->', data);
      setTimeout(() => {
        init(data);
      }, 1500);
    });
    // setTimeout(()=>{
    //   details.mapLoc.clearOverlays();

    // },9500)
  });

  function init(data) {
    details.mapLoc = new BMapGL.Map('container'); // 创建地图实例

    let point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
    details.mapLoc.centerAndZoom(point, 12);
    details.mapLoc.enableScrollWheelZoom(true);
    // maplabel()
    if (details.mapLoc) {
      details.mapLoc.clearOverlays(); //清除地图的label
    }
    let a = data;
    a.forEach((item,index)=>{
      console.log('item------------->', item);
      maplabel(item.customerAddress, item.customerName+"--"+item.customerAddress+"--"+item.customerTelephone, index);

      // maplabel('中国四川省成都市简阳市石桥镇简阳市石桥镇红星美凯龙雄州商场-1-26-154', '周娅', 0);
    })
    // maplabel('四川成都龙泉驿区','展示的内容', 0);
  }
  function maplabel(address,contents, index) {
    let myGeo = new BMapGL.Geocoder();
    myGeo.getPoint(address, function (point) {
      if (point) {
        console.log(point, '---------------');
        if (index == 0) {
          details.mapLoc.centerAndZoom(point, 12);
        }
        let content = contents;
        let label = new BMapGL.Label(content, {
          // 创建文本标注
          position: point,
          offset: new BMapGL.Size(10, 20),
        });
        details.mapLoc.addOverlay(label); // 将标注添加到地图中
        label.setStyle({
          // 设置label的样式
          color: '#000',
          fontSize: '10px',
          border: '1px solid #1E90FF',
          borderRadius: '20px',
          padding: '5px 10px',
        });
        console.log(label, '---------------');
      } else {
        // alert('您选择的地址没有解析到结果！');
        console.log(point);
        console.log('您选择的地址没有解析到结果！');
      }
    });
  }
  function back() {
    router.back(-1);
  }
  const { reservationIds }=toRefs(details)
</script>

<style scoped>
    .bmap {
        width: 800px;
        height: 600px;
        border: 1px solid pink;
    }
</style>
