<template>
  <div class="publicContainerA">
    <div class="partTitleHM">项目展示列表</div>
    <div class="ConstrucClass">
      <div class="HeadContent">
        <el-form-item>
          <el-select
            v-model="searvhDate"
            clearable
            filterable
            placeholder="请输入项目名称"
            :remote-method="blurMethod"
            @change="stationListChange"
          >
            <el-option v-for="item in listDataXm" :key="item.projectNo" :label="item.projectName" :value="item.projectNo" />
          </el-select>
        </el-form-item>
      </div>
      <div class="ConstrucNr">
        <div class="listXm" v-for="item in listDataXm" :title="item.projectName" @click="ProjectClick(item)">
          <img class="Icon_zp" :src="getIcon(item.projectTypeName)" alt="" />
          <div :class="{ activeConstruListA: listActive.projectNo == item.projectNo }" class="XmName ellipsis">
            {{ item.projectName }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getImageUrl } from '@/utils/ruoyi';
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
import { projectInfoNew, selectProjectImageList } from '@/api/sponeScreen/gcpjApi.js';
import { queryProjectStation } from '@/api/sponeScreen/syntherticData.js';
import bus from '@/bus';
import dlgc from '@/assets/images/zonglan/2.png';
import gyld from '@/assets/images/zonglan/3.png';
import hmsx from '@/assets/images/zonglan/8.png';
import gwpc from '@/assets/images/zonglan/5.png';
import gwpz from '@/assets/images/zonglan/4.png';
import ptss from '@/assets/images/zonglan/1.png';
import jzsq from '@/assets/images/zonglan/6.png';
import qt from '@/assets/images/zonglan/7.png';
import Architectural from '@/assets/newImgs/HMScreen/Architectural_icon.png';
import newfiberVectorLayer from '@/views/sponeScreen/gisMF/newfiberVectorLayer.js';
import { nextTick, onMounted } from 'vue';
const emitM = defineEmits();
const listDataXm = ref([]);
const listActive = ref({});
const searvhDate = ref('');
const obj = {
  海绵建筑与社区: jzsq,
  海绵型道路广场: dlgc,
  海绵型公园绿地: gyld,
  海绵型水系: hmsx,
  管网排查与修复: gwpc,
  管网及泵站: gwpz,
  GIS平台建设与监测设施: ptss,
  其他: qt,
};

