<template>
  <div class=" overflow-x-auto">
    <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:1200px"
      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: {
        color: "#3E4FAF",
        xAxis: {
          type: "category",
          // mock
          data: [] as Array<any>
          // data: [] as Array<number>,
        },
        yAxis: {
          type: "value",
        },
        grid:[
          {
            left: 20,
            top: 30,
            right: 0,
            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);
        ret.data.map((data)=>{
          // 真实数据
          // this.option.series[0].data.push(data.value)
          // this.option.xAxis.data.push(data.time)
        })
      }
    },
  },
});
</script>