<template>
  <!-- 管网监测点详情 -->
  <div class="pipeMonitorDetail">
    <el-tabs v-model="tabActive" @tab-change="changeTab">
      <el-tab-pane label="管网剖面" name="1"></el-tab-pane>
      <el-tab-pane label="监测数据" name="2"></el-tab-pane>
    </el-tabs>
    <div class="content">
      <!-- 管网剖面 -->
      <div class="pipePou flex" v-if="tabActive == 1">
        <div class="leftP">
          <!-- 井深 -->
          <div class="part partJ">井深：{{ pipeDetail.bottomBuriedDepthTemp || '--' }}米</div>

          <!-- 水高度 -->
          <img
            src="@/assets/newImgs/HMScreen/pipeW.png"
            alt=""
            class="water"
            :style="{ height: ((140 * realData.z) / pipeDetail.pipelineDiameterTemp || '30') + 'px' }"
          />
          <div class="part partW">水深：{{ realData.z || '--' }} 米</div>

          <!-- 瞬时流量 -->
          <div class="part partL">流速：{{ realData.va || '--' }} m/s</div>

          <!-- 设备 -->
          <img src="@/assets/newImgs/HMScreen/equip.png" alt="" class="equipA" />
        </div>
        <div class="rightP">
          <div class="title">基本信息</div>
          <div class="part flex">
            <div class="biaoti">站点名称：</div>
            <div class="cont">{{ realData.stName }}</div>
          </div>
          <div class="part flex">
            <div class="biaoti">所在位置：</div>
            <div class="cont">{{ pipeDetail.address || '--' }}</div>
          </div>
          <div class="part flex">
            <div class="biaoti">建设方式：</div>
            <div class="cont">{{ pipeDetail.buildType == 'owner' ? '自建' : '共享' }}</div>
          </div>
          <div class="part flex">
            <div class="biaoti">管网直径：</div>
            <div class="cont">{{ pipeDetail.pipelineDiameterTemp || '--' }} 米</div>
          </div>
          <div class="part flex">
            <div class="biaoti">安装高度：</div>
            <div class="cont">{{ pipeDetail.installHeight || '--' }} 米</div>
          </div>

          <div class="title" style="margin-top: 30px">实时数据</div>
          <div class="part flex">
            <div class="biaoti">水深：</div>
            <div class="cont">{{ realData.z || '--' }} 米</div>
          </div>
          <div class="part flex">
            <div class="biaoti">流速：</div>
            <div class="cont">{{ realData.va || '--' }}m/s</div>
          </div>
          <div class="part flex">
            <div class="biaoti">SS：</div>
            <div class="cont">{{ realData.turb || '--' }} mg/L</div>
          </div>
          <div class="part flex">
            <div class="biaoti">更新时间：</div>
            <div class="cont">{{ realData.tt || '--' }}</div>
          </div>

          <div class="title">责任信息</div>
          <div class="part flex">
            <div class="biaoti">负责人：</div>
            <div class="cont">张小强 13328873032</div>
          </div>
          <!-- 有满管、溢流风险时推送消息 -->
          <div class="part flex" v-if="realData.z >= (pipeDetail.pipelineDiameterTemp || '2')">
            <div class="biaoti">
              <el-button type="warning">有满管风险，通知相关责任人进行处理</el-button>
            </div>
          </div>
          <div class="part flex" v-if="realData.z >= (pipeDetail.bottomBuriedDepthTemp || '2')">
            <div class="biaoti"><el-button type="warning">有溢流风险，通知相关责任人进行处理</el-button></div>
          </div>
        </div>
      </div>
      <!-- 监测数据 -->
      <div class="pipeMonitor" v-if="tabActive == 2">
        <div class="selectToolList">
          <el-date-picker
            v-model="pipeTime"
            type="daterange"
            value-format="YYYY-MM-DD"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            style="width: 240px"
            :clearable="false"
          />
          <el-button type="warning" @click="changePipeDate" style="margin: -4px 0px 0px 8px">搜索</el-button>
        </div>
        <div id="monitorPipe" v-loading="pipeLoading"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import chartOption from '@/components/Echarts/pieChart_1.js';
import * as echarts from 'echarts';
import { graphicReport, realtimeDataLatest, getStationDetail } from '@/api/dataAnalysis/syntherticData';

