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

            <el-container class="pt-4">
                <el-aside width="200px" class="hidden md:block sidebar-fixed">
                    <Sidebar />
                </el-aside>
                <el-main class="">
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                        <div class="panel-shell 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" class="w-full sm:w-auto touch-target">选择图片并上传</el-button>
                            </el-upload>
                        </div>
                        <div class="panel-shell p-6">
                            <div class="text-lg font-semibold mb-4">结果集</div>
                            <div class="hidden sm:block">
                            <el-form :inline="true" class="mb-4">
                                <el-form-item label="班级">
                                    <el-select v-model="classId" placeholder="选择班级" clearable filterable
                                        @change="onClassChange" style="min-width: 220px">
                                        <el-option v-for="item in classOptions" :key="item.id"
                                            :label="`${item.title}${item.gradeName ? '（' + item.gradeName + '）' : ''}`"
                                            :value="item.id" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="年级">
                                    <el-select v-model="gradeId" placeholder="选择年级" clearable filterable
                                        style="min-width: 220px">
                                        <el-option v-for="g in gradeOptions" :key="g.id" :label="g.title"
                                            :value="g.id" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="学生姓名">
                                    <el-input v-model="studentName" placeholder="学生姓名" clearable />
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="handleSearch">查询</el-button>
                                    <el-button @click="handleReset">重置</el-button>
                                </el-form-item>
                            </el-form>
                            </div>
                            <div class="hidden sm:block overflow-x-auto">
                                <el-table :data="list" border class="min-w-[800px]" v-loading="loading"
                                    @row-click="handleRowClick">
                                    <el-table-column prop="studentName" label="学生姓名" min-width="120" />
                                    <el-table-column prop="examWordsTitle" label="试题名称" min-width="160" />
                                    <el-table-column prop="correctWordCount" label="正确词数" width="120" />
                                    <el-table-column prop="wrongWordCount" label="错误词数" width="120" />
                                    <el-table-column label="完成状态" width="120">
                                        <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="180" />
                                </el-table>
                            </div>
                            <div class="sm:hidden space-y-3">
                                <div class="mb-3 grid grid-cols-1 gap-3">
                                    <el-select v-model="classId" placeholder="选择班级" clearable filterable @change="onClassChange" />
                                    <el-select v-model="gradeId" placeholder="选择年级" clearable filterable />
                                    <el-input v-model="studentName" placeholder="学生姓名" clearable />
                                    <div class="flex gap-2">
                                        <el-button type="primary" class="flex-1" @click="handleSearch">查询</el-button>
                                        <el-button class="flex-1" @click="handleReset">重置</el-button>
                                    </div>
                                </div>
                                <div v-for="row in list" :key="row.id" class="panel-shell p-4">
                                    <div class="text-base font-semibold mb-1">{{ row.studentName }}</div>
                                    <div class="text-sm mb-1">试题：{{ row.examWordsTitle }}</div>
                                    <div class="text-sm mb-1">正确：{{ row.correctWordCount }}，错误：{{ row.wrongWordCount }}</div>
                                    <div class="text-sm mb-1">开始：{{ row.startDate.replace('T', ' ') }}</div>
                                    <div class="text-sm mb-2">结算：{{ row.msg }}</div>
                                    <div class="flex items-center justify-between">
                                        <el-tag :type="row.isFinished === 1 ? 'success' : 'info'">
                                            {{ row.isFinished === 1 ? '已完成' : '未完成' }}
                                        </el-tag>
                                        <el-button size="small" type="primary" @click="handleRowClick(row)">查看详情</el-button>
                                    </div>
                                </div>
                            </div>
                            <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>
        </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'
import { getClassList } from '@/api/class'
import { getGradeList } from '@/api/grade'
import Sidebar from '@/layouts/components/Sidebar.vue'

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)
const classId = ref(null)
const gradeId = ref(null)
const studentName = ref('')
const classOptions = ref([])
const gradeOptions = ref([])

async function fetchList() {
    loading.value = true
    try {
        const res = await getExamWordsResult(
            pageNo.value,
            pageSize.value,
            classId.value,
            gradeId.value,
            studentName.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
    }
}

async function fetchClassOptions() {
    const res = await getClassList(1, 200)
    const d = res.data
    classOptions.value = Array.isArray(d.data) ? d.data : []
}

async function fetchGradeOptions() {
    const res = await getGradeList(1, 200)
    const d = res.data
    gradeOptions.value = Array.isArray(d.data) ? d.data : []
}

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
}

function handleSearch() {
    pageNo.value = 1
    fetchList()
}

function handleReset() {
    classId.value = null
    gradeId.value = null
    studentName.value = ''
    pageNo.value = 1
    fetchList()
}

function onClassChange(val) {
    const item = classOptions.value.find(i => i.id === val)
    gradeId.value = item ? item.gradeId : null
}

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

<style scoped></style>
