<template>
    <a-card>
        <template #title>
            <div style="display: flex;justify-content: space-between;align-items: center;">
                <div><span>可用代金劵:</span><span style="color: red;font-size: 18px;font-weight: bold;">¥0.00</span></div>
                <div><a-button type="primary">兑换码兑换</a-button></div>
            </div>
        </template>
        <a-tabs v-model:activeKey="activeKey">
            <a-tab-pane key="1" tab="生效中">
            </a-tab-pane>
            <a-tab-pane key="2" tab="已失效">
            </a-tab-pane>
        </a-tabs>
           <a-table :dataSource="listData" :columns="computedColumns" bordered :pagination="paginationState"  @change="onTableChange"/>
    </a-card>

</template>
<script setup>
import { ref,onBeforeMount,computed } from 'vue'
import { usePagination } from '@/hooks'
// const listData=ref([ {title:1}])
// const paginationState=ref({
//             total: 0,
//         current: 1,
//         pageSize: 10,
//         showTotal: (total) => `总 ${total} 条数据`,
//         pageSizeOptions: ['10', '20', '30', '40'],
// })
const { listData, loading, showLoading, hideLoading, paginationState, resetPagination, searchFormData } = usePagination()
// 基础列（始终显示）
const baseColumns = [
  { title: '代金券名称', dataIndex: 'name', key: 'name' },
  { title: '使用产品', dataIndex: 'product', key: 'product' },
  { title: '使用范围', dataIndex: 'scope', key: 'scope' },
  { title: '生效时间', dataIndex: 'startTime', key: 'startTime' },
  { title: '失效时间', dataIndex: 'endTime', key: 'endTime' },
  { title: '余额/原始面值', dataIndex: 'value', key: 'value' },
]
const activeKey=ref('1')
// “自动抵扣消费”列（仅在 activeKey === '1' 时显示）
const autoDeductColumn = {
  title: '自动抵扣消费',
  dataIndex: 'autoDeduct',
  key: 'autoDeduct',
  // 可以加自定义渲染，比如显示“是/否”
  customRender: ({ text }) => (text ? '是' : '否')
}

// 动态 columns
const computedColumns = computed(() => {
  const cols = [...baseColumns]
  if (activeKey.value === '1') {
    // 插入到指定位置（比如第5列，即生效时间之后）
    cols.splice(5, 0, autoDeductColumn)
  }
  return cols
})
onBeforeMount(()=>{
getPageList()

})
const getPageList=()=>{
    listData.value=[
        {flowNum:1}
    ]
}
/**
 * 分页
 */
function onTableChange({ current, pageSize }) {
    paginationState.current = current
    paginationState.pageSize = pageSize
    getPageList()
}
/**
 * 搜索
 */
function handleSearch() {
    resetPagination()
    getPageList()
}
/**
 * 重置
 */
function handleResetSearch() {
    searchFormData.value = {}
    resetPagination()
    getPageList()
}
</script>