<template>
  <div class="uploadBox">
    <div class="uploadstylebg">
      <div class="uploadstyle">
        <div v-for="(items,index) in objectt" style="display: inline-block">
          <el-tooltip placement="top">
            <div slot="content">
              <div v-for="(item,index) in items.children" style="color: #09baef">
                {{item.uploadTypeName}}:&nbsp; <span v-if="item.uploadRate === '100%'">{{item.uploadRate}}</span><span v-if="item.uploadRate !== '100%'" style="color: red">{{item.uploadRate}}</span>
              </div>
            </div>
            <div v-if="items.uploadObjectName.length>10" :class="items.uploadRate === 0?'panel':'panell'"  style="fontSize:10px;padding-top: 5px">{{items.uploadObjectName}}</div>
            <div v-else :class="items.uploadRate === 0?'panel':'panell'">{{items.uploadObjectName}}</div>
          </el-tooltip>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Object',
  data() {
    return {
      uploadObjectRateList: [],
      objectt: [],
      timer: '',
      sysTime:''
    }
  },
  destroyed() {
    clearInterval(this.timer)
  },
  mounted() {
    this.getServerTime()
    this.init()
  },
  methods: {
    getServerTime(){
      this.$axios.get('/dashboard/getServerTime').then(res => {
        this.sysTime = new Date(res.data)
      })
    },

    init(){
      this.getUploadFile()
      this.timer = setInterval(this.addTime, 1000)
    },
    addTime(){
      this.sysTime = new Date(this.sysTime.setSeconds(this.sysTime.getSeconds()+1))
      if ((this.sysTime.getMinutes() % 5 != 0) && this.sysTime.getSeconds()==58){
         this.getUploadFile()
      }
    },
    async getUploadFile() {
      this.$axios.get('/dashboard/getUploadFileInfo').then(res => {
        this.objectt = res.data.uploadObjectRateList
      })
    },
  }
}
</script>

<style>
  .uploadstyle .panel{
    height: 30px;
    width: 140px;
    color:rgba(60,240,250,1);
    font-size: 16px;
    padding-top: 1.5%;
    margin-top: 0.1%;
    border-radius: .5rem;
    color: #adffc8;
    cursor: pointer;
    text-align: center;
    display: inline-block;
    border: 1px solid rgba(8, 220, 14, 0.5);
    background: linear-gradient(180deg, rgba(27, 220, 8, 0.3),rgba(0,180,220,0.1),rgba(0,180,220,0.1), rgba(44, 220, 4, 0.3));
    box-shadow: 0 0 2rem rgba(0,180,220,.1) inset;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-name: breathe;
    -webkit-animation-duration: 1500ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
  }
  .uploadBox{
    padding-bottom: 1.5%;
  }


  .uploadstylebg{
    display: flex;
    margin: 0 auto;
    height: 75px
  }
  .uploadstyle{
    width: 100%;
    align-self:center;
    display: flex;
    justify-content: space-around;
    flex-wrap:wrap;
  }
  .uploadstyle .panell{
    height: 30px;
    width: 140px;
    padding-top: 1.5%;
    margin-top: 0.1%;
    color:rgba(60,240,250,1);
    font-size: 16px;
    border-radius: .5rem;
    color: #adffc8;
    cursor: pointer;
    text-align: center;
    display: inline-block;
    border: 1px solid rgba(0,180,220,0.5);
    background: linear-gradient(to right, #ffb40d, #ff420d, #df0808);
    box-shadow: 0 0 2rem rgba(0,180,220,.1) inset;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-name: bad;
    -webkit-animation-duration: 1500ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
  }
  .tablecon .vxe-table--main-wrapper {
    background-color: #061f3e !important;
  }
  .tablecon .vxe-table .vxe-table--body-wrapper, .tablecon .vxe-table .vxe-table--footer-wrapper, .tablecon .vxe-table .vxe-table--header-wrapper{
    background-color: #061f3e !important;
    position: relative;
  }
  .tablecon tr{
    background-color: #061f3e !important;
    color: #00B4DC !important;
    border: 1px solid #ffffff;
   /* z-index: 100;*/
  }
  @-webkit-keyframes breathe {
    0% {
      opacity: 1;
      box-shadow: 0 1px 2px rgba(9, 223, 37, 0.4), 0 1px 1px rgba(0, 147, 223, 0.1) inset;
    }
    50% {
      opacity: 0.5;
      box-shadow: 0 1px 2px rgba(120, 223, 17, 0.4), 0 1px 1px rgba(0, 147, 223, 0.1) inset;
    }
    100% {
      opacity: 1;
      border: 1px solid rgba(145, 235, 143, 0.7);
      box-shadow: 0 1px 30px #57df00, 0 1px 20px #34df3d inset;
    }
  }
  @-webkit-keyframes bad {
    0% {
      opacity: 1;
      box-shadow: 0 1px 2px rgba(223, 55, 52, 0.4), 0 1px 1px rgba(0, 147, 223, 0.1) inset;
    }
    50% {
      opacity: 0.7;
      box-shadow: 0 1px 2px rgba(223, 0, 7, 0.58), 0 1px 1px rgba(0, 147, 223, 0.1) inset;
    }
    100% {
      opacity: 1;
      border: 1px solid rgba(59, 235, 235, 0.7);
      box-shadow: 0 1px 30px #df3734, 0 1px 20px #ff420d inset;
    }
  }
</style>
