<template>
  <div class="guidance-page">
    <a-card class="mb-4">
      <template #title>我的指导</template>
    </a-card>

    <!-- 搜索表单 -->
    <a-form
      :model="searchParams"
      layout="inline"
      class="search-form"
      @finish="handleSearch"
    >
      <a-form-item label="活动名称">
        <a-input
          v-model:value="searchParams.contestName"
          placeholder="请输入活动名称"
          allow-clear
          style="width: 200px"
        />
      </a-form-item>
      <a-form-item label="学生姓名">
        <a-input
          v-model:value="searchParams.studentName"
          placeholder="请输入学生姓名"
          allow-clear
          style="width: 150px"
        />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit">
          <template #icon><SearchOutlined /></template>
          搜索
        </a-button>
        <a-button style="margin-left: 8px" @click="handleReset">
          <template #icon><ReloadOutlined /></template>
          重置
        </a-button>
      </a-form-item>
    </a-form>

    <!-- 数据表格 -->
    <a-table
      :columns="columns"
      :data-source="dataSource"
      :loading="loading"
      :pagination="pagination"
      row-key="id"
      @change="handleTableChange"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <a-space>
            <a-button type="link" size="small" @click="handleView(record)">
              查看
            </a-button>
          </a-space>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue"
import { SearchOutlined, ReloadOutlined } from "@ant-design/icons-vue"
import type { TablePaginationConfig } from "ant-design-vue"

// 搜索参数
const searchParams = reactive({
  contestName: "",
  studentName: "",
})

// 表格数据
const loading = ref(false)
const dataSource = ref<any[]>([])
const pagination = reactive<TablePaginationConfig>({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total: number) => `共 ${total} 条`,
})

// 表格列定义
const columns = [
  {
    title: "序号",
    key: "index",
    width: 60,
    customRender: ({ index }: { index: number }) => index + 1,
  },
  {
    title: "活动名称",
    key: "contestName",
    dataIndex: "contestName",
    width: 200,
  },
  {
    title: "学生姓名",
    key: "studentName",
    dataIndex: "studentName",
    width: 120,
  },
  {
    title: "作品名称",
    key: "workName",
    dataIndex: "workName",
    width: 200,
  },
  {
    title: "提交时间",
    key: "submitTime",
    dataIndex: "submitTime",
    width: 180,
  },
  {
    title: "状态",
    key: "status",
    dataIndex: "status",
    width: 100,
  },
  {
    title: "操作",
    key: "action",
    width: 120,
    fixed: "right" as const,
  },
]

// 加载数据
const fetchList = async () => {
  loading.value = true
  try {
    // TODO: 调用API获取数据
    dataSource.value = []
    pagination.total = 0
  } catch (error) {
    console.error("获取数据失败", error)
  } finally {
    loading.value = false
  }
}

// 搜索
const handleSearch = () => {
  pagination.current = 1
  fetchList()
}

// 重置
const handleReset = () => {
  searchParams.contestName = ""
  searchParams.studentName = ""
  pagination.current = 1
  fetchList()
}

// 表格变化
const handleTableChange = (pag: TablePaginationConfig) => {
  pagination.current = pag.current || 1
  pagination.pageSize = pag.pageSize || 10
  fetchList()
}

// 查看
const handleView = (record: any) => {
  console.log("查看", record)
}

onMounted(() => {
  fetchList()
})
</script>

<style scoped>
.guidance-page {
  padding: 0;
}

.search-form {
  margin-bottom: 16px;
}

.mb-4 {
  margin-bottom: 16px;
}
</style>
