<template>
  <div class="tablelist-example">
    <div class="example-header">
      <h2>TableList 组件使用示例</h2>
      <div class="demo-info">
        <el-alert
          title="演示说明"
          type="info"
          description="本示例展示了 TableList 组件的完整功能，包括搜索、表格操作、拖拽排序、全屏显示、数据导出等。注意：当行操作按钮超过3个时，会自动折叠为下拉菜单显示。"
          show-icon
          :closable="false"
        />
      </div>
    </div>

    <!-- 使用TableList组件的示例 -->
    <TableList ref="tableListRef" :config="tableListConfig" />

    <!-- 功能说明面板 -->
    <div class="feature-panel">
      <h3>功能特性说明</h3>
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="feature-card">
            <h4>🔍 搜索功能</h4>
            <ul>
              <li>基础搜索表单</li>
              <li>响应式布局</li>
              <li>展开/收起功能</li>
              <li>多种表单控件</li>
            </ul>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="feature-card">
            <h4>📊 表格功能</h4>
            <ul>
              <li>自定义列配置</li>
              <li>行操作按钮（智能折叠）</li>
              <li>批量操作</li>
              <li>分页支持</li>
            </ul>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="feature-card">
            <h4>⚙️ 设置功能</h4>
            <ul>
              <li>列设置拖拽排序</li>
              <li>全屏显示</li>
              <li>数据导出</li>
              <li>表格打印</li>
              <li>操作按钮智能折叠</li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import TableList from './index.vue'
import type { TableListConfig } from './types'

defineOptions({ name: 'TableListExample' })

const { push } = useRouter()
const tableListRef = ref()

// 模拟数据
const mockData = ref([
  {
    id: 1,
    name: '张三',
    email: 'zhangsan@example.com',
    phone: '13800138001',
    department: '技术部',
    position: '前端工程师',
    status: '在职',
    salary: '15000',
    createTime: '2024-01-15 10:30:00',
    updateTime: '2024-01-20 14:25:00'
  },
  {
    id: 2,
    name: '李四',
    email: 'lisi@example.com',
    phone: '13800138002',
    department: '产品部',
    position: '产品经理',
    status: '在职',
    salary: '20000',
    createTime: '2024-01-10 09:15:00',
    updateTime: '2024-01-18 16:40:00'
  },
  {
    id: 3,
    name: '王五',
    email: 'wangwu@example.com',
    phone: '13800138003',
    department: '设计部',
    position: 'UI设计师',
    status: '离职',
    salary: '12000',
    createTime: '2023-12-20 11:20:00',
    updateTime: '2024-01-05 10:30:00'
  }
])

