<template>
  <div class="chart-container">
    <el-radio-group v-model="radio" class="radio-group" @change="initChart">
      <el-radio v-for="radio in radioList" :key="radio.value" :label="radio.value">{{ radio.text }}</el-radio>
    </el-radio-group>
    <div ref="chart" class="chart-body" />
  </div>
</template>

<script>
import _ from 'lodash'
import echarts from 'echarts'
export default {
  name: 'MonitorAccessChart',
  props: {
    list: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      radio: 'score',
      radioList: [
        {
          text: '立案数',
          value: 'register'
        },
        {
          text: '结案数',
          value: 'close'
        },
        {
          text: '受理员平均分',
          value: 'receiverAverage'
        },
        {
          text: '综合指标',
          value: 'score'
        }
      ],
      chart: null,
      x: [],
      y: []
    }
  },
  watch: {
    list() {
      this.initChart()
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      console.log('init chart', this.list)
      // 取x,y
      this.x = []
      this.y = []
      this.list.forEach(item => {
        this.x.push(item.name)
        switch (this.radio) {
          case 'register': {
            this.y.push(item.register)
            break
          }
          case 'close': {
            this.y.push(item.close)
            break
          }
          case 'receiverAverage': {
            this.y.push(item.receiverAverage)
            break
          }
          case 'score': {
            this.y.push(item.score)
            break
          }
          default: break
        }
      })
      // tooltip
      const tooltip = _.find(this.radioList, ['value', this.radio]).text

      this.chart = echarts.init(this.$refs.chart)
      this.chart.setOption({
        tooltip: {
          show: true,
          trigger: 'item',
          formatter: (params) => tooltip + '<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
                                  params.color + '"></span>' + params.name + ':' + params.data
        },
        color: '#278df9',
        xAxis: {
          data: this.x,
          axisLabel: {
            fontSize: 14
          }
        },
        yAxis: {
          axisLabel: {
            fontSize: 14
          },
          minInterval: 1
        },
        series: [{
          name: '受理员考核',
          type: 'bar',
          data: this.y,
          barWidth: '40%',
          barMaxWidth: '100',
          tooltip: {
            position: 'right'
          }
        }]
      })
      this.chart.resize()
    }
  }
}
</script>

<style scoped>
.chart-container{
  text-align: center;
}
.radio-group{
  margin-top: 20px;
}
.chart-body{
  height: 50vh;
  width: 80%;
  margin-right: auto;
  margin-left: auto;
}
</style>