<template>
  <vab-chart
    style="width: 100%; height: 180px; margin-top: -70px; z-index: 1"
    :autoresize="true"
    :options="options"
    theme="vab-echarts-theme"
  />
</template>
<script>
  import VabChart from "@/extra/vabCharts";
  import VabCount from "@/extra/vabCount";

  export default {
    components: {
      VabChart,
      // VabCount,
    },
    props: {
      chartData: {
        type: Array,
        default: () => {
          return [];
        },
      },
    },
    data() {
      return {
        timer: 0,
        countConfig: {
          startVal: 0,
          endVal: this.$baseLodash.random(20000, 60000),
          decimals: 0,
          prefix: "",
          suffix: "",
          separator: ",",
          duration: 8000,
        },
        //访问量
        options: {
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985",
              },
            },
          },
          color: ["#0668F0", "#F7B500", "#B620E0"],
          legend: {
            show: false,
            data: ["金额", "商品数量", "订单数量"],
            selected: {
              商品数量: false,
              订单数量: false,
            },
            borderColor: "#000",
          },
          xAxis: [
            {
              show: false,
              type: "category",
              boundaryGap: false,
              data: [],
              axisTick: {
                alignWithLabel: true,
              },
              splitLine: {
                show: false,
              },
            },
          ],
          yAxis: [
            {
              show: false,
              type: "value",
              splitLine: {
                show: false,
              },
            },
          ],
          series: [
            {
              name: "金额",
              type: "line",
              data: ["350", "550", "500", "600", "450", "400", "450"],
              smooth: true,
              areaStyle: {
                // normal: {
                //   color: "rgba(255,255,255,0.1)",
                // },
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgb(198,199,248)", // 0% 处的颜色
                    },
                    {
                      offset: 0.5,
                      color: "rgba(255,255,255,0.1)", // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                },
              },
              symbol: "none",
              itemStyle: {
                normal: {
                  lineStyle: {
                    color: "#0668F0",
                  },
                },
              },
            },
            {
              name: "商品数量",
              type: "line",
              data: [],
              smooth: true,
              areaStyle: {
                normal: {
                  color: "#fff",
                },
              },
              itemStyle: {
                normal: {
                  lineStyle: {
                    color: "#F7B500",
                  },
                },
              },
            },
            {
              name: "订单数量",
              type: "line",
              data: [],
              smooth: true,
              areaStyle: {
                normal: {
                  color: "#fff",
                },
              },
              itemStyle: {
                normal: {
                  lineStyle: {
                    color: "#B620E0",
                  },
                },
              },
            },
          ],
        },
      };
    },
    beforeDestroy() {
      clearInterval(this.timer);
    },
    mounted() {
      this.chartData.forEach((item, index) => {
        this.options.xAxis[0].data.push(item.date);
        this.options.series[0].data.push(item.orderMoney);
        this.options.series[1].data.push(item.goodsNum);
        this.options.series[2].data.push(item.orderNum);
      });
      // this.options.xAxis[0].data = date;
      // this.options.series[0].data = data;
    },
  };
</script>
