<template>
  <!-- 排水防涝子系统 一张图 -->
  <div class="publicContainer">
    <gisMap2D :initJson="`/static/libs/mapbox/style/floodOneMap.json`" @map-click="mapClick"></gisMap2D>
    <commonLegendNew></commonLegendNew>
    <commonPopup></commonPopup>
    <commonPopupRain></commonPopupRain>
    <commonPopupZS></commonPopupZS>
    <commonPopupSupervise></commonPopupSupervise>
    <commonPopupDM></commonPopupDM>
    <commonPopupRiver></commonPopupRiver>
    <waterLeverAlongRiner></waterLeverAlongRiner>
    <commonPopupPK></commonPopupPK>
    <commonPopupJCGJ></commonPopupJCGJ>
    <!-- <centerSearch></centerSearch> -->
    <tabSelect></tabSelect>
    <div v-show="GechangeTableContent2 == 1">
      <tabContent2></tabContent2>
    </div>
    <div v-show="GechangeTableContent2 !== 1">
      <tabContent></tabContent>
    </div>
  </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="infoContent flexs">
        <div class="infoName">管井类型：</div>
        <div class="infoData"><dict-tag :options="point_type" :value="pointData.pointType" /></div>
      </div>
      <div class="infoContent flexs">
        <div class="infoName">管井等级：</div>
        <div class="infoData">{{ pointData.pointLevel }}</div>
      </div>
    </el-space>
    <el-space>
      <div class="infoContent flexs">
        <div class="infoName">所属道路：</div>
        <div class="infoData">{{ pointData.roadName }}</div>
      </div>
      <div class="infoContent flexs">
        <div class="infoName">地面高程：</div>
        <div class="infoData">{{ pointData.groundElevation }}m</div>
      </div>
    </el-space>
    <el-space>
      <div class="infoContent flexs">
        <div class="infoName">井盖材质：</div>
        <div class="infoData">{{ pointData.pointTexture }}</div>
      </div>
      <div class="infoContent flexs">
        <div class="infoName">井底深度：</div>
        <div class="infoData">{{ pointData.bottomBuriedDepth }}</div>
      </div>
    </el-space>
    <el-space>
      <div class="infoContent flexs">
        <div class="infoName">结构形式：</div>
        <div class="infoData">{{ pointData.structureForm }}</div>
      </div>
      <div class="infoContent flexs">
        <div class="infoName">井盖形状：</div>
        <div class="infoData">{{ pointData.manholeCoverShape }}</div>
      </div>
    </el-space>
    <el-space>
      <div class="infoContent 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>
</template>

<script setup name="page">
import gisMap2D from '../../gisMapPage/gisMapBox1.vue';
import commonLegendNew from '../../gisMapPage/commonLegendNew.vue';
import tabSelect from './tabSelect.vue';
import tabContent from './tabContent.vue';
import tabContent2 from './tabContent2.vue';
// import centerSearch from './centerSearch.vue'; //头部播放云图
import commonPopup from './commonPopup.vue'; //厂站弹窗
import commonPopupRain from './commonPopupRain.vue'; //雨量站弹窗
import commonPopupZS from './commonPopupZS.vue'; //积水点弹窗
import commonPopupSupervise from './commonPopupSupervise.vue'; //监测点弹窗
import commonPopupJCGJ from './commonPopupJCGJ.vue'; //监测告警弹窗
import commonPopupDM from './commonPopupDM.vue'; //断面监测点弹窗
import waterLeverAlongRiner from './waterLeverAlongRiner.vue'; //沿河水位
import commonPopupRiver from './commonPopupRiver.vue'; //河湖监测弹窗
import commonPopupPK from './commonPopupPK.vue'; //排口监测点弹窗
import bus from '@/bus';
import { pagepipelineInfo } from '@/api/drainagePipeline/pipelineInfo';
import { pagepipelinePoint } from '@/api/drainagePipeline/pipelinePoint';

const { proxy } = getCurrentInstance();
const pipeData = ref({});
const pointData = ref({});
const pipePopupShow = ref(false);
const pointPopupShow = ref(false);
const { point_type } = proxy.useDict('point_type');

