<template>
  <div class="detail-real-box historyBox">
    <div class="detail-top">
      <div class="cockpit-box-item">
        <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 height2"
                   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">
        <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 h66">
        <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="flex3">地名</div>
              <div class="flex3">今日(m³)</div>
              <div class="flex3">累计(m³)</div>
            </div>
            <div class="box-table">
              <div class="table-item height2"
                   v-for="(item, index) in allData.tableList2"
                   :key="index + 1">
                <div class="flex3 fontBLue">{{ item.keyName }}</div>
                <div class="flex3 text">{{ item.dayData }}</div>
                <!-- <div class="flex3">{{ item.totalData }}</div> -->
                <div class="flex3">--</div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
    <div class="detail-bottom">
      <div class="cockpit-box-item w100">
        <div class="box-head  echarthead">
          <div class="head-title">当日进出水流量趋势</div>
        </div>
        <div class="box-body">
          <qushi :data="allData.chartData"
                 :refresh="allData.chartData.refresh"></qushi>

        </div>
      </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 wscMointor from "@/views/drainagefacility/components/components/wscMointor";
import qushi from "@/components/Detailbox/pointwsclc/qushi.vue";


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

const props = defineProps({
  pointfeature: {
    type: Object,
    default: {},
  },
  refreshsecond: {
    type: Number
  }
});

watch(
  () => props.refreshsecond,
  (newValue, oldValue) => {
    console.log('props.pointfeature', props.pointfeature);
    GetgetInAndOutDate(1)
    GetgetInAndOutDate(0)
    GetgetInAndOutFlow()
    GetgetFlowTotal()
  },
  { immediate: true }
);

const weatherpop = ref(false);
const allData = reactive({
  tableList2: [
    // {
    //   time: "04-25 19:00",
    //   name: "1#进水流",
    //   value: "4562m",
    //   level: "4562m",
    // },
    // {
    //   time: "04-25 19:00",
    //   name: "1#进水流",
    //   value: "4562m",
    //   level: "4562m",
    // },
    // {
    //   time: "04-25 19:00",
    //   name: "1#进水流",
    //   value: "4562m",
    //   level: "4562m",
    // },
    // {
    //   time: "04-25 19:00",
    //   name: "1#进水流",
    //   value: "4562m",
    //   level: "4562m",
    // },
  ],

  chartData: {
    DataName: "",
    XAxis: [],
    typeName: "1",
    typeName2: "2",
    // YAxis: [0, 1, 2, 3, 4, 2, 1, 6, 3, 4, 7], //雨量站
    // YAxis2: [4, 2, 10, 4, 1, 8, 1, 6, 3, 4, 8], //积水深度
    YAxis: [], //雨量站
    YAxis2: [], //积水深度
    loading: false,
    refresh: 1,
  },

  jinshuiList: [],
  chushuiList: [],
});

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

// 进出水流量echarts
function GetgetInAndOutFlow () {
  let formdata = new FormData()
  formdata.append('stationCode', props.pointfeature.sewageCode)
  getInAndOutFlow(formdata).then(res => {
    console.log('进出水流量echarts', res.data);
    allData.chartData = {
      XAxis: res.data.time,
      YAxis: res.data.downData, //进水流量
      YAxis2: res.data.upData, //出水流量
    }
    setTimeout(() => {
      allData.chartData.refresh = Math.random()
    }, 0);
  })
}

// 获取进出水流量列表
function GetgetFlowTotal () {
  let formdata = new FormData()
  formdata.append('stationCode', props.pointfeature.sewageCode)
  getFlowTotal(formdata).then(res => {
    console.log('获取进出水流量列表', res.data);
    allData.tableList2 = res.data
  })
}


</script>
<style lang="scss" scoped>
// //@import "@/assets/styles/floodControlDrainage.scss";
//@import "@/assets/styles/cockpit.scss";
@import "@/assets/styles/map-detail.scss";

.detail-real-box {
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.cockpit-box-item {
  height: 100%;
  width: 33%;
  background: #052b51;
}

.detail-top {
  height: 40%;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.detail-bottom {
  height: 60%;
  width: 100%;
}

.box-head {
  height: 20px !important;
  background: none !important;
}

.echarthead {
  .head-title {
    position: absolute !important;
    width: 100% !important;
    text-align: center !important;
    top: 12px;
  }
}

.box-body {
  height: calc(100% - 20px) !important;
}

.head-title {
  font-size: 15px !important;
  font-style: normal !important;
  text-align: left !important;
  padding-left: 10px !important;
}

.flex2 {
  flex: 2;
}

.flex3 {
  width: 33.33%;
}

.w100 {
  width: 100% !important;
}

.box-table {
  height: calc(100% - 40px) !important;
}

.table-item {
  height: 28px !important;
}

.height2 {
  height: 31px !important;
}

.timeSearch {
  width: 100%;
}

.dbText {
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #40f4a1;
}
.wdbText {
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #ff6577;
}
</style>