<template>
  <div class="cockpit-box fieldrigth">
    <div class="cockpit-box-item box-top">
      <div class="box-head">
        <div class="head-title">值班信息</div>
      </div>
      <div class="box-body">
        <div class="box-body-zhiban dutyBox"
             v-if="allData.DailyDataList.length">
          <div class="zhiban-box today">
            <div class="zhiban-left">白班</div>
            <div class="zhiban-right">
              <div class="right-box dutyItem">
                姓名：{{ allData.DailyDataList[0].userName }}
                <span class="yidaowei"
                      v-show="allData.DailyDataList[0].inPlace">已到位</span>
                <!-- <img class="phone"
                     src="@/assets/images/oneMap/bzcall.png"
                     alt="" /> -->
                <span class="right-line"></span>
              </div>
              <div class="right-box dutyItem">
                职务：防汛人员

                <span class="right-line"></span>
              </div>
            </div>
          </div>
          <div class="zhiban-box today">
            <div class="zhiban-left">夜班</div>
            <div class="zhiban-right">
              <div class="right-box dutyItem">
                姓名：{{ allData.DailyDataList[1].userName }}
                <span class="yidaowei"
                      v-show="allData.DailyDataList[1].inPlace">已到位</span>
                <!-- <img class="phone"
                     src="@/assets/images/oneMap/bzcall.png"
                     alt="" /> -->
                <span class="right-line"></span>
              </div>
              <div class="right-box dutyItem">
                职务：防汛人员
                <span class="right-line"></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="cockpit-box-item box-bottom">
      <div class="box-head">
        <div class="head-title">进出水流量</div>
      </div>
      <div class="box-body">
        <div class="topBox">
          <div class="titleBox">
            <div class="titleIcon">
              <div class="titleCircle"></div>
            </div>
            <div class="echart-word">统计</div>
          </div>
          <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"
                   v-for="(item, index) in allData.tableList"
                   :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 class="bottomBoX">
          <div class="titleBox">
            <div class="titleIcon">
              <div class="titleCircle"></div>
            </div>
            <div class="echart-word">趋势</div>
          </div>
          <div class="chartsBox w100">
            <qushi :data="allData.chartData"
                   :refresh="allData.chartData.refresh"></qushi>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
const router = useRouter();
const { proxy } = getCurrentInstance();
import moment from "moment";
import useUserStore from "@/store/modules/user";
import qushi from "@/components/Detailbox/pointwsclc/qushi.vue";
const appStore = useUserStore();

import {
  getDailyData,
  getInAndOutFlow,
  getFlowTotal
} from "@/api/cockpit";
import { all } from "ol/events/condition";

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

watch(
  () => props.Getfutre,
  (newValue, oldValue) => {
    console.log('props.Getfutre', props.Getfutre);
    GetdailyData()
    GetgetInAndOutFlow()
    GetgetFlowTotal()
  },
  { immediate: false }
);

const allData = reactive({
  DailyDataList: [],
  tableList: [
    // {
    //   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",
    // },
  ],
  paishuiLeft: [
    {
      name: "雨",
      value: 545,
      type: 1,
      unit: "km",
    },
    {
      name: "污",
      value: 545,
      type: 2,
      unit: "km",
    },
    {
      name: "合",
      value: 545,
      type: 3,
      unit: "km",
    },
  ],
  activetype: "", //点击排水管网左侧
  dateRange: [Date.now(), Date.now()],
  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,
  },
});

onMounted(() => {
  console.log(allData.dateRange, 1111);
  // console.log(appStore.TitleIndex);
});

// 进出水流量echarts
function GetgetInAndOutFlow () {
  let formdata = new FormData()
  formdata.append('stationCode', props.Getfutre.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.Getfutre.sewageCode)
  getFlowTotal(formdata).then(res => {
    console.log('获取进出水流量列表', res.data);
    allData.tableList = res.data
  })
}


