<template>
  <div class="overflow-x-auto 2xl:overflow-x-hidden">
    <p class="text-2xl font-bold mb-5">实时数据</p>
    <a-row type="flex" justify="center" align="middle" :gutter="[50, 100]">
      <a-col>
        <card title="全局用户日活数" :total="login_dau" />
      </a-col>
      <a-col>
        <card title="登录用户日活数" :total="total_dau" />
      </a-col>
      <a-col>
        <card title="总注册用户数" :total="total_register_user" />
      </a-col>
    </a-row>
    <p class="text-2xl font-bold my-5">日活折线图</p>
    <!-- 数据源 -->
    <span>数据：</span>
    <a-radio-group @change="handleChangeSource" v-model="chartType">
      <a-radio-button :value="eBarChart.not_login_dau">
        全局日活
      </a-radio-button>
      <a-radio-button :value="eBarChart.login_dau"> 注册日活 </a-radio-button>
    </a-radio-group>
    <!-- 日期范围 -->
    <span class="ml-7">日期区间：</span>
    <a-radio-group @change="handleChangeTimeRange" default-value="10">
      <a-radio-button value="10"> 10天 </a-radio-button>
      <a-radio-button value="15"> 15天 </a-radio-button>
      <a-radio-button value="30"> 30天 </a-radio-button>
    </a-radio-group>
    <div
      id="barchart"
      ref="barchart"
      style="width: 1100px"
      class="h-96 mx-auto text-center"
    ></div>
  </div>
</template>


<script lang="ts">
import Vue from "vue";
import { Row, Col, Radio } from "ant-design-vue";
import * as echarts from "echarts";
import { eBarChart } from "./const";
import DashboardService from "@/service/DashboardService/index";
import { getPastDaysUtilYesterday } from "@/utils/days/index";
Vue.use(Row).use(Col).use(Radio);

export default Vue.extend({
  components: {
    card: () => import("@/views/Root/Home/card.vue"),
  },
  props: {
    total: {
      type: Number,
    },
  },
  data() {
    return {
      option: {
        tooltip: {
          trigger: "axis",
          axisPointer: { type: "cross" },
        },
        color: "#3E4FAF",
        xAxis: {
          name: "日期",
          type: "category",
          // mock
          data: [] as Array<any>,
          axisTick: {
            alignWithLabel: true,
          },
          // data: [] as Array<number>,
        },
        yAxis: {
          type: "value",
          name: "用户数量",
          axisLabel: {
            formatter: "{value} 人",
          },
        },
        grid: [
          {
            left: 60,
            top: 50,
            right: 40,
            bottom: 70,
          },
        ],
        series: [
          {
            // data: [] as Array<number>,
            // mock
            data: [
              820, 932, 901, 934, 1290, 1330, 1320, 934, 1290, 1330, 1320, 820,
              932, 901, 934, 1290, 1330, 1320, 934, 1290, 1330, 1320,
            ],
            type: "line",
            areaStyle: { color: "#F5F5FB" },
            smooth: true,
            showBackground: false,
          },
        ],
      },
      timeRange: 10,
      myChart: undefined as undefined | echarts.ECharts,
      chartType: eBarChart.not_login_dau,
      eBarChart,
      type: "",
      login_dau: 0,
      total_dau: 0,
      total_register_user: 0,
    };
  },
  async mounted() {
    this.myChart = echarts.init(
      document.getElementById("barchart") as HTMLCanvasElement
    );
    this.initEchart(this.timeRange);
    this.queryRealtime();
    this.queryChart();
  },
  methods: {
    handleChangeTimeRange(e: any) {
      this.timeRange = e.target!.value;
      this.initEchart(this.timeRange);
    },
    handleChangeSource(e: any) {
      let type = e.target!.value;
      console.log(type);

      this.chartType =
        type === eBarChart.login_dau
          ? eBarChart.login_dau
          : eBarChart.not_login_dau;
      this.queryChart();
    },
    initEchart(period: number) {
      // mock
      (this.option.xAxis.data as Array<String>) = getPastDaysUtilYesterday(
        period
      ) as Array<String>;
      //
      (this.myChart as echarts.ECharts).setOption(this.option);
      this.queryChart();
    },
    async queryRealtime() {
      const ret = await DashboardService.getInstance().queryRealTime();
      if (ret.code === 200) {
        this.login_dau = ret.data.login_dau;
        this.total_dau = ret.data.total_dau;
        this.total_register_user = ret.data.total_register_user;
      }
    },
    async queryChart() {
      console.log(this.timeRange, this.chartType);

      const ret = await DashboardService.getInstance().queryChart({
        days: this.timeRange,
        name: this.chartType,
      });
      if (ret.code === 200) {
        console.log(ret);
        this.option.series[0].data = [];
        this.option.xAxis.data = [];
        ret.data.map((data) => {
          // 真实数据
          // this.option.series[0].data.push(data.value)
          // this.option.xAxis.data.push(data.time)
        });
      }
    },
  },
});
</script>