<template>
  <div class="pathModal">
    <!-- 左侧目录 -->
    <div
      class="leftMenuDiv"
      :style="{
        width: leftMenuShow ? '275px' : '0px',
      }"
    >
      <PathLeftMenu
        ref="pathLeftMenuRef"
        :pathRecord="props.pathRecord"
        :leftMenuShow="leftMenuShow"
        :allAnnotationDataList="allAnnotationDataList"
        :nowShowAnnotationData="nowShowAnnotationData"
        :allAreaDataList="allAreaDataList"
        :nowShowAreaData="nowShowAreaData"
        :allImageDataList="allImageDataList"
        :nowShowImageData="nowShowImageData"
        @changeLeftMenuShow="changeLeftMenuShow"
        @handlerLocation="handlerLocation"
        @closePathModal="closePathModal"
        @changeAnnotationInfoShow="changeAnnotationInfoShow"
        @setNowShowAnnotationData="setNowShowAnnotationData"
        @setNowShowImageData="setNowShowImageData"
        @setNowShowAreaData="setNowShowAreaData"
        @setAllAnnotationData="setAllAnnotationData"
        @setAllAreaData="setAllAreaData"
        @deleteAnnotation="deleteAnnotation"
        @deleteArea="deleteArea"
      />
    </div>
    <!-- 地图 -->
    <div class="mapDiv" :style="{ width: dynamicWidth }">
      <PathMap
        ref="pathMapRef"
        :allAnnotationDataList="allAnnotationDataList"
        :nowShowAnnotationData="nowShowAnnotationData"
        :allAreaDataList="allAreaDataList"
        :nowShowAreaData="nowShowAreaData"
        :allImageDataList="allImageDataList"
        :nowShowImageData="nowShowImageData"
        @setNowShowAnnotationData="setNowShowAnnotationData"
        @setNowShowImageData="setNowShowImageData"
        @setNowShowAreaData="setNowShowAreaData"
        @setAllAnnotationData="setAllAnnotationData"
        @setAllImageData="setAllImageData"
        @setAllAreaData="setAllAreaData"
        @closePathImageInfo="closePathImageInfo"
      />
    </div>
    <!-- 地图标注 -->
    <div class="annotationInfoDiv" v-if="annotationInfoShow">
      <PathAnnotationInfo
        :allAnnotationDataList="allAnnotationDataList"
        :nowShowAnnotationData="nowShowAnnotationData"
        @setNowShowAnnotationData="setNowShowAnnotationData"
        @closePathAnnotationInfo="closePathAnnotationInfo"
        @handlerLocation="handlerLocation"
        @deleteAnnotation="deleteAnnotation"
      />
    </div>
    <!-- 地图作业区域 -->
    <!-- <div class="areaInfoDiv" v-if="areaInfoShow">
      <PathAreaInfo
        :allAreaDataList="allAreaDataList"
        :nowShowAreaData="nowShowAreaData"
        @setNowShowAreaData="setNowShowAreaData"
        @closePathAreaInfo="closePathAreaInfo"
        @handlerLocation="handlerLocation"
        @deleteArea="deleteArea"
      />
    </div> -->
    <!-- 地图照片 -->
    <!-- <div class="imageInfoDiv" v-if="imageInfoShow">
      <PathImageInfo
        :allImageDataList="allImageDataList"
        :nowShowImageData="nowShowImageData"
        @setNowShowImageData="setNowShowImageData"
        @closePathImageInfo="closePathImageInfo"
        @handlerLocation="handlerLocation"
      />
    </div> -->
  </div>
