<template>
  <!-- 污水处理厂工艺图 -->
  <div class="wscMonitorPage">
    <!-- 进水 -->
    <div class="jsData part">
      <div class="cont">
        <div>更新时间：{{ sewageObj.tt || '--' }}</div>
        <div class="mt-10">进水COD：{{ sewageObj.jsCOD || '--' }}mg/L</div>
        <div class="mt-10">进水氨氮：{{ sewageObj.jsNH3N || '--' }}mg/L</div>
        <div class="mt-10">进水总磷：{{ sewageObj.jsTP || '--' }}mg/L</div>
        <div class="mt-10">进水总氮：{{ sewageObj.jsTN || '--' }}mg/L</div>
      </div>
    </div>
    <!-- 出水 -->
    <div class="csData part">
      <div>更新时间：{{ sewageObj.tt || '--' }}</div>
      <div class="mt-10">出水COD：{{ sewageObj.csCOD || '--' }}mg/L</div>
      <div class="mt-10">出水氨氮：{{ sewageObj.csNH3N || '--' }}mg/L</div>
      <div class="mt-10">出水总磷：{{ sewageObj.csTP || '--' }}mg/L</div>
      <div class="mt-10">出水总氮：{{ sewageObj.csTN || '--' }}mg/L</div>
    </div>
  </div>
</template>

<script setup>
import { realtimeDataList } from '@/api/scada/monitor';

const { proxy } = getCurrentInstance();
const wscObj = ref({});
const timer = ref(null);
const sewageObj = ref({});

const props = defineProps({
  wscObj: {
    type: Object,
  },
});
watch(
  () => props.wscObj,
  () => {
    wscObj.value = props.wscObj;
  },
  { immediate: true }
);

// 污水处理厂数据
function getDataWSC() {
  let params = {
    stationCode: wscObj.value.sewageCode,
  };
  realtimeDataList(params).then(res => {
    let datas = res.data || {};
    sewageObj.value.tt = datas.tt;
    if (Object.keys(datas).length > 0) {
      for (let i in datas) {
        if (i.includes('COD-JS')) {
          sewageObj.value.jsCOD = datas[i];
        }
        // 总磷
        if (i.includes('TP-JS')) {
          sewageObj.value.jsTP = datas[i];
        }
        // 总氮
        if (i.includes('TN-JS')) {
          sewageObj.value.jsTN = datas[i];
        }
        // 氨氮
        if (i.includes('NH3N-JS')) {
          sewageObj.value.jsNH3N = datas[i];
        }
        if (i.includes('COD-CS')) {
          sewageObj.value.csCOD = datas[i];
        }
        if (i.includes('TP-CS')) {
          sewageObj.value.csTP = datas[i];
        }
        if (i.includes('TN-CS')) {
          sewageObj.value.csTN = datas[i];
        }
        if (i.includes('NH3N-CS')) {
          sewageObj.value.csNH3N = datas[i];
        }
      }
    } else {
      sewageObj.value = {};
    }
  });
}

onMounted(() => {
  getDataWSC(); //污水处理厂pcl实时数据
  // 定时刷新
  timer.value = setInterval(() => {
    getDataWSC();
  }, 5 * 60 * 1000);
});

onBeforeUnmount(() => {
  if (timer.value) clearInterval(timer.value);
});
</script>

<style lang="scss" scoped>
.wscMonitorPage {
  width: 934px;
  height: 590px;
  background: url('@/assets/newImgs/HMScreen/gygWsc.png') no-repeat;
  background-size: 100% 100%;
  margin: 0px 0px 30px 10px;
  position: relative;
  .part {
    width: 280px;
    background: rgba(7, 45, 67, 0.6);
    border: 2px solid #2c81c7;
    box-shadow: 0px 0px 8px #67bdfa inset;
    padding: 15px;
    position: absolute;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 16px;
    color: #c8dbe0;
  }
  .jsData {
    left: 20px;
    top: 10px;
  }
  .csData {
    right: 20px;
    top: 10px;
  }
}
</style>