<template>
  <div class="block">
    <div v-for="(item, index) in data" class="flex flex-center box">
      <div v-if="index < 3" class="box1">{{ index + 1 }}.</div>
      <div v-else class="box1-1">{{ index + 1 }}.</div>
      <div class="flex flex-align-center box2">
        <a-tooltip :content="item.allName">
          <div
            :style="
              'display: flex;align-items: center;height: 26px;padding-left: 5px;padding-right: 5px; background-image: linear-gradient(to right, rgba(9,45,85,0.94) , rgba(18,70,146,0.94));border-radius: 20px;color: #ffffff;' +
              'width:' +
              (item.number / max) * 100 +
              '%'
            "
          >
            {{ item.name }}
          </div>
        </a-tooltip>
      </div>
      <div class="flex flex-justify-end box3">
        {{ item.number }}
      </div>
    </div>
  </div>
</template>

<script lang="js">
import crypto from "@/utils/crypto.js"
export default {
  data() {
    return {
      data:{},
      max:0,
    }
  },
  created() {
    this.getDebtList()
  },
  methods: {
    getDebtList() {
      this.$api.biz.getDebtList({ current: 1, size: 5}).then(res => {
        let result = JSON.parse(crypto.decryptDES(res, crypto.desKey))
        if (result.code === 200) {
          let l = 100
          let s = 100
          this.data = result.data.records.map((item,index) => {
            if (index === 0){
              this.max=item.viewNumber
              l = item.viewNumber * 0.8
              s = item.viewNumber * 0.5
            }
            if(item.viewNumber >= l){
              if (item.name.length >= 16){
                return {name:item.name.substring(0,14)+"...",
                     number:item.viewNumber,
                allName:item.name}
              }else {
                return {name:item.name,number:item.viewNumber,allName:item.name}
              }
            }else if(item.viewNumber >= s) {
              if (item.name.length >= 11){
                return {name:item.name.substring(0,8)+"...",number:item.viewNumber,allName:item.name}
              }else {
                return {name:item.name,number:item.viewNumber,allName:item.name}
              }
            }else {
              if (item.name.length >= 8){
                return {name:item.name.substring(0,6)+"...",number:item.viewNumber,allName:item.name}
              }else {
                return {name:item.name,number:item.viewNumber,allName:item.name}
              }
            }
          })
        }
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.box {
  height: 29px;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 5px;
}
.box1 {
  width: 5%;
  font-size: 20px;
  font-weight: bold;
  color: #ffa100;
}
.box1-1 {
  width: 5%;
  font-size: 20px;
  font-weight: bold;
  color: #ffffff;
}
.box2 {
  width: 85%;
}
.box3 {
  width: 10%;
  color: rgb(6, 243, 223);
}
</style>
