<template>
  <div class="box-card statistics">
    <el-tabs stretch v-model="activeName">
      <el-tab-pane label="用户分析图" name="first">
        <echarts-from
          v-if="activeName == 'first'"
          ref="optionUserData"
          :option-data="optionUserData"
          :styles="style"
          height="100%"
          width="100%"
        />
      </el-tab-pane>
      <el-tab-pane label="订单数量分析图" name="second">
        <echarts-from
          v-if="activeName == 'second'"
          ref="optionOrderData"
          :option-data="optionOrderData"
          :styles="style"
          height="100%"
          width="100%"
        />
      </el-tab-pane>
      <el-tab-pane label="订单金额分析图" name="third">
        <echarts-from
          v-if="activeName == 'third'"
          ref="optionOrderNumber"
          :option-data="optionOrderNumber"
          :styles="style"
          height="100%"
          width="100%"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import echartsFrom from "@/components/echarts/index";
import { roterPre } from "@/settings";
export default {
  name: "DayData",
  components: {
    echartsFrom,
  },
  props: {
    tableData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      roterPre: roterPre,
      optionUserData: {},
      optionOrderData: {},
      optionOrderNumber: {},
      listLoading: true,
      activeName: "first",
      style: {
        height: "360px",
      },
    };
  },
  watch: {
    tableData() {
      this.getList();
    },
  },
  methods: {
    getLine(newUserList, userList, timer, activeCountList) {
      const seriesData = [
        {
          name: "新增用户(人)",
          type: "line",
          stack: "用户量",
          itemStyle: {
            normal: {
              color: "#5AD8A6",
              lineStyle: {
                color: "#5AD8A6",
              },
            },
          },
          data: newUserList,
          smooth: false,
        },
        {
          name: "活跃人数(人)",
          type: "line",
          stack: "用户量",
          itemStyle: {
            normal: {
              color: "#5D7092",
              lineStyle: {
                color: "#5D7092",
              },
            },
          },
          data: activeCountList,
          smooth: false,
        },
        {
          name: "累计用户(人)",
          type: "line",
          stack: "用户量",
          yAxisIndex: 1,
          itemStyle: {
            normal: {
              color: "#5B8FF9",
              lineStyle: {
                color: "#5B8FF9",
              },
            },
          },
          data: userList,
          smooth: false,
        },
      ];
      this.optionUserData = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: ["新增用户(人)", "累计用户(人)", "活跃人数(人)"],
          orient: "vertical",
          x: "right",
          y: "center",
          align: "left",
        },
        grid: {
          top: "8%",
          left: "2%",
          right: "8%",
          bottom: "3%",
          containLabel: true,
        },
        axisLine: {
          show: false,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLine: {
              show: false,
            },
            axisTick: {
              alignWithLabel: true,
              lineStyle: {
                color: "#D7DDE4",
              },
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              rotate: 50,
              textStyle: {
                color: "#7F8B9C",
              },
            },
            data: Array.from(new Set(timer)),
          },
        ],
        yAxis: [
          {
            type: "value",
            inverse: false,
          },
          {
            type: "value",
            splitLine: {
              show: false,
            },
          },
        ],
        series: seriesData,
      };
    },
    getOrderLine(order_amount, order_coupon, refund_amount, timer) {
      this.optionOrderData = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: [
            "实付订单金额(含运费/元)",
            "折扣使用数量",
            "退订单退款金额(元)",
          ],
          orient: "vertical",
          x: "right",
          y: "center",
          align: "left",
        },
        grid: {
          left: "3%",
          right: "12%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLine: {
              show: false,
            },
            axisTick: {
              alignWithLabel: true,
              lineStyle: {
                color: "#D7DDE4",
              },
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              rotate: 50,
              textStyle: {
                color: "#7F8B9C",
              },
            },
            data: Array.from(new Set(timer)),
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "实付订单金额(含运费/元)",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: order_amount,
          },
          {
            name: "折扣使用数量",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: order_coupon,
          },
          {
            name: "退订单退款金额(元)",
            type: "line",
            stack: "Total",
            label: {
              show: true,
              position: "top",
            },
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: refund_amount,
          },
        ],
      };
    },
    getBar(order_count, pay_count, timer) {
      this.optionOrderNumber = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        grid: {
          left: "3%",
          right: "12%",
          bottom: "3%",
          containLabel: true,
        },
        legend: {
          data: ["支付人数(人)", "支付订单数(单)"],
          orient: "vertical",
          x: "right",
          y: "center",
          align: "left",
        },
        xAxis: [
          {
            type: "category",
            // boundaryGap: false,
            axisLine: {
              show: false,
            },
            axisTick: {
              alignWithLabel: true,
              lineStyle: {
                color: "#D7DDE4",
              },
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              rotate: 50,
              textStyle: {
                color: "#7F8B9C",
              },
            },
            data: Array.from(new Set(timer)),
          },
        ],
        yAxis: [
          {
            type: "value",
          }
        ],
        series: [
          {
            name: "支付人数(人)",
            type: "bar",
            // barGap: 0,
            itemStyle: {
                normal: {
                    color: "#ff9900",
                    lineStyle: {
                        color: "#ff9900",
                    },
                },
            },
            emphasis: {
              focus: "series",
            },
            data: pay_count,
          },
          {
            name: "支付订单数(单)",
            type: "bar",
            itemStyle: {
                normal: {
                    color: "#20894d",
                    lineStyle: {
                        color: "#20894d",
                    },
                },
            },
            emphasis: {
              focus: "series",
            },
            data: order_count,
          },
        ],
      };
    },
    getList() {
      let newUserList = [];
      let userList = [];
      let timer = [];
      let order_coupon = [];
      let refund_amount = [];
      let order_count = [];
      let pay_count = [];
      let order_amount = []; //订单金额
      let activeCountList = [];
      let Daydata = [...this.tableData]
      // 对日期数组进行排序
      Daydata.sort((a, b) => {
        let dateA = new Date(a.date);
        let dateB = new Date(b.date);
        return dateA - dateB;
      });
      Daydata.map((item) => {
        newUserList.push(item.reg_count);
        userList.push(item.user_count);
        timer.push(item.date);
        order_amount.push(item.order_amount); //订单金额
        order_coupon.push(item.order_coupon); //优惠券
        refund_amount.push(item.refund_amount); //退款
        order_count.push(item.order_count);
        pay_count.push(item.pay_count);
        activeCountList.push(item.active_count);
      });
      this.getLine(newUserList, userList, timer, activeCountList);
      this.getOrderLine(order_amount, order_coupon, refund_amount, timer);
      this.getBar(order_count, pay_count, timer);
    },
  },
};
</script>

<style lang="scss" scoped>
.statistics {
  min-width: 700px;
  margin-top: 0;
  background: #fff;
}
</style>