<!--使用率排行-->
<template>
  <div class="usageRateComponent">
    <p class="title-p">设施使用率排行</p>
    <!--<dv-scroll-board :config="config" style="width:470px;height:435px" v-if="config.data[0]"/>-->
    <div class="for-max-big-box">
      <div class="for-title-box">
        <p>设施房间</p>
        <p>使用人次</p>
        <p>使用率</p>
      </div>
      <div class="for-big-box" v-for="(item,index) in selectedItems" :key="index">
        <p :class="item.id=='0'?'one-p':(item.id=='1'?'tow-p':'none-p')"><span>{{item.id != '0' && item.id != '1'?item.id:''}}</span></p>
        <p>{{item.name}}</p>
        <p>{{item.num}}</p>
        <p>{{item.value}}</p>
      </div>
    </div>
    <!--<p class="position-null-p" v-if="!config.data[0]">暂无数据</p>-->
    <p class="position-null-p" v-if="!selectedItems[0]">暂无数据</p>
    <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 { dashboardsResearchUsage } from '@/api/yiLi'
  import { getFloorMap } from '@/utils/mapList'
  export default {
    name: 'usageRateComponent',
    data() {
      return {
        config: {
          rowNum: 7,
          headerBGC: 'rgba(0,66,138,0.5)',
          oddRowBGC: 'rgba(0,66,138,0.0)',
          evenRowBGC: 'rgba(0,66,138,0.0)',
          header: ['', '设施房间', '使用人次', '使用率'],
          carousel:'page',
          data: [
            // ['<span class="span_1"><span></span></span>','行1列1', '行1列2', '行1列3'],
            // ['<span class="span_2"><span></span></span>','行2列1', '行2列2', '行2列3'],
            // ['<span class="span_3"><span></span></span>','行3列1', '行3列2', '行3列3'],
            // ['<span class="span_num"><span>4</span></span>','行4列1', '行4列2', '行4列3'],
            // ['<span class="span_num"><span>5</span></span>','行4列1', '行4列2', '行4列3'],
            // ['<span class="span_num"><span>6</span></span>','行4列1', '行4列2', '行4列3'],
            // ['<span class="span_num"><span>7</span></span>','行4列1', '行4列2', '行4列3'],
            // ['<span class="span_num"><span>8</span></span>','行4列1', '行4列2', '行4列3'],
            // ['<span class="span_num"><span>9</span></span>','行4列1', '行4列2', '行4列3'],
          ]
        },
        usageSwitchTime:600000,
        usageTimer:null,
        roomNames:[],
        maxList:[],
        currentIndex:0,
        selectedItems:[],
        timer:null,
      }
    },
    created() {

    },
    mounted() {
      this.initialize();
    },
    methods: {
      initialize(){
        let text = window.location.href
        let urlList = text.split('?')[1].split('&')
        let codeData = {}
        urlList.forEach((item) => {
          codeData[item.split('=')[0]] = item.split('=')[1]
        })
        let list = getFloorMap(codeData.floorId)
        let roomName = ''
        for(let i=0;i<list.list.length;i++){
          if(i==0){
            roomName = roomName + 'roomNames=' +list.list[i].roomNumName
          }else{
            // roomName = roomName + '&roomNames=' +list.list[i].roomNumName
            roomName = roomName + ',' +list.list[i].roomNumName
          }
        }
        this.$set(this,'roomNames',roomName);
        this.dashboardsResearchUsage()
        this.overviewTimerFunction();
      },
      dashboardsResearchUsage() {
        let self = this
        this.$set(this.config,'data',[]);
        dashboardsResearchUsage(this.roomNames).then(res => {
          let list = [];
          for (let i = 0; i < res.data.length; i++) {
            let obj = {
              id:i,
              name: res.data[i].roomNumValue,
              num: res.data[i].usageCount,
              value: this.accMul(res.data[i].usageRate,100).toFixed(0)+'%'
              // value: res.data[i].usageRate
            }
            list.push(obj)
          }
          this.$set(this,'maxList',JSON.parse(JSON.stringify(list)));
          this.startTimer();
          // let list = []
          // for (let i = 0; i < res.data.length; i++) {
          //   let obj = {
          //     name: res.data[i].roomNumValue,
          //     num: res.data[i].usageCount,
          //     value: this.accMul(res.data[i].usageRate,100).toFixed(0)+'%'
          //     // value: res.data[i].usageRate
          //   }
          //   list.push(obj)
          // }
          // // list = this.sortByPercentageDesc(list)
          // let newList = [];
          // for(let i=0;i<list.length;i++){
          //   if(i==0){
          //     newList.push(['<span class="span_1"><span></span></span>',list[i].name, list[i].num+'', list[i].value])
          //   }else if(i==1){
          //     newList.push(['<span class="span_2"><span></span></span>',list[i].name, list[i].num+'', list[i].value])
          //   }else if(i==1){
          //     newList.push(['<span class="span_3"><span></span></span>',list[i].name, list[i].num+'', list[i].value])
          //   }else{
          //     newList.push(['<span class="span_num"><span>'+(i+1)+'</span></span>',list[i].name, list[i].num+'', list[i].value])
          //   }
          // }
          // this.$set(this.config,'data',newList)
        })
      },
      getNextItems() {
        // 计算需要获取的项目数量
        const remaining = this.maxList.length - this.currentIndex;
        const takeCount = Math.min(8, remaining);
        // 获取项目
        const newItems = this.maxList.slice(this.currentIndex, this.currentIndex + takeCount);
        this.selectedItems = [...newItems];
        // 更新索引
        this.currentIndex += takeCount;
        // 如果到达列表末尾，重置索引
        if (this.currentIndex >= this.maxList.length) {
          this.currentIndex = 0;
        }
        // 如果获取的数量不足8个，补充获取剩余部分
        // if (takeCount < 8) {
        //   const remainingItems = this.maxList.slice(0, 8 - takeCount);
        //   this.selectedItems = [...remainingItems];
        //   this.currentIndex = 8 - takeCount;
        //   console.log('selectedItems2',this.selectedItems)
        // }
      },
      startTimer() {
        // 先立即获取一次
        this.getNextItems();
        clearInterval(this.timer);
        // 设置定时器每10秒获取一次
        this.timer = setInterval(() => {
          this.getNextItems();
        }, 10000);
      },
      stopTimer() {
        if (this.timer) {
          clearInterval(this.timer);
          this.timer = null;
        }
      },







      calculatePercentage(numerator, denominator, options = {}) {
        if (typeof numerator !== 'number' || typeof denominator !== 'number') {
          throw new TypeError('分子和分母必须是数字')
        }
        if (denominator === 0) {
          throw new Error('分母不能为零')
        }
        const { decimal = 2, returnString = true } = options
        const percentage = (numerator / denominator) * 100
        const rounded = Math.round(percentage * Math.pow(10, decimal)) / Math.pow(10, decimal)
        return returnString ? `${rounded}%` : rounded
      },
      parsePercentage(percentStr) {
        return parseFloat(percentStr.replace('%', ''))
      },
      sortByPercentageDesc(arr, prop = 'value') {
        return [...arr].sort((a, b) => {
          const valA = this.parsePercentage(a[prop])
          const valB = this.parsePercentage(b[prop])
          return valB - valA // 降序排序
        })
      },
      //设施状态概览定时器
      overviewTimerFunction(){
        const self = this;
        self.usageTimer = window.setInterval(() => {
          usageUpdates();
        }, this.usageSwitchTime);
        async function usageUpdates() {
          self.dashboardsResearchUsage();
        }
      },
    },
    beforeDestroy() {
      //清除定时器
      clearInterval(this.usageTimer);
    },
    destroyed() {
      //清除定时器
      clearInterval(this.usageTimer);
    }
  }
