<template>
  <el-container v-loading="loading" class="th-charts-bar-progress">
    <el-main>
      <v-chart
        class="th-echarts"
        :options="charOptions"
        autoresize
        v-on="$listeners"
      />
    </el-main>
  </el-container>
</template>
<script>
import graphic from 'echarts/lib/util/graphic'
import VChart from 'vue-echarts'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'

export default {
  name: 'ThEchartsBarProgress',
  components: {
    VChart
  },
  props: {
    // 加载状态
    loading: {
      type: Boolean,
      default: false
    },
    // 数据
    value: {
      type: Array,
      default: () => []
    },
    // 颜色
    color: {
      type: Array,
      default: () => [
        ['#4ECBFA', '#44DEC5'],
        ['#FEA28D', '#FE7394'],
        ['#0679e3', '#3d97ed'],
        ['#3ECCFB', '#5BB9FE']
      ]
    },
    // y轴坐标名称，双轴时使用数组
    yAxisName: {
      type: [String, Array],
      default: ''
    },
    // 画布属性
    gridProp: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    charOptions() {
      const that = this
      const series = [
        {
          type: 'bar',
          data: this.value.map(d => d.value),
          // barCategoryGap: '45%',
          barWidth: '16px',
          // name: "比重",
          label: {
            show: true,
            formatter: '{c}%',
            position: 'right',
            distance: 10,
            textStyle: {
              color: '#06B2C7',
              fontSize: 14
            }
          },
          itemStyle: {
            normal: {
              color: function(params) {
                const index = params.dataIndex
                return new graphic.LinearGradient(1, 0, 0, 0, [
                  {
                    offset: 0,
                    color: that.color[index][0]
                  },
                  {
                    offset: 1,
                    color: that.color[index][1]
                  }
                ])
              },
              barBorderRadius: [0, 4, 4, 0]
            }
          },
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)',
            barBorderRadius: [4, 4, 0, 0]
          }
        }
      ]
      return {
        grid: {
          top: '10',
          left: '10',
          right: '10',
          bottom: '10',
          containLabel: true,
          ...this.gridProp
        },
        // 气泡提示框
        tooltip: {
          formatter(params) {
            return `${params.name}: ${that.value.find(d => d.name === params.name).count}${that.yAxisName}`
          }
        },
        xAxis: {
          min: 0,
          max: 100,
          splitLine: {
            show: false
          },
          splitArea: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false
          }
        },
        yAxis: {
          inverse: true,
          data: this.value.map(d => d.name),
          axisLine: {
            show: true,
            lineStyle: {
              color: '#D5DDE7',
              width: 1
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            color: '#666666',
            fontSize: 14
          },
          splitLine: {
            show: false
          },
          splitArea: {
            show: false
          }
        },
        series
      }
    }
  }
}
</script>
