<template>
  <!-- 项目监测分析 -->
  <div class="publicContainerA">
    <div class="partTitleHM">
      项目监测分析
      <el-button type="warning" size="small" style="float: right; margin: 10px 50px 0px 0px">总分析报告</el-button>
    </div>
    <div class="ConstrucClass">
      <div class="WaterList">
        <div class="DropdownBox">
          <div class="analysis">
            <img :src="xmfx" alt="" class="ICON_zp" />
            <span>项目分析</span>
          </div>
          <div class="Selectionbox">
            <el-select v-model="areaFX" placeholder="请选择片区分析" @change="changeArea">
              <el-option v-for="item in areaList" :key="item.value" :label="item.name" :value="item.value" />
            </el-select>
            <el-select v-model="projectFx" placeholder="请选择典型项目分析" @change="changeProject">
              <el-option v-for="item in XmList" :key="item.index" :label="item.name" :value="item.index" />
            </el-select>
          </div>
        </div>

        <div class="DropdownBox">
          <div class="analysis">
            <img :src="ssfx" alt="" class="ICON_zp" />
            <span @click="changeSSFX">设施分析</span>
          </div>
          <div class="Selectionbox">
            <el-select v-model="hmssVal" @change="changeHmss" placeholder="请选择监测点" filterable>
              <el-option v-for="item in hmssList" :key="item.stCode" :label="item.stName" :value="item.stCode" />
            </el-select>
            <el-button type="warning">项目分析报告</el-button>
          </div>
        </div>
        <!-- 设施分析echarts -->
        <div class="assessment" v-loading="loadingSS">
          <AssessmentEcharts :data="chartDataSS" :refresh="chartDataSS.refresh"></AssessmentEcharts>
        </div>

        <div class="DropdownBox">
          <div class="analysis">
            <img :src="WaterAnalysis_icon" alt="" class="ICON_zp" />
            <span>管网分析</span>
          </div>
          <div class="Selectionbox">
            <el-select v-model="jsdVal" placeholder="请选择积水分析" @change="changeJSD" filterable>
              <el-option v-for="item in jsdList" :key="item.stCode" :label="item.stName" :value="item.stCode" />
            </el-select>
          </div>
        </div>
        <!-- 积水分析echarts -->
        <div class="assessmentJS" v-loading="loadingJSD">
          <AssessmentjsEcharts :data="chartDataJSD" :refresh="chartDataJSD.refresh"></AssessmentjsEcharts>
        </div>
      </div>
    </div>

    <!-- 典型项目分析弹窗信息 -->
    <div id="xmInfoWindow" class="projectContDX" v-show="xmData.visible" ref="xmPoPupBox">
      <div class="title flex flex-r flex-justcontent-spacebetween">
        <span>{{ xmData.data.name }} </span>
        <el-icon :size="24" @click="closePopup" style="margin: 5px 5px 0px 0px">
          <Close class="closed" />
        </el-icon>
      </div>
      <div class="centent flex flex-v flex-justcontent-start">
        <div class="flex flex-r flex-justcontent-start content_detail">
          <el-switch
            v-model="undergroundPipeline"
            inline-prompt
            style="--el-switch-on-color: #2393fc; --el-switch-off-color: #2393fc; float: right"
            active-text="地表径流"
            inactive-text="地下管网"
            @change="changePipeLayer"
          />
        </div>
        <div class="flex flex-r flex-justcontent-start content_detail">
          <div class="centent_label flex flex-justcontent-start">时间：</div>
          <div class="centent_val flex flex-1 flex-justcontent-start flex-align-start">
            <span>{{ dateRain }}</span>
          </div>
        </div>
        <div class="flex flex-r flex-justcontent-start content_detail">
          <div class="centent_label flex flex-justcontent-start">收水范围：</div>
          <div class="centent_val flex flex-1 flex-justcontent-start flex-align-start">
            <span>{{ xmData.data.ssfw }}m²</span>
          </div>
        </div>
        <div class="flex flex-r flex-justcontent-start content_detail">
          <div class="centent_label flex flex-justcontent-start">设计降雨量：</div>
          <div class="centent_val flex flex-1 flex-justcontent-start flex-align-start">
            <span>{{ xmData.data.sjjyl }}mm </span>
          </div>
        </div>
        <div class="flex flex-r flex-justcontent-start content_detail">
          <div class="centent_label flex flex-justcontent-start">实际控制雨量：</div>
          <div class="centent_val flex flex-1 flex-justcontent-start flex-align-start">
            <!-- <span v-if="projectInfo.trueRain == '异常'">雨前出流</span> -->
            <span>{{ xmData.data.sjkzyl }}mm </span>
          </div>
        </div>
        <div class="flex flex-r flex-justcontent-start content_detail">
          <div class="centent_label flex flex-justcontent-start">径流总量控制率实际值：</div>
          <div class="centent_val flex flex-1 flex-justcontent-start flex-align-start">
            <span>{{ xmData.data.jlzlkzlsj }}% </span>
          </div>
        </div>
        <div class="flex flex-r flex-justcontent-start content_detail">
          <div class="centent_label flex flex-justcontent-start">年径流总量控制率目标值：</div>
          <div class="centent_val flex flex-1 flex-justcontent-start flex-align-start">
            <span>{{ xmData.data.jlzlkzlmb }}% </span>
          </div>
        </div>
        <div class="flex flex-r flex-justcontent-start content_detail">
          <div class="centent_label flex flex-justcontent-start">年径流污染削减率目标值：</div>
          <div class="centent_val flex flex-1 flex-justcontent-start flex-align-start">
            <span>{{ xmData.data.jlwrxjmb }}% </span>
          </div>
        </div>
        <div class="flex flex-r flex-justcontent-start content_detail">
          <div class="centent_label flex flex-justcontent-start">径流污染物削减率实际值：</div>
          <div class="centent_val flex flex-1 flex-justcontent-start flex-align-start">
            <span>{{ xmData.data.jlwrxjsj }}% </span>
          </div>
        </div>
        <div class="flex flex-r flex-justcontent-start content_detail">
          <div class="centent_label flex flex-justcontent-start">出口总流量：</div>
          <div class="centent_val flex flex-1 flex-justcontent-start flex-align-start">
            <span>0m³</span>
          </div>
        </div>
        <div class="flex flex-r flex-justcontent-start content_detail">
          <div class="centent_label flex flex-justcontent-start">结论：</div>
          <div class="centent_val flex flex-1 flex-justcontent-start flex-align-start">
            <span>--</span>
          </div>
        </div>
        <div class="flex flex-r flex-justcontent-end content_detail">
          <el-button type="warning" size="small" @click="dialogShow = true">查看更多</el-button>
        </div>
      </div>
    </div>
    <!-- 典型项目数据查看 -->
    <el-dialog :title="xmData.data.name + '数据详情'" v-model="dialogShow" width="1050px" append-to-body>
      <typicalLandDiaLogDetail :pointInf="xmData.data" v-if="dialogShow"></typicalLandDiaLogDetail>
    </el-dialog>
  </div>
