<template>
  <Card class="store-map-con">
    <div class="title">门店分布</div>
    <Spin fix v-if="loading" />
    <baidu-map class="map" center="北京">
      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
      <bm-marker
        v-for="(item, key) in storeObj"
        :key="key"
        :position="item.position"
        @click="openStoreInfo(key)"
      >
        <bm-info-window
          :show="item.show"
          @close="closeStoreInfo(key)"
          @open="openStoreInfo(key)"
          >我爱北京天安门</bm-info-window
        >
      </bm-marker>
    </baidu-map>
  </Card>
</template>

<script>
export default {
  data () {
    return {
      loading: false,
      storeObj: {
        s1: {
          position: { lng: 116.404, lat: 39.915 },
          show: false
        },
        s2: {
          position: { lng: 116.414, lat: 39.915 },
          show: false
        }
      }
    }
  },
  methods: {
    requestStore () {
    },
    openStoreInfo (key) {
      this.storeObj[key].show = true
    },
    closeStoreInfo (key) {
      this.storeObj[key].show = false
    }
  },
  mounted () {
    this.requestStore()
  }
}
</script>

<style lang="less">
.store-map-con {
  .title {
    font-weight: bold;
    font-size: 18px;
    color: #516B91;
    margin-bottom: 10px;
  }
  .map {
    width: 100%;
    height: 500px;
  }
}
</style>
