<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <Header></Header>
            </el-header>

            <el-main class="p-4">
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                        <div class="text-lg font-semibold mb-4">上传图片</div>
                        <el-upload
                            :show-file-list="false"
                            :http-request="doUpload"
                            accept="image/*"
                        >
                            <el-button type="primary">选择图片并上传</el-button>
                        </el-upload>
                    </div>
                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                        <div class="text-lg font-semibold mb-4">结果集</div>
                        <el-table
                            :data="list"
                            border
                            class="w-full"
                            v-loading="loading"
                            @row-click="handleRowClick"
                        >
                            <el-table-column prop="studentName" label="学生姓名" min-width="70" />
                            <el-table-column prop="examWordsTitle" label="试题名称" min-width="100" />
                            <el-table-column prop="correctWordCount" label="正确词数" width="110" />
                            <el-table-column prop="wrongWordCount" label="错误词数" width="110" />
                            <el-table-column label="完成状态" width="110">
                                <template #default="{ row }">
                                    <el-tag :type="row.isFinished === 1 ? 'success' : 'info'">
                                        {{ row.isFinished === 1 ? '已完成' : '未完成' }}
                                    </el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="startDate" label="开始时间" min-width="160">
                                <template #default="{ row }">
                                    {{ row.startDate.replace('T', ' ') }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="msg" label="判卷结算" min-width="160" />
                        </el-table>
                        <div class="mt-4 flex justify-end">
                            <el-pagination
                                background
                                layout="prev, pager, next, sizes, total"
                                :total="totalCount"
                                :page-size="pageSize"
                                :current-page="pageNo"
                                @current-change="handlePageChange"
                                @size-change="handleSizeChange"
                            />
                        </div>
                    </div>
                </div>
                <ExamWordsDetailCard v-model="showDetail" :id="selectedId" />
            </el-main>

        </el-container>
    </div>
</template>


<script setup>
import Header from '@/layouts/components/Header.vue'
import ExamWordsDetailCard from '@/layouts/components/ExamWordsDetailCard.vue'
import { ref, onMounted } from 'vue'
import { uploadExamWordsPng, getExamWordsResult } from '@/api/exam'

const list = ref([])
const pageNo = ref(1)
const pageSize = ref(10)
const totalCount = ref(0)
const loading = ref(false)
const showDetail = ref(false)
const selectedId = ref(null)

async function fetchList() {
    loading.value = true
    try {
        const res = await getExamWordsResult(pageNo.value, pageSize.value)
        const d = res.data
        list.value = Array.isArray(d.data) ? d.data : []
        totalCount.value = d.totalCount || 0
        pageNo.value = d.pageNo || pageNo.value
        pageSize.value = d.pageSize || pageSize.value
    } finally {
        loading.value = false
    }
}

function handlePageChange(p) {
    pageNo.value = p
    fetchList()
}
function handleSizeChange(s) {
    pageSize.value = s
    pageNo.value = 1
    fetchList()
}

async function doUpload(options) {
    const file = options.file
    const formData = new FormData()
    formData.append('file', file)
    await uploadExamWordsPng(formData)
    ElMessage.success('上传成功，已开始生成结果')
    fetchList()
}

function handleRowClick(row) {
    selectedId.value = row.id
    showDetail.value = true
}

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

<style scoped>
</style>
