<template>
  <div class="map-container">
    <div id="mapContainer" class="map-box"></div>
    <div class="layer-workspace" :style="{ left: showLayerList ? '0px' : '-356px' }">
      <LayerComponent
        :layerList="layerList"
        @serveModalCancle="serveModalCancle"
        @changeOpenInsertShpModal="changeOpenInsertShpModal"
        @clearLayerList="clearLayerList"
        @handlerLayerShowChange="handlerLayerShowChange"
        @setLayerTableShow="setLayerTableShow"
        @setLayerDrawerShow="setLayerDrawerShow"
      />
      <!-- <LayerTree /> -->
      <div class="close-layer-workspace" @click="changeLayerList">
        <MenuFoldOutlined v-if="showLayerList" />
        <MenuUnfoldOutlined v-else />
      </div>
    </div>
    <LayerControl @draw="handlerDrawPolygon" :style="{ left: showLayerList ? '386px' : '20px' }" />
    <!-- 操作抽屉 -->
    <LayerDrawer
      v-if="layerDrawerShow"
      :style="{
        right: '0px',
      }"
      @setLayerDrawerShow="setLayerDrawerShow"
    />
    <!-- 查看数据表格-->
    <LayerTable
      v-if="layerTableShow"
      :style="{
        left: showLayerList ? '390px' : '0px',
        width: showLayerList ? 'calc(100% - 390px)' : '100%',
      }"
      :layerTableShowData="layerTableShowData"
      @setLayerTableShow="setLayerTableShow"
    />
    <!-- 底边黑条 -->
    <LayerBottom
      :style="{
        left: showLayerList ? '356px' : '0px',
        width: showLayerList ? 'calc(100% - 356px)' : '100%',
      }"
    />
    <!-- 叠加服务 -->
    <Modal :openModal="openModal" @serveModalCancle="serveModalCancle" />
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, onUnmounted, defineProps, reactive, ref, defineExpose } from 'vue';
  import LayerComponent from './LayerComponent.vue';
  import LayerTree from './LayerTree.vue';
  import LayerControl from './LayerControl.vue';
  import LayerTable from './LayerTable.vue';
  import LayerDrawer from './LayerDrawer.vue';
  import LayerBottom from './LayerBottom.vue';
  import Modal from './modal/index.vue';
  import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons-vue';

  // 叠加服务
  const openModal = ref(false);
  // 叠加服务
  function serveModalCancle(value) {
    openModal.value = value;
  }
  // 创建新图层
  const insertShpModal = ref(false);
  const changeOpenInsertShpModal = (value) => {
    insertShpModal.value = value;
  };

  // 右侧目录是否显示
  const showLayerList = ref<boolean>(true);
  const changeLayerList = () => {
    showLayerList.value = !showLayerList.value;
  };
  // 右侧目录数据
  const layerList = ref<[]>([]);
  const handlerAddToLayerList = (value) => {
    layerList.value.push(value);
  };

  // 清空按钮
  const handlerClearLayerList = () => {
    layerList.value = [];
  };

  // 查看数据表格
  const layerTableShow = ref(false);
  const layerTableShowData = ref({});
  function setLayerTableShow(value, item = {}) {
    layerTableShow.value = value;
    layerTableShowData.value = item;
  }

  // 操作抽屉
  const layerDrawerShow = ref(true);
  function setLayerDrawerShow(value, item = {}) {
    layerDrawerShow.value = value;
  }

  onMounted(() => {
    handlerAddToLayerList(1);
    handlerAddToLayerList(2);
    handlerAddToLayerList(3);
    handlerAddToLayerList(4);
  });
</script>

<style lang="less" scoped>
  .map-container {
    background-color: gray;
    position: relative;
    width: 100%;
    height: 100%;
  }

  .layer-workspace {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
  }

  html[data-theme='light'] {
    .close-layer-workspace {
      position: absolute;
      bottom: 35px;
      left: 355px;
      width: 30px;
      height: 30px;
      background: #e0e5ed;
      z-index: 9999;
      line-height: 30px;
      text-align: center;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
      cursor: pointer;
    }
  }
  [data-theme='dark'] {
    .close-layer-workspace {
      position: absolute;
      bottom: 35px;
      left: 355px;
      width: 30px;
      height: 30px;
      background: #000000;
      z-index: 9999;
      line-height: 30px;
      text-align: center;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
      cursor: pointer;
    }
  }

  .blue {
    background-color: #0081ff;
  }
</style>
