<template>
  <div class="cockpit-box fieldLeft">
    <div class="cockpit-box-item bzItem">
      <div class="box-head">
        <div class="head-title">泵站详情</div>
      </div>
      <div class="box-body">
        <!-- 顶部 -->
        <div class="topContainer">
          <div class="titleBox">
            <div class="titleIcon">
              <div class="titleCircle"></div>
            </div>
            <div class="echart-word">泵站运行工况</div>
          </div>
          <div class="controlBtn"
               @click="opencontrol()">远程控制</div>
          <div class="imgBox">
            <!-- <img src="@/assets/images/oneMap/bzmx.png"
                 alt="" /> -->
            <div class="covers"
                 :class="[allData.bzpicclass]"
                 v-if="props.Getfutre">
              <div class="img-item"
                   v-for="(item,index) in allData.PumpStateList"
                   :key="index"
                   v-show="item.type==0"
                   :class="[computedState(item.value),`img${index+1}`]"></div>
            </div>

            <div class="bengzhan_ToolTip">
              <div class="tooltip_box">
                <div class="bengzhan_point red"></div>
                <div>异常</div>
              </div>
              <div class="tooltip_box">
                <div class="bengzhan_point gray"></div>
                <div>未运行</div>
              </div>
              <div class="tooltip_box">
                <div class="bengzhan_point green"></div>
                <div>运行</div>
              </div>
            </div>

            <!-- <div :class="['isonline',allData.realTimeData.status==1?'isonlinegray':'']">
          {{allData.realTimeData.status==0?'在线':allData.realTimeData.status==1?'离线':''}}
        </div> -->
          </div>
        </div>
        <!-- 底部 -->
        <div class="bottomContainer">
          <div class="bottomInfoBox">
            <div class="bzTopBox">
              <div class="leftYW">
                <div class="ywTitle">前池液位(m)</div>
                <div class="ywContent">
                  <div class="firstYw"
                       v-for="(item,index) in allData.PumpStateList"
                       :key="index"
                       v-show="item.type==1">
                    {{ item.value}}
                  </div>

                </div>
              </div>
              <div class="rightStauts">
                <div class="statusTitle">泵机状态</div>
                <div class="statusTitleContent">
                  <div :class="['levelStatus',item.value=='-1'?'red':item.value=='0'?'bzdefalut':'bzblue']"
                       v-for="(item,index) in allData.PumpStateList"
                       :key="index"
                       v-show="item.type==0">
                    {{ item.name}}
                  </div>
                  <!-- <div class="levelStatus">1#</div>
                  <div class="levelStatus red">2#</div>
                  <div class="levelStatus bzdefalut">3#</div>
                  <div class="levelStatus">4#</div>
                  <div class="levelStatus">5#</div>
                  <div class="levelStatus">6#</div> -->
                </div>
              </div>
            </div>
            <div class="titleBox mtbox">
              <div class="titleIcon">
                <div class="titleCircle"></div>
              </div>
              <div class="echart-word">泵站基本信息</div>
            </div>
            <div class="areaPosition">
              <!-- <img src="@/assets/images/oneMap/xiaqu.png"
                   class="areaImg"
                   alt="" /> -->
              <!-- <span>辖区-街道-单位</span> -->
              <span>{{ props.Getfutre.region }}-{{ props.Getfutre.unitDep }}</span>

            </div>
          </div>
          <div class="bottomTable">
            <div class="box-body-zhiban dutyBox">
              <div class="zhiban-box today"
                   v-if="allData.DailyDataList.length">
                <div class="zhiban-left">今日值班</div>
                <div class="zhiban-right">
                  <div class="right-box dutyItem">
                    人员一：{{ allData.DailyDataList[0].userName}}
                    <span class="dayDuty">白班</span>
                    <span class="yidaowei"
                          v-show="allData.DailyDataList[0].inPlace">已到位</span>
                    <span class="phoneNumber">{{ allData.DailyDataList[0].userPhone}}</span>
                    <span class="right-line"></span>
                  </div>
                  <div class="right-box dutyItem">
                    人员二：{{ allData.DailyDataList[1].userName}}
                    <span class="nightDuty">夜班</span>
                    <span class="yidaowei"
                          v-show="allData.DailyDataList[1].inPlace">已到位</span>
                    <span class="phoneNumber">{{ allData.DailyDataList[1].userPhone}}</span>
                    <span class="right-line"></span>
                  </div>
                  <div class="right-box dutyItem">
                    责任人：{{ props.Getfutre.dutyUserName }}
                    <span class="phoneNumber">{{ props.Getfutre.dutyUserPhone }}</span>
                    <span class="right-line"></span>
                  </div>
                  <div class="right-box dutyItem">
                    领 导：{{ props.Getfutre.dutyLeaderName }}
                    <span class="phoneNumber">{{ props.Getfutre.dutyLeaderPhone }}</span>
                    <span class="right-line"></span>
                  </div>
                </div>
              </div>
            </div>
            <div class="box-body-zhiban bzInfo">
              <div class="zhiban-box bzInfoBox">
                <div class="infoItem">
                  <div class="infoLeft">
                    <span class="labelInfo">类型：</span>
                    <span class="valueInfo">{{ props.Getfutre.pumpType=='dirtyPumpStation'?'污水泵站':"雨水泵站" }}</span>
                  </div>
                  <div class="infoRight">
                    <span class="labelInfo">流量：</span>
                    <span class="valueInfo">{{props.Getfutre.large}} m³/h</span>
                  </div>
                </div>
                <div class="infoItem">
                  <div class="infoLeft">
                    <span class="labelInfo">数量：</span>
                    <span class="valueInfo">{{ props.Getfutre.deviceCount }}</span>
                  </div>
                  <div class="infoRight">
                    <span class="labelInfo">面积：</span>
                    <span class="valueInfo">{{ props.Getfutre.buildArea }} m³</span>
                  </div>
                </div>
                <div class="infoItem flexStart">
                  <span class="labelInfo">描述：</span>
                  <span class="valueInfo">{{ props.Getfutre.description }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 泵站控制层 -->
    <div id="pop-up"
         class="controlclass"
         v-if="Controlshow">
      <div class="leftangle"></div>
      <div class="rightangle"></div>

      <div class="weather-head">
        <div class="head-bg">{{Conrtolname}}远程控制</div>
        <el-icon class="weather-icon"
                 size='18'
                 color="#1096DB"
                 @click="Controlshow=false">
          <Close />
        </el-icon>
      </div>

      <div class="weather-body">
        <PumpingStationControl v-if="Controlshow"
                               :pointfeature='props.Getfutre'
                               :refresh="refreshsecond"></PumpingStationControl>
      </div>
    </div>

  </div>
</template>

<script setup>
import { getImageUrl } from "@/utils/ruoyi";
import { useRouter } from "vue-router";
const router = useRouter();
const { proxy } = getCurrentInstance();

import PumpingStationControl from '@/views/drainagefacility/components/components/PumpingStationControl.vue'

import {
  getDailyData,
  getPumpState
} from "@/api/cockpit";

import moment from "moment";
import useUserStore from "@/store/modules/user";
const appStore = useUserStore();
const props = defineProps({
  Getfutre: {
    type: Object,
  },
})

watch(
  () => props.Getfutre,
  (newValue, oldValue) => {
    console.log('props.Getfutre', props.Getfutre);
    allData.getactiveCode = props.Getfutre.remark || 'cgbz3'
    // allData.getactiveCode = 'cgbz3'

    switch (allData.getactiveCode) {
      case 'cgbz3':
        allData.bzpicclass = 'cover2-cgbz-three'
        break;
      case 'cgbz2':
        allData.bzpicclass = 'cover2-cgbz-two'
        break;
      case 'cgbz4':
        allData.bzpicclass = 'cover2-cgbz-four'
        break;
      case 'cgbz6':
        allData.bzpicclass = 'cover2-cgbz-six'
        break;
      case 'cgbz7':
        allData.bzpicclass = 'cover2-cgbz-seven'
        break;
      case 'ythbz':
        allData.bzpicclass = 'cover3-yth'
        break;
    }
    GetdailyData()
    GetPumpState()
  },
  { immediate: false }
);

const Conrtolname = ref('');
const Controlshow = ref(false);
const refreshsecond = ref('')
const allData = reactive({
  bzpicclass: '', //泵站运行工况的动态class
  getactiveCode: '3+4',
  PumpStateList: [],
  DailyDataList: [],
});

function opencontrol () {
  Controlshow.value = true
  setTimeout(() => {
    refreshsecond.value = Math.random()
  }, 0);
}

function computedState (value1) {
  return value1 == -1 ? "red" : value1 == 1 ? "green" : "grey";
}

// 获取值班信息
function GetdailyData () {
  let formdata = new FormData()
  formdata.append('deviceId', props.Getfutre.pumpCode)
  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);
  })
}

