<template>
    <el-form label-width="68px" inline>
        <el-form-item label="发送状态" v-model="state">
            <el-select v-model="state" clearable style="width: 172px">
                <el-option v-for="s in stateList" :label="s" :value="s" />
            </el-select>
        </el-form-item>
    </el-form>
    <Table :data="filterList" :columns="columns" :actions="actions" action-width="100" @action="handleAction">
        <template #rate="{row}">
            <el-text v-if="[undefined, null, NaN].includes(row.rate)">-</el-text>
            <el-text v-else :type="row.rate>90?'success':row.rate>70?'primary':'danger'">{{row.rate}}%</el-text>
        </template>
    </Table>
    <el-dialog v-model="dialog" title="做题情况" show-close>
        <student-detail v-if="dialog" :class-data="data" :student-data="dialogObj" />
    </el-dialog>
</template>

<script setup name="ClassDetail">

import consts from "@/utils/consts.js";
import Table from "@/components/Table/index.vue";
import StudentDetail from "@/views/dz/papers/components/plugs/student-detail.vue";
import {getPaperStudentRecords} from "@/api/dz/papers.js";

const props = defineProps({
    data: Object,
    exactMode: Boolean
})

const list = ref([])
const state = ref('')
const stateList = computed(() => props.exactMode
    ? consts.config.exactColumns.map(c => c.label)
    : consts.config.fullColumns.map(c => c.label))
const queryParams = computed(() => ({
    buildType: props.data.buildType,
    batchId: props.data.batchId,
    classId: props.data.classId
}))
const rules = {}
const dialog = ref(false)
const dialogObj = ref(null)

const filterList = computed(() => {
    if (!state.value) return list.value
    return list.value.filter(i => i.state == state.value)
})

const columns = [
    {label: '姓名', prop: 'studentName', width: 120},
    // {label: '班级', prop: 'className'},
    // {label: '考试批次', prop: 'batchName'},
    {label: '试卷名称', prop: 'paperName'},
    {label: '发送情况', prop: 'state', width: 120},
    {label: '得分率', prop: 'rate', type: 'slot', slotName: 'rate', width: 80},
    {label: '手机号', prop: 'mobile', width: 120}
]
const actions = [
    {key: 'rate', label: '考试详情', permission: ['learn:test:list'], disabled: r => [null, undefined, NaN].includes(r.rate)}
]

const getList = async function() {
    const res = await getPaperStudentRecords(queryParams.value)
    list.value = res.data
}

const handleAction = function (action, row) {
    switch (action.key) {
        case "rate":
            dialog.value = true
            dialogObj.value = row
            break
        default:
            throw new Error(`Action type '${action.key}' not support.`)
            break
    }
}

onMounted(() => getList())
</script>

<style scoped>

</style>