// 获取值班信息
function GetdailyData () {
  let formdata = new FormData()
  formdata.append('deviceId', props.Getfutre.sewageCode)
  formdata.append('startTime', moment().format("YYYY-MM-DD 00:00:00"))
  formdata.append('endTime', moment().format("YYYY-MM-DD 23:59:59"))

  getDailyData(formdata).then(res => {
    allData.DailyDataList = res.data
    console.log('GetdailyData', res.data);
  })
}

</script>
<style lang="scss" scoped>
// //@import "@/assets/styles/floodControlDrainage.scss";
//@import "@/assets/styles/cockpit.scss";
/* CSS 代码 */
video {
  width: 100%; /* 设置宽度为父元素的宽度 */
  height: 100%; /* 设置高度为固定值 300px */
  object-fit: cover; /* 充满整个元素的大小 */
}
.timeSearch {
  display: flex;
  padding: 0 10px;
  width: 438px;
  height: 32px;
  background: rgba(13, 217, 254, 0.05);
  border: 1px solid #173262;
  align-items: center;
  margin-top: 10px;
  span {
    margin-right: 20px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #f6f9fe;
  }
}
::v-deep(.el-input__wrapper) {
  background-color: rgba(13, 217, 254, 0.05) !important;
  border: none;
  box-shadow: none;
}
::v-deep .el-range-separator {
  color: #0dd9fe;
}
.qcswChartsBox {
  height: calc(100% - 42px);
  width: 100%;
}
.w100 {
  width: 100% !important;
}
.flex2 {
  flex: 2;
}
.flex6 {
  flex: 6;
}
img {
  vertical-align: bottom;
}
.zhiban-box {
  width: 100% !important;
}
.box-body-zhiban {
  height: 100% !important;
  flex-direction: column !important;
  gap: 10px;
  padding: 10px 0 20px 0;
}
.yidaowei {
  position: relative !important;
  width: 42px;
  height: 18px;
  margin: 0 20px;
  border: 1px solid #4aebb0;
  background: linear-gradient(
    0deg,
    rgba(74, 235, 176, 0.2) 0%,
    rgba(74, 235, 176, 0.1) 100%
  );
  border-radius: 2px;
  font-size: 12px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #4aebb0 !important;
  text-align: center;
  line-height: 18px;
}
.dayDuty {
  left: 150px !important;
  width: 36px;
  height: 18px;
  line-height: 18px;
  background: rgba(73, 45, 20, 0.5);
  border: 1px solid #ffe1b1;
  border-radius: 2px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #ffe1b1 !important;
  text-align: center;
}
.nightDuty {
  left: 150px !important;
  width: 36px;
  height: 18px;
  line-height: 18px;
  background: rgba(73, 45, 20, 0.5);

  border: 1px solid #6abeff;
  border-radius: 2px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #6abeff !important;
  text-align: center;
}
.phone {
  margin: 0 10px;
  cursor: pointer;
}
.titleBox {
  height: 32px;
  display: flex;
  align-items: center;
  padding: 0 15px 0 10px;
  background-size: 100% 100%;
}
.titleIcon {
  position: relative;
  width: 16px;
  height: 16px;
  border: 1px solid #1da9f1;
  margin-right: 9px;

  .titleCircle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    background: #22d8ff;
  }
}
.topBox {
  height: 50%;
  // background: linear-gradient(90deg, rgb(17, 40, 94), rgba(12, 29, 68, 0.58));
  margin-bottom: 10px;
}
.bottomBoX {
  height: 48%;
  // background: linear-gradient(90deg, rgb(17, 40, 94), rgba(12, 29, 68, 0.58));
}
.flex3 {
  width: 33.33%;
}

.box-top {
  height: 26%;
}

.box-bottom {
  height: 73%;
  background: rgba(6, 86, 161, 0.2);
  // background: linear-gradient(90deg, rgb(17, 40, 94), rgba(12, 29, 68, 0.58));
}
.fontBLue {
  color: #acf8ff;
}
.chartsBox {
  width: 100%;
  height: calc(100% - 30px);
}

.zhiban-left {
  width: 50px !important;
  padding: 8px 15px !important;
}

.right-box {
  padding: 0 25px !important;
}
</style>