// 查询泵机状态
function GetPumpState () {
  getPumpState(props.Getfutre.pumpCode).then(res => {
    console.log('GetPumpState', res.data);
    allData.PumpStateList = res.data
  })
}



onMounted(() => {
});

</script>
<style lang="scss" scoped>
//@import "@/assets/styles/floodControlDrainage.scss";
//@import "@/assets/styles/cockpit.scss";
.bzItem {
  height: 100% !important;
  background: rgba(6, 86, 161, 0.2) !important;
}
.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;
  }
}
.imgBox {
  position: relative;
  width: 100%;
  height: calc(100% - 32px);
  text-align: center;
  img {
    // width: 100%;
    height: 100%;
  }
}
.bzTopBox {
  display: flex;
  margin-top: 20px;

  .leftYW {
    width: 30%;
    height: 74px;
    margin-right: 10px;

    border-radius: 4px;
    .ywTitle {
      width: 100%;
      height: 24px;
      background: linear-gradient(
        90deg,
        rgb(40, 82, 155),
        rgba(49, 98, 172, 0.18)
      );
      border-radius: 4px 4px 0px 0px;
      text-align: center;
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #cfe1f1;
      line-height: 24px;
    }
    .ywContent {
      background: #0e2959;
      height: 50px;

      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #b4cded;
      line-height: 14px;
      padding: 10px;
      .firstYw {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
      }
      .secondYw {
        width: 100%;
      }
      .ywLabel {
        margin-right: 10px;
      }
    }
  }
  .rightStauts {
    width: 70%;
    height: 74px;
    border-radius: 4px;
    .statusTitle {
      width: 100%;
      height: 24px;
      background: linear-gradient(
        90deg,
        rgb(40, 82, 155),
        rgba(49, 98, 172, 0.18)
      );
      text-align: left;
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #cfe1f1;
      line-height: 24px;
      border-radius: 4px 4px 0px 0px;
      padding-left: 20px;
    }
    .statusTitleContent {
      background: #0e2959;
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 50px;
      .levelStatus {
        position: relative;
        width: 28px;
        height: 28px;
        text-align: center;
        line-height: 28px;
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #ffffff;
      }

      // .red {
      //   background: url("@/assets/images/oneMap/bzred.png") no-repeat 100% 100%;
      // }
      // .bzdefalut {
      //   background: url("@/assets/images/oneMap/bzdefault.png") no-repeat 100%
      //     100%;
      // }

      // .bzblue {
      //   background: url("@/assets/images/oneMap/bzblue.png") no-repeat 100% 100%;
      // }

      // img {
      //   width: 28px;
      //   height: 28px;
      //   border-radius: 50%;
      // }
      span {
      }
    }
  }
}
.areaPosition {
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #54a5ff;
  margin: 5px 0 10px 0;
  padding-left: 10px;
  .areaImg {
    vertical-align: middle;
    margin-right: 5px;
  }
}
.dutyBox {
  height: 42% !important;
  margin-top: 0 !important;
  .dutyItem {
    height: 25% !important;
  }
}
.today {
  width: 100% !important;
}
.bzInfoBox {
  width: 100% !important;
  // display: block !important;
  flex-direction: column;
  // align-items: center;
  justify-content: space-around;
  .infoItem {
    padding: 10px;
    flex: 1;
    .labelInfo {
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #c2dcfc;
      line-height: 25px;
    }
    .valueInfo {
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #54a5ff;
      line-height: 25px;
    }
    &.flexStart {
      justify-content: flex-start;
    }
  }
}

