<template>
    <div class="pathModal">
      <!-- 左侧目录 -->
      <div class="leftMenuDiv">
        <PathLeftMenu
          ref="pathLeftMenuRef"
          :leftMenuShow="leftMenuShow"
          :allAreaDataList="allAreaDataList"
          :allWorkspaceDataList="allWorkspaceDataList"
          :nowShowAreaData="nowShowAreaData"
          @changeLeftMenuShow="changeLeftMenuShow"
          @handlerLocation="handlerLocation"
          @changeAnnotationInfoShow="changeAnnotationInfoShow"
          @setNowShowAnnotationData="setNowShowAnnotationData"
          @setNowShowImageData="setNowShowImageData"
          @setNowShowAreaData="setNowShowAreaData"
          @setAllAreaData="setAllAreaData"
          @deleteAnnotation="deleteAnnotation"
          @deleteArea="deleteArea"
        />
      </div>
      <!-- 地图 -->
      <div class="mapDiv" :style="{ width: dynamicWidth }">
        <PathMap
          ref="pathMapRef"
          :allWorkspaceDataList="allWorkspaceDataList"
          :nowShowAnnotationData="nowShowAnnotationData"
          :allAreaDataList="allAreaDataList"
          :nowShowAreaData="nowShowAreaData"
          :nowShowImageData="nowShowImageData"
          @setNowShowAnnotationData="setNowShowAnnotationData"
          @setNowShowAreaData="setNowShowAreaData"
          @setAllAreaData="setAllAreaData"
        />
      </div>
      <!-- 地图作业区域 -->
      <div class="areaInfoDiv" v-if="areaInfoShow">
        <PathAreaInfo
          :allAreaDataList="allAreaDataList"
          :nowShowAreaData="nowShowAreaData"
          @setNowShowAreaData="setNowShowAreaData"
          @closePathAreaInfo="closePathAreaInfo"
          @handlerLocation="handlerLocation"
          @deleteArea="deleteArea"
        />
      </div>
    </div>
  </template>
  <script lang="ts" setup>
    import { ref, computed, onMounted } from 'vue';
    import { PathLeftMenu, PathMap, PathAreaInfo } from './path';
    import { cloneDeep } from 'lodash-es';
    import {
      GetWorkspaceList,
      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 allWorkspaceDataList: any = ref([]);
    // 地图宽度
    const dynamicWidth = computed(() => {
      let width = 0;
      // 左侧目录
      if (leftMenuShow.value) {
        width += 340;
      } else {
        width += 64;
      }
      // 地图作业区域
      if (areaInfoShow.value) {
        width += 320;
      }
      return '100%';
    });
  
    // 地图ref
    const pathMapRef = ref();
  
    // 左侧目录是否显示----------------------------------------------------
    const pathLeftMenuRef = ref();
    const leftMenuShow = ref(true);
    function changeLeftMenuShow() {
      leftMenuShow.value = !leftMenuShow.value;
    }
  

    function changeAnnotationInfoShow() {
      
    }
    function getWorksListData() {
      GetWorkspaceList().then((result1) => {
          allWorkspaceDataList.value = result1;
      })
    }
    // 关闭右侧标注
    function closePathAnnotationInfo() {
      nowShowAnnotationData.value = {};
      pathMapRef.value.annotationRestoreDefault();
    }
    // 当前展示的标注信息
    const nowShowAnnotationData = ref();
    // 设置当前展示的标注信息
    function setNowShowAnnotationData(value, restore = true) {

      if (restore) {
        pathMapRef.value.annotationRestoreDefault();
      }
      nowShowAnnotationData.value = value;
    }
  
    // 删除标注
    function deleteAnnotation(value) {
      if (nowShowAnnotationData.value && nowShowAnnotationData.value.id == value.id) {
        nowShowAnnotationData.value = {};
      }
      DeleteAnnotation({
        id: value.id,
      }).then((result) => {
        if (result) {
          // 刷新
          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();
      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 nowShowImageData = ref();
  
    // 设置当前展示的图片
    function setNowShowImageData(value) {
     
      nowShowImageData.value = value;
      pathMapRef.value.setNowShowImageByRight();
    }
  
    // 其他方法-----------------------------------------------------------------
  
    // 移动位置
    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('POINT') > -1 && radiusFlag) {
      return 'Circle';
    }
  }
    onMounted(() => {
      // 查询地图工作区域
      getWorksListData();
      getWorkAreaList(false);
    });
  </script>
  <style lang="less" scoped>
    .pathModal {
      position: relative;
      display: flex;
      width: 100%;
      height: 100%;
  
      .leftMenuDiv {
        position:absolute;
        top:20px;
        left:20px;
        z-index:1;
        display:flex;
        gap:15px;
        width: 340px;
      }
  
      .mapDiv {
        position: relative;
        height: 100%;
        // width: auto;
      }
  
  
      .areaInfoDiv {
        position: relative;
        height: 100%;
        width: 350px;
      }
  
    }
  </style>
  