const getIcon = name => {
  return obj[name];
};
let layerList = ['HMJZYSQ', 'HMXDLGC', 'HMXGYLD', 'HMXSX', 'GWPCYXF', 'GWJBZ', 'GIS'];
async function projectInfoNewM(p) {
  console.log('ppppp---', p);
  let { data, code } = await projectInfoNew(p);
  if (code == 200) {
    listDataXm.value = data;
    console.log(typeof p);
    if (!p || !p.projectTypeId) {
      newfiberMap.setLayersVisible(['HMJZYSQ', 'HMXDLGC', 'HMXGYLD', 'HMXSX', 'GWPCYXF', 'GWJBZ', 'GIS'], true); //全部
    } else if (p.projectTypeId == '1701128641279070210') {
      newfiberMap.setLayersVisible(['HMJZYSQ'], true);
      newfiberMap.setLayersVisible(['HMXDLGC', 'HMXGYLD', 'HMXSX', 'GWPCYXF', 'GWJBZ', 'GIS'], false); //社区
    } else if (p.projectTypeId == '1701128777853997058') {
      newfiberMap.setLayersVisible(['HMXDLGC'], true);
      newfiberMap.setLayersVisible(['HMJZYSQ', 'HMXGYLD', 'HMXSX', 'GWPCYXF', 'GWJBZ', 'GIS'], false); //道路
    } else if (p.projectTypeId == '1701128863459741697') {
      newfiberMap.setLayersVisible(['HMXGYLD'], true);
      newfiberMap.setLayersVisible(['HMJZYSQ', 'HMXDLGC', 'HMXSX', 'GWPCYXF', 'GWJBZ', 'GIS'], false); //绿地
    } else if (p.projectTypeId == '1701128943340261378') {
      newfiberMap.setLayersVisible(['HMXSX'], true);
      newfiberMap.setLayersVisible(['HMJZYSQ', 'HMXDLGC', 'HMXGYLD', 'GWPCYXF', 'GWJBZ', 'GIS'], false); //水系
    } else if (p.projectTypeId == '1701129031496142849') {
      newfiberMap.setLayersVisible(['GWPCYXF'], true);
      newfiberMap.setLayersVisible(['HMJZYSQ', 'HMXDLGC', 'HMXGYLD', 'HMXSX', 'GWJBZ', 'GIS'], false); //管网排查
    } else if (p.projectTypeId == '1701129103495565313') {
      newfiberMap.setLayersVisible(['GWJBZ'], true);
      newfiberMap.setLayersVisible(['HMJZYSQ', 'HMXDLGC', 'HMXGYLD', 'HMXSX', 'GWPCYXF', 'GIS'], false); //管网泵站
    } else if (p.projectTypeId == '1701129308194377729') {
      newfiberMap.setLayersVisible(['GIS'], true);
      newfiberMap.setLayersVisible(['HMJZYSQ', 'HMXDLGC', 'HMXGYLD', 'HMXSX', 'GWPCYXF', 'GWJBZ'], false); //GIS
    }
  }
}
//海绵工程gis渲染
const addProjectLayers = async () => {
  let { data, code } = await projectInfoNew();
  if (code == 200) {
    let projectList = [
      {
        layerLabel: '海绵建筑与社区',
        layerName: 'HMJZYSQ',
        data: [],
      },
      {
        layerLabel: '海绵型道路广场',
        layerName: 'HMXDLGC',
        data: [],
      },
      {
        layerLabel: '海绵型公园绿地',
        layerName: 'HMXGYLD',
        data: [],
      },
      {
        layerLabel: '海绵型水系',
        layerName: 'HMXSX',
        data: [],
      },
      {
        layerLabel: '管网排查与修复',
        layerName: 'GWPCYXF',
        data: [],
      },
      {
        layerLabel: '管网及泵站',
        layerName: 'GWJBZ',
        data: [],
      },
      {
        layerLabel: 'GIS平台建设与监测设施',
        layerName: 'GIS',
        data: [],
      },
    ];
    //海绵工程数据分类
    projectList.forEach(projectItem => {
      data.forEach(item => {
        if (item.projectTypeCode == projectItem.layerName) projectItem.data.push(item);
      });
    });
    //海绵工程上图
    projectList.forEach(projectItem => {
      let mapDataFeatures = [];
      let mapDataGeojson = {};
      projectItem.data.forEach((item, index) => {
        if (!!!item.projectLocation) return;
        let projectWKT = `POINT(${item.projectLocation.split(',').join(' ')})`;

        let feature = { type: 'Feature', geometry: Terraformer.WKT.parse(projectWKT), properties: item };
        mapDataFeatures.push(feature);
      });

      mapDataGeojson = {
        type: 'FeatureCollection',
        features: mapDataFeatures,
      };
      if (!mapDataGeojson.features.length) return;
      newfiberVectorLayer.addGeojsonPoint(newfiberMap, mapDataGeojson, getIcon(projectItem.layerLabel), projectItem.layerName);
    });
  }
};
const AllData = reactive({
  queryParams: {},
});
const ProjectClick = async row => {
  listActive.value = row;
  listDataXm.value.map(i => {
    if (row.id == i.id) {
      i.checked = !i.checked;
    } else {
      i.checked = false;
    }
  });

  newfiberMap.removeByIds(['projectBoundaryLayers', 'haimianFacility']);
  let arr = listDataXm.value.filter(i => i.checked);
  emitM('qipaoDateMeth', arr[0], arr[0]?.checked);
  let lonlat = row.projectLocation.split(',').map(Number);
  newfiberMap.setCenter({
    lng: lonlat[0],
    lat: lonlat[1] - 0.05,
    zoom: 3000,
    heading: 2.281299097855777,
    pitch: -25.2508969308367,
    roll: 0.005453465256790101,
  });

  let parse = {
    projectNo: row.projectNo,
  };
  //添加海绵设施

  let haimianRes = await queryProjectStation(parse);
  if (haimianRes && haimianRes.code == 200) {
    console.log('haimianRes---', haimianRes.data);
    if (!haimianRes.data.length) return;
    let features = [];
    let feature = {};
    haimianRes.data.forEach(data => {
      let lonlat = data.lonlat.split(',');
      feature = {
        type: 'Feature',
        geometry: {
          type: 'Point',
          coordinates: [Number(lonlat[0]), Number(lonlat[1])],
        },
        properties: data,
      };
      features.push(feature);
    });
    let haimianFacility = {
      type: 'FeatureCollection',
      features: features,
    };
    newfiberVectorLayer.addGeojsonPoint(
      newfiberMap,
      haimianFacility,
      getImageUrl('spongeFacility_icon.png', 'cesiumMap/legendIcon'),
      'haimianFacility'
    );
  }
  //海绵工程边界
  let res = await selectProjectImageList(parse);
  if (res && res.code == 200) {
    let projectInfo = res.data[0];
    console.log('res----', projectInfo);
    if (!projectInfo.geometry) return;
    let projectGeojson = {
      type: 'FeatureCollection',
      features: [{ type: 'Feature', geometry: Terraformer.WKT.parse(projectInfo.geometry), properties: projectInfo }],
    };
    if (projectInfo.geometry.includes('MULTILINESTRING')) {
      newfiberVectorLayer.addLightenLine(projectGeojson, 'projectBoundaryLayers');
    } else if (projectInfo.geometry.includes('MULTIPOLYGON')) {
      let polygonToWall = turf.polygonToLine(projectGeojson.features[0].geometry, projectGeojson.features[0].properties);
      newfiberVectorLayer.addGeojsonWall(newfiberMap, polygonToWall, 'projectBoundaryLayers');
    } else {
      newfiberVectorLayer.addLightenClrcle(projectGeojson, 'projectBoundaryLayers');
    }
  }
};

