<template>
  <div class="cointan">
    <div class="title1">
      <img src="../assets/index/title_icon.png" style="width:22px;height:22px;float: left;">
      <div style="margin-left:25px;line-height: 22px;">宿舍上个月总用能统计</div>
    </div>
    <!-- 用电量 -->
    <div class="dianNum">{{electPower}}</div>
    <div class="dianText">用电量（度）</div>
    <div class="dianImg"></div>
    <!-- 用电费用 -->
    <div class="dianNum" style="margin-left:118px;color:rgba(8, 184, 240, 1)">{{electMoney}}</div>
    <div class="dianText" style="margin-left:118px">用电费用（元）</div>
    <div class="dianImg2"></div>
    <!-- 用水量 -->
    <div class="dianNum" style="margin-left:228px;color:rgba(53, 245, 73, 1)">{{waterPower}}</div>
    <div class="dianText" style="margin-left:228px">用水量（吨）</div>
    <div class="dianImg3"></div>
    <!-- 用水费用 -->
    <div class="dianNum" style="margin-left:327px;color:rgba(245, 209, 65, 1)">{{waterMoney}}</div>
    <div class="dianText" style="margin-left:327px">用水费用（元）</div>
    <div class="dianImg4"></div>
  </div>
</template>

<script>
export default {
  name: 'leftTop',
  props: {
    msg: String
  },
  data() {
    return {
      month:'',//当前月份
      electPower:'',//用电量
      electMoney:'',//用电价格
      waterPower:'',//用水量
      waterMoney:'',//用水价格
      build:'',//楼栋
      token:'',//请求头token
    }
  },
  mounted(){
    this.token=sessionStorage.getItem('token')
    this.build=sessionStorage.getItem('build')
    this.getNowDate()
  },
  beforeDestroy() {
    // 页面关闭清除定时器
    clearInterval(this.t9)
  },
  methods:{
    //上个月能耗
    getnenghao(){
      this.electPower=''
      this.electMoney=''
      this.waterPower=''
      this.waterMoney=''
      this.$axios.get('/auto/cold-water/all?build='+this.build.split(",")[0]+'栋&build='+this.build.split(",")[1]+'栋',
      {
        headers: {
        "token": this.token,
        },
      }
      ).then(res => {
        if (res.data.success) {
          for(var i=0;i<res.data.data.length;i++){
            if(this.month==res.data.data[i].dateTime){
              this.electPower=res.data.data[i].electricTotalPower
              this.electMoney=res.data.data[i].electricTotalMoney
              this.waterPower=res.data.data[i].coldWaterTotalPower
              this.waterMoney=res.data.data[i].coldWaterTotalMoney
            }
          }
        }else{
          this.$message.error('捕捉异常：' + res.data.msg)
          this.$router.replace('/'); //跳转到首页
        }
      })
    },
    //获取当前时间
    getNowDate() {
      var _this = this;
      // this.timer = setInterval(function() {
        var aData = new Date();
        // console.log(aData) //Wed Aug 21 2019 10:00:58 GMT+0800 (中国标准时间)
        // this.value = aData.getFullYear() + "-" + (aData.getMonth() + 1) + "-" + aData.getDate();
        var month = aData.getMonth() < 9 ? "0" + (aData.getMonth() + 1-1) : (aData.getMonth()-1) + 1;
        var date = aData.getDate() <= 9 ? "0" + aData.getDate() : aData.getDate();
        var Hour = aData.getHours() <= 9 ? "0" + (aData.getHours()) : aData.getHours();
        var Miunte = aData.getMinutes() <= 9 ? "0" + (aData.getMinutes()) : aData.getMinutes();
        var Seconds = aData.getSeconds() <= 9 ? "0" + (aData.getSeconds()) : aData.getSeconds();
        var week = "星期" + "日一二三四五六".charAt(aData.getDay());
        // console.log(aData.getTime())
        _this.month = aData.getFullYear() + "-" + month;
        _this.week = week
        this.getnenghao()
        this.t9 = setInterval(function() {
          this.getnenghao()
        }, 1296000000);
      // }, 86400000);
    },
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.cointan{
  width: 428px;
  height: 203px;
  background-image: url('../assets/lefttop/background.png');
  background-size: 100%;
  
}
.title1{
  position: absolute;
  margin: 9px 0 0 10px;
  font-size: 20px;
  font-family : '优设标题黑';
  color: rgba(255, 255, 255, 1);
  font-weight: 400;
}
// 用电量
.dianNum{
  position: absolute;
  margin: 84px 0 0 21px;
  width: 53px;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  color: rgba(49, 235, 227, 1);
  font-family : '优设标题黑';
}
.dianText{
  position: absolute;
  margin: 106px 0 0 21px;
  font-size: 11px;
  font-weight: 400;
  color: rgba(221, 221, 221, 0.7);
}
.dianImg{
  position: absolute;
  margin: 130px 0 0 28px;
  width: 52px;
  height: 30px;
  background-image: url('../assets/lefttop/dianliang.png');
  background-size: 100%;
}
.dianImg2{
  position: absolute;
  margin: 130px 0 0 132px;
  width: 52px;
  height: 30px;
  background-image: url('../assets/lefttop/dianfei.png');
  background-size: 100%;
}
.dianImg3{
  position: absolute;
  margin: 130px 0 0 237px;
  width: 52px;
  height: 30px;
  background-image: url('../assets/lefttop/shuiliang.png');
  background-size: 100%;
}
.dianImg4{
  position: absolute;
  margin: 130px 0 0 342px;
  width: 52px;
  height: 30px;
  background-image: url('../assets/lefttop/shuifei.png');
  background-size: 100%;
}
</style>
