<template>
  <div class="instrumentLeisureComponent">
    <title-page-img-components :propsData="propsData"></title-page-img-components>
    <div class="eCharts-max-big-box">
      <div class="instrumentLeisure-for-big-box" v-for="(item,index) in dataList" :key="index">
        <p class="for-index"
           :class="index==0?'colorA':(index==1?'colorB':(index==2?'colorC':(index==3?'colorD':(index==4?'colorE':''))))"
        >{{index+1}}</p>
        <p class="for-name">{{item.deviceName}}</p>
        <div class="for-value">
          <p>预约时长</p>
          <p>{{item.orderDuration}}</p>
        </div>
        <div class="for-num">
          <p>预约次数</p>
          <p>{{item.orderNum}}</p>
        </div>
      </div>
      <p v-if="!dataList[0]" style="color:#dedede;font-size:18px;line-height:200px;text-align: center;">暂无数据</p>
    </div>
  </div>
</template>
<script>
  import {
    reportReportBsEquipAppointTopList
  } from "@/api/index";
  import titlePageImgComponents from '@/components/titlePageImgComponents.vue'
  export default {
    name: 'instrumentLeisureComponent',
    components: {
      titlePageImgComponents
    },
    data () {
      return {
        propsData:{
          title:'大仪预约排行',
          checkType:'instrumentLeisureComponent',
        },
        eChartsTimer:null,
        dataList:[],
      }
    },
    created(){

    },
    mounted() {
      this.timedRefresh();
    },
    methods: {
      timedRefresh(){
        let self = this;
        self.getData();
        //定时动画
        window.clearInterval(self.eChartsTimer);
        self.eChartsTimer = setInterval(function(){
          self.getData();
        },1000*30);
      },
      getData(){
        reportReportBsEquipAppointTopList().then(response => {
          this.$set(this,'dataList',response.data);
        })
      },
    },
    beforeDestroy() {
      //清除定时器
      window.clearInterval(this.eChartsTimer)
    },
    destroyed() {
      //清除定时器
      window.clearInterval(this.eChartsTimer)
    }
  }
</script>
<style scoped lang="scss">
  .instrumentLeisureComponent{
    height: 401px;
    width:680px;
    .eCharts-max-big-box {
      height:339px;
      background: linear-gradient(180deg, rgba(4, 117, 129, 0.2) 0%, rgba(0, 15, 22, 0) 100%);
      overflow: hidden;
      position: relative;
      padding:20px 0 0 20px;
      .instrumentLeisure-for-big-box:nth-child(odd){
        background-color: #002d32;
      }
      .instrumentLeisure-for-big-box:nth-child(even){
        background-color: #012127;
      }
      .instrumentLeisure-for-big-box{
        display: flex;
        height:60px;
        width:642px;
        .for-index{
          width:24px;
          height:28px;
          margin:16px 18px;
          text-align: center;
          line-height:28px;
          font-size:18px;
        }
        .for-name{
          width:290px;
          line-height:60px;
          color:#fff;
          margin-right: 20px;
          display:block;
          overflow:hidden;
          text-overflow:ellipsis;
          white-space:nowrap;
        }
        .for-value{
          width:140px;
          overflow:hidden;
          p{
            height:18px;
            font-size:18px;
            line-height:18px;
          }
          p:nth-child(1){
            color:#fff;
            margin:13px 0 5px;
          }
          p:nth-child(2){
            color:#FF6A00;
          }
        }
        .for-num{
          p{
            height:18px;
            font-size:18px;
            line-height:18px;
          }
          p:nth-child(1){
            color:#fff;
            margin:13px 0 5px;
          }
          p:nth-child(2){
            color:#00A135;
          }
        }
        .colorA{
          color: #FF0000;
          background: no-repeat;
          background-size: 100%;
          background-image: url("../../../assets/ZDimages/img_whp_a@1x.png");
        }
        .colorB{
          color: #FF5900;
          background: no-repeat;
          background-size: 100%;
          background-image: url("../../../assets/ZDimages/img_whp_b@1x.png");
        }
        .colorC{
          color: #FFB31A;
          background: no-repeat;
          background-size: 100%;
          background-image: url("../../../assets/ZDimages/img_whp_c@1x.png");
        }
        .colorD{
          color: #0586FF;
          background: no-repeat;
          background-size: 100%;
          background-image: url("../../../assets/ZDimages/img_bg_ph@1x.png");
        }
        .colorE{
          color: #0586FF;
          background: no-repeat;
          background-size: 100%;
          background-image: url("../../../assets/ZDimages/img_bg_ph@1x.png");
        }
      }
    }

  }
</style>
