<template>
  <!-- 厂站设施弹窗 -->
  <div class="cesiumPopup" id="cesiumPopupID" v-show="allData.popupShow">
    <div class="title">
      <div class="titleNamePP" v-if="allData.dataList.pumpName">{{ allData.dataList.pumpName }}</div>
      <div class="titleNamePP" v-if="allData.dataList.sewageName">{{ allData.dataList.sewageName }}</div>
      <div class="titleNamePP" v-if="allData.dataList.roadName">{{ allData.dataList.roadName }}</div>
      <div class="titleNamePP" v-if="allData.dataList.stName">{{ allData.dataList.stName }}</div>
      <div class="titleNamePP" v-if="allData.dataList.waterloggingName">{{ allData.dataList.waterloggingName }}</div>
      <div class="PopupClosed">
        <el-icon :size="18" @click="closePopupCES"><Close /></el-icon>
      </div>
    </div>
    <div class="dividerLine"></div>
    <!-- 泵站 -->
    <div class="basicInfo" v-if="allData.dataList.pumpCode">
      <div class="basicContentCP">
        <div class="contentInfo">
          <div class="contentName">厂站编码：</div>
          <div class="contentValue">{{ allData.dataList.pumpCode }}</div>
          <div class="contentName">厂站类型：</div>
          <div class="contentValue">
            {{
              allData.dataList.pumpType == 'rain_water' ? '雨水泵站' : allData.dataList.pumpType == 'sewage_water' ? '污水泵站' : '雨污合建'
            }}
          </div>
        </div>
        <div class="contentInfo">
          <div class="contentName">建筑面积：</div>
          <div class="contentValue">{{ allData.dataList.buildArea }} ㎡</div>
          <div class="contentName">设计规模：</div>
          <div class="contentValue">{{ JSON.parse(allData.dataList.rainpump).designScaleSecond }} m³/s</div>
        </div>
        <div class="contentInfo">
          <div class="contentName">泵机台数：</div>
          <div class="contentValue">{{ JSON.parse(allData.dataList.rainpump).deviceCount }}台</div>
          <div class="contentName">建设单位：</div>
          <div class="contentValue" :title="allData.dataList.unitDep">{{ allData.dataList.unitDep }}</div>
        </div>
        <div class="contentInfo" style="width: 100%">
          <div class="contentName">地址：</div>
          <div class="contentValue" style="width: 100%">{{ allData.dataList.address }}</div>
        </div>
        <el-button type="warning" @click="checkGYT" style="margin: 20px 0px 0px 5%">查看工况图</el-button>
      </div>
    </div>

    <!-- 污水处理厂 -->
    <div class="basicInfo" v-if="allData.dataList.sewageCode">
      <div class="basicContentCP">
        <div class="contentInfo">
          <div class="contentName">厂站编码：</div>
          <div class="contentValue">{{ allData.dataList.sewageCode }}</div>
          <div class="contentName">出水标准：</div>
          <div class="contentValue">{{ allData.dataList.standard }}</div>
        </div>
        <div class="contentInfo">
          <div class="contentName">核心工艺：</div>
          <div class="contentValue" style="width: 100%">{{ allData.dataList.workmanship }}</div>
        </div>
        <div class="contentInfo">
          <div class="contentName">设计规模：</div>
          <div class="contentValue">{{ allData.dataList.planScale }}万吨/日</div>
          <div class="contentName">排放水体：</div>
          <div class="contentValue">{{ allData.dataList.intoWater }}</div>
        </div>
        <div class="contentInfo">
          <div class="contentName">地址：</div>
          <div class="contentValue" style="width: 100%">{{ allData.dataList.address }}</div>
        </div>
        <el-button type="warning" @click="checkWSC" style="margin: 20px 0px 0px 5%">查看工况图</el-button>
      </div>
    </div>

    <!-- 积水点 -->
    <div class="basicInfo" v-if="allData.dataList.type == 'waterLoging'">
      <div class="mt-10">
        <div class="flex flex-start">
          <div>
            <el-date-picker
              v-model="allData.dateTime"
              type="daterange"
              value-format="YYYY-MM-DD"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              size="small"
              style="width: 240px; margin-right: 10px"
            />
          </div>
          <el-button type="primary" size="small" @click="changeDateJSD">搜索</el-button>
        </div>
        <div id="chartHistoryJSD"></div>
      </div>
    </div>

    <!-- 河道水位监测 -->
    <div class="basicInfo" v-if="allData.dataList.type == 'waterCourse'">
      <div class="mt-10">
        <div id="chartHistoryZM"></div>
      </div>
    </div>

    <!-- 雨量站 -->
    <div class="basicInfo" v-if="allData.dataList.siteType == 'rain'">
      <div class="mt-10">
        <el-date-picker
          v-model="allData.dateTime"
          type="daterange"
          value-format="YYYY-MM-DD"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          size="small"
          style="width: 200px"
          @change="changeDate"
        />
        <el-select v-model="selectCode" style="margin: -7px 0px 0px 10px; width: 150px" size="small" @change="changeRainType">
          <el-option v-for="item in dataOption" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <div id="chartPopupRainC"></div>
      </div>
    </div>
  </div>
