<template>
  <!--  排水防涝 管网健康诊断 -->
  <div class="publicContainer healthPage">
    <MapBox :initJson="`/static/libs/mapbox/style/floodPipe.json`" @map-click="mapClick"></MapBox>
    <commonPopupPK></commonPopupPK>
    <commonPopupSupervise></commonPopupSupervise>
    <commonPopup></commonPopup>
    <!-- 图例+绘制工具 -->
    <healthLegend @toolsEvt="toolsEvt"></healthLegend>
  </div>
  <!-- 管网基础信息弹窗 -->
  <div id="pipeInfo" class="pipeInfo" v-show="pipePopupShow" style="width: 400px">
    <div class="title">
      <div class="infoTitle">{{ pipeData.startPointNumber }}-{{ pipeData.endPointNumber }}</div>
      <div class="closePopup">
        <el-icon :size="18" @click="closePopup">
          <Close />
        </el-icon>
      </div>
    </div>
    <div class="dividerLine"></div>

    <el-space>
      <div class="infoContent flexs">
        <div class="infoName">管网类型：</div>
        <div class="infoData">
          {{
            pipeData.pipelineType == 'Rain'
              ? '雨水'
              : pipeData.pipelineType == 'Sewage'
              ? '污水'
              : pipeData.pipelineType == 'Combined'
              ? '雨污合流'
              : '--'
          }}
        </div>
      </div>
      <div class="infoContent flexs">
        <div class="infoName">管网等级：</div>
        <div class="infoData">{{ pipeData.pipelineLevel }}</div>
      </div>
    </el-space>
    <el-space>
      <div class="infoContent flexs">
        <div class="infoName">断面尺寸：</div>
        <div class="infoData">{{ pipeData.sectionType }}</div>
      </div>
      <div class="infoContent flexs">
        <div class="infoName">所属道路：</div>
        <div class="infoData">{{ pipeData.roadName }}</div>
      </div>
    </el-space>

    <el-space>
      <div class="infoContent flexs">
        <div class="infoName">起点编号：</div>
        <div class="infoData">{{ pipeData.startPointNumber }}</div>
      </div>
      <div class="infoContent flexs">
        <div class="infoName">终点编号：</div>
        <div class="infoData">{{ pipeData.endPointNumber }}</div>
      </div>
    </el-space>

    <el-space>
      <div class="infoContent flexs">
        <div class="infoName">起点高程：</div>
        <div class="infoData">{{ pipeData.startCopNoseElevation }}m</div>
      </div>
      <div class="infoContent flexs">
        <div class="infoName">终点高程：</div>
        <div class="infoData">{{ pipeData.endCopNoseElevation }}m</div>
      </div>
    </el-space>

    <el-space>
      <div class="infoContent flexs">
        <div class="infoName">起点埋深：</div>
        <div class="infoData">{{ pipeData.startGroundDepth }}</div>
      </div>
      <div class="infoContent flexs">
        <div class="infoName">终点埋深：</div>
        <div class="infoData">{{ pipeData.endGroundDepth }}</div>
      </div>
    </el-space>
    <el-space>
      <div class="infoContent flexs">
        <div class="infoName">管网材质：</div>
        <div class="infoData">{{ pipeData.pipelineTexture }}</div>
      </div>
    </el-space>
    <el-space>
      <div class="infoContent flexs" style="width: 400px">
        <div class="infoName">普查单位：</div>
        <div class="infoData">{{ pipeData.operationalUnits }}</div>
      </div>
    </el-space>
  </div>
  <!-- 管井基础信息弹窗 -->
  <div id="pointInfo" v-show="pointPopupShow" style="width: 400px">
    <div class="title">
      <div class="infoTitle">{{ pointData.pointNumber }}</div>
      <div class="closePopup">
        <el-icon :size="18" @click="closePointPopup">
          <Close />
        </el-icon>
      </div>
    </div>
    <div class="dividerLine"></div>
    <el-space>
      <div class="infoContentHealth flexs">
        <div class="infoName">管井类型：</div>
        <div class="infoData">
          <dict-tag :options="point_type" :value="pointData.pointType" />
        </div>
      </div>
      <div class="infoContentHealth flexs">
        <div class="infoName">管井等级：</div>
        <div class="infoData">{{ pointData.pointLevel }}</div>
      </div>
    </el-space>
    <el-space>
      <div class="infoContentHealth flexs">
        <div class="infoName">所属道路：</div>
        <div class="infoData">{{ pointData.roadName }}</div>
      </div>
      <div class="infoContentHealth flexs">
        <div class="infoName">地面高程：</div>
        <div class="infoData">{{ pointData.groundElevation }}m</div>
      </div>
    </el-space>
    <el-space>
      <div class="infoContentHealth flexs">
        <div class="infoName">井盖材质：</div>
        <div class="infoData">{{ pointData.pointTexture }}</div>
      </div>
      <div class="infoContentHealth flexs">
        <div class="infoName">井底深度：</div>
        <div class="infoData">{{ pointData.bottomBuriedDepth }}</div>
      </div>
    </el-space>
    <el-space>
      <div class="infoContentHealth flexs">
        <div class="infoName">结构形式：</div>
        <div class="infoData">{{ pointData.structureForm }}</div>
      </div>
      <div class="infoContentHealth flexs">
        <div class="infoName">井盖形状：</div>
        <div class="infoData">{{ pointData.manholeCoverShape }}</div>
      </div>
    </el-space>
    <el-space>
      <div class="infoContentHealth flexs">
        <div class="infoName">井盖尺寸：</div>
        <div class="infoData">{{ pointData.manholeCoverSize }}</div>
      </div>
    </el-space>
    <el-space>
      <div class="infoContent flexs" style="width: 400px">
        <div class="infoName">普查单位：</div>
        <div class="infoData">{{ pointData.operationalUnits }}</div>
      </div>
    </el-space>
    <!-- <div class="infoContentHealth">
      <div class="infoName">管网材质：</div>
      <div class="infoData">{{ pointData.pointTexture }}</div>
    </div> -->
  </div>
  <!-- 剖面分析和连通性分析弹窗 -->
  <div class="pmfxpops" v-if="pmfxpopsShow">
    <div class="pmfxpopshead">
      <span class="pmfxpopsheadstart">起点</span>
      <div class="pmfxpopsheadborder">{{ currentTool.pipeAnalyse.startCode }}</div>
      <img class="pmfxpopsheadimg" src="@/assets/images/gisMap/guanwang_icon.png" alt="" />
      <span class="pmfxpopsheadend">终点</span>
      <div class="pmfxpopsheadborder">{{ currentTool.pipeAnalyse.endCode }}</div>
    </div>
    <div class="pmfxpopsbot">
      <div class="pmfxpopsbotbtn" @click="resetSelectedPipe">复位</div>
      <div class="pmfxpopsbotbtn" @click="submitResult">确定</div>
    </div>
  </div>
  <div class="isOpenBuildingTLs">
    <!-- 天地图、影像图切换 -->
    <el-popover placement="right-start" :width="80" trigger="hover" content="地图切换">
      <template #reference>
        <!-- <el-tooltip effect="dark" content="地图切换" placement="bottom"> -->
        <img src="@/assets/images/gisMap/yixiangditu.png" alt="" class="earthIcon" />
        <!-- </el-tooltip> -->
      </template>
      <template #default>
        <div class="typeMap">
          <img src="@/assets/images/gisMap/defMap.png" alt="" :class="mapActive == 1 ? 'activeImg' : ''" @click="changeMapType(1)" />
          <img src="@/assets/images/gisMap/ysMap.png" alt="" :class="mapActive == 2 ? 'activeImg' : ''" @click="changeMapType(2)" />
        </div>
      </template>
    </el-popover>
  </div>
