<template>
  <div>
    <table>
      <tbody>
      <tr>
        <td v-for="feature in features" :key="feature.properties.adcode">
          <button v-if="feature.properties.adcode!=='100000_JD'" @click="districtNavigate(feature.properties.adcode,feature)">{{ feature.properties.name }}</button>
        </td>
      </tr>
      <tr></tr>
      <tr>
        <td v-for="feature in secondFeatures" :key="feature.properties.adcode">
          <button style="background-color: aquamarine" v-if="feature.properties.adcode!=='100000_JD'" @click="secondDistrictNavigate(feature.properties.adcode,feature)">{{ feature.properties.name }}</button>
        </td>
      </tr>
      <tr></tr>
      <tr>
        <td v-for="feature in thirdFeatures" :key="feature.properties.adcode">
          <button style="background-color: red" v-if="feature.properties.adcode!=='100000_JD'" @click="thirdDistrictNavigate(feature.properties.adcode,feature)">{{ feature.properties.name }}</button>
        </td>
      </tr>
      </tbody>
    </table>
    <div id="map">
    </div>
  </div>
</template>

<script>
import * as i2d from "i2d";
import 'leaflet/dist/leaflet.css'
import 'i2d/dist/i2d.css'
import axios from "axios";

export default {
  name: 'XzqMap',
  data() {
    return {
      mapOptions: {
        copyright: false,
        basemaps: [
          {
            type: 'group',
            name: '天地图电子',
            layers: [
              {
                type: 'tdt',
                layer: 'vec_d',
                key: i2d.Token.tiandituArr,
                crs: i2d.CRS.EPSG4490,
              },
              {
                type: 'tdt',
                layer: 'vec_z',
                key: i2d.Token.tiandituArr,
                crs: i2d.CRS.EPSG4490,
              }
            ],
            icon: './dz.png',
            show: true
          },
          {
            type: 'group',
            name: '天地图地形',
            layers: [
              {
                type: 'tdt',
                layer: 'ter_d',
                key: i2d.Token.tiandituArr,
                errorTileUrl: 'img/tile/errortile.png',
                crs: i2d.CRS.EPSG4490
              },
              {
                type: 'tdt',
                layer: 'ter_z',
                key: i2d.Token.tiandituArr,
                crs: i2d.CRS.EPSG4490
              }
            ],
            icon: './dx.png'
          },
          {
            type: 'group',
            name: '天地图影像',
            layers: [
              {
                type: 'tdt', layer: 'img_d', key: i2d.Token.tiandituArr,
                crs: i2d.CRS.EPSG4490
              },
              {
                type: 'tdt', layer: 'img_z', key: i2d.Token.tiandituArr,
                crs: i2d.CRS.EPSG4490
              }
            ],
            icon: './yx.png',
            //必须给最后一个底图配置zindex要不然最后底图切换专题图层不展示
            // 要比专题图层小
            zIndex: 1
          }
        ],
        // https://browser.events.data.msn.cn/OneCollector/1.0?cors=true&content-type=application/x-json-stream&client-id=NO_AUTH&client-version=1DS-Web-JS-3.2.8&apikey=0ded60c75e44443aa3484c42c1c43fe8-9fc57d3f-fdac-4bcf-b927-75eafe60192e-7279&upload-time=1721963639720&ext.intweb.msfpc=GUID%3D58b4a27ccded4df0ae2279c0d4670f38%26HASH%3D58b4%26LV%3D202407%26V%3D4%26LU%3D1721616447966&time-delta-to-apply-millis=use-collector-delta&w=0&anoncknm=app_anon&NoResponseBody=true

        zoom: 12,
        minZoom: 4,
        maxZoom: 20,
        // 纬度在前
        center: [34.247161, 108.944213],
        crs: i2d.CRS.EPSG4490,
        control: {
          scale: true,
          locationBar: {
            crs: 'CGCS2000_GK_Zone_3',
            template: '<div>经度:{lng}</div> <div>纬度:{lat}</div> <div>层级:{level}</div>'
          },
          zoom: {position: 'bottomleft'},
          toolBar: {
            position: 'bottomleft',
            item: ['home', 'fullscreen', 'clear']
          },
          mapSwitch: {
            position: 'bottomright'
          }
        }
      },
      features: [],
      secondFeatures: [],
      thirdFeatures: [],
      map: null,
      geoJsonLayer: null,
      echartsLayer: null
    }
  },
  mounted() {
    this.map = new i2d.Map('map', this.mapOptions)
    this.geoJsonLayer = new i2d.Layer.GeoJsonLayer({
      name: "行政区"
    })
    this.map.addLayer(this.geoJsonLayer)
    axios.get("http://192.168.2.236/areas/100000.json").then((response) => {
      if (response.status === 200) {
        this.features = response.data.features;
      } else {
        alert("服务异常")
      }
    })
  },
  methods: {
    districtNavigate(districtCode, feature) {
      if (districtCode) {
        this.secondFeatures = []
        this.thirdFeatures = []
        this.geoJsonLayer.clear()
        this.geoJsonLayer.load({
          data: feature,
          flyTo: true
        })
        axios.get("http://192.168.2.236/areas/" + districtCode + ".json").then((response) => {
          if (response.status === 200) {
            this.secondFeatures = response.data.features;
          } else {
            alert("服务异常")
          }
        })
      }
    },
    secondDistrictNavigate(districtCode, feature) {
      if (districtCode) {
        if (feature.properties.level !== "district") {
          axios.get("http://192.168.2.236/areas/" + districtCode + ".json").then((response) => {
            if (response.status === 200) {
              this.thirdFeatures = response.data.features;
            } else {
              alert("服务异常")
            }
          });
        }
        this.geoJsonLayer.clear()
        this.geoJsonLayer.load({
          data: feature,
          flyTo: true
        })
      }
    },
    thirdDistrictNavigate(districtCode, feature) {
      if (districtCode) {
        this.geoJsonLayer.clear()
        // eslint-disable-next-line no-debugger
        this.geoJsonLayer.load({
          data: feature,
          flyTo: true
        })
        this.showEchartsLayer(feature.properties.center, feature.properties.centroid)
      }
    },
    showEchartsLayer(center, centroid) {
      if (this.echartsLayer) {
        this.map.removeLayer(this.echartsLayer)
        delete this.echartsLayer
      }
      const options = {
        name: '饼状图测试',
        tooltip: {
          trigger: 'item',
          formatter: function (param) {
            return param.seriesName + '<br/>' + param.name + '<br/>长度' + param.value + 'km<br/>占比' + param.percent.toFixed(0) + '%'
          }
        },
        series: [
          {
            name: '1',
            type: 'pie',
            radius: '7%',
            animationDuration: 0,
            coordinateSystem: 'mars2dMap',
            center: center,
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 1, name: '县道'},
              {value: 3, name: '国道'},
              {value: 4, name: '高速'},
              {value: 5, name: '铁路'}
            ]
          },
          {
            name: 'Access From',
            type: 'pie',
            radius: ['7%', '2%'],
            avoidLabelOverlap: false,
            coordinateSystem: 'mars2dMap',
            center: centroid,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 8,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 1048, name: 'Search Engine'},
              {value: 735, name: 'Direct'},
              {value: 580, name: 'Email'},
              {value: 484, name: 'Union Ads'},
              {value: 300, name: 'Video Ads'}
            ]
          }
        ]
      };
      // 创建Echarts图层
      this.echartsLayer = new i2d.Layer.EchartsLayer(options)
      this.map.addLayer(this.echartsLayer, true)
    }
  }
}
</script>

<style scoped>
#map {
  position: absolute;
  margin: 0;
  height: 80%;
  width: 80%;
}
</style>