<template>
  <div class="table-actions-demo">
    <h2>TableList 操作按钮示例</h2>
    
    <!-- 使用 TableList 组件 -->
    <TableList
      ref="tableListRef"
      :config="tableListConfig"
      @update:data="list = $event"
      @update:loading="loading = $event"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, reactive } from 'vue'
import { checkPermi } from '@/utils/permission'
import TableList from './index.vue'
import type { TableListConfig } from './types'

// 模拟数据
const list = ref([])
const loading = ref(false)
const checkedIds = ref<number[]>([])
const exportLoading = ref(false)

// 模拟API
const mockApi = {
  getList: async (params: any) => {
    loading.value = true
    // 模拟API调用延迟
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    // 模拟返回数据
    const mockData = {
      list: [
        { id: 1, name: '角色1', code: 'role1', status: 1, createTime: '2024-01-01 10:00:00' },
        { id: 2, name: '角色2', code: 'role2', status: 0, createTime: '2024-01-02 10:00:00' },
        { id: 3, name: '角色3', code: 'role3', status: 1, createTime: '2024-01-03 10:00:00' }
      ],
      total: 3
    }
    loading.value = false
    return mockData
  }
}

// 搜索表单配置
const searchFormConfig = {
  items: [
    {
      field: 'name',
      label: '角色名称',
      type: 'input' as const,
      placeholder: '请输入角色名称',
      width: '240px'
    },
    {
      field: 'status',
      label: '状态',
      type: 'select' as const,
      placeholder: '请选择状态',
      width: '240px',
      options: [
        { label: '启用', value: 1 },
        { label: '禁用', value: 0 }
      ]
    }
  ]
}

// 表格列配置
const tableColumns = [
  {
    prop: 'name',
    label: '角色名称',
    width: 120,
    align: 'center' as const
  },
  {
    prop: 'code',
    label: '角色标识',
    width: 180,
    align: 'center' as const
  },
  {
    prop: 'status',
    label: '状态',
    width: 80,
    align: 'center' as const
  },
  {
    prop: 'createTime',
    label: '创建时间',
    width: 180,
    align: 'center' as const
  }
]

// 顶部操作按钮配置
const tableActions = [
  {
    label: '新增',
    type: 'primary' as const,
    plain: true,
    icon: 'ep:plus',
    permission: 'system:role:create',
    handler: () => {
      console.log('点击新增按钮')
      // 实际项目中可以打开表单弹窗
    }
  },
  {
    label: '导出',
    type: 'success' as const,
    plain: true,
    icon: 'ep:download',
    loading: exportLoading, // 直接传递 ref，组件内部会处理
    permission: 'system:role:export',
    handler: () => {
      console.log('点击导出按钮')
      exportLoading.value = true
      setTimeout(() => {
        exportLoading.value = false
        console.log('导出完成')
      }, 2000)
    }
  },
  {
    label: '批量删除',
    type: 'danger' as const,
    plain: true,
    icon: 'ep:delete',
    disabled: computed(() => checkedIds.value.length === 0), // 直接传递 computed，组件内部会处理
    permission: 'system:role:delete',
    handler: () => {
      console.log('点击批量删除按钮，选中IDs:', checkedIds.value)
    }
  }
]

// 表格行操作按钮配置
const rowActions = [
  {
    label: '编辑',
    type: 'primary' as const,
    link: true,
    handler: (row: any) => {
      console.log('编辑行:', row)
    }
  },
  {
    label: '删除',
    type: 'danger' as const,
    link: true,
    handler: (row: any) => {
      console.log('删除行:', row)
    }
  }
]

// 查询参数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  name: '',
  status: undefined
})

// 选择变化处理
const handleSelectionChange = (selection: any[]) => {
  checkedIds.value = selection.map((row) => row.id)
  console.log('选中的行:', selection)
}

// TableList 配置
const tableListConfig: TableListConfig = {
  searchForm: searchFormConfig,
  actions: tableActions, // 顶部操作按钮
  table: {
    loading: false,
    data: list.value,
    selection: true,
    actionsWidth: 150,
    columns: tableColumns,
    actions: rowActions // 行操作按钮
  },
  pagination: {
    show: true,
    pageSize: 10
  },
  api: {
    getList: mockApi.getList
  },
  queryParams: queryParams,
  onSelectionChange: handleSelectionChange
}

// 组件引用
const tableListRef = ref()
</script>

<style scoped>
.table-actions-demo {
  padding: 20px;
}

h2 {
  margin-bottom: 20px;
  color: #333;
}
</style>