</template>

<script setup name="healthPage">
import MapBox from '@/views/gisMapPage/gisMapBox1'; //gis地图
import healthLegend from '@/views/gisMapPage/healthLegend.vue';
import { ElLoading } from 'element-plus';
import bus from '@/bus';
import { pagepipelineInfo } from '@/api/drainagePipeline/pipelineInfo';
import { pagepipelinePoint } from '@/api/drainagePipeline/pipelinePoint';
import { upStreamAnalyse, downStreamAnalyse, connectAnalyse } from '@/api/floodSys/floodPipe';
import commonPopupSupervise from '@/views/floodSys/floodOneMap/commonPopupSupervise.vue'; //监测点弹窗
import commonPopupPK from '@/views/floodSys/floodOneMap/commonPopupPK.vue'; //排口监测点弹窗
import commonPopup from '@/views/floodSys/floodOneMap/commonPopup.vue'; //厂站弹窗
import { nextTick, onBeforeUnmount } from 'vue';

const { proxy } = getCurrentInstance();
const mapActive = ref(1);
const pipeData = ref({});
const pipePopupShow = ref(false);
const pointData = ref({});
const pointPopupShow = ref(false);
const pmfxpopsShow = ref(false);
const CodeArray = ref([]);
const { point_type } = proxy.useDict('point_type');
const currentTool = ref({
  tool: -1,
  pipeAnalyse: {
    startCode: null,
    endCode: null,
    dataset: null,
  },
});