// 完整配置示例
const tableListConfig: TableListConfig = {
  // 搜索表单配置
  searchForm: {
    items: [
      {
        field: 'name',
        label: '姓名',
        type: 'input',
        placeholder: '请输入姓名'
      },
      {
        field: 'status',
        label: '状态',
        type: 'select',
        placeholder: '请选择状态',
        options: [
          { label: '在职', value: '在职' },
          { label: '离职', value: '离职' }
        ]
      },
      {
        field: 'department',
        label: '部门',
        type: 'select',
        placeholder: '请选择部门',
        options: [
          { label: '技术部', value: '技术部' },
          { label: '产品部', value: '产品部' },
          { label: '设计部', value: '设计部' }
        ]
      },
      {
        field: 'createTime',
        label: '创建时间',
        type: 'date-range'
      }
    ],
    maxItemsPerRow: 3,
    collapsed: true
  },

  // 表格顶部操作按钮配置
  actions: [
    {
      label: '新增',
      type: 'primary',
      icon: 'ep:plus',
      handler: () => {
        ElMessage.success('点击新增按钮')
      }
    },
    {
      label: '批量删除',
      type: 'danger',
      plain: true,
      icon: 'ep:delete',
      handler: () => {
        ElMessage.warning('点击批量删除按钮')
      }
    },
    {
      label: '导出',
      type: 'success',
      plain: true,
      icon: 'ep:download',
      handler: () => {
        ElMessage.info('点击导出按钮')
      }
    }
  ],
  
  // 表格配置
  table: {
    selection: true, // 显示选择列
    index: true,    // 显示序号列
    columns: [
      { 
        prop: 'id', 
        label: 'ID', 
        width: 80, 
        fixed: 'left',
        required: true // 必需列，不允许隐藏
      },
      { 
        prop: 'name', 
        label: '姓名', 
        width: 120,
        fixed: 'left'
      },
      { prop: 'email', label: '邮箱', width: 200 },
      { prop: 'phone', label: '电话', width: 130 },
      { prop: 'department', label: '部门', width: 100 },
      { prop: 'position', label: '职位', width: 120 },
      { prop: 'status', label: '状态', width: 80 },
      { prop: 'salary', label: '薪资', width: 100 },
      { prop: 'createTime', label: '创建时间', width: 180 },
      { prop: 'updateTime', label: '更新时间', width: 180 }
    ],
    actions: [
      {
        label: '编辑',
        type: 'primary',
        link: true,
        handler: (row) => {
          ElMessage.info(`编辑：${row.name}`)
        }
      },
      {
        label: '查看',
        type: 'success',
        link: true,
        handler: (row) => {
          ElMessage.success(`查看详情：${row.name}`)
        }
      },
      {
        label: '删除',
        type: 'danger',
        link: true,
        handler: (row) => {
          ElMessage.error(`删除：${row.name}`)
        }
      },
      {
        label: '权限分配',
        type: 'warning',
        link: true,
        icon: 'ep:lock',
        handler: (row) => {
          ElMessage.warning(`权限分配：${row.name}`)
        }
      },
      {
        label: '人员设置',
        type: 'info',
        link: true,
        icon: 'ep:user',
        handler: (row) => {
          ElMessage.info(`人员设置：${row.name}`)
        }
      }
    ]
  },
  
  // 分页配置
  pagination: {
    show: true,
    pageSize: 10,
    layout: 'total, sizes, prev, pager, next, jumper'
  },
  
  // 设置配置 - 展示所有新功能
  settings: {
    refresh: true,      // 刷新按钮
    download: true,    // 下载按钮
    print: true,       // 打印按钮
    size: true,        // 尺寸调整
    columns: true,     // 列设置
    fullscreen: true   // 全屏按钮
  },
  
  // API配置（模拟）
  api: {
    getList: async (params: any) => {
      console.log('查询参数:', params)
      // 模拟API延迟
      await new Promise(resolve => setTimeout(resolve, 500))
      return {
        list: mockData.value,
        total: mockData.value.length
      }
    }
  },
  
  // 查询参数
  queryParams: reactive({
    name: '',
    status: '',
    department: '',
    createTime: []
  }),

  // 自定义事件处理
  onSearch: (params: any) => {
    console.log('自定义搜索:', params)
  },

  onReset: () => {
    console.log('自定义重置')
  },

  onSelectionChange: (selection: any[]) => {
    console.log('选择变化:', selection)
    ElMessage.info(`已选择 ${selection.length} 条数据`)
  }
}

// 暴露给模板
onMounted(() => {
  console.log('TableList 示例组件已加载')
  console.log('配置信息:', tableListConfig)
  
  // 可以调用组件方法
  // tableListRef.value?.getList()
  // tableListRef.value?.handleSearch()
  // tableListRef.value?.handleReset()
})
</script>

<style scoped>
.tablelist-example {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.example-header {
  margin-bottom: 20px;
}

.example-header h2 {
  margin: 0 0 15px 0;
  color: #303133;
  font-size: 24px;
  font-weight: 600;
}

.demo-info {
  margin-bottom: 20px;
}

.feature-panel {
  margin-top: 30px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.feature-panel h3 {
  margin: 0 0 20px 0;
  color: #303133;
  font-size: 18px;
  font-weight: 600;
}

.feature-card {
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #e9ecef;
  height: 100%;
}

.feature-card h4 {
  margin: 0 0 15px 0;
  color: #409eff;
  font-size: 16px;
  font-weight: 600;
}

.feature-card ul {
  margin: 0;
  padding-left: 20px;
  color: #606266;
  font-size: 14px;
  line-height: 1.8;
}

.feature-card li {
  margin-bottom: 5px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .tablelist-example {
    padding: 10px;
  }
  
  .example-header h2 {
    font-size: 20px;
  }
  
  .feature-panel {
    margin-top: 20px;
    padding: 15px;
  }
}
</style>