<template>
  <div class="ele-body">
    <a-card class="ele-card" :bordered="false">
      <a-space>
        <a-select @change="whereChange" v-model:value="where.year">
          <a-select-option v-for="item in yearOptions" :key="item.value">{{
            item.label
          }}</a-select-option>
        </a-select>
        <a-radio-group @change="whereChange" v-model:value="where.regionLevel">
          <a-radio-button value="city"> 市级 </a-radio-button>
          <a-radio-button value="county"> 县级 </a-radio-button>
          <a-radio-button value="place"> 站点 </a-radio-button>
        </a-radio-group>
        <!-- <a-button @click="exportMap">导出</a-button> -->
      </a-space>
    </a-card>
    <div id="map"></div>
  </div>
</template>
<script>
import { Scene, PointLayer, Popup } from "@antv/l7";
import { GaodeMap } from "@antv/l7-maps";
import {
  getPlaceGis,
} from "@/api/ecology/atmosphere/air";
import {
  getColumnOptions,
} from "@/api/ecology/atmosphere/air-plcae";
let scene = null;
let pointLayer = null;
let cityLayer = null;
export default {
  data() {
    return {
      yearOptions: [],
      where: {
        regionLevel: "place",
        year: "选择年份",
      },
    };
  },
  mounted() {
    scene = new Scene({
      id: "map",
      map: new GaodeMap({
        style: "light",
        center: [108.33, 22.84],
        // pitch: 48.62562,
        // rotation: -0.76,
        zoom: 12,
      }),
    });

    scene.on("loaded", () => {
      this.initData();
    });

    // const control = new DrawControl(scene, {
    // });
  },
  methods: {
    initData() {
      getColumnOptions("year").then((res) => {
        if (res.data.code == 0) {
          this.yearOptions = res.data.data.map((item) => {
            return {
              label: item,
              value: item,
            };
          });
          this.where.year = res.data.data[res.data.data.length - 1];
          this.whereChange();
        }
      });
    },
    setPlaceData() {},
    whereChange() {
        if(scene && pointLayer){
          scene.removeLayer(pointLayer)
        }
        getPlaceGis(this.where).then((res) => {
          if (res.data.code == 0) {
             if(cityLayer){
               cityLayer.destroy()
               scene.removeLayer(cityLayer)
             }
            pointLayer = new PointLayer({})
              .source(res.data.data, {
                parser: {
                  type: "json",
                  x: "longitude",
                  y: "latitude",
                },
              })
              .shape('circle').size(10)
              // .size("leq", acid (level) {
              //   return [4, 4, level];
              // })
              .active(true)
              .color("leq", () => {
                // const { timeSlot } = this.where;
                // const color =
                //   timeSlot == "昼"
                //     ? leq > 70
                //       ? "#f5222d"
                //       : "#13c2c2"
                //     : leq > 65
                //     ? "#f5222d"
                //     : "#13c2c2";
                return "#13c2c2";
              })
              .style({
                opacity: 1,
              });
            pointLayer.on("mousemove", (e) => {
              const popup = new Popup({
                offsets: [0, 0],
                closeButton: false,
              })
                .setLnglat(e.lngLat)
                .setHTML(
                  `<p>点位名称: ${e.feature.place}</p><p>点位属性: ${e.feature.attributes}</p><p>片区名称: ${e.feature.districtName}</p><p>所在功能区类别: ${e.feature.placeFunctionalAreaCategory}</p>
<p>SO2: ${e.feature.avgSo2}    NO2: ${e.feature.avgNo2}</p><p>PM10: ${e.feature.avgPm10}    CO: ${e.feature.avgCo}</p><p>O3: ${e.feature.avgO3}    PM2.5: ${e.feature.avgPm25}</p>`
                );
              scene.addPopup(popup);
            });
            pointLayer.setData(res.data.data);
            scene.addLayer(pointLayer);
            scene.setZoomAndCenter(12, [108.33, 22.84]);
            // scene.setPitch(48);
            scene.render()
          }
        });
    },
    getAreaData() {},
    exportMap(){
      console.log("exportMap");
      scene.exportMap("png");
    }
  },
};
</script>
<style scoped>
::-webkit-scrollbar {
  display: none;
}

html,
body {
  overflow: hidden;
  margin: 0;
}
.ele-body {
  position: relative;
  height: 100%;
  padding: 16px 0;
}
.ele-card {
  z-index: 10;
  margin: 0 16px;
  display: inline-block;
}
#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}
</style>