<template>
  <div class="ma-content-block">
    <sa-table
      ref="crudRef"
      :options="options"
      :columns="columns"
      :searchForm="searchForm"
    >
      <!-- 搜索区 tableSearch -->
      <template #tableSearch>
        <a-col :sm="6" :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="6" :xs="24">
          <a-form-item label="负责人" field="auth_id">
            <auth-select v-model="searchForm.auth_id" multiple />
          </a-form-item>
        </a-col>
        <a-col :sm="6" :xs="24">
          <a-form-item label="时间" field="date">
            <a-range-picker
              v-model="searchForm.date"
              :show-time="false"
              mode="date"
              class="w-full"
            />
          </a-form-item>
        </a-col>
      </template>
    </sa-table>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import AuthSelect from "@/components/auth-select/index.vue";
import api from "../../../api/customer/reconciliation";
import GameSelect from "@/components/game-select/index.vue";
import dayjs from "dayjs";

const crudRef = ref();
const columns = reactive([
  { title: "负责人", dataIndex: "auth_name", width: 120 },
  { title: "消耗", dataIndex: "cost", width: 120 },
  { title: "收入", dataIndex: "income", width: 120 },
]);
const searchForm = ref({
  auth_id: [],
  date: [
    dayjs().subtract(8, "day").format("YYYY-MM-DD"),
    dayjs().format("YYYY-MM-DD"),
  ],
});
const options = reactive({
  api: api.getAdKpiList,
  pk: "id",
  showSummary: true,
  operationColumn: false,
  showSort: false,
  summary: [
    {
      action: "totalRow",
      dataIndex: "auth_name",
    },
    {
      action: "totalRow",
      dataIndex: "cost",
    },
    {
      action: "totalRow",
      dataIndex: "income",
    },
  ],
});
</script>

<script>
export default { name: "v1/reconciliation/adKpi" };
</script>
