<template>
  <div class="boxxontent">
    <div class="title">
      <div><span>业务管理数据</span></div>
    </div>
    <div class="list" v-if="showDom">
      <div class="li">
        <div><NumberGrow :value="sumProjects"></NumberGrow></div>
        <div>总小区数</div>
      </div>
      <div class="li">
        <div><NumberGrow :value="sumRoom"></NumberGrow></div>
        <div>房间总数(间)</div>
      </div>
      <div class="li">
        <div><NumberGrow :value="sumCard"></NumberGrow></div>
        <div>总人数</div>
      </div>
      <div class="li">
        <div><NumberGrow :value="sumCard"></NumberGrow></div>
        <div>签约人数</div>
      </div>
      <div class="li">
        <div><NumberGrow :value="sumOpenlock"></NumberGrow></div>
        <div>开锁总次数(次)</div>
      </div>
      <div class="li">
        <div><NumberGrow :value="todayOpen"></NumberGrow></div>
        <div>今日开锁总数(次)</div>
      </div>
      <div class="li" v-for="(item,index) in leasesStaticList" :key="index">
        <div><NumberGrow :value="item.total"></NumberGrow></div>
        <div>{{item.lable}}(个)</div>
      </div>
    </div>
  </div>
</template>

<script>
  // import Chart from './chart.vue'
  import NumberGrow from "../../NumberGrow.vue"
  import {
    httpGet
  } from "../../../../api";
  export default {
    data() {
      return {
        colors:[
          {color: '#01bd8d', percentage: 99},
          {color: '#da0051', percentage: 1},
        ],
      cdata: {
        xData: [
          "电量(0-20%)",
          "电量(20-40%)",
          "电量(40-60%)",
          "电量(60-80%)",
          "电量(80-100%)",
        ],
        seriesData: [
          { value: 0, name: "电量(0-20%)" },
          { value: 0, name: "电量(20-40%)" },
          { value: 0, name: "电量(40-60%)" },
          { value: 0, name: "电量(60-80%)" },
          { value: 0, name: "电量(80-100%)" },
        ],
      },
        collectUS:{},
        sumRoom:0,
        sumProjects: 0,
        sumOpenlock:0,
        sumCard:0,
        todayOpen:0,
        statisticsDate:{
          seriesData:{
            openTotal:0,
            closeTotal:0,
          }
        },
        alertTotal:0,
        showDom:true,
        timer:null,
        leasesStaticList:[],
      };
    },
    components: {
      // Chart,
      NumberGrow
    },
    created() {
      let statisticsDate = JSON.parse(localStorage.getItem('statisticsDate'))
      this.statisticsDate=statisticsDate
      this.collectUS=statisticsDate.collectUS
      this.sumProjects = statisticsDate.seriesData.projects
      for(let key in statisticsDate.collectOpenLock){
        let i = key.indexOf('allCount')
        if(i!=-1){
          this.sumOpenlock+=statisticsDate.collectOpenLock[key]
        }
      }
      for(let t in statisticsDate.collectUS){
        let l = t.indexOf('card')
        if(l!=-1){
          this.sumCard+=statisticsDate.collectUS[t]
        }
        let p = t.indexOf('site')
        if(p!=-1){
          this.sumRoom+=statisticsDate.collectUS[t]
        }
        let q=t.indexOf('lock')
        if(q!=-1){
          this.alertTotal+=statisticsDate.collectUS[t]
        }
      }
      httpGet('',this.$api.getLeasesStatusstatistics).then(res=>{
        if(res.success){
          let list = res.data
          list.map(li=>{
            if(li.value === 0){
              li.lable = '待签约'
            }else if(li.value === 1){
              li.lable = '已签约'
            }else if(li.value === 2){
              li.lable = '已欠费'
            }else if(li.value === 3){
              li.lable = '已退租'
            }else if(li.value === 4){
              li.lable = '已删除'
            }else{
              li.lable = ''
            }
          })
          this.leasesStaticList = list
        }
      })
      if(statisticsDate.weekopenlock[statisticsDate.weekopenlock.length-1]){
        this.todayOpen=statisticsDate.weekopenlock[statisticsDate.weekopenlock.length-1].count
      }
    },
    mounted() {
      // this.setData();
      let that=this
      this.timer=setInterval(function(){
        that.showDom=false
        that.setShow()
      },10000)
    },
    methods: {
      setShow(){
        this.$nextTick(()=>{
          this.showDom=true
        })
      },
    // 获取设备概况
    getcard() {

    },
    },
    beforeRouteLeave(to, from, next) {
      clearInterval(this.timer)
      next()
    },
    beforeDestroy() {
      clearInterval(this.timer)
    },
  };
</script>

<style lang="scss" scoped>
  .boxxontent {
    margin: 10vh 20px 2vh;
    box-sizing: border-box;
  }

  .boxxontent .title {
    // background: linear-gradient(to right, #042f89, transparent);
    background: linear-gradient(to right, #0074ff, #00c2ff, #00dfff, #01afff);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    padding: .4vw 1vw;
    text-align: center;
  }

  .boxxontent .title div {
    // background: linear-gradient(to right, #007aff, #01cdf0 20%, #028ae1 80%);
    // -webkit-text-fill-color: transparent;
    // -webkit-background-clip: text;
    font-size: 1.6vw;
    line-height: 1.6vw;
    font-weight: bold;
  }
  .sunmDevice{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    width: 90%;
    margin: .6vh 0;

  }
   .sunmDevice .progbox{
     position: relative;
     display: inline-block;
     text-align: center;
   }
  .sunmDevice .progbox >>> .el-progress__text{
    color: #fff;
    font-size: .8vw !important;
  }
  .sunmDevice .progbox >>> .el-progress-circle{
    width: 6vw !important;
    height: 6vw !important;
  }
   .sunmDevice .progbox>span{
     position: absolute;
     bottom: .6vh;
     left: 50%;
     transform: translateX(-50%);
     color: #fff;
     font-size: .8vw;
     width: 100%;
   }
  .list{
    border-radius: .1rem;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    margin-top: 3vh;
  }
  .list .li{
    width: 8.2vw;
    font-size: .8vw;
    line-height: 1.2vw;
    padding: .4vw 1vw;
    margin: 0 0 1vw;
    background-image: url(../../../../assets/img/textbg.png);
    background-size: 100% 100%;
  }
  .list .li>div:nth-child(1){
    font-size: 1.2vw;
  }
  .list .li:first-child{
    color: #0dde79;
  }
  .list .li:nth-child(2){
    color: #0dcad8;
  }
  .list .li:nth-child(3){
    color: #ffcb20;
  }
  .list .li:nth-child(4){
    color: #8045cf;
  }
  .list .li:nth-child(5){
    color: #da0051;
  }
  .list .li:nth-child(6){
    color: #5ff;
  }
  .list .li:nth-child(7){
    color: #0dde79;
  }
  .list .li:nth-child(8){
    color: #ffcb20;
  }
  .list .li:nth-child(9){
    color: #ffcb20;
  }
  .list .li:nth-child(10){
    color: #ffcb20;
  }
</style>
