<template>
  <div class='table-box'>
    <ProTable
      ref='proTable'
      :columns='columns'
      :data='logData'
      @selection-change="handleSelectionChange" 
      type="selection"
    >
     <!-- 表格 header 按钮 -->
     <template #tableHeader>
          <el-button type='primary' :icon='Upload'>导出csv</el-button>
        </template>
    </ProTable>
  </div>

</template>
<script setup lang='tsx' name='useProTable'>
import TimeControl from '@/components/TimeControl/index.vue'; // 根据实际路径调整
import { defineComponent,ref ,reactive} from 'vue'
import {type Log } from '@/api/log/interface'
import ProTable from '@/components/ProTable/index.vue'
import {Upload} from '@element-plus/icons-vue'
import logDataList from '@/api/log/logData'
import type { ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
let multipleSelection = ref<string[]>([]);
const logData = logDataList

// ProTable 实例
const proTable = ref<ProTableInstance>()
// 表格配置项
const columns = reactive<ColumnProps<Log.LogList>[]>([
  { type: 'selection', fixed: 'left', width: 50 },
  {
    prop: 'content',
    label: '内容',
    width: 600,
  },
  {
    prop: 'record_Time',
    label: '记录时间',
    width: 180,
    search: {
      // 自定义 search 显示内容
      render: ({ searchParam }) => {
        return (
          <div class='flx-center'>
            <TimeControl/>
          </div>
        )
      },
    },
  },
  {
    prop: 'user',
    label: '操作用户',
    search: { el: 'select', props: { filterable: true } },
  },
  
  {
    prop: 'type',
    label: '日志类型',
    search: { el: 'select', props: { filterable: true } },
  },
  {
    prop: 'level',
    label: '日志等级',
    search: { el: 'select', props: { filterable: true } },
  },
])

//选中
// 处理选择变化
const handleSelectionChange = (selection:Log.LogList[]) => {
  multipleSelection.value = selection.map(row => row.id); // 更新选中的行
  
};
</script>

<style scoped>

</style>
