<template>
  <!-- 厂站设施弹窗 -->
  <div class="cesiumPopup" id="cesiumPopupAll" 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.materialName">{{ allData.dataList.materialName }}</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">
            {{ allData.dataList.rainpump.designScaleSecond || allData.dataList.sweagepump.designScaleSecond || '--' }}
            m³/s
          </div>
        </div>
        <div class="contentInfo">
          <div class="contentName">泵机台数：</div>
          <div class="contentValue">{{ allData.dataList.rainpump.deviceCount || allData.dataList.sweagepump.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 == 'waterCourse'">
      <div class="mt-10">
        <div class="basicContentCP">
          <div class="contentInfo">
            <div class="">实时水深：</div>
            <div class="contentValue">{{ realRiverVal }} m</div>
          </div>
        </div>
        <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.dateTimeRain"
          type="daterange"
          value-format="YYYY-MM-DD"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          size="small"
          style="width: 200px"
          @change="changeDate"
          :clearable="false"
        />
        <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 class="basicInfo" v-if="allData.dataList.materialDetails">
      <div class="materialContent">
        <div class="materialName">负责人：</div>
        <div class="materialValue">{{ allData.dataList.header }}</div>
      </div>
      <div class="materialContent">
        <div class="materialName">联系方式：</div>
        <div class="materialValue">{{ allData.dataList.headerPhone }}</div>
      </div>
      <div class="materialContent">
        <div class="materialName">物资详情：</div>
        <div class="materialValue">{{ allData.dataList.materialDetails }}</div>
      </div>
    </div>
  </div>
</template>

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

const { proxy } = getCurrentInstance();
const allData = reactive({
  dataList: {},
  popupShow: false,
  dateTimeJSD: [proxy.moment(new Date()).subtract(1, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')],
  dateTimeRain: [proxy.moment(new Date()).subtract(3, '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([]);
const realRiverVal = ref(0);
const jsdLoading = ref(true);

//
function closePopupCES() {
  // newfiberMapBoxVectorLayer.removeByIds(['bengzhan_Area']); //清除泵站范围
  allData.popupShow = false;

  // 取消之后回到中心点
  newfiberMapbox.map.easeTo({
    center: [114.344, 34.802],
    zoom: 13.6,
    pitch: 55,
  });
}

// 雨量站弹窗内容
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 = {
    riverCode: allData.dataList.stCode,
  };
  dataOption.value = [];
  let res = await getoneRiverRisk(params);
  if (res && res.code == 200) {
    let datas = res.data;
    console.log(datas, 'datas');
    // echarts赋值
    chartOption.floodOneMapFXYP.xAxis[0].data = datas.riverX; //x轴
    chartOption.floodOneMapFXYP.series[1].data = datas.riverY; //河床高度
    //设防水位 datas.sfZ  目前取河床低的一侧0.1米处
    let sfsw = (
      (datas.riverY[0] < datas.riverY[datas.riverY.length - 1] ? datas.riverY[0] : datas.riverY[datas.riverY.length - 1]) - 0.1
    ).toFixed(1);
    chartOption.floodOneMapFXYP.series[1].markLine.data[0].yAxis = sfsw;
    chartOption.floodOneMapFXYP.series[1].markLine.data[0].label.formatter = '设防水位 ' + sfsw + 'm';
    let arrs2 = [];
    datas.riverX.map(item => {
      arrs2.push(Number(datas.z) + Number(datas.gcZ));
    });
    realRiverVal.value = datas.z; //实时水位
    chartOption.floodOneMapFXYP.series[0].data = arrs2; //当前水位

    if (datas.riverX.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.dateTimeRain[0],
    endTime: allData.dateTimeRain[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,
        monitorPropertyName: 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 = nameToData(dataOption.value, '5分钟时段降水量').value;
    seleceName.value = nameToData(dataOption.value, '5分钟时段降水量').label;
    // propertyMonitorXList.value = datas.propertyMonitorXList;
    unitName.value = nameToData(dataOption.value, '5分钟时段降水量').propertyUnit;
    selectData.value = nameToData(dataOption.value, '5分钟时段降水量').ylist;
    initEchartsPopup();
  }
};

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

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

// 公共方法，根据监测名称来匹配对应的数值
function nameToData(data, name) {
  let arr = data.filter(item => item.monitorPropertyName == name);
  let lists = arr[0] ? arr[0] : [];
  return lists;
}

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

    let popupCenter, center, offsets;
    if (allData.dataList.geometry && params.popupType != 'FXWZ') {
      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];
    }
    if (allData.dataList.pumpCode) {
      allData.dataList.rainpump = JSON.parse(allData.dataList.rainpump);
      allData.dataList.sweagepump = JSON.parse(allData.dataList.sweagepump);
    }
    console.log(allData.dataList, popupCenter);
    window.window.pipePopup = new mapboxL7.Popup({
      html: pipePopupDiv,
      lngLat: {
        lng: popupCenter[0],
        lat: popupCenter[1],
      },
      anchor: 'center',
      offsets: [-90, 130],
      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(); //河道水位计
    //内涝积水点 18个
    if (allData.dataList.type == 'waterLoging') {
      allData.popupShow = false;
      bus.emit('waterLogging18', allData.dataList);
    }
  });
});
onBeforeUnmount(() => {
  bus.off('popupcontent');
  bus.off('closeCesiumPopup');
});
</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: 450px;
    height: 260px;
    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;
    }
  }
  .materialContent {
    display: flex;
    align-items: center;
    .materialName {
      margin: 3px;
      width: 80px;
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      color: #b8ecff;
    }
    .materialValue {
      margin: 3px;
      width: 300px;
      font-size: 14px;
      font-weight: 400;
      color: #b8ecff;
      word-wrap: break-word;
    }
  }
  .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>