<template>
  <div class="curb-spot-city">
    <div class="show-list">
      <AuditProgress
        v-if="showParent"
        :year="year"
        :batch="batch"
        :batchOptions="batchOptions"
        :yearOptions="yearOptions"
        :dataList="dataList"
        @auditProgressScreenChange="auditProgressScreenChange"
        @showInfo="changeShowInfo"
      />
      <MapList :areaId="areaId" v-else />
    </div>
    <div id="showMap" class="map"></div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, onUnmounted } from 'vue';
  import mapboxgl, { Map } from 'mapbox-gl';
  import { MapboxConfig, MapboxDefaultStyle } from '@/components/MapboxMaps/src/config.ts';
  import AuditProgress from './AuditProgress/index.vue';
  import MapList from './MapList/index.vue';
  import { getLoadTaskCount } from '@/api/bootstraps/index';

  const showParent = ref(true);
  const year = ref('');
  const batch = ref('');
  const batchOptions = ref([
    { value: '第一批', label: '第一批' },
    { value: '第二批', label: '第二批' },
    { value: '第三批', label: '第三批' },
  ]);
  const yearOptions = ref([
    { value: '2024', label: '2024' },
    { value: '2023', label: '2023' },
    { value: '2022', label: '2022' },
    { value: '2021', label: '2021' },
    { value: '2020', label: '2020' },
  ]);
  const dataList = ref([]);
  const areaId = ref('');
  const auditProgressScreenChange = (value, type) => {
    switch (type) {
      case 'year':
        year.value = value;
        break;
      case 'batch':
        batch.value = value;
        break;
    }
  };
  const changeShowInfo = (value) => {
    console.log(value);
    showParent.value = false;
    areaId.value = value;
  };
  async function getCountList() {
    const data = await getLoadTaskCount();
    dataList.value = data;
  }
  let map: Map;
  onMounted(() => {
    mapboxgl.accessToken = MapboxConfig.ACCESS_TOKEN;
    map = initMap();
    getCountList();
  });
  onUnmounted(() => {
    map && map.remove();
  });
  const initMap = () => {
    return new mapboxgl.Map({
      container: 'showMap',
      language: 'zh-cmn',
      projection: 'equirectangular', // wgs84参考系
      style: MapboxDefaultStyle,
      maxZoom: 22,
      minZoom: 6,
      zoom: 10,
      // ...props.mapOptions,
      center: [117.984425, 35.270654],
    });
  };
</script>

<style lang="scss" scoped>
  .curb-spot-city {
    height: 100%;
    display: flex;
    .show-list {
      width: 35%;
    }
    .map {
      width: 65%;
      background: burlywood;
    }
  }
</style>
