<template>
    <el-dialog title="考题重复列表" v-model="dialogVisible" width="1200px" :before-close="CloseEvent">
        <div>
            <el-table :data="tableData" style="width: 100%;" height="600">
                <el-table-column prop="rowIndex" label="对应的行数" width="120" />
                <el-table-column prop="errorMes" label="失败原因" >
                <template  #default="{ row }">
                    <span style="color:red;font-weight: bolder;">{{ row.errorMes }}</span>
                </template>
                </el-table-column>
                <el-table-column prop="qtype" label="题型" width="100">
                    <template #default="{ row }">
                        <el-tag>{{ { 0: '判断题', 1: '多选题', 2: '多断题' }[row.qtype] }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="questionname" label="题目问题"></el-table-column>

            </el-table>
        </div>
        <div class="flex just-center mt10">
            <el-button type="primary" @click="CloseEvent">关闭</el-button>
        </div>
    </el-dialog>
</template>

<script setup>
import { ref, defineProps, onBeforeMount, defineEmits } from 'vue';

const emits = defineEmits(['close']);
const props = defineProps({
    /** 回传的数据 */
    resData: {
        type: Array,
        default: []
    }
});

const dialogVisible = ref(true);
const tableData = ref([]);
const CloseEvent = () => {
    emits('close')
};
onBeforeMount(() => {
    console.log('props.resData: ', props.resData);
    tableData.value = props.resData.map(item => {
        const tbExamlib = item?.tbExamlib || {}
        return {
            rowIndex: item.rowIndex,
            errorMes: item.errorMes,
            questionname: tbExamlib.questionname,
            qtype: tbExamlib.qtype,
        }
    });
});
</script>

<style scoped lang="scss">
.el-dialog {
    .el-table {
        margin-top: 20px;
    }
}
</style>