<template>
  <div class="bpdevicestutas">
    <div class="donline donline2">
      <!-- <h5>表面位移在线离线状态</h5> -->
      <div class="online online1">
        <div :class="[equipStatus == 1 ? '' : 'active']">
          <h6>当前设备在线</h6>
          <span class="span1"></span>
        </div>
        <br />
      </div>
    </div>
    <div class="donline donline1">
      <!-- <h5>基准站在线离线状态</h5> -->
      <div class="online online1">
        <!-- <div>
                  <h6>当前设备在线</h6>
                  <span class="span1"></span>
                </div> -->
        <div :class="[equipStatus == 0 ? '' : 'active']">
          <h6 class="bph61">当前设备离线</h6>
          <span class="span2"></span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { EquipState } from "@/api/bigscreen/index.js";
export default {
  name: "bpdevicestutas",
  components: {},
  props: ["air"],
  data() {
    return {
      settime: 60 * 1000 * 30, //定时器时间
      equipStatus: null,
    };
  },
  watch: {
    air(newValue, oldValue) {
      if (newValue !== 1) {
        this.destroytime();
      } else {
        this.settime = 60 * 1000 * 10;
        this.onlineStatus();
      }
    },
  },
  created() {
    this.$nextTick(function () {});
  },
  mounted() {
    this.$nextTick(function () {
      // console.log(this.air, "air");
      this.onlineStatus();
    });
  },
  methods: {
    //边坡设备在线状态
    onlineStatus() {
      let that = this;
      this.bpStutasList = [];
      let hjjcdata = [];
      let items = [];
      let tempTimer = this.settime;
      (function reqData() {
        clearTimeout(this.timeoutFalg);
        EquipState()
          .then((res) => {
           
            // console.log(res.data, "边坡设备在线状态");
            this.equipStatus = res.data;
          })
          .then(() => {
            this.timeoutFalg = setTimeout(reqData.bind(this), tempTimer);
          });
      }.bind(this)());
    },
    destroytime() {
      clearTimeout(this.timeoutFalg);
      this.settime = null;
    },
  },
  // beforeRouteLeave(to, form, next) {
  //   clearTimeout(this.timeoutFalg);
  //   next();
  // },
  destroyed() {
    clearTimeout(this.timeoutFalg);
  },
};
</script>
<style scoped lang="scss">
.donline {
  width: 500px;
  height: 100px;
  margin: 0 auto;
  margin-top: 20px;
  h5 {
    font-size: 20px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #3dfbeb;
  }
  .online {
    div {
      width: 236px;
      height: 63px;
      margin-left: 6px;
      background-image: url("~@/assets/images/bpdevmsg.png");
      background-repeat: no-repeat;
      background-position: 100%;
      float: left;
      margin-top: 6px;
      position: relative;
      opacity: 1;
      span {
        width: 47px;
        height: 42px;
        position: absolute;
        left: 6%;
        top: 12px;
      }
      .span1 {
        background-image: url("~@/assets/images/bpjzz.png");
        background-repeat: no-repeat;
        background-position: 100%;
      }
      .span2 {
        background-image: url("~@/assets/images/alarm.png");
        background-repeat: no-repeat;
        background-position: 100%;
      }
      h6 {
        position: absolute;
        left: 29%;
        top: 18px;
        font-size: 24px;
        font-family: Source Han Sans CN;
        // font-weight: bold;
        color: #3dfbeb;
      }
      .bph61 {
        color: #eadb1f;
      }
    }
    .active {
      opacity: 0.3;
    }
  }
}

.donline2 {
  h5 {
    color: #0cbbfc;
  }
  .online {
    div {
      .span1 {
        background-image: url("~@/assets/images/bpbmwy.png");
        background-repeat: no-repeat;
        background-position: 100%;
      }
    }
  }
}
</style>