<template>
  <div :class="['legend', sidebarState ? 'open' : '']">
    <div class="legend-menu" @click="toggleMenuHide" v-show="sidebarState"></div>
    <div class="legend-detail">
      <div class="content">
        <div>
          <div class="InfoEquipBox suspensionBox">
            <div class="top">
              <div class="titleTxt">
                <span>基础信息</span>
                <!-- <span>2021-1-03 12:12:00</span> -->
              </div>
              <div class="titleCtrl">
                <i @click="getQxzEle(1)" class="el-icon-refresh"></i>
              </div>
            </div>
            <div class="inner">
              <div class="info">
                <div class="infoItem">
                  <div>
                    <span class="title">环境监测设备</span>
                  </div>
                  <div>
                    <span class="contentInfo">{{qxzName || qxzId}}</span>
                  </div>
                </div>
                <div class="infoItem">
                  <div>
                    <span class="title">可视化设备</span>
                  </div>
                  <div>
                    <span class="contentInfo">{{jkName || jkId}}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="qxzEquipBox suspensionBox">
            <div class="top">
              <div class="titleTxt">
                <span>实时状态</span>
              </div>
              <div class="titleCtrl">
                <i @click="setEleName()" class="el-icon-s-tools"></i>
              </div>
            </div>
            <div class="inner">
              <el-scrollbar :style="{'height':qxzScrollHeight+'px'}">
                <div class="equipList">
                  <div class="equipState" v-for="item in equipEleList" v-bind:key="item.e">
                    <div>
                      <img
                        :src="`../../../../static/images/disasterWarn/qxzIcon/${item.icon}.png`"
                        alt
                      />
                    </div>
                    <div>
                      <div class="val">{{item.num}}{{item.unit}}</div>
                      <div class="name">{{item.name}}</div>
                    </div>
                  </div>
                </div>
              </el-scrollbar>
            </div>
          </div>
          <div class="jkEquipBox suspensionBox">
            <div class="top">
              <div class="titleTxt">
                <span>实时监控</span>
              </div>
              <div class="titleCtrl">
                <img src="../../../../static/images/disasterWarn/enterIcon.png" alt="">
              </div>
            </div>
            <div class="inner">
              <div>
                <div id="videoBon"></div>
              </div>
              <div class="videoCtrl">
                <div class="direc">
                  <div
                    @mousedown="configCamera('move', 0)"
                    @mouseup="stopConfigCamera()"
                    class="upCtr"
                  >
                    <img src="../../../../static/images/jkctrl1.png" alt="">
                  </div>
                  <div
                    @mousedown="configCamera('move', 1)"
                    @mouseup="stopConfigCamera()"
                    class="downCtr"
                  >
                    <img src="../../../../static/images/jkctrl2.png" alt="">
                  </div>
                  <div
                    @mousedown="configCamera('move', 2)"
                    @mouseup="stopConfigCamera()"
                    class="leftCtr"
                  >
                    <img src="../../../../static/images/jkctrl3.png" alt="">
                  </div>
                  <div
                    @mousedown="configCamera('move', 3)"
                    @mouseup="stopConfigCamera()"
                    class="rightCtr"
                  >
                    <img src="../../../../static/images/jkctrl4.png" alt="">
                  </div>
                  <div
                    @click="configCamera('takephoto')"
                    class="rightCtr"
                  >
                    <img src="../../../../static/images/jkctrl5.png" alt="">
                  </div>
                  <div
                    @mousedown="configCamera('move', 8)"
                    @mouseup="stopConfigCamera()"
                    class="rightCtr"
                  >
                    <img src="../../../../static/images/jkctrl6.png" alt="">
                  </div>
                  <div
                    @mousedown="configCamera('move', 9)"
                    @mouseup="stopConfigCamera()"
                    class="rightCtr"
                  >
                    <img src="../../../../static/images/jkctrl7.png" alt="">
                  </div>
                  
                </div>
                <div class="lookPhoto" @click="lookPhoto()">查看图片>></div>
              </div>
              
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import eleList from "../../../../static/js/irrigate/eleList.json"
export default {
  props: ["qxzName","jkName","projectName"],
  components: {},
  data(){
    return {
      sidebarState: false,
      qxzScrollHeight: "",
      equipEleList: [],
      eleList:eleList,
      player:null,
    };
  },
  methods: {
    toggleMenuShow() {
      this.sidebarState = true;
    },
    toggleMenuHide(){
      this.sidebarState = false;
      this.$parent.equipWarnBoxShow();
      if(this.player){
        this.player.stop()
        this.player = ''
      }
    },
    getQxzEle(flag) {
      this.$axios({
        method: "post",
        url: "/api/api_gateway?method=weather.weather.qxz_status",
        data: this.qs.stringify({
          device_id: this.qxzId,
          device_type_id: 5,
          page_size: 1,
          page: 1
        })
      }).then(res => {
        if (res.data.message == "") {
          console.log(res.data.data.counts)
            let arr = new Array();
            let conf = res.data.data.conf;
            let dat = res.data.data.dat;
            for (let i1 in conf) {
              if (conf[i1]) {
                let arr2 = conf[i1].split("#");
                let obj = {};
                obj.e = "e" + i1.slice(1);
                obj.name = arr2[0];
                obj.unit = arr2[1];
                for (let i2 in dat) {
                  if (i1 == i2) {
                    let arr3 = dat[i2].split("#");
                    obj.num = arr3[0] == "-99.99" ? "N/A" : arr3[0];
                    obj.icon = arr3[1];
                    arr.push(obj);
                  }
                }
              }
            }
            arr = arr.sort((a, b) => {
              return Number(a.e.slice(-1)) - Number(b.e.slice(-1));
            });
            this.equipEleList = arr;
            if(flag){
              this.$message({
                message: '刷新成功',
                type: 'success'
              });
            }
            this.renderEle()
        }
      });
    },
    renderEle() {
      this.$nextTick(() => {
        if (this.equipEleList.length <= 2) {
          this.qxzScrollHeight = 60;
        } else if (this.equipEleList.length <= 4) {
          this.qxzScrollHeight = 120;
        } {
          this.qxzScrollHeight = 164;
        }
      });
    },
    setEleName(){
      this.$axios({
        method: "post",
        url: "/api/api_gateway?method=weather.weather.qxz_config",
        data: this.qs.stringify({
          device_id: this.qxzId,
          device_type_id: 5,
          page_size: 1,
          page: 1
        })
      }).then(res => {
        if(res.data.message == ""){
          let arr = new Array();
            let defaultEle = res.data.data.default;
            let conf = res.data.data.conf;
            for (let i1 in defaultEle) {
              if (conf[i1]) {
                let obj = {};
                obj.e = i1;
                if(conf[i1]){
                  var arr2 = conf[i1].split("#");
                }else{
                  var arr2 = defaultEle[i1].split("#");
                }
                obj.name = arr2[0];
                obj.editname = arr2[0];
                obj.unit = arr2[1];
                obj.defaultName = defaultEle[i1].split("#")[0];
                arr.push(obj);
              }
            }
            arr = arr.sort((a, b) => {
              return Number(a.e.slice(-1)) - Number(b.e.slice(-1));
            });
            console.log(arr);
          this.$emit('setQxzEleName',arr)
        }else{
          this.$message({
            message: res.data.message,
            type: 'error'
          });
        }
      })
    },
    getMonitor(){
      if(this.player){
          this.player.stop()
          this.player = ''
        }
        //监控
        this.$axios({
          url: "/api/api_gateway?method=camera.camera_manage.addr_camera",
          method: "POST",
          data: this.qs.stringify({ 
            device_id: this.jkId,
           }),
        }).then((res) => {
          if (res.data.message == "") {
            let data = eval("(" + res.data.data + ")");
            let hlsHd = data.hlsHd;
            // this.jkSrc = hlsHd
            // console.log(this.jkSrc)
            let playHtml = `<video id="myPlayerBox"  muted autoplay  poster='' controls playsInline  webkit-playsinline src="${hlsHd}"  style="width:100%; height:100%;"></video>`;
            console.log(hlsHd);
            document.getElementById("videoBon").innerHTML = playHtml;
            // setTimeout(() => {
            //   console.log(document.getElementById("myPlayerBox"));
              this.player = new EZUIPlayer("myPlayerBox");
            //   this.player.play();
            //   // let player = videojs('myPlayerBox')
            //   // player.src({ src: hlsHd, type: 'application/x-mpegURL' })
            //   // player.play()
            // }, 1000);
          }
        });
    },
    lookPhoto(){
      this.$router.push('/plantGuard/warnPhoto')
    },
    //关闭方向
    stopConfigCamera() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=camera.camera_manage.ctrl_camera",
        data: this.qs.stringify({
          device_id: this.jkId,
          ctrl: "stop",
        }),
      });
    },
    //上下左右和拍照
    configCamera(ctrl, movenum) {
      if (ctrl == "takephoto") {
        this.$axios({
          method: "POST",
          url: "/api/api_gateway?method=camera.camera_manage.camera_takephoto",
          data: this.qs.stringify({
            device_id: this.jkId,
            ctrl: ctrl,
          }),
        }).then((res) => {
          if (res.data.code == 200) {
            this.$message({
              type:'success',
              message:"拍照成功"
            })
          } else {
            this.$message({
              type:'error',
              message:"设备网络异常!"
            })
          }
        });
      } else {
        //上下左右、放大、缩小
        this.$axios({
          method: "POST",
          url: "/api/api_gateway?method=camera.camera_manage.ctrl_camera",
          data: this.qs.stringify({
            device_id: this.jkId,
            ctrl: ctrl,
            movenum: movenum,
          }),
        }).then((res) => {
          if (res.data) {
            
          } else {
            this.$message({
              type:'error',
              message:"设备网络异常!"
            })
          }
        });
      }
    },
  },
  computed:{
    qxzId(){
      return this.$store.state.qxz_wran_id
    },
    jkId(){
      return this.$store.state.jk_wran_id
    },
  },
  mounted() {
    // this.getQxzEle()
    // this.getMonitor()
  },
  destroyed() {
     if(this.player){
          this.player.stop()
          this.player = ''
        }
  }, //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