.mtbox {
  margin-top: 12px;
}
.yidaowei {
  width: 42px;
  height: 18px;
  left: 200px !important;
  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;
}
.phoneNumber {
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #54a5ff;
  line-height: 25px;
}
.bzInfo {
  height: 45% !important;
  margin-bottom: 0 !important;
}
.infoItem {
  display: flex;
  justify-content: space-between;
}
.topContainer {
  height: 40%;
  position: absolute;
  top: 0;
  width: 100%;
  padding: 0 10px;

  .controlBtn {
    cursor: pointer;
    position: absolute;
    right: 30px;
    top: 1px;
    font-size: 12px;
    color: #4aebb0;
    background: transparent;
    padding: 6px;
    border-radius: 5px;
    border: 1px solid #4aebb0;
  }
}
.bottomContainer {
  height: 60%;
  position: absolute;
  top: 40%;
  width: 100%;
  padding: 0 10px;
}
.bottomInfoBox {
  height: 155px;
}
.bottomTable {
  height: calc(100% - 175px);
}

.covers {
  position: relative;
  width: 100% !important;
  height: 100% !important;
  margin: 0px 0;
  background-size: 100% 100%;
}
.cover1-threewithfour {
  // width: 100%;
  height: 100%;
  // background: url("@/assets/images/zkbz/3+4bz/3+4bz.png") no-repeat;
  background-size: 100% 100%;

  .img-item {
    position: absolute;
    width: 36px;
    height: 36px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    transform: translate(-50%, -50%);
  }
  .green {
    // background-image: url("@/assets/images/zkbz/3+4bz/zaixian3+4.png");
  }
  .grey {
    // background-image: url("@/assets/images/zkbz/3+4bz/lixian3+4.png");
  }
  .red {
    // background-image: url("@/assets/images/zkbz/3+4bz/3+4-hong.png");
  }
  .yewei {
    position: absolute;
    top: 180px;
    left: 66px;
  }

  .img1 {
    top: 20%;
    left: 36.2%;
  }

  .img2 {
    top: 27%;
    left: 41.2%;
  }
  .img3 {
    top: 33%;
    left: 47.2%;
  }
  .img4 {
    top: 39%;
    left: 52.2%;
  }
  .img5 {
    top: 53%;
    left: 63.2%;
  }
  .img6 {
    top: 60%;
    left: 69.2%;
  }
  .img7 {
    top: 67%;
    left: 74.2%;
  }
}
.cover2-cgbz-three {
  width: 100%;
  height: 100%;
  // background: url("@/assets/images/zkbz/cgbz/three.png") no-repeat;
  background-size: 100% 100%;

  .img-item {
    position: absolute;
    width: 36px;
    height: 36px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    transform: translate(-50%, -50%);
  }

  .green {
    // background-image: url("@/assets/images/zkbz/cgbz/zaixian.png");
  }
  .grey {
    // background-image: url("@/assets/images/zkbz/cgbz/lixian.png");
  }
  .red {
    // background-image: url("@/assets/images/zkbz/cgbz/changgui-hong.png");
  }

  .img1 {
    top: 30%;
    left: 54.2%;
  }
  .img2 {
    top: 38%;
    left: 61.2%;
  }
  .img3 {
    top: 46%;
    left: 67.2%;
  }
}

