<template>
  <div class="ma-content-block">
    <sa-table
      ref="crudRef"
      :options="options"
      :columns="columns"
      :searchForm="searchForm"
    >
      <!-- 搜索区 tableSearch -->
      <template #tableSearch>
        <a-col :sm="12" :md="6" :lg="7" :xl="6" :xxl="4" :xs="24">
          <a-form-item label="游戏" field="game_id">
            <game-select v-model="searchForm.game_id" multiple />
          </a-form-item>
        </a-col>
        <a-col :sm="24" :md="17" :lg="17" :xl="12" :xxl="8" :xs="24">
          <a-form-item label="注册日期" field="tdate">
            <a-space>
              <a-date-picker
                class="w-full"
                v-model="searchForm.tdate"
                :show-time="false"
                mode="date"
              />
              <a-button
                size="mini"
                type="outline"
                @click="refreshDay('yesterday')"
                >前一天</a-button
              >
              <a-button size="mini" type="outline" @click="refreshDay('today')"
                >当天</a-button
              >
              <a-button
                size="mini"
                type="outline"
                @click="refreshDay('tomorrow')"
                >后一天</a-button
              >
            </a-space>
          </a-form-item>
        </a-col>
      </template>
      <!-- Table 自定义渲染 -->
    </sa-table>
  </div>
</template>

<script setup>
import { onMounted, ref, reactive } from "vue";
import api from "../../api/gameLog/analyse";
import dayjs from "dayjs";
import GameSelect from "@/components/game-select/index.vue";
import MediaSelect from "@/components/media-select/index.vue";
import AuthSelect from "@/components/auth-select/index.vue";

// 引用定义
const crudRef = ref();
const gameList = ref([]);

// 搜索表单
const searchForm = ref({
  game_id: "",
  tdate: "",
});

// SaTable 基础配置
const options = reactive({
  api: api.getIncomeAnalysis,
  pk: "date",
  showSort: false,
  showSummary: true,
  operationColumn: false,
  summary: [
    {
      action: "totalRow",
      dataIndex: "tdate",
    },
    {
      action: "totalRow",
      dataIndex: "game_id",
    },
    {
      action: "totalRow",
      dataIndex: "login_total",
    },
    {
      action: "totalRow",
      dataIndex: "pay_total",
    },
    {
      action: "totalRow",
      dataIndex: "pay_num",
    },
    {
      action: "totalRow",
      dataIndex: "pay_arpu",
    },
    {
      action: "totalRow",
      dataIndex: "pay_ratio",
    },
    {
      action: "totalRow",
      dataIndex: "yestoday_pay_total",
    },
    {
      action: "totalRow",
      dataIndex: "pay_increase_yestoday",
    },
    {
      action: "totalRow",
      dataIndex: "pay_increase_week",
    },
  ],
});

// SaTable 列配置
const columns = reactive([
  { title: "游戏ID", dataIndex: "game_id", width: 50, fixed: "left" },
  { title: "游戏名", dataIndex: "game_name", width: 100, fixed: "left" },
  {
    title: "DAU",
    dataIndex: "login_total",
    width: 70,
  },
  {
    title: "付费人数",
    dataIndex: "pay_num",
    width: 70,
  },
  {
    title: "付费金额",
    dataIndex: "pay_total",
    width: 70,
  },
  {
    title: "ARPU",
    dataIndex: "pay_arpu",
    width: 70,
  },
  {
    title: "收入比例",
    dataIndex: "pay_ratio",
    width: 70,
  },
  {
    title: "昨日充值",
    dataIndex: "yestoday_pay_total",
    width: 70,
  },
  {
    title: "昨日增长",
    dataIndex: "pay_increase_yestoday",
    width: 70,
  },
  {
    title: "上周增长",
    dataIndex: "pay_increase_week",
    width: 70,
  },
]);

// 页面数据初始化
const initPage = async () => {
  searchForm.value.tdate = dayjs().format("YYYY-MM-DD");
};
const refreshDay = async (day) => {
  console.log(day);
  switch (day) {
    case "yesterday":
      searchForm.value.tdate = dayjs(searchForm.value.tdate)
        .subtract(1, "day")
        .format("YYYY-MM-DD");
      break;
    case "today":
      searchForm.value.tdate = dayjs().format("YYYY-MM-DD");
      break;
    case "tomorrow":
      searchForm.value.tdate = dayjs(searchForm.value.tdate)
        .add(1, "day")
        .format("YYYY-MM-DD");
      break;
    default:
      break;
  }
  refresh();
};
// SaTable 数据请求
const refresh = async () => {
  crudRef.value?.refresh();
};

// 页面加载完成执行
onMounted(async () => {
  initPage();
  refresh();
});
</script>

<script>
export default { name: "v1/analyse/pay" };
</script>
