<template>
  <div class="chart-today">
    <div class="chart-total" style="width: 100%; height: 300px; "></div>
    <div class="chart-num" style="width: 100%; height: 300px; "></div>
  </div>
</template>
<script>
import echart from "common/echart";
import * as service from "service.wap";
import moment from "moment";
let totalChart, numChart;

export default {
  name: "chart-today",
  data() {
    return {};
  },
  mounted() {
    echart.then(chart => {
      this.ECharts = chart;
      totalChart = this.ECharts.init(document.querySelector(".chart-total"));
      numChart = this.ECharts.init(document.querySelector(".chart-num"));

      this.initChart();
      this.interval = setInterval(() => {
        this.initChart();
      }, 1000 * 60 * 5);
    });
  },
  beforeDestroy() {
    if (this.interval) {
      clearInterval(this.interval);
    }
  },
  methods: {
    getTimeDetail(t) {
      let time = new Date(t - 3600000);
      let hour = time.getHours();

      return hour;
    },
    setChartData(opt) {
      opt.chartName.setOption({
        title: {
          text: opt.title,
          x: "center",
          textStyle: {
            color: "#2CB1B2"
          }
        },
        legend: {
          data: ["今天", "昨天"],
          x: "right",
          textStyle: {
            color: "#fff"
          }
        },
        tooltip: {
          trigger: "axis"
        },
        xAxis: [
          {
            type: "category",
            data: opt.times,

            axisLabel: {
              textStyle: {
                color: "#fff"
              },
              rotate: 45
            },
            splitLine: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#fff",
                width: 1,
                type: "solid"
              }
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            min: parseInt(opt.min / 2, 10),
            max: opt.max,
            axisLabel: {
              formatter: function(p) {
                var new_v = opt.max > 10000 ? p / 1000 : p;
                var per = opt.max > 10000 ? "k" : "";

                return Math.round(new_v.toFixed(0)) + per;
              },
              textStyle: {
                color: "#fff"
              },
              rotate: 45
            },
            splitLine: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#fff",
                width: 1,
                type: "solid"
              }
            }
          }
        ],
        grid: {
          left: "3%",
          right: "3%",
          borderWidth: 0,
          containLabel: true
        },
        color: ["#FFCA4B", "#9AC4C9"],
        series: [
          {
            name: "今天",
            type: "bar",
            data: opt.t,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "top",
                  textStyle: {
                    color: "#FFCA4B"
                  },
                  formatter: function(p) {
                    var new_v = opt.max > 10000 ? p.value / 1000 : p.value;
                    var per = opt.max > 10000 ? "k" : "";

                    return Math.round(new_v.toFixed(0)) + per;
                  }
                }
              }
            }
          },
          {
            name: "昨天",
            type: "bar",
            data: opt.y,
            itemStyle: {
              normal: {
                label: {
                  show: false,
                  position: "top",
                  textStyle: {
                    color: "#9AC4C9"
                  },
                  formatter: function(p) {
                    var new_v = opt.max > 10000 ? p.value / 1000 : p.value;
                    var per = opt.max > 10000 ? "k" : "";

                    return Math.round(new_v.toFixed(0)) + per;
                  }
                }
              }
            }
          }
        ]
      });
    },
    async initChart() {
      await service.get("v2/rs/sale/hours", {}).then(ret => {
        const data = ret.data;

        let rows = {
          lineTime: _.map(data, "dayHour"),
          orderCount: _.map(data, "amount"),
          totalAmount: _.map(data, "amount"),
          orderCountY: _.map(data, "beforeAmount"),
          totalAmountY: _.map(data, "beforeAmount")
        };

        this.setChartData({
          title: "支付金额",
          chartName: totalChart,
          t: rows.totalAmount,
          y: rows.totalAmountY,
          times: rows.lineTime,
          min: 0,
          max: _.max([...rows.totalAmount, ...rows.totalAmountY])
        });
      });

      await service.get("v2/rs/sale/hoursDau", {}).then(ret => {
        let data = {
          lineTime: _.map(ret.today, "dayHour"),
          orderCount: _.map(ret.today, "uv"),
          orderCountY: _.map(ret.yesterday, "uv")
        };

        this.setChartData({
          title: "DAU",
          chartName: numChart,
          t: data.orderCount,
          y: data.orderCountY,
          times: data.lineTime,
          min: 0,
          max: _.max([...data.orderCount, ...data.orderCountY])
        });
      });
    }
  }
};
</script>
<style lang="scss">
</style>