<template>
  <!-- 18个内涝积水点弹窗 -->
  <div class="waterLoggingPage">
    <div class="titleBg">关联管网信息</div>
    <div class="flex">
      <img src="@/assets/newImgs/HMScreen/pipeMonitor.gif" alt="" class="showGif" />
      <div class="content">
        <div class="flex flex-align-center">
          <img src="@/assets/newImgs/HMScreen/water.gif" alt="" width="64" />
          <div class="cont">
            <div>当前水深：<span class="number">0</span> 厘米</div>
            <div>设备状态：<span class="success">在线</span></div>
          </div>
        </div>
        <div class="flex flex-align-center flex-wrap flex-justcontent-spacebetween" style="margin: 5px auto">
          <div class="part" style="width: 100%">管网名称：{{ props.detailJSD.name || '--' }}</div>
          <div :class="['part', realData.z >= pipeDetail.pipelineDiameterTemp ? 'red' : '']" style="width: 100%">
            实时水深：{{ realData.z || '--' }} 米
          </div>
          <div class="part">井深：{{ pipeDetail.bottomBuriedDepthTemp || '--' }} 米</div>
          <div class="part">管网直径：{{ pipeDetail.pipelineDiameterTemp || '--' }} 米</div>
          <div class="part" style="width: 100%">更新时间：{{ realData.tt || '--' }}</div>
          <div class="part">负责人：李强</div>
          <div class="part">电话：13321190334</div>
        </div>

        <div class="flex flex-align-center flex-wrap flex-justcontent-start">
          <el-button type="warning" class="mt-10" v-if="realData.z >= (pipeDetail.pipelineDiameterTemp || '2')" @click="dialogShow = true">
            有满管溢流风险，通知相关责任人进行处理
          </el-button>
        </div>
      </div>
    </div>

    <div class="titleBg mt-10">视频监控</div>
    <img src="@/assets/newImgs/HMScreen/videoTest.png" alt="" style="height: 419px; width: 100%" />

    <!-- 发送短信给城管局相关人员 -->
    <el-dialog v-model="dialogShow" title="监测报警反馈" width="600px" append-to-body>
      <SendMessage :realData="realData" :pipeDetail="pipeDetail"></SendMessage>
    </el-dialog>
  </div>
</template>

<script setup>
import { graphicReport, realtimeDataLatest, getStationDetail, getStationList } from '@/api/dataAnalysis/syntherticData';
import SendMessage from '@/views/sponeScreen/waterFlood/sendMessage.vue';

const { proxy } = getCurrentInstance();
const realData = ref({});
const pipeDetail = ref({});
const dialogShow = ref(false);

const props = defineProps({
  detailJSD: {
    type: Object,
  },
});

// 获取管网详情实时数据
function getDataReal() {
  if (!!!props.detailJSD.stCodes) return;
  // 实时数据
  realtimeDataLatest(props.detailJSD.stCodes).then(res => {
    realData.value = res.data;
  });
}

// 获取管网详情某一天数据
async function getHistoryData() {
  let params = {
    startTime: localStorage.getItem('setRainDateKF'),
    endTime: localStorage.getItem('setRainDateKF'),
    stCode: props.detailJSD.stCodes, //关联站点code
  };
  //管网监测值
  let res = await graphicReport(params);
  if (res && res.code == 200) {
    let datas = res.data;
    // 取最大的值
    let max = Math.max(...nameToData(datas.propertyMonitorList, '水位'));
    let valIndex = nameToData(datas.propertyMonitorList, '水位').findIndex(item => {
      return item == max;
    });
    realData.value.z = nameToData(datas.propertyMonitorList, '水位')[valIndex];
    realData.value.tt = datas.propertyMonitorXList[valIndex];
  }
}

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

// 获取站点详情
function getStationData() {
  if (!!!props.detailJSD.stCodes) return;
  getStationList({ monitorTargetType: 'pipeline' }).then(res => {
    let datas = res.data;
    let id = datas.filter(item => item.stCode == props.detailJSD.stCodes)[0].id;
    getStationDetail(id).then(res => {
      pipeDetail.value = res.data;
    });
  });
}

onMounted(() => {
  getStationData();
  if (localStorage.getItem('showHistoryMonitor') == '1') {
    // 历史
    getHistoryData();
  } else {
    // 实时
    getDataReal();
  }
});
</script>

<style lang="scss" scoped>
.waterLoggingPage {
  width: 100%;
  color: #b8ecff;
  font-size: 15px;
  font-weight: 400;
  margin-bottom: 20px;
  .titleBg {
    width: 100%;
    height: 35px;
    line-height: 35px;
    background: url('@/assets/newImgs/HMScreen/pipeBg.png') no-repeat;
    background-size: 100% 100%;
    padding: 0px 30px;
    margin: 0px 0px 10px -10px;
  }
  .showGif {
    height: 260px;
  }
  .content {
    margin: 10px 0px 0px 20px;
    .cont {
      margin-left: 20px;
      color: #fff;
      .number {
        font-family: 'YouSheBiaoTiHei';
        font-size: 30px;
        color: #45ff94;
      }
      .success {
        padding: 1px 10px;
        background: #00c855;
        border-radius: 12px;
        display: inline-block;
      }
      .fail {
        background: #a6a6a6;
        border-radius: 12px;
        display: inline-block;
        padding: 1px 10px;
      }
    }
  }
  .part {
    margin-top: 8px;
    width: 50%;
    position: relative;
    padding-left: 15px;
    &::before {
      content: '';
      width: 8px;
      height: 8px;
      background: #51fefb;
      border-radius: 50%;
      display: block;
      position: absolute;
      top: 8px;
      left: 0px;
    }
  }
}
</style>