<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="bm_id">
            <ad-advertiser-select v-model="searchForm.bm_id" multiple />
          </a-form-item>
        </a-col>
        <a-col :sm="6" :xs="24">
          <a-form-item label="广告账号ID" field="advertiser_id">
            <a-input
              v-model="searchForm.advertiser_id"
              placeholder="请输入广告账号ID"
              allow-clear
            />
          </a-form-item>
        </a-col>
        <a-col :sm="6" :xs="24">
          <a-form-item label="账户名称" field="advertiser_name">
            <a-input
              v-model="searchForm.advertiser_name"
              placeholder="请输入广告账户名称"
              allow-clear
            />
          </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 { onMounted, ref, reactive } from "vue";
import api from "../../../api/customer/reconciliation";
import AdAdvertiserSelect from "@/components/ad-advertiser-select/index.vue";
import dayjs from "dayjs";
const crudRef = ref();
const options = reactive({
  api: api.getAdCostList,
  pk: "id",
  showSummary: true,
  operationColumn: false,
  showSort: false,
  summary: [
    {
      action: "totalRow",
      dataIndex: "advertiser_name",
    },
    {
      action: "totalRow",
      dataIndex: "money",
    },
    {
      action: "totalRow",
      dataIndex: "ori_money",
    },
  ],
});

const searchForm = ref({
  advertiser_name: "",
  advertiser_id: "",
  bm_id: [],
  date: [
    dayjs().subtract(8, "day").format("YYYY-MM-DD"),
    dayjs().format("YYYY-MM-DD"),
  ],
});

const columns = reactive([
  { title: "广告账号名称", dataIndex: "advertiser_name", width: 120 },
  { title: "原始金额", dataIndex: "ori_money", width: 120 },
  { title: "结算金额", dataIndex: "money", width: 120 },
  { title: "返点", dataIndex: "fandain", width: 120 },
]);
</script>
