<!--
 * @Author: zwq
 * @Date: 2022-01-21 14:43:06
 * @LastEditors: zwq
 * @LastEditTime: 2022-01-24 09:12:18
 * @Description:
-->
<template>
  <div :id="id" :class="className" :style="{ height: computedHeight, width: width }" />
</template>

<script>
import echarts from 'echarts'
import 'echarts/theme/macarons' // echarts theme
import resize from './mixins/resize'

export default {
  name: 'OverviewBar',
  mixins: [resize],
  props: {
    id: {
      type: String,
      default: 'DefaultPieChart'
    },
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    beilv: {
      type: Number,
      default: 1
    },
    height: {
      type: String,
      default: '300px'
    },
    showCenterTitle: {
      type: Boolean,
      default: false
    },
    showLegend: {
      type: Boolean,
      default: false
    },
    legendConfig: {
      type: Object,
      default: function() {
        return {}
      }
    },
    seriesConfig: {
      type: Object,
      default: function() {
        return {}
      }
    },
    seriesData: {
      type: Array,
      default: () => []
    },
    barColor: {
      type: Array,
      default: () => [
        '#5fe1d2',
        '#ffb2b0',
        '#8e90ff',
        '#f058aa',
        '#8652da',
        '#87fb84',
        '#61b9ff',
        '#fdf6a6',
        '#ffc465',
        '#98d9ff'
      ]
    }
  },
  data() {
    const lData = this.seriesData
    return {
      chart: null,
      defaultConfig: {
        // 默认的legend配置
        legend: {
          orient: 'vertical',
          left: '75%',
          bottom: 0,
          itemHeight: 10,
          itemWidth: 10,
          formatter: function(name) {
            let pieLegendVale = {}
            lData.filter((item, index) => {
              if (item.name === name) {
                pieLegendVale = item
              }
            })
            const arr = ['{b|' + pieLegendVale.name + '}', '{a|' + pieLegendVale.value + '}']
            return arr.join(' ')
          },
          textStyle: {
            rich: {
              a: {
                align: 'center',
                fontSize: 10,
                color: '#f988bf',
                lineHeight: 16
              },
              b: {
                // verticalAlign: 'top',
                align: 'center',
                fontSize: 10,
                color: '#dddfe1'
              }
            }
          }
        },
        // 默认的series配置
        series: {
          center: ['35%', '50%'],
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          emphasis: {
            label: {
              show: true,
              fontSize: '20',
              fontWeight: 'bold'
            }
          }
        }
      }
    }
  },
  computed: {
    computedHeight: function() {
      if (/[0-9]+%$/.test(this.height)) {
        // 如果是百分比
        return this.height
      }
      return this.height * this.beilv + 'px'
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id))
      this.chart.setOption({
        title: this.showCenterTitle
          ? {
            text: '总共',
            subtext: this.seriesData.reduce((pre, cur) => pre + cur.value, 0),
            top: '32%',
            left: '49%',
            textAlign: 'center',
            itemGap: 5,
            textStyle: {
              color: '#c0c0c0',
              fontSize: 16,
              fontWeight: 'lighter',
              lineHeight: 15
            },
            subtextStyle: {
              color: '#fff',
              fontSize: 24,
              lineHeight: 20
            }
          }
          : {},
        tooltip: {
          trigger: 'item'
        },
        grid: {
          top: '0px',
          right: '0px',
          bottom: '0px',
          left: '0px',
          containLabel: true
        },
        legend: {
          // 默认配置
          ...this.defaultConfig.legend,
          // 外部传入配置
          ...this.legendConfig
        },
        color: this.barColor,
        series: [
          {
            name: 'default name',
            type: 'pie',
            // 默认series配置
            ...this.defaultConfig.series,
            // 外部传入配置
            ...this.seriesConfig,
            data: this.seriesData
          }
        ]
      })
    }
  }
}
</script>

<style scoped>
/* .chart >>> div:first-child{
  background-color: red;
  height: 100% !important;
} */
</style>
