<template>
  <div class="curb-spot-city">
    <div class="show-list">
      <a-spin :spinning="spinning">
        <MapList 
          @changeLoading="changeLoading"
          @changeTask="changeTask"/>
      </a-spin>
    </div>
    <MapboxMap
      :mapConfig="mapConfig"
      @mapOnLoad="onMapboxLoad"
      ref="MapboxComponent"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, defineAsyncComponent, onMounted } from "vue"
const MapboxMap = defineAsyncComponent(() => import('@/components/MapboxMaps/MapComponent.vue'));
import { getGeom, getConfig } from '@/api/sys/layerManagement';
import { message } from 'ant-design-vue'
import MapList from './MapList/index.vue'

const spinning = ref(false)
const mapConfig = ref({ isShowMap: false });
const MapboxComponent = ref();

const changeLoading = (value: boolean) => {
  spinning.value = value
}
function onMapboxLoad(): void {
  getConfig({ code: 'mapsetting' }).then((res) => {
    mapConfig.value = JSON.parse(res.codeValue);
  });
}
function changeTask(val) {
  let getGeomPrams = {
    TableName: 'drone_shp_data ',
    FieldName: 'gid',
    FieldValue: val?.split(','),
    page: 1,
    limit: 999,
    key: null,
  };
  if (val) {
    getGeom(getGeomPrams).then((res) => {
      let geoms:any[] = [];
      if (res) {
        if (res.items?.length > 0) {
          res.items.forEach((item, index) => {
            let geom = {
              key: item.gid,
              mapgeom: item.geometry,
            };
            geoms.push(geom);
          });
        }
        MapboxComponent.value.handlerDraw('Details', geoms, false);
      } else {
        message.error('当前数据没有图斑！');
      }
    });
  } else {
    message.error('当前数据没有图斑！');
  }
}
</script>

<style lang="scss" scoped>
.curb-spot-city {
  height: 100%;
  display: flex;
  .show-list {
    width: 590px;
    background: #efefef;
    :deep(.ant-spin-nested-loading) {
      height: 100%;
      width: 590px;
    }
    :deep(.ant-spin-container) {
      height: 100%;
    }
  }
}
</style>