const GechangeTableContent2 = ref(1);

const mapClick = (point, properties) => {
  console.log('point', point);
  console.log('properties', properties);
  let featureKey = properties.type;
  let data = properties;
  if (
    properties.type == 'pipeSupervise' ||
    properties.type == 'rainStation' ||
    properties.type == 'riverLake' ||
    properties.type == 'PKsupervise' ||
    properties.type == 'waterlog' ||
    properties.type == 'orinign' ||
    properties.type == 'pipeSupervise_1' ||
    properties.type == 'rainStation_1' ||
    properties.type == 'riverLake_1' ||
    properties.type == 'PKsupervise_1' ||
    properties.type == 'waterlog_1' ||
    properties.type == 'orinign_1'
  ) {
    !!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]), Number(properties.lonLat.split(',')[1]) + 0.004025],
      zoom: 15,
    });
    let closeCommonPopup = false;
    bus.emit('closeCommonPopup', closeCommonPopup);
    properties.type == 'rainStation'
      ? bus.emit('popupRainData', popupData)
      : properties.type == 'riverLake'
      ? bus.emit('popupRiverData', popupData)
      : properties.type == 'PKsupervise'
      ? bus.emit('popupPKData', popupData)
      : properties.type == 'waterlog'
      ? bus.emit('popupZSData', popupData)
      : properties.type == 'rainStation_1'
      ? bus.emit('popupRainData', popupData)
      : properties.type == 'riverLake_1'
      ? bus.emit('popupRiverData', popupData)
      : properties.type == 'PKsupervise_1'
      ? bus.emit('popupPKData', popupData)
      : properties.type == 'waterlog_1'
      ? bus.emit('popupZSData', popupData)
      : bus.emit('popupSuperviseData', popupData);
  } else if (
    featureKey == 'YSBZ' ||
    featureKey == 'WSBZ' ||
    featureKey == 'WSCLC' ||
    featureKey == 'paiKou' ||
    featureKey == 'drainOutlet' ||
    featureKey == 'YSBZ_1' ||
    featureKey == 'WSBZ_1' ||
    featureKey == 'WSCLC_1' ||
    featureKey == 'paiKou_1' ||
    featureKey == 'drainOutlet_1' ||
    featureKey == 'PLBZ_1' ||
    featureKey == 'PLBZ'
  ) {
    let popupData = {
      popupInfo: data,
      popupShow: true,
    };
    if (featureKey == 'paiKou' || featureKey == 'paiKou_1') {
      data.lon = Number(data.originalX);
      data.lat = Number(data.originalY);
    } else if (featureKey == 'drainOutlet' || featureKey == 'drainOutlet_1') {
      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: [-120, 200],
      autoClose: false,
    });
    newfiberMapbox.addPopup(stationPopup);
    newfiberMapbox.map.easeTo({
      center: [Number(data.lon), Number(data.lat)],
      zoom: 15,
    });
  }
  if (!!data['起点点号'] && !!data['终点点号'] && data.geometry.includes('MULTILINESTRING')) {
    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: 17,
    });
  }
};
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.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: 17,
    });
    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;
  }
};
//取消弹窗
const closePopup = () => {
  pipePopupShow.value = false;
};
const closePointPopup = () => {
  pointPopupShow.value = false;
};
onMounted(() => {
  bus.on('closePipeInfo', () => {
    closePopup();
    closePointPopup();
  });
  bus.on('changeTableContent2', val => {
    console.log('changeTableContent2', val);
    GechangeTableContent2.value = val;
  });
});
onBeforeUnmount(() => {
  bus.off('popupSuperviseData');
  bus.off('popupJCGJData');
  bus.off('popupPKData');
  bus.off('popupRiverData');
  bus.off('popupZSData');
  bus.off('popupRainData');
  bus.off('popupData');
  bus.off('closeCommonPopup');
  bus.off('closePipeInfo');
  bus.off('changeTableContent2');
});
</script>
<style lang="scss">
.page {
  width: 100%;
}
.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;
}
</style>