<template>
    <Card :title="title" :icon="icon" class="community-map">
      <div class="map-con">
        <tdt-map style="position: relative;z-index: 0;" mapStyle="indigo" :center="center"
          :zoom="zoom"
          :controls="[
            {
              name: 'Scale',
              position: 'topright'
            },]"
          @init="mapInit"
        >
        <!-- <div v-if="provinceList.length"> -->

          <tdt-marker-clusterer
              v-for="item in provinceList"
              :key="item.label + 'clusterer'"
              :markers="[{
                icon: {
                  iconUrl: require('./images/map-mark-icon.png'),
                  iconSize: [24, 24]
                },
                position: [item.point.lng, item.point.lat]
              }]"
              >
            </tdt-marker-clusterer>
            <tdt-label
              v-for="(item, i) in provinceList"
              :key="`${i}-label`"
              :position="[item.point.lng, item.point.lat]"
              :text="item.label">
            </tdt-label>
          <!-- </div> -->
        </tdt-map>
        <MapList title="省份" :list="provinceList" :position="{left: 30, bottom: 30}"></MapList>
      </div>
    </Card>
  </template>
<script>
import provincePosition from './province-positon'
import { huiJiaApi } from '@/api'
import Card from '@/views/hui-jia/components/card'
import icon from './images/icon-title.png'
import MapList from './components/map-list.vue'
export default {
  name: 'CommunityMap',
  components: {
    Card,
    MapList
  },
  props: {
    zoom: {
      type: Number,
      default: 5
    },
    center: {
      type: Array,
      default: () => [
            107,
            32,
          ]
    }
  },
  data () {
    return {
      title: '项目地区分布',
      icon: icon,
      provinceList: [],
    }
  },
  mounted () {
  },
  methods: {
    mapInit () {
      this.provinceList = []
      huiJiaApi.getCommunityRegionStatistics()
        .then(({ data }) => {
          if (data.code === '200') {
            let _data = data.data
            let arr = []
            _data.provinceStatistics.forEach((item, i) => {
              let cName = item.provinceName.substring(0, 2)
              let province = provincePosition.find(p => p.name.indexOf(cName) !== -1)
              let ele = {
                label: province.name,
                content: item.count,
                point: {
                  lng: province.geoCoord[0],
                  lat: province.geoCoord[1]
                }
              }
              arr.push(ele)
            })
            this.provinceList = arr
          }
        })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/css/screen.scss';
  .map-con {
    height: 100%;
    position: relative;
  }
</style>