</script>
<style scoped lang="scss">
  .usageRateComponent {
    width: 530px;
    height: 512px;
    margin: 20px 0 0 20px;
    background-image: url("../../assets/ZDimages/img_sssylph@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;
    }
    .position-null-p {
      position: absolute;
      left: 230px;
      top: 240px;
      color: #dedede;
      font-size: 16px;
    }
    .position-left-top {
      position: absolute;
      left: -15px;
      top: 28px;
      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);
    }
    ::v-deep .dv-scroll-board {
      margin: 54px 0 0 30px;
      .header {
        .header-item {
          width: 137px !important;
        }
        .header-item:nth-child(1) {
          width: 50px !important;
        }
        .header-item:nth-child(3) {
          text-align: center;
        }
        .header-item:nth-child(4) {
          text-align: right;
        }
      }
      .row-item {
        height: 50px !important;
        line-height: 50px !important;
        border-bottom: 1px dashed rgba(216, 216, 216, 0.1);
        .ceil {
          width: 137px !important;
        }
        .ceil:nth-child(1) {
          width: 50px !important;
        }
        .ceil:nth-child(3) {
          text-align: center;
        }
        .ceil:nth-child(4) {
          text-align: right;
        }
      }
      .span_1 {
        display: inline-block;
        width: 24px;
        height: 30px;
        margin: 10px 0 0 0;
        background-image: url("../../assets/ZDimages/img_pm_a@1x.png");
        background-size: 100% 100%;
      }
      .span_2 {
        display: inline-block;
        width: 24px;
        height: 30px;
        margin: 10px 0 0 0;
        background-image: url("../../assets/ZDimages/img_pm_b.png");
        background-size: 100% 100%;
      }
      .span_3 {
        display: inline-block;
        width: 24px;
        height: 30px;
        margin: 10px 0 0 0;
        background-image: url("../../assets/ZDimages/img_pm_c@1x.png");
        background-size: 100% 100%;
      }
      .span_num {
        display: inline-block;
        width: 24px;
        height: 30px;
        span {
          display: inline-block;
          width: 20px;
          height: 20px;
          line-height: 20px;
          background-color: #0E52C3;
          border: 1px solid #0576FF;
          border-radius: 50%;
          text-align: center;
        }
      }
    }
    .for-max-big-box{
      width:470px;
      height:440px;
      margin:54px 0 0 30px;
      .for-title-box{
        display: flex;
        background: rgba(0,66,138,0.5);
        height:40px;
        line-height:40px;
        font-size: 14px;
        text-align: center;
        /*font-family: Source Han Sans, Source Han Sans;*/
        font-weight: 400;
        p:nth-child(1){
          width:176px;
        }
        p:nth-child(2){
          width:202px;
        }
        p:nth-child(3){
          width:92px;
        }
      }
      .for-big-box{
        display: flex;
        border-bottom: 2px dashed rgba(216,216,216,0.1);
        .one-p{
          span{
            display: inline-block;
            width: 24px;
            height: 30px;
            margin: 10px 0 0 0;
            background-image: url("../../assets/ZDimages/img_pm_a@1x.png");
            background-size: 100% 100%;
          }
        }
        .tow-p{
          span{
            display: inline-block;
            width: 24px;
            height: 30px;
            margin: 10px 0 0 0;
            background-image: url("../../assets/ZDimages/img_pm_b.png");
            background-size: 100% 100%;
          }
        }
        .none-p{
          span{
            text-align: center;
            display: inline-block;
            width:22px;
            height:22px;
            line-height: 22px;
            background: #0E52C3;
            border-radius: 50%;
            border: 1px solid #0576FF;
            margin: 9px;
          }
        }
        p{
          height:48px;
          line-height:48px;
          font-size: 14px;
          text-align: center;
        }
        p:nth-child(1){
          width:40px;
          margin-right:30px;
        }
        p:nth-child(2){
          width:106px;
          text-align: left;
        }
        p:nth-child(3){
          width:202px;
        }
        p:nth-child(4){
          width:92px;
        }
      }
    }
  }
</style>
