//管理模块
<template>
  <div class="box">
    <div class="title">
      {{moduletitle}}管理
    </div>
    <div class="content">
      <div id="chartsXY" v-if="moduletitle == '信用'" />
      <div id="chartsFX" v-if="moduletitle == '风险'" />
      <div id="chartsFL" v-if="moduletitle == '分类'" />
      <div class="inner">
        <p v-for="(item,index) in list" :key="index">
          <span class="yuan" :style="`background:${item.color}`"/>{{item.name}} : {{item.value}} 
        </p>
      </div>
    </div>
  </div>
</template>

<script >
import echarts from 'echarts'
import {mapActions, mapState} from 'vuex'

export default {
  props: {
    moduletitle: {
      type: String,
      default: '',
    },
  },
  data(){
    return{
      list: [ ],
      option: {
        tooltip: {
          trigger: 'item',
          transitionDuration: 0,
          formatter: '{b} <br/>{c} ({d}%)'
        },
        series: [
          {
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            'itemStyle': {
              'normal': {
                'borderWidth': 4, // 间距的宽度
                'borderColor': '#fff', //背景色
              }
            },
            data: [
              {value: 335, name: '直接访问'},
              {value: 135, name: '视频广告'},
              {value: 148, name: '搜索引擎'}
            ]
          }
        ]
      }
    }
  },
  created(){
  },
  mounted(){
    this.getList()

  },
  methods: {
    ...mapActions([
      'GET_Creditratingranking'
    ]),
    async getList(){
      let myChart = null
      let newArr = []

      switch (this.moduletitle) {
      case '信用':
        await this.GET_Creditratingranking().then(res => {
          this.list = this.$com.confirm(res, 'data.content', [])
          this.list.forEach(item => {
            newArr.push({
              value: item.num, 
              name: item.level+'级',
              color: item.level == 'A' ? 'rgb(93,161,248)':item.level == 'B' ? 'rgb(142,102,222)':'rgb(244,212,102)'
            })
          })
          //如果没有c 写假数据
          if (newArr.length<3) {
            newArr.push({
              value: 0, 
              name: 'C',
              color: 'rgb(244,212,102)'
            })
          }
          this.list= newArr
          myChart= echarts.init(document.getElementById('chartsXY'))
          this.option.series[0].data = newArr
          this.option.color = ['rgb(93,161,248)', 'rgb(142,102,222)', 'rgb(244,212,102)']
        
        })
        break
      case '风险':
        this.list = [
          {
            value: 165, 
            name: '高风险',
            color: 'rgb(235,108,103)'
          },
          {
            value: 306, 
            name: '中风险',
            color: 'rgb(244,212,101)'
          },
          {
            value: 2358, 
            name: '低风险',
            color: 'rgb(119,200,125)'
          },
        ]
        await setTimeout(() => {
          this.option.series[0].data = this.list
          myChart= echarts.init(document.getElementById('chartsFX'))
          this.option.color = ['rgb(235,108,103)', 'rgb(244,212,101)', 'rgb(119,200,125)']
        }, 0)
        break
      case '分类':
        this.list = [
          {
            value: 163, 
            name: '监管1类',
            color: 'rgb(93,161,248)'
          },
          {
            value: 108, 
            name: '监管2类',
            color: 'rgb(236,109,103)'
          },
          {
            value: 27, 
            name: '监管3类',
            color: 'rgb(244,212,101)'
          },
        ]
        await setTimeout(() => {
          this.option.series[0].data = this.list
          this.option.color = ['rgb(93,161,248)', 'rgb(236,109,103)', 'rgb(244,212,101)']
          myChart= echarts.init(document.getElementById('chartsFL'))
        }, 0)
        break
      default:
        break
      }

      setTimeout(() => {
        myChart.setOption(this.option)
        window.addEventListener('resize', function () {
          myChart.resize()
        })
      }, 0)

    }
 
  }

}
</script>

<style scoped>
.box{
  background: #fff; 
  display: flex;
  flex-direction: column;
  min-height: 23vh;

}
.box .title{
  height: 35px;
  padding-left: 20px;
  line-height: 35px;
  font-size: 15px;
  font-weight: 550;
  border-bottom: 1px solid #ccc;
}
.box .content{
  padding: 1rem;
  flex:1;
  display: flex;
  align-items: center;
}
.box .content >div:first-child{
  width:50%;
  height:100%;
}
.box .content >div:last-child{
  width:50%;
  height:80%;
  font-size: 12px;
}
.box .content .inner{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items:center;
}
.box .content .inner p{
  width:100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items:center;
}
.yuan{
  width: 12px;
  height: 12px;
  display: inline-block;
  border-radius:50%;
  margin: 0 1rem;
}

</style>