</template>

<script setup>
import AssessmentEcharts from '@/views/sponeScreen/Echarts/AssessmentEcharts.vue'; // 设施分析
import AssessmentjsEcharts from '@/views/sponeScreen/Echarts/AssessmentjsEcharts.vue'; //积水分析
import ssfx from '@/assets/newImgs/HMScreen/ssfx.png';
import xmfx from '@/assets/newImgs/HMScreen/xmfx.png';
import bus from '@/bus';
import WaterAnalysis_icon from '@/assets/newImgs/HMScreen/WaterAnalysis_icon.png';
import { graphicReport, getStationList } from '@/api/dataAnalysis/syntherticData';
import { listrtuSiteInfo } from '@/api/dataAnalysis/rtuSiteInfo';
import { rtuWarnConfigList } from '@/api/dataAnalysis/historyGj.js';
import typicalLandDiaLogDetail from './typicalLandDiaLogDetail.vue';

const areaFX = ref('0');
const dialogShow = ref(false);
const { proxy } = getCurrentInstance();
const areaList = ref([
  { name: '古城蓝绿韧性示范片区', value: '0', lonlat: [114.35, 34.802] },
  { name: '城东南污涝共治示范片区', value: '1', lonlat: [114.37, 34.792] },
  { name: '综保区工业海绵化片区', value: '2', lonlat: [114.209, 34.782] },
  { name: '金明品质提升示范片区', value: '3', lonlat: [114.285, 34.799] },
]);
const projectFx = ref();
const undergroundPipeline = ref(true);
// 典型项目
const XmList = ref([
  {
    name: '汴京路管网及道路海绵化改造',
    projectNo: 'GW06',
    index: 0,
    lon: 114.378601,
    lat: 34.793947,
    ssfw: 110330.52,
    sjjyl: 19.84,
    sjkzyl: 0,
    jlzlkzlsj: 100,
    jlzlkzlmb: 68,
    jlwrxjmb: 40,
    jlwrxjsj: 43.6,
    azTime: '2024-09-20',
  },
  {
    name: '金明广场(西南角)改造提升',
    projectNo: 'XMBH202412180002',
    index: 1,
    lon: 114.29615,
    lat: 34.801966,
    ssfw: 2000,
    sjjyl: 37.8,
    sjkzyl: 0,
    jlzlkzlsj: 100,
    jlzlkzlmb: 85.5,
    jlwrxjmb: 40,
    jlwrxjsj: 42,
    azTime: '2024-12-14',
  },
]);
const xmData = reactive({
  visible: false,
  data: {},
});
const dateRain = ref('');
//海绵设施列表-汴京路
const hmssList = ref([]);
const hmssVal = ref('');
const loadingSS = ref(true);
const chartDataSS = ref({
  xAxis: [],
  inverse: true,
  yAxis: [], //降雨量
  yAxis2: [], //流量
  yAxis3: [], //ss
  refresh: 1,
});
// 海绵设施数据获取
function hmssListGet() {
  listrtuSiteInfo({ monitorTargetType: 'drain_outlet' }).then(res => {
    hmssList.value = res.data || [];
    hmssVal.value = res.data[0].stCode; //站点编号
  });
}
// 海绵设施监测站点切换
const changeHmss = () => {
  getDataSS();
};
//地表径流、地下管网切换
const changePipeLayer = () => {
  if (undergroundPipeline.value) {
    bus.emit('setLayerVisible', { layername: xmData.data.name + '地表径流', isCheck: true });
    bus.emit('setLayerVisible', { layername: xmData.data.name + '地下管网', isCheck: false });
  } else {
    bus.emit('setLayerVisible', { layername: xmData.data.name + '地表径流', isCheck: false });
    bus.emit('setLayerVisible', { layername: xmData.data.name + '地下管网', isCheck: true });
  }
};
// 海绵设施数据渲染
async function getDataSS() {
  loadingSS.value = true;
  // 关联雨量站是皮革厂雨量站，0371000003
  let params = {
    startTime: dateRain.value,
    endTime: dateRain.value,
    stCode: '0371000003',
  };
  let res = await graphicReport(params);
  if (res && res.code == 200) {
    let datas = res.data;
    chartDataSS.value.xAxis = datas.propertyMonitorXList;
    chartDataSS.value.yAxis = nameToData(datas.propertyMonitorList, '5分钟时段降水量');
  }

  // 获取监测值
  let params2 = {
    startTime: dateRain.value,
    endTime: dateRain.value,
    stCode: hmssVal.value,
  };
  let res2 = await graphicReport(params2);
  if (res2 && res2.code == 200) {
    let datas = res2.data;
    chartDataSS.value.yAxis2 = nameToData(datas.propertyMonitorList, '小时水量'); //瞬时流量
    chartDataSS.value.yAxis3 = nameToData(datas.propertyMonitorList, '水位'); //水位
  }
  chartDataSS.value.refresh = Math.random();
  loadingSS.value = false;
}

