<script setup lang="ts">
import { getStudentEventList } from '../api'

interface Props {
  id: string
}
const props = defineProps<Props>()

const route = useRoute()

// 列表配置
const listOptions = $computed(() => {
  return {
    remote: {
      httpRequest: getStudentEventList,
      params: { experiment_id: props.id, student_id: route.query.student_id }
    },
    columns: [
      { label: '序号', type: 'index', width: 60 },
      { label: '用户ID', prop: 'experiment_member_id' },
      { label: '用户名称', prop: 'experiment_member_name' },
      { label: '事件名称', prop: 'event_name' },
      { label: '连接名称', prop: 'connection_name' },
      { label: '事件发生时间', prop: 'created_time' }
      // { label: '操作', slots: 'table-x', width: 230 }
    ]
  }
})

function handleClose() {
  window.close()
}
</script>

<template>
  <AppCard title="查看事件数据">
    <AppList v-bind="listOptions" ref="appList">
      <template #table-x>
        <el-button type="primary" text>查看</el-button>
        <el-button type="primary" text>编辑</el-button>
        <el-button type="primary" text>删除</el-button>
      </template>
    </AppList>
    <el-row justify="center">
      <el-button @click="handleClose">关闭</el-button>
    </el-row>
  </AppCard>
</template>
