<template>
  <!-- 地图 -->
  <div class="position-r w-100 h-100" id="map"></div>
  <!-- 顶部图层控制 移动 -->
  <div class="TopTuLi">
    <div class="Title">工程项目</div>
    <div class="TuLiListBox">
      <div v-for="item in AllData.TuLi" class="TuLiList" @click="TuLiClick(item)">
        <img class="ListImg" :src="item.img" />
        <div class="ShowDiv" v-show="item.check"></div>
      </div>
    </div>
  </div>

  <!-- 项目详情弹窗 -->
  <van-popup v-model:show="AllData.showBottom" position="center" :style="{ height: '60%' }" round>
    <van-cell-group inset>
      <van-cell title="项目名称:" :label="AllData.ProjectData.projectName" />
      <van-cell title="项目类型:" :label="formatter(AllData.ProjectData.projectTypeCode)" />
      <van-cell title="项目建设情况:" :label="formatter2(AllData.ProjectData.buildStatus)" />
      <van-cell title="项目简介:" :label="AllData.ProjectData.projectOverview" />
      <van-cell>
        <template #title>
          <span class="custom-title">项目图片</span>
        </template>
        <template #label>
          <van-image
            v-for="(item, index) in AllData.ProjectData.sysFileList"
            width="100%"
            height="auto"
            fit="contain"
            :src="item.url"
            @click="Yulan(index)"
          />
        </template>
      </van-cell>
    </van-cell-group>
  </van-popup>

  <!-- 图片预览放大 -->
  <van-image-preview
    v-model:show="AllData.previewShow"
    :images="AllData.images"
    :close-on-click-image="false"
    :start-position="AllData.imagesIndex"
  >
    <template #image="{ src, style, onLoad }">
      <img :style="[{ width: '100%' }, style]" :src="src" />
    </template>
  </van-image-preview>
</template>

<script setup>
import WKT from 'terraformer-wkt-parser';
import { defineProps, computed, defineEmits, ref, onMounted } from 'vue';
import { getProjects } from '@/api/project';
import AMapUtils from '@/utils/gis/AMapUtils';
import kaifengPSFQ1 from '@/assets/geojson/kaifengPSFQ1.json';
import kaifengPSFQlabel1 from '@/assets/geojson/kaifengPSFQlabel1.json';
import projectionArea from '@/assets/geojson/projectionArea.json';
import projectionAreaLabel from '@/assets/geojson/projectionAreaLabel.json';

import Img1 from '/static/images/1.png';
import Img2 from '/static/images/2.png';
import Img3 from '/static/images/3.png';
import Img4 from '/static/images/4.png';
import Img5 from '/static/images/5.png';
import Img6 from '/static/images/6.png';
import Img7 from '/static/images/7.png';
const ICONS_MAP = {
  HMJZYSQ: '/static/images/HMJZYSQ.png',
  HMXGYLD: '/static/images/HMXGYLD.png',
  HMXDLGC: '/static/images/HMXDLGC.png',
  HMXSX: '/static/images/HMXSX.png',
  GIS: '/static/images/GIS.png',
  GWPCYXF: '/static/images/GWPCYXF.png',
  GWJBZ: '/static/images/GWJBZ.png',
};
const AllData = reactive({
  TuLi: [
    { name: 'GIS', img: Img1, check: true, font: 'GIS平台建设与监测设施' },
    { name: 'HMXDLGC', img: Img2, check: true, font: '海绵型道路广场' },
    { name: 'HMXGYLD', img: Img3, check: true, font: '海绵型公园绿地' },
    { name: 'GWJBZ', img: Img4, check: true, font: '雨水管网及泵站' },
    { name: 'GWPCYXF', img: Img5, check: true, font: '管网排查与修复项目' },
    { name: 'HMJZYSQ', img: Img6, check: true, font: '海绵型建筑与社区' },
    { name: 'HMXSX', img: Img7, check: true, font: '海绵型水系' },
  ],
  showBottom: false,
  keyObj: [
    { key: 'projectName', name: '项目名称:' },
    { key: 'projectOverview', name: '项目简介:' },
  ],
  ProjectData: {},
  isPC: false,
  jiansheleixing: [
    { name: 'not_approved', font: '尚未立项' },
    { name: 'XMQQSWWCSJJD', font: '在建' },
    { name: 'XMQQSWWCZB', font: '在建' },
    { name: 'not_yet_under_construction', font: '在建' },
    { name: 'opened', font: '在建' },
    { name: 'completed', font: '已竣工' },
    { name: 'Suspended', font: '已停工' },
  ],
  previewShow: false,
  images: [],
  imagesIndex: 0,
});

