<!--资源设施概览-->
<template>
  <div class="overviewComponent">
    <p class="title-p">资源设施概览</p>
    <div class="for-max-big-box back-1" style="margin-top:98px;">
      <img src="@/assets/ZDimages/icon_kxs@1x.png">
      <div>
        <p>空闲</p>
        <p>{{data1}}</p>
        <p>间</p>
      </div>
    </div>
    <div class="for-max-big-box back-2">
      <img src="@/assets/ZDimages/icon_shiyong@1x.png">
      <div>
        <p>使用</p>
        <p>{{data2}}</p>
        <p>间</p>
      </div>
    </div>
    <div class="for-max-big-box back-3">
      <img src="@/assets/ZDimages/icon_weixiu@1x.png">
      <div>
        <p>维修</p>
        <p>{{data3}}</p>
        <p>间</p>
      </div>
    </div>
    <img class="position-left-top" src="@/assets/ZDimages/img_min_icon.png">
    <img class="position-right-top" src="@/assets/ZDimages/img_min_icon.png">
    <img class="position-left-bottom" src="@/assets/ZDimages/img_min_icon.png">
    <img class="position-right-bottom" src="@/assets/ZDimages/img_min_icon.png">
  </div>
</template>
<script>
  import { dashboardsFacilitiesStatusOverview } from "@/api/yiLi";
  export default {
    name: 'overviewComponent',
    data () {
      return {
        data1:'0',
        data2:'0',
        data3:'0',
        overviewSwitchTime:600000,
        overviewTimer:null,
      }
    },
    created(){

    },
    mounted(){
      this.dashboardsFacilitiesStatusOverview();
      this.overviewTimerFunction();
    },
    methods:{
      //设施状态概览
      dashboardsFacilitiesStatusOverview(){
        let self = this;
        let text = window.location.href
        let urlList = text.split('?')[1].split('&')
        let codeData = {}
        urlList.forEach((item) => {
          codeData[item.split('=')[0]] = item.split('=')[1]
        })
        dashboardsFacilitiesStatusOverview({floorid:codeData.floorId}).then(res => {
          for(let i=0;i<res.data.types.length;i++){
            if( res.data.types[i].type == '空闲'){
              self.$set(self,'data1',res.data.types[i].count);
            }else if( res.data.types[i].type == '租用'){
              self.$set(self,'data2',res.data.types[i].count);
            }else if( res.data.types[i].type == '维修中'){
              self.$set(self,'data3',res.data.types[i].count);
            }
          }
        });
      },
      //设施状态概览定时器
      overviewTimerFunction(){
        const self = this;
        self.overviewTimer = window.setInterval(() => {
          overviewUpdates();
        }, this.overviewSwitchTime);
        async function overviewUpdates() {
          self.dashboardsFacilitiesStatusOverview();
        }
      },
    },
    beforeDestroy() {
      //清除定时器
      clearInterval(this.overviewTimer);
    },
    destroyed() {
      //清除定时器
      clearInterval(this.overviewTimer);
    }
  }
</script>
<style scoped lang="scss">
  .overviewComponent{
    width:400px;
    height:512px;
    margin:20px 0 0 20px;
    background-image: url("../../assets/ZDimages/img_zyssgl_bg@1x.png");
    background-size: 100% 100%;
    position: relative;
    .title-p{
      position: absolute;
      width:282px;
      height:36px;
      line-height: 36px;
      color:#fff;
      font-size:18px;
      font-weight: 700;
      font-family: Source Han Sans, Source Han Sans;
      padding-left:24px;
    }
    .for-max-big-box{
      width: 358px;
      height: 100px;
      margin:0 20px 32px 20px;
      display: flex;
      img{
        width:70px;
        height:70px;
        margin:15px 56px 15px 31px;
      }
      div{
        flex:1;
        display: flex;
        margin-right:62px;
        p{
          color:#fff;
          font-size:16px;
          line-height:100px;
        }
      }
    }
    .back-1{
      border: 1px solid transparent;
      border-radius: 10px;
      background-clip: padding-box, border-box;
      background-origin: padding-box, border-box;
      background-image: linear-gradient(to right, #002B5E, #002B5E), linear-gradient(180deg, #FFFFFF, #83E8AB);
      div{
        p:nth-child(2){
          flex:1;
          text-align: right;
          margin-right:20px;
          font-size: 30px;
          font-weight: bold;
          background: -webkit-linear-gradient(#FFFFFF, #00AC45);
          -webkit-background-clip: text;
          color: transparent;
        }
      }
    }
    .back-2{
      border: 1px solid transparent;
      border-radius: 10px;
      background-clip: padding-box, border-box;
      background-origin: padding-box, border-box;
      background-image: linear-gradient(to right, #002B5E, #002B5E), linear-gradient(180deg, #FFFFFF, #84FFFB);
      div{
        p:nth-child(2){
          flex:1;
          text-align: right;
          margin-right:20px;
          font-size: 30px;
          font-weight: bold;
          background: -webkit-linear-gradient(#FFFFFF, #00FFF6);
          -webkit-background-clip: text;
          color: transparent;
        }
      }
    }
    .back-3{
      border: 1px solid transparent;
      border-radius: 10px;
      background-clip: padding-box, border-box;
      background-origin: padding-box, border-box;
      background-image: linear-gradient(to right, #002B5E, #002B5E), linear-gradient(180deg, #FFFFFF, #FFC792);
      div{
        p:nth-child(2){
          flex:1;
          text-align: right;
          margin-right:20px;
          font-size: 30px;
          font-weight: bold;
          background: -webkit-linear-gradient(#FFFFFF, #FFA148);
          -webkit-background-clip: text;
          color: transparent;
        }
      }
    }
    .position-left-top{
      position: absolute;
      left:-15px;
      top:29px;
      width:42px;
      height:42px;
      z-index:1;
    }
    .position-right-top{
      position: absolute;
      right:-15px;
      top:-15px;
      width:42px;
      height:42px;
      z-index:1;
      transform: rotate(90deg);
    }
    .position-left-bottom{
      position: absolute;
      left:-15px;
      bottom:-15px;
      width:42px;
      height:42px;
      z-index:1;
      transform: rotate(270deg);
    }
    .position-right-bottom{
      position: absolute;
      right:-14px;
      bottom:-15px;
      width:42px;
      height:42px;
      z-index:1;
      transform: rotate(180deg);
    }
  }
</style>