</template>

<script setup name="CesiumPopup">
import bus from '@/bus';
import chartOption from '@/components/Echarts/pieChart_1.js';
import { graphicReport } from '@/api/dataAnalysis/syntherticData';
import * as echarts from 'echarts';

const { proxy } = getCurrentInstance();
const allData = reactive({
  dataList: {},
  popupShow: false,
  dateTime: [proxy.moment(new Date()).subtract(7, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')],
});
const dataOption = ref([]);
const selectData = ref([]);
const selectCode = ref('');
const seleceName = ref('');
const unitName = ref('');
const propertyMonitorXList = ref([]);

//
function closePopupCES() {
  allData.popupShow = false;
  bus.emit('closeCesiumPopup');
  // 关闭之后回到中心点
  newfiberMapbox.map.easeTo({
    center: [114.344, 34.802],
    zoom: 13.6,
    pitch: 55,
  });
}

// 积水点
let chartJSD = null;
function changeDateJSD() {
  setTimeout(() => {
    if (!!chartJSD) chartJSD.dispose();
    chartJSD = echarts.init(document.getElementById('chartHistoryJSD'));
    chartOption.popupRainTrend.legend.data = ['水深'];
    chartOption.popupRainTrend.yAxis.name = 'm';
    chartOption.popupRainTrend.xAxis.data = ['2024-07-12 12:30:20', '2024-07-12 13:30:20', '2024-07-12 14:30:20', '2024-07-12 15:30:20'];
    chartOption.popupRainTrend.xAxis.boundaryGap = true;
    chartOption.popupRainTrend.series.name = '水深';
    chartOption.popupRainTrend.series.barWidth = 10;
    chartOption.popupRainTrend.series.data = [0.23, 0.3, 0.25, 0.18];
    // 设置鼠标滚轮放大缩小展示数据区间
    // chartOption.popupRainTrend.dataZoom = [{ type: 'inside', startValue: propertyMonitorXList.value[propertyMonitorXList.value.length / 2] }];
    // if (propertyMonitorXList.value.length > 0) {
    //   chartOption.popupRainTrend.graphic.invisible = true; //暂无数据
    // } else {
    //   chartOption.popupRainTrend.graphic.invisible = false; //暂无数据
    // }
    chartOption.popupRainTrend.graphic.invisible = true; //暂无数据
    chartJSD.clear();
    chartJSD.setOption(chartOption.popupRainTrend);
  });
}

// 雨量站弹窗内容
const changeDate = () => {
  getSuperViseData();
};

// 河道水位计弹窗内容
function changeDateSW() {
  setTimeout(() => {
    getRiverData();
  });
}

// 河道echarts
let chartRiver = null;
async function getRiverData() {
  if (!!chartRiver) chartRiver.dispose();
  chartRiver = echarts.init(document.getElementById('chartHistoryZM'));
  let params = {
    startTime: allData.dateTime[0],
    endTime: allData.dateTime[1],
    stCode: allData.dataList['stCode'],
  };
  dataOption.value = [];
  let res = await graphicReport(params);
  if (res && res.code == 200) {
    let datas = res.data;
    if (datas.propertyMonitorXList.length == 0) return;
    // echarts赋值
    chartOption.floodOneMapFXYP.xAxis[0].data = datas.propertyMonitorXList; //x轴
    chartOption.floodOneMapFXYP.series[0].data = datas.propertyMonitorList[0].ylist; //当前水位
    // chartOption.floodOneMapFXYP.series[1].markLine.data[0].yAxis = 12; //设防水位
    // chartOption.floodOneMapFXYP.series[1].markLine.data[0].label.formatter = '设防水位 ' + 12 + 'm';
    let arrs2 = [];
    datas.propertyMonitorXList.map(item => {
      arrs2.push(22);
    });
    // chartOption.floodOneMapFXYP.series[1].data = arrs2; //河床高度

    if (datas.propertyMonitorXList.length == 0) {
      chartOption.floodOneMapFXYP.graphic.invisible = false; //暂无数据
    } else {
      chartOption.floodOneMapFXYP.graphic.invisible = true; //暂无数据
    }
    chartRiver.clear();
    chartRiver.setOption(chartOption.floodOneMapFXYP);
  }
}

// 降雨趋势折线图
let chartPopupRain = null;
const initEchartsPopup = () => {
  if (!!chartPopupRain) chartPopupRain.dispose();
  chartPopupRain = echarts.init(document.getElementById('chartPopupRainC'));
  chartOption.popupRainTrend.legend.data = [seleceName.value];
  chartOption.popupRainTrend.yAxis.name = unitName.value;
  chartOption.popupRainTrend.xAxis.data = propertyMonitorXList.value;
  chartOption.popupRainTrend.series.name = seleceName.value;
  chartOption.popupRainTrend.series.data = selectData.value;
  // 设置鼠标滚轮放大缩小展示数据区间
  chartOption.popupRainTrend.dataZoom = [{ type: 'inside', startValue: propertyMonitorXList.value[propertyMonitorXList.value.length / 2] }];
  if (propertyMonitorXList.value.length > 0) {
    chartOption.popupRainTrend.graphic.invisible = true; //暂无数据
  } else {
    chartOption.popupRainTrend.graphic.invisible = false; //暂无数据
  }
  chartPopupRain.clear();
  chartPopupRain.setOption(chartOption.popupRainTrend);
};
// 切换因子点击
const changeRainType = val => {
  selectCode.value = val;
  let obj = dataOption.value.filter(item => item.value == val)[0];
  selectCode.value = obj.value;
  seleceName.value = obj.label;
  unitName.value = obj.propertyUnit;
  selectData.value = obj.ylist;
  initEchartsPopup();
};
//获取监测数据
const getSuperViseData = async () => {
  let params = {
    startTime: allData.dateTime[0],
    endTime: allData.dateTime[1],
    stCode: allData.dataList['stCode'],
  };
  dataOption.value = [];
  let res = await graphicReport(params);
  if (res && res.code == 200) {
    let datas = res.data;
    if (datas.propertyMonitorXList.length == 0) return;
    datas.propertyMonitorList.map(item => {
      dataOption.value.push({
        value: item.stCode + item.monitorPropertyName,
        label: item.monitorPropertyName,
        propertyUnit: item.propertyUnit,
        ylist: item.ylist,
      });
    });
    if (Boolean(datas.propertyMonitorXList.length)) {
      propertyMonitorXList.value = [];
      datas.propertyMonitorXList.forEach(i => {
        propertyMonitorXList.value.push(i.substr(0, 16));
      });
    }
    selectCode.value = dataOption.value[0].value;
    seleceName.value = dataOption.value[0].label;
    // propertyMonitorXList.value = datas.propertyMonitorXList;
    unitName.value = datas.propertyMonitorList[0].propertyUnit;
    selectData.value = datas.propertyMonitorList[0].ylist;
    initEchartsPopup();
  }
};

// 泵站工况图查看
function checkGYT() {
  closePopupCES(); //关闭弹窗
  bus.emit('checkBZGYT', allData.dataList);
}

// 污水厂工艺图查看
function checkWSC() {
  closePopupCES(); //关闭弹窗
  bus.emit('checkWSCGYT', allData.dataList);
}

onMounted(() => {
  bus.on('popupcontent', params => {
    console.log('popup接收地图标注点值---', params);
    allData.dataList = params.popupInfo;
    let pipePopupDiv = document.getElementById('cesiumPopupID');

    let popupCenter, center, offsets;
    if (allData.dataList.geometry) {
      popupCenter = Terraformer.WKT.parse(allData.dataList.geometry).coordinates;
      center = [popupCenter[0], popupCenter[1] + 0.005];
      offsets = [-130, 200];
    } else {
      popupCenter = allData.dataList.lonLat.split(',').map(Number);
      center = [popupCenter[0] - 0.002, popupCenter[1] + 0.005];
    }

    window.window.pipePopup = new mapboxL7.Popup({
      html: pipePopupDiv,
      lngLat: {
        lng: popupCenter[0],
        lat: popupCenter[1],
      },
      anchor: 'center',
      offsets: [-130, 200],
      autoClose: false,
    });
    newfiberMapbox.addPopup(pipePopup);
    newfiberMapbox.map.easeTo({
      center: center,
      zoom: 15,
    });
    allData.popupShow = true;
    if (allData.dataList.siteType == 'rain') changeDate(); //雨量站曲线图
    if (allData.dataList.type == 'waterCourse') changeDateSW(); //河道水位计
    if (allData.dataList.type == 'waterLoging') changeDateJSD(); //内涝积水点
  });
});
onBeforeUnmount(() => {
  bus.off('popupcontent');
});
</script>
<style lang="scss">
.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;
}
.cesiumPopup {
  padding: 10px;
  background: #003b6d;
  border: 1px solid #6acefe;
  #chartPopupRainC,
  #chartHistoryZM,
  #chartHistoryJSD {
    width: 400px;
    height: 200px;
    margin-top: 10px;
  }
  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .titleNamePP {
      display: flex;
      align-items: center;
      height: 22px;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #b8ecff;
      line-height: 22px;
      margin: 5px;
      width: 330px;
      &:before {
        display: block;
        content: '';
        width: 3px;
        height: 16px;
        background: #00d1ff;
        margin-right: 10px;
      }
    }
    .PopupClosed {
      position: absolute;
      top: 15px;
      right: 20px;
      z-index: 9999;
      cursor: pointer;
    }
  }

  .basicContentCP {
    .contentInfo {
      display: flex;
      align-items: center;
      margin-left: 10px;
      .contentName {
        margin: 3px;
        width: 100px;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        color: #b8ecff;
      }
      .contentName1 {
        margin: 3px;
        width: 185px;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        color: #b8ecff;
      }
      .contentValue {
        margin: 3px;
        width: 100px;
        font-size: 14px;
        font-weight: 400;
        color: #b8ecff;
        word-wrap: break-word;
      }
    }
  }
}
</style>