const toolsEvt = id => {
  currentTool.value.tool = id;
  console.log('currentTool.value.tool', id);
  CodeArray.value = [];
  currentTool.value.pipeAnalyse.startCode = null;
  currentTool.value.pipeAnalyse.endCode = null;
  closePopup();
  closePointPopup();
  if (id == '1' || id == '2') {
    pmfxpopsShow.value = true;
  } else {
    pmfxpopsShow.value = false;
  }
  if (['6', '4', '5', '9'].includes(id)) mapClickByTools();
};
const mapClickByTools = (point, properties) => {
  console.log('propertiesproperties', properties);
  if (currentTool.value.tool == -1) return;
  const fields = ['设施编码', '起点点号', '终点点号', 'startCode', 'endCode'];
  ({
    //剖面分析
    1: async () => {
      await analyseCommonMethod();
    },
    //连通性分析
    2: async () => {
      await analyseCommonMethod();
    },
    //资产统计
    3: () => {},
    //面积测量
    4: () => {
      const layerId = String(new Date().getTime());
      if (!newfiberMapbox.measure) newfiberMapbox.measure = new mapboxgl1.MeatureTool(newfiberMapbox.map);
      newfiberMapbox.measure.measureArea(layerId, true, geojson => {
        console.log('面积测量geojson', geojson);
      });
      newfiberMapbox.measure.setArea();
    },
    //距离测量
    5: () => {
      const layerId = String(new Date().getTime());
      if (!newfiberMapbox.measure) newfiberMapbox.measure = new mapboxgl1.MeatureTool(newfiberMapbox.map);
      newfiberMapbox.measure.measureDistance(layerId, true, geojson => {
        console.log('距离测量geojson', geojson);
      });
      newfiberMapbox.measure.setDistance();
    },
    //定位
    6: () => {
      const layerId = String(new Date().getTime());
      if (!newfiberMapbox.measure) newfiberMapbox.measure = new mapboxgl1.MeatureTool(newfiberMapbox.map);
      newfiberMapbox.measure.drawPoint(layerId, geojson => {
        console.log('定位geojson', geojson);
      });
    },
    //上游分析
    7: async () => {
      await analyseCommonMethod();
    },
    //下游分析
    8: async () => {
      await analyseCommonMethod();
    },
    //清除绘制
    9: async () => {
      // bus.emit('removeMapDatas', ['CUSTOM_DRAW','圆形','菱形','方形']);
      if (!newfiberMapbox.measure) return;
      newfiberMapbox.measure.clearMeasureAll();
    },
  })[currentTool.value.tool]();

  async function analyseCommonMethod() {
    console.log(CodeArray.value);
    CodeArray.value = [currentTool.value.pipeAnalyse.startCode, currentTool.value.pipeAnalyse.endCode];
    CodeArray.value.push(properties[fields[0]] || properties[fields[1]] || properties[fields[2]]);
    console.log(CodeArray.value);
    if (!CodeArray.value[0]) {
      currentTool.value.pipeAnalyse.startCode = CodeArray.value[CodeArray.value.length - 1];
    } else {
      currentTool.value.pipeAnalyse.startCode = CodeArray.value[0];
      currentTool.value.pipeAnalyse.endCode = CodeArray.value[CodeArray.value.length - 1];
    }
    if (CodeArray.value[CodeArray.value.length - 2]) {
      currentTool.value.pipeAnalyse.endCode = CodeArray.value[CodeArray.value.length - 1];
    }
    let { startCode, endCode } = currentTool.value.pipeAnalyse;
    if (startCode == endCode) currentTool.value.pipeAnalyse.endCode = null;
    if (['7', '8'].includes(currentTool.value.tool)) {
      await pipeAnalyseMethod();
      setHighlight();
    }
  }
};
async function pipeAnalyseMethod() {
  let loading = ElLoading.service({
    lock: true,
    text: '正在进行分析...',
  });
  let { startCode, endCode } = currentTool.value.pipeAnalyse;
  let { data } = await { 7: upStreamAnalyse, 8: downStreamAnalyse, 2: connectAnalyse, 1: connectAnalyse }[currentTool.value.tool]({
    startPointNumber: startCode,
    endPointNumber: endCode,
  });
  currentTool.value.pipeAnalyse.dataset = data;
  console.log('pipeAnalyseMethod--', data);
  bus.emit('analyseData', data);
  console.log('datadatadatadata', data);
  loading.close();
}

