<template>
    <el-form ref="queryRef" :model="queryParams" :rules="rules" label-width="68px" inline>
        <el-form-item label="批次" prop="batchId">
            <el-select v-model="batchId" clearable @change="handleQuery" style="width: 172px">
                <el-option v-for="b in batchList" :label="formatBatchName(b)" :value="b.batchId"/>
            </el-select>
        </el-form-item>
        <el-form-item label="考生类型" prop="examType">
            <el-select v-model="examType" clearable @change="handleQuery" style="width: 172px">
                <el-option v-for="e in examTypes" :label="e.dictLabel" :value="e.dictValue"/>
            </el-select>
        </el-form-item>
        <el-form-item label="科目" prop="subjectId">
            <el-select v-model="subjectId" clearable @change="handleQuery" style="width: 172px">
                <el-option-group v-for="g in groupedSubjects" :label="g.label">
                    <el-option v-for="s in g.items" :label="s.subjectName" :value="s.subjectId"/>
                </el-option-group>
            </el-select>
        </el-form-item>
        <el-form-item label="班级" prop="classId">
            <el-select v-model="classId" clearable @change="handleQuery" style="width: 172px">
                <el-option v-for="c in classList" :label="c.name" :value="c.classId"/>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<!--            <el-button icon="Refresh" @click="resetQuery">重置</el-button>-->
        </el-form-item>
    </el-form>
    <Table :data="list" :columns="columns" :actions="actions" @get-list="getList" @action="handleAction">
        <template #batchName="{row}">
            <span>{{ getBatchDisplayName(row) }}</span>
        </template>
    </Table>
    <el-drawer v-model="drawer" title="班级详情" size="1000px">
        <class-detail v-if="drawer" :data="drawerObj"/>
    </el-drawer>
</template>

<script setup name="ListFullIntelligent">
import consts from "@/utils/consts.js";
import {useProvidePaperList} from "@/views/dz/papers/hooks/usePaperList.js";
import {useProvidePaperFullCondition} from "@/views/dz/papers/hooks/usePaperFullCondition.js";
import {usePaperDownload} from "@/views/dz/papers/hooks/usePaperDownload.js";
import Table from '@/components/Table/index.vue';
import ClassDetail from "@/views/dz/papers/components/plugs/class-detail.vue";

const columns = [
    {label: '组卷类型', prop: 'buildTypeName'},
    {label: '班级', prop: 'className'},
    {label: '批次', prop: 'batchName', type: 'slot', slotName: 'batchName'},
    {label: '班级人数', prop: 'total'},
    ...consts.config.fullColumns
]
const actions = [
    {label: '详情', key: 'detail', permission: ['learn:test:list']},
    // {label: '下载', key: 'download', permission: ['learn:paper:download']}
]

const drawer = ref(false)
const drawerObj = ref(null)
const type = consts.enums.buildType.FullIntelligent
const {
    batchList,
    batchId,
    examTypes,
    examType,
    groupedSubjects,
    subjectId,
    conditionArgs,
    formatBatchName,
    getBatchDisplayName
} = useProvidePaperFullCondition(type)
const classId = ref('')
const queryParams = computed(() => ({
    ...toValue(conditionArgs),
    classId: toValue(classId)
}))
const {rules, handleQuery, resetQuery, list, total, getList, classList} = useProvidePaperList(queryParams)
const {handleDownload} = usePaperDownload(queryParams)

const handleAction = async function (action, row) {
    switch (action.key) {
        case "detail":
            drawer.value = true
            drawerObj.value = row
            break;
        case "download":
            await handleDownload(row)
            break;
        default:
            throw new Error(`Action key '${action.key}' not support.`)
            break
    }
}
</script>

<style scoped>

</style>