<template>
  <div class="table-box button-table">
    <ProTable
      ref="proTable"
      :columns="columns"
      :request-api="getTableList"
      :init-param="initParam"
      :data-callback="dataCallback"
      :refresh-reset-page="true"
    >
      <!-- 表格操作 -->
      <template #operation="scope">
        <el-button link type="primary" @click="toDetail(scope.row)"> 查看详情 </el-button>
      </template>
    </ProTable>
  </div>
</template>

<script setup lang="tsx" name="couponTemplate">
import { reactive, ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import { getCouponList } from "@/api/modules/operationManagement";
import { localGet, usePermission } from "@/utils";
import { formatCurrency } from "@/utils/formatCurrency";

const router = useRouter();
const proTable = ref<ProTableInstance>();

// 优惠券状态枚举
const statusEnumY = [
  { label: "草稿", value: 3 },
  { label: "进行中", value: 1 },
  { label: "已结束", value: 2 }
];

// 表格列配置
const columns = reactive<ColumnProps<any>[]>([
  {
    prop: "name",
    label: "优惠券名称",
    search: {
      el: "input",
      props: { placeholder: "请输入" }
    }
  },
  {
    prop: "id",
    label: "优惠券ID"
  },
  {
    prop: "createdTime",
    label: "创建时间",
    render: (scope: any) => {
      if (scope.row.createdTime) {
        return scope.row.createdTime.replace(/-/g, "/");
      }
      return "--";
    }
  },
  {
    prop: "nominalValue",
    label: "面值",
    render: (scope: any) => {
      return formatCurrency(scope.row.nominalValue, 2, "￥") || "--";
    }
  },
  {
    prop: "minimumSpendingAmount",
    label: "消费金额门槛",
    render: (scope: any) => {
      if (scope.row.minimumSpendingAmount) {
        return formatCurrency(scope.row.minimumSpendingAmount, 2, "￥");
      }
      return "--";
    }
  },
  {
    prop: "couponStatus",
    label: "优惠券状态",
    isShow: false,
    search: {
      el: "select",
      props: { placeholder: "请选择" }
    },
    enum: statusEnumY,
    fieldNames: { label: "label", value: "value" }
  },
  { prop: "operation", label: "操作", fixed: "right" }
]);

// 初始化请求参数
const initParam = reactive({
  storeId: localGet("createdId"),
  groupType: localGet("businessSection"),
  couponType: "2", // 优惠券类型
  couponsFromType: 1
});

// 数据回调处理（兼容 getStoreAllCouponList 返回 records / 旧 discountList）
const dataCallback = (data: any) => {
  const list = data.records ?? data.discountList?.records ?? [];
  const total = data.total ?? data.discountList?.total ?? list.length ?? 0;
  return { list, total };
};

// 获取表格列表
const getTableList = (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params));
  // 优惠券相关参数
  delete newParams.dataType;
  newParams.couponType = "2";
  newParams.couponsFromType = 1;
  return getCouponList(newParams);
};

// 跳转详情页
const toDetail = (row: any) => {
  router.push(`/operationManagement/couponTemplate/detail?id=${row.id}`);
};

const type = ref(false);
// 页面加载时触发查询
onMounted(async () => {
  type.value = await usePermission("查看优惠券模板");
  proTable.value?.getTableList();
});
</script>

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