import * as echarts from 'echarts';
import elementResizeDetectorMaker from 'element-resize-detector';
export default {
  props: {
    id: {
      type: String,
      default: 'BAR332233'
    },
    data: {
      type: Array,
      default: function () {
        return [
          {
            name: '资不抵债',
            value: 2
          },
          {
            name: '高债务率',
            value: 2
          },
          {
            name: '中债务率',
            value: 2
          },
          {
            name: '低债务率',
            value: 2
          }
        ];
      }
    },
    title: {
      type: String,
      default: '溢价率'
    },
    color: {
      type: [Array],
      default: function () {
        return ['#3181F6', '#0FFCFC']
      }
    }
  },
  data () {
    return {
      chart: null
    };
  },
  mounted () {
    this.initChart();
  },
  methods: {
    // 设置监听器 页面尺寸变化重新绘制图表
    initResizeCallBack () {
      const erd = elementResizeDetectorMaker();
      erd.listenTo(document.getElementById(this.id), () => {
        this.$nextTick(() => {
          this.chart.resize();
        });
      });
    },
    initChart () {
      this.chart = echarts.init(document.getElementById(this.id));
      this.chartSetOption();
    },
    chartSetOption () {
      const xAxis = [];
      this.data.forEach(item => {
        xAxis.push(item.name)
      });
      const option = {
        title: "",
        grid: {
          top: 40,
          left: "7%",
          right: "7%",
          bottom: 10,
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none",
          }
        },
        xAxis: [
          {
            type: "category",
            show: true,
            data: xAxis,
            axisLabel: {
              fontSize: 12,
              color: 'rgba(166, 200, 221, 1)'
            }
          }
        ],
        yAxis: [
          {
            name: '单位：个数',
            nameTextStyle: {
              fontSize: 12,
              color: 'rgba(166, 200, 221, 1)',
              padding: [0, 0, 0, -12]
            },
            splitNumber: 2,
            type: 'value',
            splitLine: {
              lineStyle: {
                color: 'rgba(65,97,128,0.15)'
              }
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              fontSize: 12,
              color: 'rgba(166, 200, 221, 1)'
            }
          }
        ],
        color: ["#e54035"],
        series: [
          {
            name: "",
            type: "pictorialBar",
            xAxisIndex: 0,
            barMaxWidth: 70,
            symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
            label: {
              show: true,
              fontSize: 18,
              position: "top",
              color: "#fff"
            },
            itemStyle: {
              normal: {
                color: function (params) {
                  const { dataIndex } = params
                  let colorList = [
                    ['rgba(252, 91, 110, 1)', 'rgba(252, 91, 110, 0.8)', 'rgba(252, 91, 110, 0)'],
                    ['rgba(252, 133, 91, 1)', 'rgba(252, 133, 91, 0.8)', 'rgba(252, 133, 91, 0)'],
                    ['rgba(252, 231, 91, 1)', 'rgba(252, 231, 91, 0.8)', 'rgba(252, 231, 91, 0)'],
                    ['rgba(91, 252, 114, 1)', 'rgba(91, 252, 114, 0.8)', 'rgba(91, 252, 114, 0)']
                  ];

                  return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    {
                      offset: 1,
                      color: colorList[dataIndex][0],
                    },
                    {
                      offset: 0.5,
                      color: colorList[dataIndex][1],
                    },
                    {
                      offset: 0,
                      color: colorList[dataIndex][2],
                    },
                  ])
                },
              },
              emphasis: {
                opacity: 1,
              },
            },
            data: this.data,
          },
        ],
      };;
      this.chart.setOption(option);
      this.initResizeCallBack();

    }
  }
};