<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>
  <!-- 顶部图层控制 PC -->
  <!-- <div class="TopTuLiPC" v-else></div> -->
  <!-- 底部弹出 -->
  <van-popup v-model:show="AllData.showBottom" position="bottom" :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>
  <!-- PC弹窗 -->
  <!-- <div class="dialog" v-show="AllData.showBottom" v-else></div> -->
  <!-- <van-image-preview v-model:show="AllData.previewShow" :images="AllData.images">
  </van-image-preview> -->
  <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 { showImagePreview } from 'vant';
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 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: '项目简介:',
    },
    // {
    //   key: "startTime",
    //   name: "项目开始时间:",
    // },
    // {
    //   key: "endTime",
    //   name: "项目交付时间:",
    // },
    // {
    //   key: "chargeDepartment",
    //   name: "责任部门:",
    // },
    // {
    //   key: "chargeUser",
    //   name: "责任人:",
    // },
    // {
    //   key: "phone",
    //   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 getProjectss1 = async () => {
  let { data } = await getProjects();
  let features = data.data
    .filter((i) => i.projectLocation)
    .map((i) =>
      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 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();
  kaifengPSFQ1.features.forEach((feature) => {
    gcoord.transform(feature, gcoord.WGS84, gcoord.AMap);
  });
  amapUtils.addGeojsonPolygon(kaifengPSFQ1, 'kaifengPSFQ1');
  amapUtils.addLabelLayer(kaifengPSFQlabel1, 'kaifengPSFQlabel1');
  kaifengPSFQ1.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();
    // 判断当前环境
    // if (AllData.isPC) {
    // 打开PC弹窗
    // } else {
    // 打开移动端弹窗

    AllData.showBottom = true;
    // }
  });
  getProjectss();
};
/*
 *根据分辨率用来检测是 PC还是移动终端
 */
// const flashChecker = () => {
//   let winWidth = window.innerWidth || document.documentElement.clientWidth;
//   if (winWidth < 750) {
//     AllData.isPC = false;
//   } else {
//     AllData.isPC = true;
//   }

// };
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);
  });
  // showImagePreview({
  //   images: Arr,
  //   startPosition: index,
  // });
  AllData.imagesIndex = index;
  AllData.images = Arr;
  AllData.previewShow = true;
};
onMounted(() => {
  // flashChecker();
  // 初始化地图
  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;
      }
    }
  }
}

// }
/* 针对宽度大于或等于750px的屏幕 不进行vw转换 */
// @media screen and (min-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;
//     ::selection {
//       background: none;
//       color: inherit;
//     }

//     .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: center;
//       align-items: center;
//       border-radius: 10px;
//       .TuLiList {
//         width: 84.2px;
//         height: 140px;
//         cursor: pointer;
//         margin: 0 10px;

//         .ListImg {
//           width: 100%;
//           height: 120px;
//         }
//         .ShowDiv {
//           width: 100%;
//           height: 5px;
//           background: lime;
//           margin-top: 5px;
//           border-radius: 10px;
//         }
//       }
//     }
//   }
// }
</style>