import * as echarts from 'echarts';
import elementResizeDetectorMaker from 'element-resize-detector';
export default {
  props: {
    id: {
      type: String,
      default: 'bar'
    },
    data: {
      type: Array,
      default: function () {
        return [
          {
            name: '1月',
            value: '10'
          },
          {
            name: '2月',
            value: '19'
          }
        ];
      }
    },
    unit: {
      type: String,
      default: '单位：万元'
    },
    interval: {
      type: Number,
      default: null
    },
    rotate: {
      type: Number,
      default: 0
    },
    serverName: {
      type: String,
      default: '面积'
    },
    color: {
      type: Array,
      default: function () {
        return ['rgba(15, 252, 252, 1)', 'rgba(53, 197, 124, 1)']
      }
    },
    barBorderRadius: {
      type: Array,
      default: function () {
        return [0, 0, 0, 0]
      }
    }
  },
  data () {
    return {
      chart: null
    };
  },
  watch: {
    data: {
      handler: function (val) {
        this.$nextTick(function () {
          setTimeout(() => {
            this.initChart();
          }, 2000)
        });
      },
      immediate: true,
      deep: true
    }
  },
  create () {

  },
  mounted () {
    // setTimeout(()=>{
    //   this.initChart();
    // },2000)
  },
  computed: {
  },
  methods: {
    // 设置监听器 页面尺寸变化重新绘制图表
    initResizeCallBack () {
      const erd = elementResizeDetectorMaker();
      erd.listenTo(document.getElementById(this.id), () => {
        this.$nextTick(() => {
          if (document.getElementById(this.id).offsetWidth > 500){
            this.rotate = 60;
          }else{
            this.rotate = 0;
          }
          this.chart.resize();
          this.chart.setOption({
            // 新的配置项，例如：
            xAxis: {
              axisLabel: {
                rotate: this.rotate
              },
            }
          });
        });
      });
    },
    initChart () {
      this.chart = echarts.init(document.getElementById(this.id));
      this.chartSetOption();
    },
    chartSetOption () {
      let xAxisData = [];
      let data = [];
      let bgData = [];
      this.data.forEach(item => {
        xAxisData.push(item.name)
        data.push(item.value)
        bgData.push(100)
      });

      const option = {
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
            lineStyle: {
              opacity: 0,
            },
          }
        },
        legend: {
          data: ["直接访问", "背景"],
          show: false,
        },
        grid: {
          left: "5%",
          right: "5%",
          bottom: "5%",
          top: "15%",
          containLabel: true,
          z: 22,
        },
        xAxis: [
          {
            splitArea: {
              show: false,
              areaStyle: {
                color: ['RGBA(13, 31, 64, 1)']
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: ['rgba(18, 40, 83, 1)'],
                width: 100
              }
            },
            type: "category",
            gridIndex: 0,
            data: xAxisData,
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              lineStyle: {
                color: "#0c3b71",
              },
            },
            axisLabel: {
              show: true,
              rotate: this.rotate,
              color: 'rgba(185, 211, 235, 1)'
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: this.unit,
            nameTextStyle: {
              color: 'rgba(185, 211, 235, 1)'
            },
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                color: "rgba(185, 211, 235, 1)",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#27b4c2",
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#11366e",
              },
            },
          },
          {
            type: "value",
            gridIndex: 0,
            max: 100,
            splitNumber: 12,
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            }
          },
        ],
        series: [
          {
            name: this.serverName,
            type: "bar",
            barWidth: 15,
            xAxisIndex: 0,
            yAxisIndex: 0,
            showBackground: false,
            backgroundStyle: {
              shadowBlur: 10,
              color: 'rgba(18, 40, 83, 1)'
            },
            itemStyle: {
              normal: {
                barBorderRadius: this.barBorderRadius,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: this.color[0],
                  },
                  {
                    offset: 1,
                    color: this.color[1],
                  },
                ]),
              },
            },
            data: data,
            zlevel: 11,
          },
          // {
          //   type: 'custom',
          //   itemStyle: {
          //     color: 'rgba(18, 40, 83, 0.4)'
          //   },
          //   renderItem: function (params, api) {
          //     //获取对应类目的axisTick中心点坐标
          //     var start = api.coord([api.value(0)]);
          //     //通过坐标系的宽度和类目数，计算单个类目的背景
          //     var width = (params.coordSys.width / 7) * 0.6;
          //     return {
          //       type: 'rect',
          //       shape: {
          //         // 相对左上角坐标
          //         x: start[0] - width / 2,
          //         y: params.coordSys.y,
          //         width: width,
          //         height: params.coordSys.height,
          //       },
          //       style: api.style()
          //     };
          //   },
          //   data: bgData
          // }
        ]
      };
      this.chart.setOption(option);
      this.initResizeCallBack();
    }
  }
};
