<template>
  <div class="table-box button-table">
    <ProTable
      ref="proTable"
      :columns="columns"
      :data-callback="dataCallback"
      :init-param="initParam"
      :request-api="getTableList"
    />
  </div>
</template>

<script lang="tsx" name="couponIssuanceRecords" setup>
import { onMounted, reactive, ref } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import { getActivityList, getCouponTemplateList } from "@/api/modules/operationManagement";
import { localGet } from "@/utils";

const proTable = ref<ProTableInstance>();

// 表格列配置
const columns = reactive<ColumnProps<any>[]>([
  {
    prop: "couponName",
    label: "优惠券名称"
  },
  {
    prop: "couponId",
    label: "优惠券ID"
  },
  {
    prop: "issuanceTime",
    label: "发放时间",
    render: (scope: any) => {
      return scope.row.issuanceTime?.replace(/-/g, "/") || "--";
    }
  },
  {
    prop: "activityName",
    label: "活动名称",
    search: {
      el: "select",
      props: { placeholder: "请选择", filterable: true }
    },
    enum: async () => {
      const params = {
        storeId: localGet("createdId"),
        status: "5",
        pageNum: 1,
        pageSize: 99999
      };
      const res: any = await getActivityList(params);
      if (res && res.code == 200 && res.data) {
        const data = res.data as any;
        if (data.records && Array.isArray(data.records)) {
          return {
            data: data.records.map((item: any) => ({
              label: item.activityName,
              value: item.activityName
            }))
          };
        }
        return { data: [] };
      }
      return { data: [] };
    },
    fieldNames: { label: "label", value: "value" }
  },
  {
    prop: "activityId",
    label: "活动ID"
  },
  {
    prop: "userId",
    label: "用户ID"
  },
  {
    prop: "isUsed",
    label: "是否使用",
    render: (scope: any) => {
      return scope.row.isUsed === 1 || scope.row.isUsed === true ? "是" : "否";
    },
    // search: {
    //   el: "select",
    //   props: { placeholder: "请选择" }
    // },
    // enum: [
    //   { label: "是", value: 1 },
    //   { label: "否", value: 0 }
    // ],
    fieldNames: { label: "label", value: "value" }
  }
]);

// 初始化请求参数
const initParam = reactive({
  storeId: localGet("createdId")
});

// 数据回调处理
const dataCallback = (data: any) => {
  return {
    list: data?.records || [],
    total: data?.total || 0
  };
};

// 获取表格列表
const getTableList = (params: any) => {
  return getCouponTemplateList(params);
};

// 页面加载时触发查询
onMounted(() => {
  proTable.value?.getTableList();
});
</script>

<style lang="scss" scoped></style>