const getProjectss = async () => {
  let { data } = await getProjects();
  let features = data
    .filter((i) => i.projectLocation)
    .map((i) => {
      if (i.projectLocation.indexOf('POINT') > -1) {
        i.feature = {
          type: 'Feature',
          geometry: WKT.parse(i.projectLocation),
          properties: {
            ...i,
            mapParams: {
              icon: ICONS_MAP[i.projectTypeCode],
              group: i.projectTypeCode,
              name: i.projectName,
            },
          },
        };
        return i.feature;
      } else {
        return turf.point(i.projectLocation.split(',').map(Number), {
          ...i,
          mapParams: {
            icon: ICONS_MAP[i.projectTypeCode],
            group: i.projectTypeCode,
            name: i.projectName,
          },
        });
      }
    });
  amapUtils.geojsonToMap(turf.featureCollection(features));
};
const TuLiClick = (item) => {
  item.check = !item.check;
  amapUtils.setVisibleByIds([item.name], item.check);
};

const init = () => {
  window.amapUtils = new AMapUtils('map');
  // amapUtils.showCityInfo();
  projectionArea.features.forEach((feature) => {
    gcoord.transform(feature, gcoord.WGS84, gcoord.AMap);
  });
  amapUtils.addGeojsonPolygon(projectionArea, 'kaifengPSFQ1');
  amapUtils.addLabelLayer(projectionAreaLabel, 'kaifengPSFQlabel1');
  projectionArea.features.forEach((feature) => {
    gcoord.transform(feature, gcoord.AMap, gcoord.WGS84);
  });

  amapUtils.registerEvent(AMapUtils._default.events.click, (target, lngLat) => {
    console.log('target,lngLat', target.getExtData(), lngLat);
    // 内容赋值
    AllData.ProjectData = target.getExtData();
    AllData.showBottom = true;
  });
  getProjectss();
};

const formatter = (item) => {
  let str = '';
  AllData.TuLi.forEach((element) => {
    if (element.name == item) {
      str = element.font;
    }
  });
  return str;
};
const formatter2 = (item) => {
  let str = '';
  AllData.jiansheleixing.forEach((element) => {
    if (element.name == item) {
      str = element.font;
    }
  });
  return str;
};
const Yulan = (index) => {
  let Arr = [];
  AllData.ProjectData.sysFileList.forEach((tem) => {
    Arr.push(tem.url);
  });
  AllData.imagesIndex = index;
  AllData.images = Arr;
  AllData.previewShow = true;
};
onMounted(() => {
  // 初始化地图
  let interVal = setInterval(() => {
    if (window.AMap) init(), clearInterval(interVal);
  }, 500);
});
</script>

<style lang="less" scoped>
#map {
  background: #ffffff;
}

/* 针对宽度小于750px的屏幕 */
/**默认移动端,进行vw适配 */
// @media screen and (max-width: 750px) {
.TopTuLi {
  position: absolute;
  top: 5px;
  left: 0;
  width: calc(100% - 20px);
  height: 200px;
  background: linear-gradient(to bottom, rgb(255, 255, 255), rgba(255, 255, 255, 0.685));
  z-index: 999;
  border-radius: 30px;
  margin-left: 10px;

  .Title {
    width: 100%;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 26px;
    color: black;
  }

  .TuLiListBox {
    width: 100%;
    height: 140px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: center;
    border-radius: 10px;
    .TuLiList {
      width: 10%;
      height: 140px;

      .ListImg {
        width: 100%;
        height: auto;
      }
      .ShowDiv {
        width: 100%;
        height: 5px;
        background: lime;
        margin-top: 10px;
      }
    }
  }
}

:deep(.amap-copyright) {
  visibility: hidden;
}
:deep(.amap-logo) {
  visibility: hidden;
}
</style>