<script>
import AiDvMap from "./AiDvMap.vue";
import AiDvSummary from "./layout/AiDvSummary/AiDvSummary.vue";
import {DvCompData} from "./index";

export default {
  name: "AiLinkageMap",
  components: {AiDvSummary, AiDvMap},
  props: {
    instance: Function,
    config: {default: () => ({})},
  },
  data() {
    return {
      mapData: [],
      areaId: "530300000000"
    }
  },
  computed: {
    sta: v => v.config.summaryConfigs || []
  },
  methods: {
    getData() {
      new DvCompData(this.config, this.instance).getData({type: this.areaId}).then(res => {
        const json = JSON.parse(res.param)
        this.mapData = json.map
        this.config.summaryConfigs = json.sta?.map((e, i) => ({pos: ["rt", "lb", 'lt', 'rb'][i % 4], display: "summary20", ...e})) || []
      })
    }
  },
  created() {
    this.getData()
  }
}
</script>

<template>
  <section class="AiLinkageMap">
    <ai-dv-map :geo-json="config.geoJson" :data="mapData" :area.sync="areaId"/>
    <ai-dv-summary class="abs" v-for="(item,i) in sta" :key="i"
                   :class="item.pos" :type="item.display" :data="item.data"/>
  </section>
</template>

<style scoped lang="scss">
.AiLinkageMap {
  width: 100%;
  height: 100%;
  position: relative;

  .abs {
    position: absolute;
    width: auto;
    height: auto;

    &.lt {
      left: 0;
      top: 0;
    }

    &.rt {
      right: 0;
      top: 0;
    }

    &.lb {
      left: 0;
      bottom: 0;
    }

    &.rb {
      right: 0;
      bottom: 0;
    }
  }

}
</style>
