<script setup>
import { ref, onMounted } from "vue";

import { getAffiliateList, delAffiliateLog } from "@/api/affiliate";

const tableData = ref([]);
const total = ref(0);
const page = ref(1);
const pageSize = ref(10);

const getTableData = async () => {
  const res = await getAffiliateList({
    page: page.value,
    pageSize: pageSize.value,
  });
  if (res.code === 200) {
    tableData.value = res.data.data;
    total.value = res.data.total;
  }
};

onMounted(() => {
  getTableData();
});

const handleDelete = (row) => {
  ElMessageBox.confirm('此操作將永久刪除該推薦記錄, 是否繼續?', '提示', {
    confirmButtonText: '確定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    const res = await delAffiliateLog(row.log_id);
    if (res.code === 200) {
      getTableData();
      return ElMessage.success('刪除成功');
    }
    return ElMessage.error(res.msg);

  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消刪除'
    });
  });

};
</script>

<template>
  <div class="main">
    <!-- Breadcrumb: Start -->
    <el-page-header :icon="null" title=" " @back="onBack">
      <template #breadcrumb>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item> 電商管理中心 </el-breadcrumb-item>
          <el-breadcrumb-item>推薦列表</el-breadcrumb-item>
        </el-breadcrumb>
      </template>
      <template #content>
        <span class="text-large font-600 mr-3"> 推薦列表 </span>
      </template>
    </el-page-header>
    <!-- Breadcrumb: End -->
    <hr />
    <el-card>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="order_sn" label="訂單號" />
        <el-table-column prop="user_name" label="會員名稱" />
        <el-table-column prop="order_amount" label="訂單金額" />
        <el-table-column prop="money" label="分潤金額" />
        <el-table-column prop="time" label="時間" />
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-button size="small" type="danger" @click="handleDelete(scope.row)">刪除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-block">
        <el-pagination v-model:current-page="page" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
          small="small" layout="->,total, sizes, prev, pager, next, jumper" :total="total" />
      </div>
    </el-card>
  </div>
</template>

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