// 积水分析
const loadingJSD = ref(true);
const rainCode = ref('');
const jsdVal = ref('');
const jsdList = ref([]);
const chartDataJSD = ref({
  xAxis: [],
  yAxis: [], //降雨量
  yAxis2: [], //水深
  refresh: 1,
  controlMarkLine: [],
});
// 积水点点击切换
const changeJSD = () => {
  // 筛选查出对应的关联雨量站
  rainCode.value = jsdList.value.filter(item => item.stCode == jsdVal.value)[0].referRainStCode;
  getDataJSD();
};
// 获取积水点数据
async function getDataJSD() {
  loadingJSD.value = true;
  // 关联雨量站
  let params = {
    startTime: dateRain.value,
    endTime: dateRain.value,
    stCode: rainCode.value,
  };
  let res = await graphicReport(params);
  if (res && res.code == 200) {
    let datas = res.data;
    chartDataJSD.value.xAxis = datas.propertyMonitorXList;
    chartDataJSD.value.yAxis = nameToData(datas.propertyMonitorList, '5分钟时段降水量');
  }

  // 获取监测值
  let params2 = {
    startTime: dateRain.value,
    endTime: dateRain.value,
    stCode: jsdVal.value,
  };
  let res2 = await graphicReport(params2);
  if (res2 && res2.code == 200) {
    let datas = res2.data;
    chartDataJSD.value.yAxis2 = nameToData(datas.propertyMonitorList, '水位');
  }

  // 获取管网井深
  let res3 = await getStationList({ stCode: jsdVal.value });
  if (res3 && res3.code == 200) {
    chartDataJSD.value.controlMarkLine = [{ typeName: '井深', value: res3.data[0].bottomBuriedDepthTemp, Opacity: 1, color: '#FF4940' }];
  }
  chartDataJSD.value.refresh = Math.random();
  loadingJSD.value = false;
}
// 获取积水点列表
function getJSDList() {
  listrtuSiteInfo({ monitorTargetType: 'typical_land' }).then(res => {
    jsdList.value = res.data || [];
    jsdVal.value = res.data[0].stCode; //站点编号
    rainCode.value = res.data[0].referRainStCode; //关联雨量站站点编号
  });
  listrtuSiteInfo({ monitorTargetType: 'pipeline' }).then(res => {
    jsdList.value = jsdList.value.concat(res.data || []);
  });
}

