<template>
    <div>
        <el-card shadow="hover" class="mgb20">
            <div class="flex-between">
                <div class="per_title" v-preventReClick @click="goback()">
                    <i class="el-icon-arrow-left"></i>
                    <span class="per_back">返回</span>
                    <span class="per_school">查看报告</span>
                </div>
            </div>              
        </el-card>

        <div>
            <el-card shadow="hover" class="mgb20">
                <h6 style="text-align: center;font-size: 20px">标准实验报告</h6>
                <div class="flex-center mgb20 user_header">
                    <p class="addhr_tag"></p>
                    <span>基本信息</span>
                </div>

                <div>
                    <el-table :data="infoData" class="table" stripe header-align="center">
                        <el-table-column prop="userName" label="学生姓名" align="center">
                        </el-table-column>
                        <el-table-column prop="workNumber" label="学生学号" align="center">
                        </el-table-column>
                        <el-table-column prop="experimentalClassName" label="学生班级" align="center">
                        </el-table-column>
                        <el-table-column prop="teacherName" label="指导老师" align="center">
                        </el-table-column>
                        <el-table-column prop="period" label="实验学时" align="center">
                        </el-table-column>
                        <el-table-column prop="laboratory" label="实验室名称" align="center">
                        </el-table-column>
                        <el-table-column prop="startTime" label="实验时间" align="center">
                        </el-table-column>
                        <el-table-column prop="score" label="实验成绩" align="center">
                        </el-table-column>
                    </el-table>
                </div>
            </el-card>

            <el-card shadow="hover" class="mgb20">
                <div class="meta-title-wrap">
                    <p class="meta-title">一、实验项目名称</p>
                </div>
                <el-input v-model="form.projectName" type="textarea" :disabled="true" rows="5"></el-input>
            </el-card>

            <el-card shadow="hover" class="mgb20">
                <div class="meta-title-wrap">
                    <p class="meta-title">二、实验目的</p>
                    <span>得分：50/60</span>
                </div>
                <el-input v-model="form.experimentGoal" type="textarea" :disabled="true" rows="5"></el-input>
            </el-card>

            <el-card shadow="hover" class="mgb20">
                <div class="meta-title-wrap">
                    <p class="meta-title">三、实验原理</p>
                    <span>得分：50/60</span>
                </div>
                <el-input v-model="form.principle" type="textarea" :disabled="true" rows="5"></el-input>
            </el-card>

            <el-card shadow="hover" class="mgb20">
                <div class="meta-title-wrap">
                    <p class="meta-title">四、实验内容</p>
                    <span>得分：50/60</span>
                </div>
                <el-input v-model="form.content" type="textarea" :disabled="true" rows="5"></el-input>
            </el-card>

            <el-card shadow="hover" class="mgb20">
                <div class="meta-title-wrap">
                    <p class="meta-title">五、实验步骤</p>
                    <span>得分：50/60</span>
                </div>
                <el-input v-model="form.step" type="textarea" :disabled="true" rows="5"></el-input>
            </el-card>

            <el-card shadow="hover" class="mgb20">
                <div class="meta-title-wrap">
                    <p class="meta-title">六、实验数据</p>
                    <span>得分：50/60</span>
                </div>
                <el-table :data="expData" class="table" stripe header-align="center">
                    <el-table-column type="index" width="100" label="序号" align="center">
                        <template slot-scope="scope">
                            {{scope.$index + 1}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="module" label="模块" align="center">
                    </el-table-column>
                    <el-table-column prop="judgmentPointsName" label="考核点" align="center">
                    </el-table-column>
                    <el-table-column prop="userAnswer" label="学生答案" align="center">
                    </el-table-column>
                    <el-table-column prop="answer" label="参考答案" align="center">
                    </el-table-column>
                    <el-table-column prop="codeScore" label="得分" align="center">
                    </el-table-column>
                </el-table>
            </el-card>

            <el-card shadow="hover" class="mgb20">
                <div class="meta-title-wrap">
                    <p class="meta-title">七、实验结论</p>
                    <span>得分：50/60</span>
                </div>
                <el-input type="textarea" v-model="form.conclusion" rows="5" disabled></el-input>
                <div class="flex-between" style="margin-top: 10px">
                    <span>教师评分</span>
                    <div>
                        <el-input style="display: inline-block;width: auto;" placeholder="请输入"></el-input> (10分)
                    </div>
                </div>
            </el-card>

            <el-card shadow="hover" class="mgb20">
                <div class="meta-title-wrap">
                    <p class="meta-title">八、总结及心得体会</p>
                    <span>得分：50/60</span>
                </div>
                <el-input type="textarea" v-model="form.summarize" rows="5" disabled></el-input>
                <div class="flex-between" style="margin-top: 10px">
                    <span>教师评分</span>
                    <div>
                        <el-input style="display: inline-block;width: auto;" placeholder="请输入"></el-input> (10分)
                    </div>
                </div>
            </el-card>

            <el-card shadow="hover" class="mgb20">
                <div class="meta-title-wrap">
                    <p class="meta-title">九、对本实验过程及方法、手段的改进建议</p>
                    <span>得分：50/60</span>
                </div>
                <el-input type="textarea" rows="5" v-model="form.improvement" disabled></el-input>
            </el-card>

            <el-card shadow="hover" class="mgb20">
                <div class="flex-between mgb20">
                    <span>老师评语</span>
                </div>
                <el-input type="textarea" rows="5" v-model="form.comment" disabled></el-input>
            </el-card>

            <el-card shadow="hover" class="mgb20">
                    <p class="mgb20">教师签名</p>
                    <!-- <img src="" alt=""> -->
                </el-card>
        </div>
    </div>
</template>

<script>
    export default {
        data (){
            return {
                title: '实验报告',
                userId: this.$store.state.userId,
                studentId: this.$store.state.studentId,
                form: {
                    analysis: '',
                    conclusion: '',
                    content: '',
                    data: '',
                    experimentGoal: '',
                    experimentId: '',
                    experimentalClassName: '',
                    improvement: '',
                    laboratory: '',
                    period: '',
                    principle: '',
                    projectName: '',
                    score: 0,
                    step: '',
                    submitTime: '',
                    summarize: '',
                    teacherName: '',
                    userId: this.userId,
                    userName: '',
                    workNumber: '',
                },
                type: this.$route.query.type,
                id: this.$route.query.id,
                recordId: this.$route.query.recordId,
                reportId: this.$route.query.reportId,
                infoData: [],
                expData: [],
                accountData: [],
                showData: '1',
                autograph: '1',
                pages: 1,
                ipVisible: false,
                fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
            }
        },
        mounted(){
            this.getData()
        },
        methods: {
            getData(){
                if(this.type){
                    let data = {
                        recordId: this.id,
                    }
                    this.$get(this.api.queryVirtualReport,data).then(res => {
                        this.form = res.data.report
                        this.expData = res.data.data
                        let form = this.form
                        this.infoData.push({
                            workNumber: form.workNumber,
                            experimentalClassName: form.experimentalClassName,
                            teacherName: form.teacherName,
                            period: form.period,
                            laboratory: form.laboratory,
                            startTime: form.submitTime,
                            score: form.score,
                            userName: form.userName
                        })
                    }).catch(res => {});
                }else{
                    let data = {
                        studentId: this.studentId,
                        projectId: this.id,
                        recordId: this.recordId,
                        reportId: this.reportId
                    }
                    this.$get(this.api.queryArchievement,data).then(res => {
                        this.form = res.data.report
                        this.expData = res.data.data
                        let form = this.form
                        this.infoData.push({
                            workNumber: form.workNumber,
                            experimentalClassName: form.experimentalClassName,
                            teacherName: form.teacherName,
                            period: form.period,
                            laboratory: form.laboratory,
                            startTime: form.submitTime,
                            score: form.score,
                            userName: form.userName
                        })
                    }).catch(res => {});
                }
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            saveAdd(){
                let data = {
                    systemId: this.configId,
                    systemName: this.form.systemName,
                    systemType: this.form.systemType,
                    systemAttribution: this.form.systemAttribution,
                }
                if(this.configId){
                    this.$post(this.api.updateServiceConfig,data).then((res) => {
                            this.$message.success('编辑成功');
                            this.goback()
                        }).catch((res) => {
                    })
                }else{
                    this.$post(this.api.updateServiceConfig,data).then((res) => {
                            this.$message.success('添加成功');
                            this.goback()
                        }).catch((res) => {
                    })
                }
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            SpanMethod({ row, column, rowIndex, columnIndex }) {
                if (rowIndex % 2 === 0) {
                    if (columnIndex === 6) {
                        if(!row.Intranet){
                            return [1, 2];
                        }
                    } 
                    // else if (columnIndex === 1) {
                    //     return [0, 0];
                    // }
                }
            },
            goback(){
                this.$router.go(-1)
            },
        }
    }
</script>

<style lang="scss" scoped>
    /deep/.el-row{
        padding-top: 20px;
        margin: 0 !important;
    }
    .form-item{
        display: flex;
        align-items: center;
    }
    .form-item .el-input{
        width: auto;
    }
    .form-item span{
        margin-right: 10px;
    }
    .meta-title-wrap{
        display: flex;
        justify-content: space-between;
    }
    .flex-between{
        span{
            font-size: 13px;
        }
    }
    .meta-title{
        margin-bottom: 10px;
        font-size: 14px;
    }
    .step-title{
        margin-bottom: 10px;
        font-size: 16px;
        color: #9278ff;
    }
    .bd-title{
        padding-top: 20px;
        border-top: 1px dashed #ccc;
    }
</style>