const { queryParams } = toRefs(AllData);
function stationListChange(v) {
  projectInfoNewM({ projectNo: v });
}

projectInfoNewM();
bus.on('getProjectList', (i, v) => {
  if (i.length > 0) projectInfoNewM({ buildStatus: i[0]?.buildStatus });
  else projectInfoNewM({ projectTypeId: i.typeId });
});
onMounted(() => {
  addProjectLayers();
  newfiberMap.setCenter({
    lng: 114.322,
    lat: 34.602,
    heading: 2.281299097855777,
    zoom: 10358.12942752382,
    pitch: -25.2508969308367,
    roll: 0.005453465256790101,
  });
});
onBeforeUnmount(() => {
  newfiberMap.removeByIds([
    'projectBoundaryLayers',
    'HMJZYSQ',
    'HMXDLGC',
    'HMXGYLD',
    'HMXSX',
    'GWPCYXF',
    'GWJBZ',
    'GIS',
    'haimianFacility',
  ]);
});
</script>

<style lang="scss" scoped>
.publicContainerA {
  margin-top: 10px;
}
.ConstrucClass {
  width: 100%;
  height: calc(100vh - 530px);
  background: #004565;
  opacity: 0.8;
  .HeadContent {
    width: 100%;
    margin-top: 2px;
  }
  .ConstrucNr {
    width: 100%;
    height: 88%;
    overflow: auto;
    margin-top: -20px;
    .listXm {
      position: relative;
      width: 95%;
      height: 50px;
      background: url('@/assets/newImgs/HMScreen/ujnasf.png') no-repeat;
      background-size: 100% 100%;
      display: flex;
      margin: 5px auto;
      .Icon_zp {
        width: 32px;
        height: 32px;
        position: relative;
        top: 9px;
        left: 20px;
        // background: red;
      }
      .XmName {
        position: relative;
        left: 70px;
        top: 15px;
        width: 315px;
        height: 50px;
        // background: red;
        overflow: hidden;
        white-space: nowrap; /* 防止文字换行 */
        text-overflow: ellipsis;
      }
    }
  }
}

:deep(.el-input__inner) {
  background: #11559b !important;
  // box-shadow: 0 0 0 0.00521rem #066592 inset !important;
  color: #fff !important;
  width: 390px !important;
}
:deep(.el-input__wrapper, .el-textarea__inner) {
  background: #11559b !important;
  // box-shadow: 0 0 0 0.00521rem  inset !important;
  color: #fff !important;
}
:deep(.el-form-item__content) {
  margin: 10px;
}
.activeConstruListA {
  color: #cbc05a;
}
:deep(.scroll > div > :nth-child(2)) {
  display: none !important;
}
</style>