function setHighlight() {
  const types = { Rain: 'YS', Mix: 'HS', Sewage: 'WS' };
  let features = (currentTool.value.pipeAnalyse.dataset.pipelineInfoList || [])
    .map(i => ({ properties: { ...i, geometry: i.geometrys, layer: types[i.pipelineType] } }))
    .flat();
  bus.emit('setHighlight', features);
}

const mapClick = (point, properties) => {
  console.log('point', point);
  console.log('properties', properties);
  let featureKey = properties.type;
  let data = properties;
  mapClickByTools(point, properties);
  if (properties.type == 'pipeSupervise' || properties.type == 'PKsupervise') {
    !!properties.onlineStatus && properties.onlineStatus == 'online'
      ? (properties.onlineStatus = '在线')
      : (properties.onlineStatus = '离线');
    properties.lon = properties.lonLat.split(',')[0];
    properties.lat = properties.lonLat.split(',')[1];
    let popupData = {
      popupInfo: properties,
      popupShow: true,
    };
    newfiberMapbox.map.easeTo({
      center: [Number(properties.lonLat.split(',')[0]) + 0.0035, Number(properties.lonLat.split(',')[1]) + 0.004],
      zoom: 15,
    });
    let closeCommonPopup = false;
    bus.emit('closeCommonPopup', closeCommonPopup);
    properties.type == 'PKsupervise' ? bus.emit('popupPKData', popupData) : bus.emit('popupSuperviseData', popupData);
  } else if (
    featureKey == 'YSBZ' ||
    featureKey == 'WSBZ' ||
    featureKey == 'WSCLC' ||
    featureKey == 'paiKou' ||
    featureKey == 'drainOutlet'
  ) {
    let popupData = {
      popupInfo: data,
      popupShow: true,
    };
    if (featureKey == 'paiKou') {
      data.lon = Number(data.originalX);
      data.lat = Number(data.originalY);
    } else if (featureKey == 'drainOutlet') {
      if (data.pointNumber == '天仙路溢流口') {
        data.lon = Number(data.originalX);
        data.lat = Number(data.originalY);
      } else {
        data.lon = Number(data.originalX);
        data.lat = Number(data.originalY);
      }
    }
    bus.emit('popupData', popupData);
    let popupDiv = document.getElementById('psPopup');
    window.stationPopup = new mapboxL7.Popup({
      html: popupDiv,
      lngLat: {
        lng: data.lon,
        lat: data.lat,
      },
      anchor: 'center',
      offsets: [0, 200],
    });
    newfiberMapbox.addPopup(stationPopup);
    newfiberMapbox.map.easeTo({
      center: [Number(data.lon) + 0.005, Number(data.lat)],
      zoom: 15,
    });
  }
  if (!!data['起点点号'] && !!data['终点点号'] && data.geometry.includes('LINESTRING')) {
    let startPoint = data['起点点号'];
    let endPoint = data['终点点号'];
    getPipeDataInfo(startPoint, endPoint);
  } else if (!!data['设施编码'] && data.geometry.includes('POINT')) {
    let pointNumber = data['设施编码'].split('-')[0];
    getPipePointInfo(pointNumber);
    let pipePointPopupDiv = document.getElementById('pointInfo');
    window.pipePointPopup = new mapboxL7.Popup({
      html: pipePointPopupDiv,
      lngLat: {
        lng: point[0],
        lat: point[1],
      },
      anchor: 'center',
      offsets: [-50, 120],
      autoClose: false,
    });
    newfiberMapbox.addPopup(pipePointPopup);
    newfiberMapbox.map.easeTo({
      center: [point[0] + 0.0005, point[1]],
      zoom: 18,
    });
  }
};
let getPipeDataInfo = async (startPoint, endPoint) => {
  let params = {
    startPointNumber: startPoint,
    endPointNumber: endPoint,
    pageNum: 1,
    pageSize: 1,
  };
  let res = await pagepipelineInfo(params);
  if (res && res.code == 200) {
    pipeData.value = res.data[0];
    let pipeCenter = turf.center(Terraformer.WKT.parse(pipeData.value.geometrys)).geometry.coordinates;
    let pipePopupDiv = document.getElementById('pipeInfo');
    window.pipePopup = new mapboxL7.Popup({
      html: pipePopupDiv,
      lngLat: {
        lng: pipeCenter[0],
        lat: pipeCenter[1],
      },
      anchor: 'center',
      offsets: [0, 100],
      autoClose: false,
    });
    newfiberMapbox.addPopup(pipePopup);
    newfiberMapbox.map.easeTo({
      center: [pipeCenter[0] + 0.0005, pipeCenter[1]],
      zoom: 18,
    });
    pipePopupShow.value = true;
  }
};
let getPipePointInfo = async pointNumber => {
  let params = {
    pointNumber: pointNumber,
    pageNum: 1,
    pageSize: 1,
  };
  let res = await pagepipelinePoint(params);
  if (res && res.code == 200) {
    pointData.value = res.data[0];
    pointPopupShow.value = true;
  }
};
// 天地、影像图切换
function changeMapType(val) {
  mapActive.value = val;
  if (val == 2) {
    bus.emit('setLayerVisible', { layername: 'newfiber-XYZLayer', isCheck: true });
    newfiberMapbox.map.setMaxZoom(17.4);
  } else {
    bus.emit('setLayerVisible', { layername: 'newfiber-XYZLayer', isCheck: false });
    newfiberMapbox.map.setMaxZoom(24);
  }
}
//取消弹窗
const closePopup = () => {
  pipePopupShow.value = false;
  let clearSelectedFeature = [];
  newfiberMapbox.getLayers().forEach(feature => {
    if (feature.newfiberId == 'highlight_linestring') {
      clearSelectedFeature.push(feature);
    }
  });

  if (!!clearSelectedFeature.length) {
    clearSelectedFeature[0].setData({ type: 'FeatureCollection', features: [] });
  }
};
const closePointPopup = () => {
  pointPopupShow.value = false;
  let clearSelectedFeature = [];
  newfiberMapbox.getLayers().forEach(feature => {
    if (feature.newfiberId == 'highlight_point') {
      clearSelectedFeature.push(feature);
    }
  });
  if (!!clearSelectedFeature.length) {
    clearSelectedFeature[0].setData({ type: 'FeatureCollection', features: [] });
  }
};
const resetSelectedPipe = () => {
  CodeArray.value = [];
  currentTool.value.pipeAnalyse.startCode = null;
  currentTool.value.pipeAnalyse.endCode = null;
  closePopup();
  closePointPopup();
  bus.emit('changeIfExpand');
};
const submitResult = async () => {
  console.log('currentTool.value.tool', currentTool.value.tool);
  if (currentTool.value.tool == '1' || currentTool.value.tool == '2') {
    await pipeAnalyseMethod();
    setHighlight();
  }
};
//剖面中检查井点击高亮
const setHighlightFromPouM = async pointNumber => {
  let params = {
    pointNumber: pointNumber,
    pageNum: 1,
    pageSize: 1,
  };
  let res = await pagepipelinePoint(params);
  if (res && res.code == 200) {
    let data = res.data[0];
    let feature = turf.featureCollection([turf.feature(Terraformer.WKT.parse(data.geometrys), Object.assign({}, data))]);
    console.log('featurefeature', feature);
    let SelectedFeature = [];
    newfiberMapbox.getLayers().forEach(feature => {
      if (feature.newfiberId == 'highlight_point') {
        SelectedFeature.push(feature);
      }
    });
    if (!!SelectedFeature.length) {
      SelectedFeature[0].setData(feature);
    }
    newfiberMapbox.map.setCenter([feature.features[0].geometry.coordinates[0], feature.features[0].geometry.coordinates[1] - 0.0001]);
  }
};
onMounted(() => {
  bus.on('closePipeInfo', () => {
    closePopup();
    closePointPopup();
  });
  nextTick(() => {
    bus.on('selectWallFromPouM', pointNumber => {
      setHighlightFromPouM(pointNumber);
    });
  });
});
onBeforeUnmount(() => {
  bus.off('closePipeInfo');
  bus.off('selectWallFromPouM');
  newfiberMapbox.map.setMaxZoom(24);
});
</script>
<style lang="scss">
.el-popper {
  .typeMap {
    img {
      width: 100%;
      cursor: pointer;
    }
    .activeImg {
      border: 1px solid #00d1ff;
    }
  }
}
.healthPage {
  #pipeInfo {
    width: 350px;
    padding: 10px;
    background: rgba(0, 49, 78, 0.5);
    border: 1px solid #094065;
    z-index: 111;
  }
  #pointInfo {
    width: 350px;
    padding: 10px;
    background: rgba(0, 49, 78, 0.5);
    border: 1px solid #094065;
    z-index: 111;
  }
  .title {
    display: flex;
    .infoTitle {
      display: flex;
      align-items: center;
      height: 22px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ccf1ff;
      line-height: 22px;
      margin: 5px;
      width: 330px;
      &:before {
        display: block;
        content: '';
        width: 3px;
        height: 16px;
        background: #00d1ff;
        margin-right: 10px;
      }
    }
    .closePopup {
      margin-right: 20px;
      height: 22px;
      cursor: pointer;
    }
  }
}
.infoContentHealth {
  display: flex;
  height: 20px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  // color: #00d1ff;
  .infoName {
    width: 80px;
    margin: 3px;
  }
  .infoData {
    width: 80px;
    margin: 3px;
  }
}

