<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="total_dau" />
      </a-col>
      <a-col>
        <card title="登录用户日活数" :total="login_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
      v-show="isEmpty"
      style="width: 1100px; line-height: 384px"
      class="
        emptyContainer
        h-96
        mx-auto
        text-center text-xl
        font-semibold
        mb-5
        mt-5
      "
    >
      暂无数据
    </div>
    <div
      v-show="!isEmpty"
      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 {formatDate} from "@/utils/time/transfer"
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",
          data: [] as Array<any>,
          axisTick: {
            alignWithLabel: true,
          },
        },
        yAxis: {
          type: "value",
          name: "用户数量",
          axisLabel: {
            formatter: "{value} 人",
          },
        },
        grid: [
          {
            left: 60,
            top: 50,
            right: 40,
            bottom: 70,
          },
        ],
        series: [
          {
            data: [] as Array<number>,
            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,
      isEmpty: true,
    };
  },
  async mounted() {
    this.myChart = echarts.init(
      document.getElementById("barchart") as HTMLCanvasElement
    );
    this.initEchart();
    this.queryRealtime();
  },
  methods: {
    handleChangeTimeRange(e: any) {
      this.timeRange = e.target!.value;
      this.initEchart(this.timeRange);
    },
    handleChangeSource(e: any) {
      let type = e.target!.value;
      this.chartType =
        type === eBarChart.login_dau
          ? eBarChart.login_dau
          : eBarChart.not_login_dau;
      this.initEchart(this.timeRange);
    },
    async initEchart(period?: number) {
      await this.queryChart().then(()=>{
        (this.myChart as echarts.ECharts).setOption(this.option);
      })
    },
    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() {
      const ret = await DashboardService.getInstance().queryChart({
        days: this.timeRange,
        name: this.chartType,
      });
      if (ret.code === 200) {
        this.option.series[0].data = [];
        this.option.xAxis.data = [];
        this.isEmpty = ret.data.length == 0 ? true : false;
        if (!this.isEmpty) {
          ret.data.map((data) => {
            // 真实数据
            this.option.series[0].data.push(data.value);
            this.option.xAxis.data.push(formatDate(data.time));
          });
          console.log('y',this.option.series[0].data,'x',this.option.xAxis.data);
          
        }
      }
    },
  },
});
</script>

<style lang="less" scoped>
.emptyContainer {
  background-image: url(../../../assets/statics_bg.png);
  background-size: cover;
  background-position: center;
}
</style>