<template>
<div style="width: 100%;height: 100%">
  <div id='ring' style="width: 100%;height: 80%">
  </div>
  <div  style="width: 100%;height: 20%;padding-left: 5vw">
      <a>
        <span :class="[param?'class1':'class2']"  @click="getChargeCount">年交易笔数比例</span>
      </a>
      <a>
       <span :class="[param?'class2':'class1']"   @click="getChargeMoney">年消费金额比例</span>
      </a>

  </div>
</div>

</template>

<script>
  import {HttpResetClass} from 'vue-client'
  export default {
    title: '收费',
    data () {
      return {
        param: true,
        rows: [],
        come: []
      }
    },
  watch:{
   'param'(val){
     this.getData()
   }
  },
    methods: {
      getData(){
     let url = this.param  ? 'api/af-revenue/sql/getSellSumByAmount' : 'api/af-revenue/sql/getSellSumByBank'
     let http = new HttpResetClass()
      http.load('post', url, {data:{}}, {rejectMsg: null, resolveMsg: null}).then((res)=>{
       this.rows = res.data
        this.come = Array.from(new Set(res.data.map(x => x.name)))
        this.init()
      })

      },
      getChargeCount(){
        console.log(1111)
        this.param = true

      },
     getChargeMoney(){
         console.log(123)
        this.param = false
      },
      init () {
        var colorarr = ['#897BD3', '#F27C79', '#42A8EF', '#6FD9D0', '#EF9861', '#F76F01']
        var option = {
          backgroundColor: '#ffffff00',
          animation: true,
          title: {
            x: 'center',
            y: 'center',
            textStyle: {
              color: '#fff',
              fontSize: 60,
              fontWeight: 'normal',
              align: 'center',
              width: '200px'
            },
            subtextStyle: {
              color: '#fff',
              fontSize: 20,
              fontWeight: 'normal',
              align: 'center'
            }
          },
          legend: {
            width: '20%',
            textStyle: {
              color: '#fff',
              fontSize: 12
            },
            itemWidth: 10,
            itemHeight: 10,
            orient: 'horizontal',
            icon: 'circle',
            bottom: '10%',
            right: '5%',
            padding: [8, 8],
            itemGap: 10,
            data: this.come
          },
          series: [{
            type: 'pie',
            center: ['40%', '50%'],
            radius: ['30%', '45%'],
            color: colorarr,
            startAngle: 135,
            labelLine: {
              normal: {
                length: 20
              }
            },
            label: {
              show: true,
              formatter: '{b|{b}}{per|{d}%}',
              rich: {
                a: {
                  color: '#999',
                  lineHeight: 16,
                  align: 'center'
                },
                hr: {
                  borderColor: '#aaa',
                  width: '100%',
                  borderWidth: 1,
                  height: 0
                },
                b: {
                  fontSize: 10,
                  padding: [5, 0],
                  color: '#fff'
                },
                c: {
                  fontSize: 10,
                  color: '#eee'
                },
                per: {
                  color: '#FDF44E',
                  fontSize: 10,
                  borderRadius: 2
                }
              },
              position: 'outside'
            },
            data: this.rows
          }]
        }
        let barchart = this.$echarts.init(document.getElementById('ring'))
        console.log(option)
        barchart.setOption(option)
        let index = -1 // 高亮所在下标
        let dataLength = colorarr.length   // 当前饼图有多少个扇形
        // 用定时器控制饼图高亮
        // this.mTime = setInterval(() => {
        //   // 清除之前的高亮
        //   barchart.dispatchAction({
        //     type: 'downplay',
        //     seriesIndex: 0,
        //     dataIndex: index
        //   })
        //   index = (index + 1) % dataLength
        //   // 当前下标高亮
        //   barchart.dispatchAction({
        //     type: 'highlight',
        //     seriesIndex: 0,
        //     dataIndex: index
        //   })
        //   if (index > dataLength) {
        //     index = 0
        //   }
        // }, 1000)
        // 鼠标划入

      }
    },
    ready () {
      this.getData()
    },
    props: {}
  }
</script>
<style scoped>
  @media screen and (max-width: 1920px) {
    .class1 {
      background: #012c45;
      color: #01c5ba;
      border: 1px solid #01c5ba;
      cursor: pointer;
      font-size: 14px;
      padding: 0 10px;
    }

    .class2 {
      background: #011332;
      color: #426164;
      border: 1px solid #013544;
      cursor: pointer;
      font-size: 14px;
      padding: 0 10px;
    }
  }
  @media screen and (max-width: 1440px) {
    .class1 {
      background: #012c45;
      color: #01c5ba;
      border: 1px solid #01c5ba;
      cursor: pointer;
      font-size: 12px;
      padding: 0 10px;
    }

    .class2 {
      background: #011332;
      color: #426164;
      border: 1px solid #013544;
      cursor: pointer;
      font-size: 12px;
      padding: 0 10px;
    }
  }
</style>

