import * as echarts from 'echarts';
import elementResizeDetectorMaker from 'element-resize-detector';
export default {
  props: {
    id: {
      type: String,
      default: 'horizontal-bar'
    },
    data: {
      type: Array,
      default: function () {
        return [
          {
            name: '闲置',
            value: '10'
          },
          {
            name: '出租/出借',
            value: '19'
          }
        ];
      }
    },
    unit: {
      type: String,
      default: '单位：万元'
    },
    color: {
      type: Array,
      default: function () {
        return ['rgba(15, 252, 252, 1)', 'rgba(53, 197, 124, 1)']
      }
    }
  },
  data () {
    return {
      icon: require('./icon.png'),
      chart: null
    };
  },
  mounted () {
    this.initChart();
  },
  computed: {
  },
  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 () {
      let yAxis1 = [];
      let yAxis2 = [];
      let data = [];

      let pictorialBarData = [];
      this.data.forEach((item, index) => {
        yAxis1.push(item.name)
        yAxis2.push(item.value + '亩')
        data.push(
          {
            value: item.value,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                {
                  offset: 0,
                  color: index === 0 ? 'rgba(134, 91, 252, 1)' : 'rgba(15, 252, 252, 1)',
                },
                {
                  offset: 1,
                  color: index === 0 ? 'rgba(49, 129, 246, 1)' : 'rgba(194, 255, 255, 1)',
                },
              ]),
            },
          }
        )


        pictorialBarData.push({
          value: item.value,
          itemStyle: {
            color: "rgba(255, 255, 255, 1)",
          },
        })
      });
      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: function (objs, index) {
            let obj = objs[0];
            return `${obj.name}<br/>${obj.marker}${obj.seriesName} : ${obj.value}%`;
          },
        },
        grid: {
          top: "3%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          show: false,
          type: "value",
          boundaryGap: [0, 0.01],
          interval: 20,
          min: 0,
          max: 100,
          splitLine: {
            lineStyle: {
              type: "dashed",
            },
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#909396",
            },
          },
          axisLabel: {
            formatter: function (value, index) {
              return value + "%";
            },
            color: "#303439",
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: [
          {
            type: "category",
            boundaryGap: true,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                color: "rgba(185, 211, 235, 1)",
              },
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false,
            },
            data: yAxis1,
          },
          {
            type: "category",
            boundaryGap: true,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                color: "rgba(185, 211, 235, 1)",
              },
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false,
            },
            data: yAxis2,
          }
        ],
        series: [
          {
            name: "",
            barMaxWidth: 6,
            type: "bar",
            data: data,
          },
          {
            name: "2",
            barMaxWidth: 10,
            type: "pictorialBar",
            symbol: 'rect',
            symbolSize: [4, 14],
            symbolOffset: [4, 0],
            symbolPosition: 'end',
            data: pictorialBarData,
          }
        ],
      };
      this.chart.setOption(option);
      this.initResizeCallBack();

    }
  }
};