<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('详情')" />
    <th:block th:include="include :: element-css" />
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content" id="app">
    <div>
        <el-card v-for="item in paperList" style="margin-bottom: 10px; line-height: 30px;">

            <el-row :gutter="20">
                <el-col :span="12">
                    考试时间：{{ formatDate(item.createTime) }}
                </el-col>

                <el-col :span="12">
                    考试用时：{{ item.userTime }}分钟
                </el-col>

                <el-col :span="12">
                    考试得分：{{ item.userScore }}
                </el-col>

                <el-col :span="12">
                    是否合格：{{ item.userScore > item.qualifyScore ?'是':'否' }}
                </el-col>

                <el-col :span="12">
                    考试状态：{{ item.state | paperStateFilter }}
                </el-col>

            </el-row>

        </el-card>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: element-js" />
<script th:inline="javascript">
    var app = new Vue({
        el: '#app',
        data: {
            paperList: []
        },
        mounted(){
            this.paperList = [[${list}]];
        },
        methods:{
            formatDate(dateString) {
                const date = new Date(dateString);
                const year = date.getFullYear();
                const month = ('0' + (date.getMonth() + 1)).slice(-2);
                const day = ('0' + date.getDate()).slice(-2);
                const hours = ('0' + date.getHours()).slice(-2);
                const minutes = ('0' + date.getMinutes()).slice(-2);
                const seconds = ('0' + date.getSeconds()).slice(-2);
                return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
            }
        }
    })
</script>
</body>
</html>
