import * as echarts from 'echarts';
import elementResizeDetectorMaker from 'element-resize-detector';
export default {
  props: {
    id: {
      type: String,
      default: 'line'
    },
    data: {
      type: Array,
      default: function () {
        return [
          {
            name: '1月',
            value1: '10',
            value2: '20',
          },
          {
            name: '2月',
            value1: '19',
            value2: '20',
          }
        ];
      }
    },
    color: {
      type: Array,
      default: function () {
        return ['rgba(134, 91, 252, 1)', 'rgba(26, 106, 226, 0.5)', 'rgba(26, 106, 226, 0)']
      }
    },
    areaStyle: {
      type: Array,
      default: function () {
        return ['rgba(134, 91, 252, 1)', 'rgba(26, 106, 226, 0.5)', 'rgba(26, 106, 226, 0)']
      }
    }
  },
  data () {
    return {
      chart: null,
      rotate: 0
    };
  },
  watch: {
    data: {
      handler: function (val) {
        this.$nextTick(function () {
          setTimeout(() => {
            this.initChart();
          }, 2000)
        });
      },
      immediate: true,
      deep: true
    }
  },
  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 data1 = [];
      let data2 = [];
      let legend = this.data[0]?.legend;
      this.data.forEach(item => {
        xAxisData.push(item.name)
        data1.push(item.value1)
        data2.push(item.value2)
      });
      const option = {
        grid: {
          left: "5%",
          right: "2%",
          top: "15%",
          bottom: "10%",
          containLabel: true,
        },
        tooltip: {
          show: true,
          trigger: "item",
        },
        legend: {
          show: false
        },
        color: {
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            {
              offset: 1,
              color: this.color[0],
            },
            {
              offset: 0.5,
              color: this.color[1],
            }
          ]),
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLabel: {
              color: 'rgba(185, 211, 235, 1)',
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            data: xAxisData
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "单位：万元",
            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",
              },
            },
          }
        ],
        series: [
          {
            name: legend[0],
            type: 'line',
            stack: 'Total',
            smooth: true,
            itemStyle: {
              normal: {
                color: this.color[0],
                lineStyle: {
                  color: this.color[0],
                  width: 1,
                },
                areaStyle: {
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    {
                      offset: 1,
                      color: this.color[0],
                    },
                    {
                      offset: 0,
                      color: 'rgba(0,0,0,0)',
                    },
                  ]),
                },
              },
            },
            data: data1
          },
          {
            name: legend[1],
            type: 'line',
            stack: 'Total',
            smooth: true,
            itemStyle: {
              normal: {
                color: this.color[1],
                lineStyle: {
                  color: this.color[1],
                  width: 1,
                },
                areaStyle: {
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    {
                      offset: 1,
                      color: this.color[1],
                    },
                    {
                      offset: 0,
                      color: 'rgba(0,0,0,0)',
                    },
                  ]),
                },
              },
            },
            data: data2
          },
          // {
          //   name: "",
          //   type: "line",
          //   smooth: true,
          //   symbolSize: 12,
          //   itemStyle: {
          //     normal: {
          //       color: this.color[0],
          //       lineStyle: {
          //         color: this.color[0],
          //         width: 1,
          //       },
          //       areaStyle: {
          //         color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          //           {
          //             offset: 1,
          //             color: this.areaStyle[0],
          //           },
          //           {
          //             offset: 0.5,
          //             color: this.areaStyle[1],
          //           },
          //           {
          //             offset: 0,
          //             color: this.areaStyle[2],
          //           },
          //         ]),
          //       },
          //     },
          //   },
          //   markPoint: {
          //     itemStyle: {
          //       normal: {
          //         color: "red",
          //       },
          //     },
          //   },
          //   data: data
          // }
        ],
      };
      this.chart.setOption(option);
      this.initResizeCallBack();

    }
  }
};
