<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.projectAbbreviation" :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.projectAbbreviation }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { projectInfoNew } from '@/api/sponeScreen/gcpjApi.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 newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js';
import projectArea from '@/assets/geojson/kaifeng/projectArea.json';
import projectArea1 from '@/assets/geojson/kaifeng/projectArea1.json';
import projectArea2 from '@/assets/geojson/kaifeng/projectArea2.json';

const emitM = defineEmits();
const listDataXm = ref([]);
const listActive = ref({});
const searvhDate = ref('');
const projectTimer = ref(null);
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) {
    //newfiberMap.removeByIds(['projectBoundaryLayers', 'haimianFacility']);
    listDataXm.value = data;
  }
}
//海绵工程gis渲染
const addProjectLayers = async () => {
  let typeList = ['HMJZYSQ', 'HMXDLGC', 'HMXGYLD', 'HMXSX', 'GWPCYXF', 'GWJBZ', 'GIS', 'other'];
  let colorList = [
    'rgba(187, 129, 255,1)',
    'rgba(253, 184, 100,1)',
    'rgba(7, 183, 32,1)',
    'rgba(104, 176, 255,1)',
    'rgba(234, 116, 76,1)',
    'rgba(42, 231, 230,1)',
    'rgba(229, 64, 50,1)',
    'rgba(220, 220, 157,1)',
  ];
  let { data, code } = await projectInfoNew();
  let pointList = [],
    lineList = [],
    polygonList = [];
  if (code == 200) {
    data.forEach((element, index) => {
      element.fillcolor = colorList[typeList.indexOf(element.projectTypeCode)];
      if (element.projectrange) {
        let geometryToFrature = {
          type: 'Feature',
          geometry: Terraformer.WKT.parse(element.projectrange),
          properties: {
            fillcolor: element.fillcolor,
            projectNo: element.projectNo,
            name: element.projectAbbreviation,
            projectName: element.projectName,
            projectNo: element.projectNo,
            projectLocation: element.projectLocation,
            id: element.id,
            geometry: element.projectrange,
          },
        };
        if (element.projectrange.includes('POINT')) {
          pointList.push(geometryToFrature);
        } else if (element.projectrange.includes('LINESTRING')) {
          lineList.push(geometryToFrature);
        } else if (element.projectrange.includes('POLYGON')) {
          polygonList.push(geometryToFrature);
        }
      }
    });
    let pointGeojson = {
      type: 'FeatureCollection',
      features: pointList,
    };
    let lineGeojson = {
      type: 'FeatureCollection',
      features: lineList,
    };
    let polygonGeojson = {
      type: 'FeatureCollection',
      features: polygonList,
    };
    // 项目名称图层
    newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('polygonGeojson', polygonGeojson, 12);
    newfiberMapBoxVectorLayer.addGeojsonLineWithLabel('lineGeojson', lineGeojson, 5, 12);
    newfiberMapBoxVectorLayer.addGeojsonCircleWithLabel('pointGeojson', pointGeojson, 12);
  }
};
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);
  newfiberMapbox.map.easeTo({
    center: lonlat,
    zoom: 15.5,
    pitch: 15,
  });
};

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(() => {
  bus.emit('setIniteLayer', []);
  addProjectLayers();

  newfiberMapbox.map.easeTo({
    center: [114.345, 34.801],
    zoom: 13.8,
    pitch: 55,
  });
  // newfiberMapBoxVectorLayer.addGeojsonLine('projectArea', projectArea, 20, 0.4, 0.6);
  // newfiberMapBoxVectorLayer.addGeojsonLine('projectArea_dynamicLine', projectArea, 3, 0.8);
  // let lineWidth = 1;
  // projectTimer.value = setInterval(() => {
  //   lineWidth += 0.5;
  //   if (lineWidth > 10) {
  //     lineWidth = 3;
  //   }
  //   newfiberMapbox.map.setPaintProperty('projectArea_dynamicLine', 'line-width', lineWidth);
  // });
  //项目边界
  let layer = new mapboxL7.LineLayer({
    name: 'projectArea',
  })
    .source(projectArea)
    .size(40)
    .shape('wall')
    .style({
      opacity: 1,
      sourceColor: '#1cd66c',
      targetColor: 'rbga(0,255,255, 1)',
    });
  newfiberMapbox.addLayer(layer);

  let layer2 = new mapboxL7.LineLayer({
    name: 'projectArea2',
  })
    .source(projectArea2)
    .size(40)
    .shape('wall')
    .style({
      opacity: 1,
      sourceColor: '#0075ff',
      targetColor: 'rbga(0,255,255, 1)',
    });
  newfiberMapbox.addLayer(layer2);

  let layer1 = new mapboxL7.LineLayer({
    name: 'projectArea1',
  })
    .source(projectArea1)
    .size(40)
    .shape('wall')
    .style({
      opacity: 1,
      sourceColor: '#fcc424',
      targetColor: 'rbga(0,255,255, 1)',
    });
  newfiberMapbox.addLayer(layer1);

  newfiberMapbox.map.on('click', ['selectPoint', 'selectPolyLine', 'selectPolygon'], e => {
    const feature = newfiberMapbox.map
      .queryRenderedFeatures([
        [e.point.x - 10 / 2, e.point.y - 10 / 2],
        [e.point.x + 10 / 2, e.point.y + 10 / 2],
      ])
      .filter(i => !!i.layer.id)[0];
    let properties = feature.properties;
    ProjectClick(properties);
    console.log('feature--', '海绵项目点击事件', properties);
  });
  newfiberMapbox.map.on('mouseenter', ['polygonGeojson', 'lineGeojson', 'pointGeojson'], e => {
    let selectPoint = {},
      selectPolyLine = {},
      selectPolygon = {};
    const feature = newfiberMapbox.map
      .queryRenderedFeatures([
        [e.point.x - 10 / 2, e.point.y - 10 / 2],
        [e.point.x + 10 / 2, e.point.y + 10 / 2],
      ])
      .filter(i => !!i.layer.id)[0];
    let properties = feature.properties;
    console.log('feature--', '海绵项目点击事件', properties);
    let geometryToFrature = {
      type: 'Feature',
      geometry: Terraformer.WKT.parse(properties.geometry),
      properties: {
        fillcolor: 'rgba(17, 87, 153,1)',
        projectNo: properties.projectNo,
        name: properties.projectAbbreviation,
        projectName: properties.projectName,
        projectNo: properties.projectNo,
        projectLocation: properties.projectLocation,
        id: properties.id,
      },
    };
    if (properties.geometry.includes('POINT')) {
      selectPoint = {
        type: 'FeatureCollection',
        features: [geometryToFrature],
      };
    } else if (properties.geometry.includes('LINESTRING')) {
      selectPolyLine = {
        type: 'FeatureCollection',
        features: [geometryToFrature],
      };
    } else if (properties.geometry.includes('POLYGON')) {
      selectPolygon = {
        type: 'FeatureCollection',
        features: [geometryToFrature],
      };
    }
    if (selectPolygon.features) {
      newfiberMapBoxVectorLayer.addGeojsonPolygon('selectPolygon', selectPolygon);
      newfiberMapbox.map.moveLayer('selectPolygon', 'polygonGeojson_label');
    }
    if (selectPolyLine.features) {
      newfiberMapBoxVectorLayer.addGeojsonLine('selectPolyLine', selectPolyLine, 5);
      newfiberMapbox.map.moveLayer('selectPolyLine', 'lineGeojson_label');
    }
    if (selectPoint.features) {
      newfiberMapBoxVectorLayer.addGeojsonCircle('selectPoint', selectPoint);
      newfiberMapbox.map.moveLayer('selectPoint', 'pointGeojson_label');
    }
  });
  newfiberMapbox.map.on('mouseleave', ['polygonGeojson', 'lineGeojson', 'pointGeojson'], e => {
    newfiberMapBoxVectorLayer.removeByIds(['selectPoint', 'selectPolyLine', 'selectPolygon']);
  });
  // newfiberMap.setCenter({
  //   lng: 114.322,
  //   lat: 34.602,
  //   heading: 2.281299097855777,
  //   zoom: 10358.12942752382,
  //   pitch: -25.2508969308367,
  //   roll: 0.005453465256790101,
  // });
});
onBeforeUnmount(() => {
  clearInterval(projectTimer.value);
  if (!newfiberMapbox) return;
  newfiberMapBoxVectorLayer.removeByIds([
    'polygonGeojson',
    'lineGeojson',
    'pointGeojson',
    'polygonGeojson_label',
    'lineGeojson_label',
    'pointGeojson_label',
    'projectArea',
    'projectArea_dynamicLine',
  ]);
  newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('projectArea'));
  newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('projectArea1'));
  newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('projectArea2'));
});
</script>

<style lang="scss" scoped>
.publicContainerA {
  margin-top: 10px;
}
.ConstrucClass {
  width: 100%;
  height: calc(100vh - 520px);
  background: #004565;
  opacity: 0.8;
  margin-top: -5px;
  .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>