// 公共方法，根据监测名称来匹配对应的数值
function nameToData(data, name) {
  let arr = data.filter(item => item.monitorPropertyName == name);
  return arr[0] ? arr[0].ylist : [];
}
//关闭气泡
const closePopup = () => {
  xmData.visible = false;
  newfiberMapbox.popup.remove();
};
// 片区分析点击
function changeArea(val) {
  // bus.emit('checkProjectArea', areaList.value[val]);
  newfiberMapbox.map.easeTo({
    center: areaList.value[val].lonlat,
    zoom: 13.7,
    pitch: 45,
  });
  bus.emit('ifShowLegendXM', false); //显示图例
}

// 典型项目点击
function changeProject() {
  xmData.data = XmList.value[projectFx.value];
  console.log(xmData.data);
  bus.emit('ifShowLegendXM', true); //显示图例
  //显示项目设施图
  bus.emit('setLayerVisible', { layername: xmData.data.name, isCheck: true });
  undergroundPipeline.value = true;
  //项目详情弹窗
  changePipeLayer();
  setPopupDom(proxy.$refs.xmPoPupBox, [0, 0]);
  newfiberMapbox.popup.setLngLat({ lng: xmData.data.lon, lat: xmData.data.lat });
  newfiberMapbox.addPopup(newfiberMapbox.popup);
  xmData.visible = true;
  // 地图移动过去
  newfiberMapbox.map.easeTo({
    center: [xmData.data.lon, xmData.data.lat],
    zoom: 18,
    pitch: 30,
  });
}
//创建弹窗
const setPopupDom = (dom, offset) => {
  newfiberMapbox.popup = new mapboxL7.Popup();
  nextTick(() => {
    newfiberMapbox.popup.setDOMContent(dom);
  });
};
// 项目设施分析点击
function changeSSFX(val) {
  bus.emit('checkSSFX', { project: XmList.value[val] });
  bus.emit('ifShowLegendXM', false); //显示图例
  newfiberMapbox.map.easeTo({
    center: [114.381601, 34.793947],
    zoom: 15.9,
    pitch: 30,
  });
}
// 历史某一天报警
function historyDataWarn() {
  rtuWarnConfigList({ startTime: dateRain.value, endTime: dateRain.value }).then(res => {
    console.log('历史告警数据---', res);
    bus.emit('removeMapDatas', ['warning_monitor']);
    let datas = res.data || [];
    if (datas.length > 0) {
      // 渲染报警图层
      let warningFeatures = [];
      datas.forEach(element => {
        let warningFeature = turf.point(element.lonLat.split(',').map(Number), element);
        warningFeature.properties.size = 500;
        warningFeature.properties.stName = '';
        warningFeatures.push(warningFeature);
      });
      let warningGeojson = turf.featureCollection(warningFeatures);
      let key = 'warning_monitor';
      bus.emit('getGeojsonByType', {
        type: key,
        callback: geojson => {
          if (!!!geojson.features.length) bus.emit('setGeoJSON', { json: warningGeojson, key: 'warning_monitor' });
          bus.emit('setLayerVisible', { layername: 'warning_monitor', isCheck: true });
        },
      });
    } else {
      bus.emit('setLayerVisible', { layername: 'warning_monitor', isCheck: false });
    }
  });
}
onMounted(() => {
  hmssListGet(); //海绵设施列表
  getJSDList(); //获取积水点数据
  bus.on('changeRainDate', val => {
    dateRain.value = val;
    historyDataWarn();
    changeHmss(); //海绵设施数据加载
    changeJSD(); //积水点数据加载
  });
  bus.emit('setLayerVisible', { layername: 'warning_monitor', isCheck: true }); //报警的站点
  // 渲染点位上图
  bus.emit('setIniteLayer', [
    { layername: 'pipeMonitor', show: false }, //管网监测点
    { layername: 'spongeFacility', show: false }, //海绵设施图层
    { layername: 'origine', show: false }, //典型项目图层
  ]);
});
onBeforeUnmount(() => {
  bus.off('changeRainDate');
  bus.emit('setIniteLayer', [
    { layername: 'pipeMonitor', show: true },
    { layername: 'spongeFacility', show: true },
    { layername: 'origine', show: true },
  ]);
  xmData.visible = false;
});
</script>