</template>
<script lang="ts" setup>
  import { ref, computed, onMounted } from 'vue';
  import { PathLeftMenu, PathMap, PathAnnotationInfo, PathAreaInfo, PathImageInfo } from './path';
  import { cloneDeep } from 'lodash-es';
  import imageJson from './json/image.json';
  import {
    GetAnnotationList,
    DeleteAnnotation,
    GetWorkAreaList,
    DeleteWorkArea,
  } from '@/api/demo/mediaLibrary';
  import { WktToGeojson, GeojsonToWkt } from '@/components/MapboxMaps/src/WktGeojsonTransform';
  import { useMessage } from '@/hooks/web/useMessage';
  const { createMessage, createConfirm } = useMessage();

  const props = defineProps(['pathRecord']);
  const emits = defineEmits(['closePathModal']);
  // 地图宽度
  const dynamicWidth = computed(() => {
    let width = 0;
    // 左侧目录
    if (leftMenuShow.value) {
      width += 275;
    } else {
      width += 0;
    }
    // 地图标注
    if (annotationInfoShow.value) {
      width += 320;
    }
    // // 地图作业区域
    // if (areaInfoShow.value) {
    //   width += 320;
    // }
    // // 地图照片
    // if (imageInfoShow.value) {
    //   width += 720;
    // }
    return 'calc(100% - ' + width + 'px)';
  });

  // 地图ref
  const pathMapRef = ref();

  // 左侧目录是否显示----------------------------------------------------
  const pathLeftMenuRef = ref();
  const leftMenuShow = ref(true);
  function changeLeftMenuShow() {
    leftMenuShow.value = !leftMenuShow.value;
  }

  // 右侧标注信息是否显示----------------------------------------------------
  const annotationInfoShow = ref(false);
  function changeAnnotationInfoShow() {
    annotationInfoShow.value = !annotationInfoShow.value;
  }
  // 关闭右侧标注
  function closePathAnnotationInfo() {
    annotationInfoShow.value = false;
    nowShowAnnotationData.value = {};
    pathMapRef.value.annotationRestoreDefault();
  }
  // 当前展示的标注信息
  const nowShowAnnotationData = ref();
  const allAnnotationDataList: any = ref([]);
  // 设置当前展示的标注信息
  function setNowShowAnnotationData(value, restore = true) {
    if (value.id) {
      annotationInfoShow.value = true;
    } else {
      annotationInfoShow.value = false;
    }
    if (restore) {
      pathMapRef.value.annotationRestoreDefault();
    }
    nowShowAnnotationData.value = value;
  }
  // 刷新区域信息
  function setAllAnnotationData() {
    // 查询地图工作区域
    getAnnotationList();
  }
  // 查询地图标注
  async function getAnnotationList(showThis = true) {
    allAnnotationDataList.value = await GetAnnotationList({ workspaceid: 1 });
    if (allAnnotationDataList.value.length > 0) {
      allAnnotationDataList.value.forEach((annotation, index) => {
        let geomjson = WktToGeojson(annotation.geom);
        annotation = {
          ...annotation,
          properties: JSON.parse(annotation.properties),
          geomtype: getGeomType(annotation),
          coordinates: geomjson.coordinates,
        };
        allAnnotationDataList.value[index] = annotation;
      });
    }
    if (showThis) {
      setTimeout(() => {
        pathLeftMenuRef.value.updateShowMenuInfoList('地图标注');
      }, 50);
    }
  }

  // 删除标注
  function deleteAnnotation(value) {
    if (nowShowAnnotationData.value && nowShowAnnotationData.value.id == value.id) {
      annotationInfoShow.value = false;
      nowShowAnnotationData.value = {};
    }
    DeleteAnnotation({
      id: value.id,
    }).then((result) => {
      if (result) {
        // 刷新
        getAnnotationList();
        createMessage.success('删除成功');
      }
    });
  }

  // 右侧区域信息是否显示----------------------------------------------------
  const areaInfoShow = ref(false);
  function changeAreaInfoShow() {
    areaInfoShow.value = !areaInfoShow.value;
  }
  // 关闭右侧标注
  function closePathAreaInfo() {
    areaInfoShow.value = false;
    nowShowAreaData.value = {};
    pathMapRef.value.areaRestoreDefault();
  }
  // 当前展示的区域信息
  const nowShowAreaData = ref();
  const allAreaDataList: any = ref([]);
  // 设置当前展示的区域信息
  function setNowShowAreaData(value, restore = true) {
    if (value.id) {
      areaInfoShow.value = true;
    } else {
      areaInfoShow.value = false;
    }
    if (restore) {
      pathMapRef.value.areaRestoreDefault();
    }
    nowShowAreaData.value = value;
  }
  // 刷新区域信息
  function setAllAreaData() {
    // 查询地图工作区域
    getWorkAreaList();
  }
  // 查询地图工作区域
  async function getWorkAreaList(showThis = true) {
    allAreaDataList.value = await GetWorkAreaList({ workspaceid: 1 });
    if (allAreaDataList.value.length > 0) {
      allAreaDataList.value.forEach((area, index) => {
        let geomjson = WktToGeojson(area.geom);
        area = {
          ...area,
          properties: JSON.parse(area.properties),
          geomtype: getGeomType(area),
          coordinates: geomjson.coordinates,
        };
        allAreaDataList.value[index] = area;
      });
    }
    if (showThis) {
      setTimeout(() => {
        pathLeftMenuRef.value.updateShowMenuInfoList('地图作业区域');
      }, 50);
    }
  }

  // 删除区域
  async function deleteArea(value) {
    if (nowShowAreaData.value && nowShowAreaData.value.id == value.id) {
      areaInfoShow.value = false;
      nowShowAreaData.value = {};
    }
    DeleteWorkArea({
      id: value.id,
    }).then((result) => {
      if (result) {
        // 刷新
        getWorkAreaList();
        createMessage.success('删除成功');
      }
    });
  }

  // 右侧图片是否显示----------------------------------------------------
  const imageInfoShow = ref(false);
  // 关闭右侧图片
  function closePathImageInfo() {
    imageInfoShow.value = false;
  }
  // 当前展示的图片
  const nowShowImageData = ref();
  const allImageDataList = ref(imageJson);

  // 设置当前展示的图片
  function setNowShowImageData(value) {
    if (value.id) {
      imageInfoShow.value = true;
    } else {
      imageInfoShow.value = false;
    }
    nowShowImageData.value = value;
    pathMapRef.value.setNowShowImageByRight();
  }

  // 其他方法-----------------------------------------------------------------
  // 关闭弹窗
  function closePathModal() {
    emits('closePathModal');
  }

  // 移动位置
  function handlerLocation(position) {
    pathMapRef.value.handlerLocation([position.lng, position.lat]);
  }

  // 获取WKT类型
  function getGeomType(area) {
    let geom = area.geom;
    let radiusFlag = area.properties.indexOf('radius') > -1 ? true : false;
    // 点
    if (geom.indexOf('POINT') > -1 && !radiusFlag) {
      return 'Point';
    }
    // 线
    if (geom.indexOf('LINESTRING') > -1 && !radiusFlag) {
      return 'Polyline';
    }
    // 多边形
    if (geom.indexOf('POLYGON') > -1 && !radiusFlag) {
      return 'Polygon';
    }
    // 圈
    if (geom.indexOf('POLYGON') > -1 && radiusFlag) {
      return 'Circle';
    }
  }

  onMounted(() => {
    // 查询地图工作区域
    getWorkAreaList(false);
    getAnnotationList();
  });
</script>
<style lang="less" scoped>
  .pathModal {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;

    .leftMenuDiv {
      position: relative;
      height: 100%;
    }

    .mapDiv {
      position: relative;
      height: 100%;
      // width: auto;
    }

    .annotationInfoDiv {
      position: relative;
      height: 100%;
      width: 320px;
    }

    .areaInfoDiv {
      position: relative;
      height: 100%;
      width: 320px;
    }

    .imageInfoDiv {
      position: relative;
      height: 100%;
      // width: 37%;
      width: 720px;
      // min-width: 720px;
    }
  }
</style>
