<template>
  <div class="chartList_item">
    <div class="chartList_item_title">
      <div class="chartList_item_title_l">订单统计</div>
      <div class="chartList_item_title_r">
        <span :class="{ active: type == 'week' }" @click="dateChange1(1)">本周</span>
        <span :class="{ active: type == 'month' }" @click="dateChange1(2)">今年</span>
      </div>
    </div>
    <div ref="chart1" style="height: 300px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {
  platformOnSevenDay_Api,
  platformOnYear_Api,
  businessOnSevenDay_Api,
  businessOnYear_Api,
} from "@/api/home.js";
export default {
  props: {
    userType: {
      type: String,
      default: "sys_user",
    },
    weekList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      type: "month",
    };
  },
  mounted() {
    this.statisticsBuyDays();
  },
  methods: {
    dateChange1(type) {
      this.type = type == 1 ? "week" : "month";
      this.statisticsBuyDays();
    },
    statisticsBuyDays() {
      let url = "";
      if (this.userType == "sys_user") {
        url = this.type == "week" ? platformOnSevenDay_Api : platformOnYear_Api;
      } else {
        url = this.type == "week" ? businessOnSevenDay_Api : businessOnYear_Api;
      }
      if (!url) return;
      url().then((res) => {
        if (res && res.code == 200) {
          let xData = [];
          xData = res.data.map((val) => {
            if (this.type == "week") {
              return this.weekList[val.weekValue - 1];
            } else {
              return val.yearMonthValue;
            }
          });
          let yData = res.data.map(
            (val) => this.$addCalculate(this.$multiplyCalculate((val.onlineOrderNum || 0), 1), this.$multiplyCalculate((val.shopOrderNum || 0), 1))
              // (val.onlineOrderNum || 0) * 1 + (val.shopOrderNum || 0) * 1
          );
          this.chart1Handle(xData, yData);
        }
      });
    },
    chart1Handle(xData, yData) {
      let myChart = echarts.init(this.$refs.chart1);
      let option;
      option = {
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          data: xData,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: yData,
            type: "bar",
            color: "#409eff",
            barMaxWidth: 40
          },
        ],
      };
      option && myChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
