<template>
  <!--  <div class="block">-->
  <!--    <div-->
  <!--      v-for="(item, index) in data"-->
  <!--      class="flex flex-center"-->
  <!--      style="-->
  <!--        height: 26px;-->
  <!--        margin-left: 10px;-->
  <!--        margin-right: 10px;-->
  <!--        margin-top: 7px;-->
  <!--      "-->
  <!--    >-->
  <!--      <div-->
  <!--        v-if="index <= 3"-->
  <!--        style="width: 5%; font-size: 18px; font-weight: bold; color: #ffa100"-->
  <!--      >-->
  <!--        {{ index }}.-->
  <!--      </div>-->
  <!--      <div-->
  <!--        v-else-->
  <!--        style="width: 5%; font-size: 20px; font-weight: bold; color: #ffffff"-->
  <!--      >-->
  <!--        {{ index }}.-->
  <!--      </div>-->
  <!--      <div class="flex flex-align-center" style="width: 85%">-->
  <!--        <div-->
  <!--          style="-->
  <!--            display: flex;-->
  <!--            align-items: center;-->
  <!--            height: 26px;-->
  <!--            padding-left: 5px;-->
  <!--            padding-right: 5px;-->
  <!--            background: rgba(171, 118, 48, 0.82);-->
  <!--            border-radius: 20px;-->
  <!--            color: #ffffff;-->
  <!--          "-->
  <!--        >-->
  <!--          {{ item.name }}-->
  <!--        </div>-->
  <!--      </div>-->
  <!--      <div style="width: 10%; color: rgb(6, 243, 223)">{{ item.number }}</div>-->
  <!--    </div>-->
  <!--  </div>-->
  <div>
    <charts
      style="margin-top: -40px"
      id="bizchart3"
      height="220px"
      width="440px"
      :option="option"
    />
  </div>
</template>

<script lang="js">
import charts from '../../../components/echarts/index.vue'
import * as echarts from 'echarts'
import crypto from "@/utils/crypto.js"
export default {
  components: { charts },
  data() {
    return {
      data:{},
      option : {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          axisTick: {
            show: false
          },
          type: 'value',
          boundaryGap: [0, 0.01],
          axisLabel: {
            show: false, // 不显示坐标轴上的文字
          },
          splitLine: {
            show: true,
            lineStyle: {
              color:'rgba(128,126,126,0.25)'
            },
          },
        },
        yAxis: {
          axisTick: {
            show: false
          },
          type: 'category',
          data: ['5.', '4.', '3.', '2.', '1.'],
          axisLine: {
            lineStyle: {
              color: "#a4a2a2",
            }
          },
          axisLabel: {
            inside: true,
            color: '#fff',
            textStyle: {
              fontSize: "20",
              color: function(params,index) {
                if (index > 1){
                  return '#FFA100'
                }else {
                  return '#FFFFFF'
                }
              },
              fontWeight:'bold'
            },
          },
        },
        label: {
          show: true,
          position: 'right',
        },
        textStyle: {
          color:'rgba(6,243,223,0.74)'
        },
        series: [
          {
            type: 'bar',
            data: [],
            itemStyle: {
              normal: {
                barBorderRadius: 18,
                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                  offset: 1,
                  color: 'rgba(9,45,85,0.44)'
                }, {
                  offset: 0,
                  color: 'rgba(18,70,146,0.74)'
                }]),
              }
            }
          },
        ]
      }
    }
  },
  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){
    //           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}
    //           }else {
    //             return {name:item.name,number:item.viewNumber}
    //           }
    //         }else if(item.viewNumber >= s) {
    //           if (item.name.length >= 11){
    //             return {name:item.name.substring(0,8)+"...",number:item.viewNumber}
    //           }else {
    //             return {name:item.name,number:item.viewNumber}
    //           }
    //         }else {
    //           if (item.name.length >= 8){
    //             return {name:item.name.substring(0,6)+"...",number:item.viewNumber}
    //           }else {
    //             return {name:item.name,number:item.viewNumber}
    //           }
    //         }
    //       })
    //     }
    //   })
    // },
    getDebtList() {
      this.$api.biz.getDebtList({ current: 1, size: 5}).then(res => {
        let result = JSON.parse(crypto.decryptDES(res, crypto.desKey))
        if (result.code === 200) {
          this.option.series[0].data = result.data.records.map((item) => {
            return item.viewNumber
          }).reverse()
          let l = 100
          let s = 100
          this.option.yAxis.data = result.data.records.map((item,index) => {
            if (index === 0){
              l = item.viewNumber * 0.8
              s = item.viewNumber * 0.5
            }
            if(item.viewNumber >= l){
              if (item.name.length >= 16){
                return index+1+"."+item.name.substring(0,14)+"..."
              }else {
                return index+1+"."+item.name
              }
            }else if(item.viewNumber >= s) {
              if (item.name.length >= 11){
                return index+1+"."+item.name.substring(0,8)+"..."
              }else {
                return index+1+"."+item.name
              }
            }else {
              if (item.name.length >= 8){
                return index+1+"."+item.name.substring(0,6)+"..."
              }else {
                return index+1+"."+item.name
              }
            }
          }).reverse()
        }
      })
    },
  }
}
</script>