.cover2-cgbz-four {
  width: 100%;
  height: 100%;
  //background: url("@/assets/images/zkbz/cgbz/four.png") no-repeat;
  background-size: 100% 100%;

  .img-item {
    position: absolute;
    width: 36px;
    height: 36px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    transform: translate(-50%, -50%);
  }
  .green {
    // background-image: url("@/assets/images/zkbz/cgbz/zaixian.png");
  }
  .grey {
    // background-image: url("@/assets/images/zkbz/cgbz/lixian.png");
  }

  .red {
    // background-image: url("@/assets/images/zkbz/cgbz/changgui-hong.png");
  }

  .img1 {
    top: 26%;
    left: 51.2%;
  }
  .img2 {
    top: 34%;
    left: 58.2%;
  }
  .img3 {
    top: 42%;
    left: 64.2%;
  }
  .img4 {
    top: 50%;
    left: 71.2%;
  }
}
.cover3-yth {
  width: 100%;
  height: 100%;
 //  background: url("@/assets/images/zkbz/ythbz/ythbz.png") no-repeat;
  background-size: 100% 100%;

  .img-item {
    position: absolute;
    width: 36px;
    height: 40px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    transform: translate(-50%, -50%);
  }

  .green {
    // background-image: url("@/assets/images/zkbz/ythbz/zaixian-yitihua.png");
  }
  .grey {
    // background-image: url("@/assets/images/zkbz/ythbz/lixian-yitihua.png");
  }

  .red {
    // background-image: url("@/assets/images/zkbz/ythbz/yitihua-hong.png");
  }

  .img1 {
    top: 66%;
    left: 41.2%;
  }
  .img2 {
    top: 68%;
    left: 46%;
  }
  .img3 {
    top: 71%;
    left: 50.2%;
  }
}
.bengzhan_ToolTip {
  background: rgba(#000000, 0.5);
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;

  .tooltip_box {
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 14px;
    margin-right: 10px;
  }

  .bengzhan_point {
    border-radius: 50%;
    width: 10px;
    height: 10px;

    &.gray {
      background: gray;
    }
    &.red {
      background: red;
    }
    &.green {
      background: green;
    }
  }
}

.cover2-cgbz-two {
  width: 100%;
  height: 100%;
  // background: url("@/assets/images/zkbz/cgbz/two.png") no-repeat;
  background-size: 100% 100%;

  .img-item {
    position: absolute;
    width: 36px;
    height: 36px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    transform: translate(-50%, -50%);
  }
  .green {
    // background-image: url("@/assets/images/zkbz/cgbz/zaixian.png");
  }
  .grey {
   //  background-image: url("@/assets/images/zkbz/cgbz/lixian.png");
  }

  .red {
   //  background-image: url("@/assets/images/zkbz/cgbz/changgui-hong.png");
  }

  .img1 {
    top: 30%;
    left: 57.2%;
  }
  .img2 {
    top: 38%;
    left: 63.2%;
  }
}

.cover2-cgbz-six {
  width: 100%;
  height: 100%;
  // background: url("@/assets/images/zkbz/cgbz/six.png") no-repeat;
  background-size: 100% 100%;

  .img-item {
    position: absolute;
    width: 36px;
    height: 36px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    transform: translate(-50%, -50%);
  }
  .green {
   //  background-image: url("@/assets/images/zkbz/cgbz/zaixian.png");
  }
  .grey {
    // background-image: url("@/assets/images/zkbz/cgbz/lixian.png");
  }

  .red {
   //  background-image: url("@/assets/images/zkbz/cgbz/changgui-hong.png");
  }

  .img1 {
    top: 27%;
    left: 45.2%;
  }
  .img2 {
    top: 33%;
    left: 50.2%;
  }
  .img3 {
    top: 39%;
    left: 56.2%;
  }
  .img4 {
    top: 46%;
    left: 61.2%;
  }
  .img5 {
    top: 53%;
    left: 67.2%;
  }
  .img6 {
    top: 59%;
    left: 72.2%;
  }
}

.cover2-cgbz-seven {
  width: 100%;
  height: 100%;
  // background: url("@/assets/images/zkbz/cgbz/seven.png") no-repeat;
  background-size: 100% 100%;

  .img-item {
    position: absolute;
    width: 36px;
    height: 36px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    transform: translate(-50%, -50%);
  }
  .green {
    // background-image: url("@/assets/images/zkbz/cgbz/zaixian.png");
  }
  .grey {
    // background-image: url("@/assets/images/zkbz/cgbz/lixian.png");
  }

  .red {
    // background-image: url("@/assets/images/zkbz/cgbz/changgui-hong.png");
  }

  .img1 {
    top: 24%;
    left: 42.2%;
  }
  .img2 {
    top: 29%;
    left: 47.2%;
  }
  .img3 {
    top: 36%;
    left: 52.2%;
  }
  .img4 {
    top: 43%;
    left: 58.2%;
  }

  .img5 {
    top: 49%;
    left: 63.2%;
  }

  .img6 {
    top: 56%;
    left: 69.2%;
  }

  .img7 {
    top: 62%;
    left: 74.2%;
  }
}
</style>