<template>
  <div class="container">
    <a-table
        :dataSource="dataSource"
        :columns="columns"
        :pagination="pagination"
        :loading="loading"
        @change="handleTableChange"
        bordered
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'projectImage'">
          <img :src="record.projectImage" style="width: 50px; height: 50px" />
        </template>
        <template v-if="column.key === 'action'">
          <a-space :size="8">

            <a-button
                size="small"
                danger
                @click="settlementRecord(record)"
            >
              结算记录
            </a-button>

          </a-space>
        </template>
      </template>
    </a-table>

  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import type { TableProps } from 'ant-design-vue';
import myAxios from "../../api/myAxios.ts";
import router from "../../router";

interface PromoRecord {
  id: number;
  salespersonName: string;
  salespersonPhone: string;
  promoCodeInfoKey: string;
  promoCodeLink: string;
  projectName: string;
  projectImage: string;
  userId: number;
}


const columns = ref([
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
    width: 20,
    fixed: 'left',
    align: 'center'
  },
  {
    title: '项目名称',
    dataIndex: 'projectName',
    key: 'projectName',
    width: 20,
    fixed: 'left',
    align: 'center'
  },
  {
    title: '销售姓名',
    dataIndex: 'salespersonName',
    key: 'salespersonName',
    width: 20,
    fixed: 'left',
    align: 'center'
  },
  {
    title: '联系电话',
    dataIndex: 'salespersonPhone',
    key: 'salespersonPhone',
    width: 20,
    align: 'center'
  },
  {
    title: '优惠码',
    dataIndex: 'promoCodeInfoKey',
    key: 'promoCodeInfoKey',
    width: 20,
    align: 'center'
  },

  {
    title: '项目图片',
    dataIndex: 'projectImage',
    key: 'projectImage',
    width: 20,
    align: 'center'
  },
  {
    title: '操作',
    key: 'action',
    fixed: 'right',
    width: 70,
    align: 'center'

  }
]);

const dataSource = ref<PromoRecord[]>([]);
const loading = ref(false);
reactive({
  current: 1,
  pageSize: 10,
  sortField: 'id',
  sortOrder: 'ascend',
  id: '',
  salespersonName: '',
  salespersonPhone: '',
  promoCodeInfoKey: '',
});
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showTotal: (total: number) => `共 ${total} 条`,
});

const fetchData = async () => {
  const storedToken = localStorage.getItem('token');
  try {
    loading.value = true;
    // 这里替换为你的实际API地址
    const response:any = await myAxios.post('/promoCodeApply/page', {
      // 直接传递请求参数
      current: pagination.current,
      pageSize: pagination.pageSize,
      sortField: 'id',
      sortOrder: 'ascend'
    }, {
      headers: {
        'Content-Type': 'application/json',
        'Authorization': storedToken
      }
    });
    console.log(response)

    if (response.code === 1) {
      dataSource.value = response.data.records;
      // 确认total字段的位置
      pagination.total = response.data.total
    }
  } catch (error) {
    console.error('请求失败:', error);
  } finally {
    loading.value = false;
  }
};

const handleTableChange: TableProps['onChange'] = (pag) => {
  if (pag) {
    pagination.current = pag.current!;
    pagination.pageSize = pag.pageSize!;
  }
  fetchData();
};

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

const settlementRecord=(id:string)=>{
  router.push({
    path:'/settlementRecord',
    query:{
      id:String(id)
    }
  })
}
</script>

<style scoped>
.container {
  padding: 20px;
}
</style>