<template>
  <div>
    <div class="label">投诉原因top5</div>
    <div id="complaint" ></div>
  </div>
</template>

<script>
  import * as DataSql from "../../../stores/DataSql";
  import co from "co";

  export default {
    name: "ReasonComplaint",
    data() {
      return {
        ReasonComplaint:[],
        visits:[],
        grade:[],
      }
    },
    methods:{
      searchdata(){
        let ReasonComplaint = DataSql.getData(this, 'reasonComplaint', {},'ReasonComplaint')
        co(ReasonComplaint)
      },
      setBar() {
        this.xc = this.$echarts.init(document.getElementById('complaint'))
        var scale=this.$parent.$parent.$parent.scale
        var visits = this.visits
        var grade = this.grade
        var data = {
          grade: grade,
          visits: visits,
        }
        this.xc.setOption({
          title: [
            {
              // text: '用户气量对比',
              textStyle: {
                align: 'left',
                color: '#fff',
                fontSize: 14*scale
              }
            }
          ],
          grid: {
            left: '30%',
            right: '10%',
            height:'90%',

            top: '4%',
            bottom: '0'
          },
          xAxis: {
            show: false,
          },
          yAxis: {
            type: 'category',
            axisLabel: {
              // margin: 10,
              show: true,
              color: '#69d8d2',
              fontSize: 12*scale
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            data: data.grade
          },
          series: [{
            type: 'bar',
            barGap: '-99%',
            barWidth: '30%',
            itemStyle: {
              normal: {
                barBorderRadius: 12*scale,
                color: {
                  type: 'linear',
                  x: 0,
                  x1: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#69d8d2'
                  }, {
                    offset: 1,
                    color: '#69d8d2'
                  }]
                }
              },
            },
            max: 1,
            labelLine: {
              show: true,
            },
            label: {
              show: true,
              position: 'right',
              textStyle: { //数值样式
                color: '#f3c832',
                fontSize: 16 * scale
              }
            },
            data: data.visits,
          }]
        })
      },
    },
    ready() {
      this.searchdata()
    },
    watch:{
      'ReasonComplaint': {
        deep: true,
        handler(val) {
          console.log('-------------客服')
          console.log('客服',this.ReasonComplaint)
          console.log('长度',this.ReasonComplaint.length)
          for (let i = 4; i >=0 ; i--) {
            this.visits.push(this.ReasonComplaint[i].count)
            this.grade.push(this.ReasonComplaint[i].f_content)
          }
          this.setBar()
        }
      },

    }
  }
</script>

<style scoped>
  .label{
    margin-left: 6%;
    font-size: 0.85em;
    color: #fff;
    width: 100%;
    height: 9%;
  }
  #complaint{
    height: 91%;
    width: 100%;
    padding: 2%;
  }
</style>
