<template>
  <div class="flex">
    <div class="block flex-center ml-5">
      <div class="y">1.</div>
      <div class="y1">2.</div>
      <div class="y1">3.</div>
      <div class="font-10 bold white mt-5">4.</div>
      <div class="font-10 bold white mt-5">5.</div>
    </div>
    <charts
      style="margin-top: -40px"
      id="bizchart2"
      height="250px"
      width="430px"
      :option="option"
    />
  </div>
</template>

<script lang="js">
import charts from '../../../components/echarts/index.vue'
import * as echarts from 'echarts'
export default {
  components: { charts },
  data() {
    return {
      option : {
        tooltip: {
          trigger: 'item',
          show:true,
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '1%',
          right: '5%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          axisLine: {
            lineStyle: {
              color: "#a4a2a2",
            }
          },
          axisLabel: {
            textStyle: {
              color: "#a4a2a2",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color:'rgba(128,126,126,0.25)'
            },
          },
        },
        yAxis: {
          axisTick: {
            show: false
          },
          type: 'category',
          data: [],
          axisLine: {
            show:true,
            lineStyle: {
              color: "#a4a2a2",
            }
          },
          axisLabel: {
            inside: true,
            color: '#fff',
            textStyle: {
              fontSize: "15",
              color: function(params,index) {
               // if (index > 1){
               //   return '#FFA100'
               // }else {
                 return '#FFFFFF'
               // }
              },
              fontWeight:'bold'
            },
          },
        },
        label: {
          show: true,
          position: 'right',
        },
        textStyle: {
          color:'rgba(245,126,31,0.74)'
        },
        series: [
          {
            type: 'bar',
            data: [ 1389, 1934, 2570, 2944, 3030],
            itemStyle: {
              normal: {
                barBorderRadius: 20,
                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                  offset: 1,
                  color: 'rgba(134,73,24,0.3)'
                }, {
                  offset: 0,
                  color: 'rgba(245,126,31,0.3)'
                }]),
              }
            }
          },
        ]
      }
    }
  },
  created() {
    this.getPublicArticlePag()
  },
  methods: {
    getPublicArticlePag() {
      this.$api.biz.getPublicArticlePag({ current: 1, size: 5}).then(res=>{
        if (res.code===200){
          let l = 100
          let s = 100
          this.option.yAxis.data = []
          this.option.series[0].data = []
          res.data.records.map((item,index)=>{
            if (index === 0){
              l = item.intPageReadCount * 0.8
              s = item.intPageReadCount * 0.5
            }
            let title=''
            if(item.intPageReadCount >= l){
              if (item.title.length >= 16){
                title = item.title.substring(0,14)+"..."
              }else {
                title=item.title
              }
            }else if(item.intPageReadCount >= s) {
              if (item.title.length >= 11){
                title = item.title.substring(0,8)+"..."
              }else {
                title = item.title
              }
            }
            this.option.yAxis.data.push(title)
            this.option.series[0].data.push({value:item.intPageReadCount,name:item.title})
          })
          this.option.yAxis.data.reverse()
          this.option.series[0].data.reverse()
        }
      })
    },

  }
}
</script>
<style>
.y {
  font-size: 20px;
  font-weight: bold;
  color: #ffa100;
  margin-top: 24px;
}
.y1 {
  font-size: 20px;
  font-weight: bold;
  color: #ffa100;
  margin-top: 10px;
}
</style>
