<template>
  <div class="cockpit-box fieldLeft">
    <div class="cockpit-box-item wsc-top">
      <div class="box-head">
        <div class="head-title">进水水质</div>
      </div>
      <div class="box-body">
        <div class="box-right w100">
          <div class="table-head">
            <div class="flex2">名称</div>
            <div class="flex2">数值</div>
            <div class="flex2">范围</div>
            <div class="flex2">是否达标</div>
          </div>
          <div class="box-table">
            <div class="table-item"
                 v-for="(item, index) in allData.jinshuiList"
                 :key="index + 1">
              <div class="flex2">{{ item.keyName }}</div>
              <div class="flex2"
                   :class="item.state == 0 ? 'dbText' : 'wdbText'">
                {{ item.value }}
              </div>
              <div class="flex2">{{replaceAttr(item.range)}}</div>
              <div class="flex2"
                   :class="item.state == 0 ? 'dbText' : 'wdbText'">
                {{ item.state==0?'是':'否' }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="cockpit-box-item wsc-top">
      <div class="box-head">
        <div class="head-title">出水水质</div>
      </div>
      <div class="box-body">
        <wscMointor :wsclist="allData.chushuiList"></wscMointor>
      </div>
    </div>
    <div class="cockpit-box-item wsc-bottom">
      <div class="box-head">
        <div class="head-title">进水COD与降雨</div>
      </div>
      <div class="box-body">
        <Detailcod :data="allData.chartData"
                   :refresh="allData.chartData.refresh"></Detailcod>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getImageUrl, replaceAttr } from "@/utils/ruoyi";
import { useRouter } from "vue-router";
const router = useRouter();
const { proxy } = getCurrentInstance();
import moment from "moment";
import useUserStore from "@/store/modules/user";
const appStore = useUserStore();

import {
  getInAndOutDate,
  getInCodData,
  getInAndOutFlow
} from "@/api/cockpit";

import wscMointor from "./components/wscMointor";
import Detailcod from "@/components/Detailbox/components/detail-cod";
const allData = reactive({
  chartData: {
    XAxis: [
      // "1:00",
      // "3:00",
      // "5:00",
      // "7:00",
      // "9:00",
      // "11:00",
      // "13:00",
      // "15:00",
      // "17:00",
    ],
    // YAxis: [0, 1, 6, 3, 4, 0, 1, 6, 3, 4], //雨量站
    // YAxis2: [4, 2, 33, 4, 1, 0, 1, 6, 3, 4], //进水cod
    YAxis: [], //雨量站
    YAxis2: [], //进水cod
    loading: false,
    refresh: 1,
  },

  tableList: [
    // {
    //   time: "04-25 19:00",
    //   name: "COD",
    //   value: "300",
    //   level: 1.8,
    //   area: "≤350",
    //   text: "是",
    //   status: 1,
    // },
    // {
    //   time: "04-25 19:00",
    //   name: "BDD",
    //   value: "300",
    //   level: 1.8,
    //   area: "≤350",
    //   text: "是",
    //   status: 1,
    // },
    // {
    //   time: "04-25 19:00",
    //   name: "SS",
    //   value: "300",
    //   level: 1.8,
    //   area: "≤350",
    //   text: "是",
    //   status: 1,
    // },
    // {
    //   time: "04-25 19:00",
    //   name: "TN",
    //   value: "300",
    //   level: 1.8,
    //   area: "≤350",
    //   text: "是",
    //   status: 1,
    // },
    // {
    //   time: "04-25 19:00",
    //   name: "NH3-N",
    //   value: "300",
    //   level: 1.8,
    //   area: "≤350",
    //   text: "是",
    //   status: 1,
    // },
    // {
    //   time: "04-25 19:00",
    //   name: "TP",
    //   value: "300",
    //   level: 1.8,
    //   area: "≤350",
    //   text: "否",
    //   status: 0,
    // },
  ],

  jinshuiList: [],
  chushuiList: [],


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

watch(
  () => props.Getfutre,
  (newValue, oldValue) => {
    console.log('props.Getfutre', props.Getfutre);
    GetgetInAndOutDate(1)
    GetgetInAndOutDate(0)
    GetgetInCodData()
  },
  { immediate: false }
);

//进出水质 post 污水处理厂 type   0进水 1出水
function GetgetInAndOutDate (type) {
  let formdata = new FormData()
  formdata.append('stationCode', props.Getfutre.sewageCode)
  formdata.append('type', type)
  getInAndOutDate(formdata).then(res => {
    switch (type) {
      case 0:
        // 进水
        allData.jinshuiList = res.data
        break;
      case 1:
        // 出水
        allData.chushuiList = res.data
        break;
    }
  })
}

// 进水code和雨量站
function GetgetInCodData () {
  let formdata = new FormData()
  formdata.append('stationCode', props.Getfutre.sewageCode)
  // formdata.append('type', type)

  getInCodData(formdata).then(res => {
    console.log('进水code和雨量站', res.data);
    allData.chartData = {
      XAxis: res.data.rainTime,
      YAxis: res.data.data, //雨量站
      YAxis2: res.data.upData, //进水cod
      dataMax: res.data.dataMax, //雨量站
      upMax: res.data.upMax //进水cod
    }
    setTimeout(() => {
      allData.chartData.refresh = Math.random()
    }, 0);
  })
}
onMounted(() => {
  // console.log(appStore.TitleIndex);
});
</script>
<style lang="scss" scoped>
// //@import "@/assets/styles/floodControlDrainage.scss";
//@import "@/assets/styles/cockpit.scss";
.qcswChartsBox {
  height: calc(100% - 42px);
  width: 100%;
}
.w100 {
  width: 100% !important;
}
.flex2 {
  flex: 2;
}

img {
  vertical-align: bottom;
}
.dbText {
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #40f4a1;
  line-height: 43px;
}
.wdbText {
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #ff6577;
  line-height: 43px;
}
.box-table {
  height: calc(100% - 35px) !important;
}
.table-item {
  height: 27px !important;
  font-size: 17px;
}
.wsc-top {
  height: 27%;
}

.wsc-bottom {
  height: 45%;
}
</style>