<template>
  <section class="fdMap">
    <div ref="content" class="w100 h100"/>
    <div class="reset" @click.stop="handleReset"/>
  </section>
</template>
<script>
import * as echarts from 'echarts'
import geoJSON from "../assets/fengduGeo.json"
import fdEdge from "../assets/fdEdge.json"

export default {
  name: "fdMap",
  model: {
    prop: "ins",
    event: "input"
  },
  props: {
    ins: {default: null},
    root: String
  },
  watch: {
    root(v) {
      if (v) {
        this.areaId = v.slice(0, 9)
      }
    }
  },
  data() {
    return {
      map: null,
      areaId: ''
    }
  },
  methods: {
    init(c = 0) {
      if (this.$refs.content) {
        if (!this.map) this.map = echarts.init(this.$refs.content)
        const geo = this.$copy(geoJSON)
        if (this.areaId && this.areaId != "500230000") {//根据地区切换地图
          const mapid = 'fd' + this.areaId
          geo.features = geoJSON.features.filter(e => e.properties.unique_id == this.areaId)
          echarts.registerMap(mapid, {geoJSON: geo})
          this.map.setOption({
            series: [
              {
                type: 'map',
                show: true,
                map: mapid,
                roam: true,
                itemStyle: {
                  areaColor: '#02bcff29',
                  borderColor: '#02FEFF',
                  borderWidth: 2,
                },
                label: {
                  show: true,
                  color: '#02FEFF',
                  fontSize: 16,
                  fontFamily: 'PingFang-SC',
                },
                emphasis: {
                  disabled: true,
                },
                select: {
                  itemStyle: {areaColor: '#02bcff29',},
                  label: {fontSize: 16, fontWeight: 'bold', color: '#02FEFF'}
                },
                zoom: 1.2,
                data: geoJSON.features.map(e => e.properties)
              },
            ]
          })
        } else {
          const fd = fdEdge.features[0]
          geo.features.unshift(fd)
          echarts.registerMap('fengdu', {geoJSON: geo})
          this.map.setOption({
            series: [
              {
                type: 'map',
                show: true,
                map: 'fengdu',
                roam: true,
                itemStyle: {
                  areaColor: '#02bcff29',
                  borderColor: '#02FEFF21',
                  borderWidth: 1,
                },
                label: {
                  show: true,
                  color: '#02FEFF',
                  fontSize: 16,
                  fontFamily: 'PingFang-SC',
                },
                emphasis: {
                  disabled: true,
                },
                select: {
                  itemStyle: {areaColor: '#02bcff29',},
                  label: {fontSize: 16, fontWeight: 'bold', color: '#02FEFF'}
                },
                zoom: 1.2,
                data: [...geoJSON.features.map(e => e.properties), {
                  ...fd.properties, select: {disabled: true}, itemStyle: {
                    areaColor: 'transparent',
                    borderWidth: 2,
                    borderColor: '#02FEFF',
                  },
                }],
              },
            ]
          })
        }
        this.$emit("input", this.map)
      } else if (c < 5) setTimeout(() => this.init(++c), 500)
    },
    handleReset() {
      const {series = []} = this.map.getOption()
      this.map.clear()
      this.init()
      if (series[0]?.markPoint) {
        this.map.setOption({
          series: {
            markPoint: series[0].markPoint
          }
        })
      }
    }
  },
  mounted() {
    this.init()
  }
}
</script>
<style scoped lang="scss">
.fdMap {
  position: relative;

  .reset {
    position: absolute;
    top: 20px;
    right: 60px;
    background: url("../assets/mapReset.png") no-repeat;
    width: 66px;
    height: 64px;
    z-index: 202310241633;
    cursor: pointer;
    backdrop-filter: blur(5px);
  }
}
</style>
