import { computed, defineComponent, onMounted, ComputedRef, ref, watch } from "vue";
import { Spin } from "ant-design-vue";

import { EnumModes, SegmentInfoByDate } from "@/store/roadUnit/types";
import HPaaSL7 from "@/modules/hpaas-core/HPaaSL7";
import LineBySegmentsOverlay from "@/modules/hpaas-core/visual/lines/LineBySegmentsOverlay";

import { useStore } from "@/hook/useStore";
import useGlobalState from "@/store/global";
import useRoadUnitStore from "@/store/roadUnit";

import style from "@/assets/style/RoadUnit/map.module.less";
import { HpaasEventKey } from "@/modules/hpaas-core/types";
import { Feature } from "@turf/helpers";
import HPaaSOL from "@/modules/hpaas-core/HPaaSOL";
import "@/utils/logtime";
import { polygon, Polygon, transformScale, transformTranslate } from "@turf/turf";
export default defineComponent({
  setup() {
    /**
     * 深圳市区域列表
     */
    const { areaList } = useStore(useGlobalState);

    /**
     * 模式
     * 区域名称
     * 选中道路名称
     * 区域通行车辆、车次、车速分日表
     */
    const { mode, area: areaName, road: roadName, areaInfoByDate } = useStore(useRoadUnitStore);

    /**
     * 区域uid
     */
    const areaUid: ComputedRef<string> = computed(() => {
      return (
        areaList.value.find((area) => {
          return area.name === areaName.value;
        })?.uid || ""
      );
    });

    /**
     * Dom挂载之后，渲染地图
     */
    const hpaasMap = ref<HTMLDivElement>();
    const segmentDataDone = ref<number>(0);
    const spinning = ref<boolean>(true);
    let map: HPaaSOL;
    const initMap = () => {
      const container = hpaasMap.value;
      if (container) {
        if (!map)
          map = new HPaaSOL(container, {
            mode: "grey",
            initPitch: 0,
            mapType: "mapbox",
            wmsBaseUrl: "http://10.0.10.174:9999/geoserver/hpaas/wms",
            wfsBaseUrl: "http://10.0.10.174:9999/geoserver/hpaas/wfs",
            show100meters: true,
          });
        // map.fitToArea(areaUid.value);

        map.events.on(HpaasEventKey.SEGMENT_DATA_LOADED, () => {
          segmentDataDone.value += 1;
        });
        const testCoords = [
          [120.01792855554211, 30.31260627737609],
          [120.01549577159678, 30.31254025387503],
          [120.01307259853536, 30.31234244420271],
          [120.01066860915722, 30.31201362981811],
          [120.00829330024531, 30.31155510971176],
          [120.00595605493922, 30.310968695258435],
          [120.00366610556397, 30.310256703039975],
          [120.00143249706328, 30.30942194566688],
          [119.99926405118399, 30.3084677206355],
          [119.99716933155469, 30.307397797265505],
          [119.99515660979802, 30.306216401769877],
          [119.99323383281185, 30.30492820051729],
          [119.99140859134985, 30.303538281553852],
          [119.98968809002596, 30.302052134458084],
          [119.98807911886193, 30.300475628609664],
          [119.98658802649075, 30.298814989958775],
          [119.98522069512117, 30.297076776388817],
          [119.98398251736238, 30.295267851770735],
          [119.9828783749992, 30.293395358812266],
          [119.98191261980091, 30.29146669081056],
          [119.98108905643825, 30.28948946242017],
          [119.98041092757443, 30.287471479552927],
          [119.97988090118737, 30.285420708529152],
          [119.97950106017129, 30.28334524460256],
          [119.97927289425675, 30.281253279983776],
          [119.9791972942786, 30.279153071488967],
          [119.97927454881219, 30.277052907941613],
          [119.97950434318885, 30.274961077456375],
          [119.97988576089199, 30.272885834734065],
          [119.98041728732571, 30.27083536849676],
          [119.98109681593914, 30.26881776919153],
          [119.98192165667956, 30.2668409970897],
          [119.9828885467387, 30.26491285090716],
          [119.98399366354846, 30.263040937069075],
          [119.98523263997187, 30.26123263973953],
          [119.98660058162871, 30.259495091733545],
          [119.9880920862852, 30.25783514642573],
          [119.98970126523052, 30.25625935076505],
          [119.99142176655491, 30.25477391950161],
          [119.99324680023649, 30.25338471072599],
          [119.9951691649382, 30.252097202816607],
          [119.99718127640831, 30.250916472885148],
          [119.99927519737349, 30.249847176803925],
          [120.00144266880652, 30.24889353089321],
          [120.0036751424464, 30.248059295339566],
          [120.00596381444373, 30.24734775940994],
          [120.00829965999975, 30.246761728518894],
          [120.0106734688644, 30.246303513199237],
          [120.01307588155476, 30.245974920019076],
          [120.01549742615316, 30.24577724448041],
          [120.01792855554211, 30.245711265926843],
          [120.02035968493107, 30.24577724448041],
          [120.02278122952944, 30.245974920019076],
          [120.02518364221982, 30.246303513199237],
          [120.02755745108445, 30.246761728518894],
          [120.02989329664048, 30.24734775940994],
          [120.03218196863781, 30.248059295339566],
          [120.0344144422777, 30.24889353089321],
          [120.03658191371072, 30.249847176803925],
          [120.03867583467591, 30.250916472885148],
          [120.04068794614602, 30.252097202816607],
          [120.04261031084772, 30.25338471072599],
          [120.0444353445293, 30.25477391950161],
          [120.04615584585368, 30.25625935076505],
          [120.04776502479902, 30.25783514642573],
          [120.0492565294555, 30.259495091733545],
          [120.05062447111234, 30.26123263973953],
          [120.05186344753575, 30.263040937069075],
          [120.0529685643455, 30.26491285090716],
          [120.05393545440465, 30.2668409970897],
          [120.05476029514507, 30.26881776919153],
          [120.05543982375852, 30.27083536849676],
          [120.05597135019225, 30.272885834734065],
          [120.05635276789535, 30.274961077456375],
          [120.05658256227203, 30.277052907941613],
          [120.0566598168056, 30.279153071488967],
          [120.05658421682747, 30.281253279983776],
          [120.05635605091292, 30.28334524460256],
          [120.05597620989685, 30.285420708529152],
          [120.05544618350979, 30.287471479552927],
          [120.05476805464595, 30.28948946242017],
          [120.0539444912833, 30.29146669081056],
          [120.05297873608502, 30.293395358812266],
          [120.05187459372185, 30.295267851770735],
          [120.05063641596306, 30.297076776388817],
          [120.04926908459348, 30.298814989958775],
          [120.04777799222228, 30.300475628609664],
          [120.04616902105825, 30.302052134458084],
          [120.04444851973436, 30.303538281553852],
          [120.04262327827236, 30.30492820051729],
          [120.04070050128622, 30.306216401769877],
          [120.03868777952954, 30.307397797265505],
          [120.03659305990023, 30.3084677206355],
          [120.03442461402093, 30.30942194566688],
          [120.03219100552025, 30.310256703039975],
          [120.029901056145, 30.310968695258435],
          [120.0275638108389, 30.31155510971176],
          [120.02518850192699, 30.31201362981811],
          [120.02278451254887, 30.31234244420271],
          [120.02036133948744, 30.31254025387503],
          [120.01792855554211, 30.31260627737609],
        ];
        const testFeature = polygon([testCoords]);
        const features: Feature<Polygon>[] = [];
        for (let i = 0; i < 1000; i++) {
          const f = transformScale(testFeature, Math.random() * 0.1);
          const f1 = transformTranslate(f, Math.random() * 10, Math.random() * 360, { units: "kilometers" });
          features.push(f1);
        }
        map.toolsCenter.actions.drawer.begin("circle");
      }
    };
    onMounted(() => {
      initMap();
    });

    /**

    /**
     * 选中某一条道路，可视化
     * 监听选中道路名称-roadName
     * 监听绘制区域内车次/速度可视化是否准备完成-mapOccOrSpeed（选中道路依赖于此）
     */
    // const checkRoad = () => {
    //   if (roadName.value) {
    //     if (mapOccOrSpeed.value) {
    //       mapOccOrSpeed.value.checkedLayer || mapOccOrSpeed.value.initCheckLines();
    //       mapOccOrSpeed.value.checkLines(roadName.value);
    //     }
    //   } else {
    //     if (mapOccOrSpeed.value) {
    //       mapOccOrSpeed.value.clearCheck();
    //     }
    //   }
    // };
    // watch([roadName, mapOccOrSpeed], () => {
    //   checkRoad();
    // });

    return () => (
      <div class={style.container}>
        <div class={style.map} ref={hpaasMap}></div>
      </div>
    );
  },
});