<template>
  <div class="uploadstylebg">
    <div class="uploadDiv">
      <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: #fafafa">
              {{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>
</template>

<script>
  export default {
    name: "upload",
    data(){
      return{
        timer: '',
        objectt: [],
      }
    },
    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 scoped>
  .uploadstylebg{
    display: flex;
    margin: 0 auto;
    height: 75px;
  }
  .uploadDiv{
    width: 100%;
    align-self:center;
    display: flex;
    justify-content: space-around;
    flex-wrap:wrap;
  }
  .panel{
    height: 30px;
    width: 140px;
    font-size: 16px;
    padding-top: 1.5%;
    margin-top: 0.1%;
    border-radius: .5rem;
    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: 2px 5px 10px rgba(0,180,220,.5);
  }

  .panell{
    height: 30px;
    width: 140px;
    padding-top: 1.5%;
    margin-top: 0.1%;
    font-size: 16px;
    border-radius: .5rem;
    color: #fffcf9;
    cursor: pointer;
    text-align: center;
    display: inline-block;
    background: #E94057;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #F27121, #E94057);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #F27121, #E94057); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    box-shadow: 2px 5px 10px rgba(255,0,3,.5);
  }
</style>