<style lang="scss">
.publicContainerA {
  margin-top: 10px;
  .ConstrucClass {
    width: 460px;
    height: calc(100vh - 220px);
    background: #004565;
    opacity: 0.8;
    overflow-x: hidden;
    overflow-y: auto;
    margin-top: -3px;
    .WaterAccumulation {
      width: 95%;
      // height: 270px;
      margin: auto;
      background: yellow;
      .HeadContent {
        width: 100%;
        height: 40px;
        background: #217dc8;
        border: 1px solid #61aff0;
        position: relative;
        top: 2px;
        span {
          position: relative;
          top: 8px;
          left: 15px;
          color: #ffffff;
          font-family: Source Han Sans CN;
          font-weight: 500;
        }
      }
    }
    .WaterList {
      position: relative;
      top: 8px;
      width: 95%;
      // height: calc(100vh - 720px);
      margin: auto;
      // background: yellow;
      .DropdownBox {
        height: 45px;
        background: #217dc8;
        border: 1px solid #61aff0;
        display: flex;
        justify-content: space-around;
        margin: 5px;
        .analysis {
          width: 35%;
          display: flex;
          align-items: center;
          .ICON_zp {
            width: 28px;
            height: 28px;
            position: relative;
            top: 32x;
          }
        }
        .Selectionbox {
          width: 85%;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          padding-right: 5px;
        }
      }
      .assessment {
        width: 100%;
        height: calc(100vh - 680px);
      }
      .assessmentJS {
        width: 100%;
        height: 280px;
      }
    }
  }
}

.l7-popup-content {
  background: none !important;
  .projectContDX {
    width: 300px;
    padding: 10px;
    height: auto !important;
    border: 1px solid red;
    text-align: left;
    background: linear-gradient(0deg, rgba(11, 71, 113, 0.9) 0%, rgba(22, 83, 126, 0.8) 100%);
    border-radius: 4px;
    border: 1px solid #42a4ef;

    &:before {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: 14px;
      border: 12px solid transparent;
      border-top: 12px solid rgba(11, 71, 113, 0.9);
      z-index: 12;
    }

    &:after {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: 10.5px;
      border: 15px solid transparent;
      border-top: 15px solid #42a4ef;
      z-index: 11;
    }
    .title {
      font-family: Source Han Sans CN;
      font-weight: bold;
      font-size: 17px;
      color: #37ceff;
      line-height: 36px;
      cursor: pointer;

      span {
        display: inline-block;
        overflow: hidden;
        /* 确保超出容器的文本被裁剪 */
        white-space: nowrap;
        /* 确保文本在一行内显示 */
        text-overflow: ellipsis;
        /* 使用省略号表示文本超出 */
      }

      ::v-deep(.el-icon) {
        cursor: pointer;
      }
    }
    .centent {
      font-family: Source Han Sans CN;
      font-size: 15px;
      color: #c6c6c6;
      line-height: 23px;

      .content_detail {
        width: 100%;
      }

      .centent_val {
        width: 0;
        color: #3afff8;
      }
    }
  }
}
</style>