.l7-popup-tip {
  display: none;
}
.l7-popup .l7-popup-content {
  padding: 0px;
  background: none;
}
.l7-popup .l7-popup-content .l7-popup-close-button {
  display: none;
}
</style>
<style lang="scss" scoped>
.flexs {
  display: flex;
}
.infoContent {
  width: 200px;
}
.pmfxpops {
  position: fixed;
  width: 450px;
  height: 100px;
  right: 20px;
  top: 120px;
  background: #00314e;
  z-index: 99;
  .pmfxpopshead {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    .pmfxpopsheadstart,
    .pmfxpopsheadend {
      margin: 0 10px;
    }
    .pmfxpopsheadborder {
      width: 150px;
      height: 30px;
      border: 1px solid #00d1ff;
      text-align: center;
      line-height: 30px;
    }
    .pmfxpopsheadimg {
      width: 23px;
      height: 15px;
      margin-left: 10px;
    }
  }
  .pmfxpopsbot {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    cursor: pointer;
    .pmfxpopsbotbtn {
      width: 100px;
      height: 30px;
      line-height: 30px;
      border: 1px solid #00d1ff;
      margin: 0 10px;
      text-align: center;
      border-radius: 20px;
    }
  }
}

.isOpenBuildingTLs {
  width: 240px;
  position: absolute;
  bottom: 6%;
  right: 1.5%;
  z-index: 100;
  display: flex;
  justify-content: flex-end;
  cursor: pointer;
  .earthIcon {
    cursor: pointer;
    width: 63px;
    height: 62px;
  }
}
</style>