.legend {
  position: absolute;
  top: 10px;
  bottom: 0px;
  right: 0px;
  display: flex;
  align-items: flex-start;
  z-index: 9;
  .legend-menu {
    width: 27px;
    height: 103px;
    cursor: pointer;
    margin-top: calc(50vh - 120px);
    background: url("../../../../static/images/disasterWarn/sliderBtnBj.png")
      no-repeat center;
    i {
      transition: 0.5s;
    }
  }
  .legend-menu:hover {
    opacity: 1;
  }
  .legend-detail {
    transition: 0.8s;
    width: 0px;
    background: #fff;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    color: #212121;
    background: url("../../../../static/images/disasterWarn/sliderBj.png");
    .content {
      padding: 10px 20px 20px;
      box-sizing: border-box;
      height: 100%;
    }
  }
}
.legend.open {
  .legend-menu {
    opacity: 1;
    border-radius: 4px;
  }
  .legend-detail {
    width: 400px;
  }
}
// 悬浮框样式
.suspensionBox {
  overflow: hidden;
  .top {
    display: flex;
    justify-content: space-between;
    color: #fff;
    align-items: center;
    padding: 13px 5px;
    border-bottom: 1px solid #5c5c5c;
    .titleTxt{
      font-size: 14px;
      position: relative;
      :nth-child(2){
        font-size: 12px;
      }
      &::after{
        position: absolute;
        content: '';
        width: 30px;
        height: 4px;
        background: #04d5e8;
        border-radius: 3px;
        left: 0px;
        bottom: -13px;
      }
    }
    i {
      color: #04d5e8;
      cursor: pointer;
      font-size: 20px;
    }
  }
}
.popupInner {
  position: absolute;
  right: 0;
  top: 12px;
  z-index: 200;
}
.InfoEquipBox{
  .info{
    display: flex;
    flex-wrap: wrap;
    >div{
      display: flex;
      width: 100%;
      >div{
        &:nth-child(1){
          width: 89px;
          text-align: center;
        }
        &:nth-child(2){
          width: 77%;
        }
        margin-top: 20px;
        .title{
          color: #92c2f3;
          border: 1px solid #92c2f3;
          padding: 3px 5px;
          display: block;
          vertical-align: middle;
        }
        .contentInfo{
          color: #92c2f3;
          background: #21456b;
          padding: 5px 5px;
          display: block;
          vertical-align: middle;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          margin-left: 10px;
        }
      }
      
    }
  }
}
.qxzEquipBox {
  color: #fff;
  .top {
    .uptime {
      color: #eee;
    }
    .historyBtn {
      border: 1px solid #00c2ff;
      color: #00c2ff;
      border-radius: 14px;
      padding: 2px 4px;
      cursor: pointer;
    }
  }
  .inner {
    .el-scrollbar {
      // height: 198px;
      /deep/.el-scrollbar__wrap {
        overflow-x: hidden;
      }
    }
    .equipList {
      display: flex;
      flex-wrap: wrap;
      padding-bottom: 10px;
      .equipState {
        width: 50%;
        display: flex;
        // justify-content: center;
        align-items: center;
        margin-top: 10px;
        > div:first-child {
          margin-right: 5px;
        }
        .val {
          font-size: 14px;
          background-image: -webkit-linear-gradient(bottom, #069dff, #09fdff);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          font-weight: 700;
        }
        .name {
          color: #92c2f3;
          width: 70px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}
.jkEquipBox{
  .inner{
    background: #1e2435;
  }
  #videoBon{
    margin: 20px 0 0;
  }
  .videoCtrl{
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #0096ff;
    .lookPhoto{
      cursor: pointer;
    }
  }
  .direc{
    display: flex;
    justify-content: space-around;
    justify-content: right;
    img{
      width: 30px;
      cursor: pointer;
      margin: 0 3px;
    }
  }
}

</style>