const { proxy } = getCurrentInstance();
const tabActive = ref('1');
const pipeTime = ref([proxy.moment(new Date()).subtract(1, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')]);
const realData = ref({});
const pipeDetail = ref({});
const pipeLoading = ref(true);

const props = defineProps({
  pipeParams: {
    type: Object,
  },
  ifReal: {
    type: Boolean,
  },
});

// tab切换
function changeTab(val) {
  if (val == 2) {
    setTimeout(() => {
      initPipeChart();
    });
  }
}
// 监测数据日期搜索
function changePipeDate() {
  initPipeChart();
}

//管网监测趋势图
let pipeChart = null;
const initPipeChart = async () => {
  pipeChart && pipeChart.dispose();
  pipeChart = echarts.init(document.getElementById('monitorPipe'));
  let params = {
    startTime: pipeTime.value[0],
    endTime: pipeTime.value[1],
    stCode: props.pipeParams.stCode,
  };
  pipeLoading.value = true;
  //管网监测值
  let res = await graphicReport(params);
  if (res && res.code == 200) {
    let datas = res.data;
    chartOption.floodOneMapPipeSupervise.xAxis[0].data = datas.propertyMonitorXList;
    chartOption.floodOneMapPipeSupervise.yAxis[0].name = '水深(m)';
    chartOption.floodOneMapPipeSupervise.yAxis[1].name = '雨量(mm)';
    chartOption.floodOneMapPipeSupervise.legend.data = ['水深', '雨量'];
    chartOption.floodOneMapPipeSupervise.series[0].name = '水深';
    chartOption.floodOneMapPipeSupervise.series[0].data = datas.propertyMonitorList[0].ylist;
  }

  // 雨量站数据
  let params2 = {
    startTime: pipeTime.value[0],
    endTime: pipeTime.value[1],
    stCode: pipeDetail.value.referRainStCode,
  };
  let res2 = await graphicReport(params2);
  if (res2 && res2.code == 200) {
    let datas = res2.data;
    chartOption.floodOneMapPipeSupervise.series[1].data = datas.propertyMonitorList[0].ylist;
    chartOption.floodOneMapPipeSupervise.series[1].name = '雨量';
    chartOption.floodOneMapPipeSupervise.series[1].type = 'bar';
    chartOption.floodOneMapPipeSupervise.series[1].barWidth = '10';
    chartOption.floodOneMapPipeSupervise.yAxis[1].inverse = false; //翻转
    if (datas.propertyMonitorXList.length > 0) {
      chartOption.floodOneMapPipeSupervise.graphic.invisible = true; //暂无数据
    } else {
      chartOption.floodOneMapPipeSupervise.graphic.invisible = false; //暂无数据
    }
    // 设置鼠标滚轮放大缩小展示数据区间
    chartOption.floodOneMapPipeSupervise.dataZoom = [
      { type: 'inside', startValue: datas.propertyMonitorXList[datas.propertyMonitorXList.length - 48] },
    ];
  }
  pipeChart.clear();
  pipeChart.setOption(chartOption.floodOneMapPipeSupervise);
  pipeLoading.value = false;
};

// 获取管网详情实时数据
function getDetailData() {
  // 实时数据
  realtimeDataLatest(props.pipeParams.stCode).then(res => {
    realData.value = res.data;
  });
}

// 获取管网详情某一天数据
async function getHistoryData() {
  let params = {
    startTime: localStorage.getItem('setRainDateKF'),
    endTime: localStorage.getItem('setRainDateKF'),
    stCode: props.pipeParams.stCode,
  };
  pipeLoading.value = true;
  //管网监测值
  let res = await graphicReport(params);
  if (res && res.code == 200) {
    let datas = res.data;
    realData.value.z = nameToData(datas.propertyMonitorList, '水位')[0];
    realData.value.va = nameToData(datas.propertyMonitorList, '流速')[0];
    realData.value.turb = nameToData(datas.propertyMonitorList, 'SS')[0];
    realData.value.tt = datas.propertyMonitorXList[0];
    realData.value.stName = datas.propertyMonitorList[0].stName;
  }
}
// 公共方法，根据监测名称来匹配对应的数值
function nameToData(data, name) {
  let arr = data.filter(item => item.monitorPropertyName == name);
  return arr[0] ? arr[0].ylist : [];
}

// 获取站点详情
function getStationData() {
  getStationDetail(props.pipeParams.id).then(res => {
    pipeDetail.value = res.data;
  });
}

onMounted(() => {
  getStationData();
  // 项目建设中需要获取某一天的监测数据，排水防涝里面获取实时数据
  if (props.ifReal) {
    getDetailData();
  } else {
    pipeTime.value = [localStorage.getItem('setRainDateKF'), localStorage.getItem('setRainDateKF')];
    getHistoryData();
  }
});
</script>

<style lang="scss" scoped>
// prettier-ignore
.pipeMonitorDetail {
  width: 100%;
  .content {
    height: 600PX;
    .pipePou{
      .leftP{
        width:530PX;
        height: 570PX;
        background: url('@/assets/newImgs/HMScreen/pipe.gif') no-repeat;
        background-size:100% 100%;
        position:relative;
        .water{
          position:absolute;
          bottom:50PX;
          left:0px;
          z-index: 10;
          width:530PX;
          height: 128PX;
        }
        .part{
          background: #0874EF;
          border-radius: 12px;
          padding:0px 10px;
          height: 26px;
          line-height: 26px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 16px;
          color: #FFFFFF;
          text-align: center
        }
        .partW{
          position:absolute;
          bottom:190PX;
          left:60px;
          z-index: 10;
        }
        .partJ{
          position:absolute;
          top:175PX;
          left:325px;
          z-index: 10;
        }
        .partL{
          position:absolute;
          bottom:190PX;
          left:325px;
          z-index: 10;
        }
        .equipA{
          position:absolute;
          bottom:60PX;
          left:30px;
          z-index: 15;
          width:470PX;
          height: 339PX;
        }
        
      }
      .rightP{
        margin-left:30px;
        color: #fff;
        .title{
          border-left:5px solid #67BCFA;
          padding-left:8px;
          font-size: 16px;
          font-weight: 600;
          margin-top:20px;
        }
        .part{
          margin:15px 0px 10px 10px;
          color: #C8DBE0;
          font-size: 15px;
          .biaoti{
            width:100px;
          }
        }
      }
    }
    #monitorPipe {
      width: 100%;
      height: 520px;
      margin-top: 10px;
    }
  }
}
</style>