<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="24">
                <el-card shadow="hover" class="mgb20">
                    <div class="flex-between">
                        <div class="per_title" @click="goback()">
                            <i class="el-icon-arrow-left"></i>
                            <span class="per_back">返回</span>
                            <span class="per_school">修改分数</span>
                        </div>
                        <div>
                            <el-button type="success" round class="mag" @click="saveAdd('form')">预览</el-button>
                            <el-button type="primary" round class="mag" @click="saveAdd('form')">发布成绩</el-button>
                        </div>
                    </div>
                </el-card>

                <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="projectName" label="实验名称" align="center">
                            </el-table-column>
                            <el-table-column prop="period" label="实验学时" align="center">
                            </el-table-column>
                            <el-table-column prop="userName" label="学生姓名" align="center">
                            </el-table-column>
                            <el-table-column prop="number" label="学生学号" align="center">
                            </el-table-column>
                            <el-table-column prop="class" label="学生班级" align="center">
                            </el-table-column>
                            <el-table-column prop="content" label="实验内容" align="center">
                            </el-table-column>
                            <el-table-column prop="desc" label="实验数据与结果分析" align="center">
                            </el-table-column>
                            <el-table-column prop="result" label="实验结论" align="center">
                            </el-table-column>
                            <el-table-column prop="experience" label="实验与心得体会" align="center">
                            </el-table-column>
                            <el-table-column prop="total" 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"></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"></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"></el-input>
                </el-card>

                <el-card shadow="hover" class="mgb20">
                    <div class="flex-between mgb20">
                        <span>老师寄语</span>
                    </div>
                    <el-input type="textarea" rows="5"></el-input>
                </el-card>

                <el-card shadow="hover" class="mgb20">
                    <p class="mgb20">教师签名</p>
                    <div class="mgb20">
                        <el-radio v-model="autograph" label="1">不使用</el-radio>
                        <el-radio v-model="autograph" label="2">已有签名</el-radio>
                        <el-radio v-model="autograph" label="3">重新上传</el-radio>
                    </div>
                    <el-row v-if="autograph != 1">
                        <el-col :span="6">
                            <el-select class="sign-select" v-model="signId" placeholder="请选择签名" size="mini" v-show="autograph == 2">
                                <el-option
                                    v-for="item in signList"
                                    :key="item.id"
                                    :label="item.signatureName"
                                    :value="item.id"
                                >
                                </el-option>
                            </el-select>
                            <el-upload
                                :data="{userId: userId}"
                                :limit="1"
                                :action="api.uploadSignature"
                                list-type="picture-card"
                                :on-remove="handleRemove"
                                :on-exceed="handleExceed"
                                :on-success="uploadSuccess">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            userId: this.$store.state.userLoginId,
            id: this.$route.query.id,
            infoData: [],
            accountData: [],
            analysisContent: "",
            showData: "1",
            autograph: "1",
            form: {
                projectName: "",
                period: "",
                userName: "",
                content: "",
                conclusion: "",
                score: ""
            },
            pages: 1,
            ipVisible: false,
            configId: this.$store.state.configId,
            keyword: "",
            fileList: [{ name: "food.jpeg", url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100" }],
            isEdit: false,
            signList: [],
            signId: ""
        };
    },
    mounted() {
        this.getData();
        this.getSgin();
    },
    methods: {
        getData() {
            let data = {
                // reportId: this.id
                reportId: 97
            };
            this.$get(this.api.queryReport, data).then(res => {
                this.form = res.data.report;
                this.form.score = res.data.record.score;
                let form = this.form;
                this.infoData.push({
                    projectName: form.projectName,
                    period: form.period,
                    userName: form.userName,
                    content: form.content,
                    conclusion: form.conclusion,
                    score: form.score,
                    analysis: form.analysis
                });
            }).catch(res => {
            });
        },
        getSgin() {
            let data = {
                userId: this.userId
            };
            this.$get(this.api.querySignature, data).then(res => {
                this.signList = res.data;
            }).catch(res => {
            });
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        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) => {
                    util.successMsg("编辑成功");
                    this.$router.back();
                }).catch((res) => {
                });
            } else {
                this.$post(this.api.updateServiceConfig, data).then((res) => {
                    util.successMsg("添加成功");
                    this.$router.back();
                }).catch((res) => {
                });
            }
        },
        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];
                // }
            }
        },
        editMsg() {
            this.isEdit = true;
        },
        handleExceed(files, fileList) {
            util.warningMsg(
                `当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！`
            );
        },
        uploadSuccess(res, file) {
            if (res.status == 200) {
                util.successMsg("上传成功");
                this.getSgin();
            } else {
                $message.error(res.message);
            }
        },
        goback() {
            this.$confirm("确定返回？未更新的信息将不会保存。", "提示", {
                type: "warning"
            })
                .then(() => {
                    this.$router.back();
                })
                .catch(() => {
                });
        }
    }
};
</script>

<style lang="scss" scoped>
.meta-title {
    margin-bottom: 10px;
    font-size: 20px;
}

.step-title {
    margin-bottom: 10px;
    font-size: 16px;
    color: #9278ff;
}

.border_lf {
    border-left: 1px dashed #eee;
    padding: 0 60px;
}

.border_lf label {
    width: 120px;
}

.pad_none {
    padding: 0 0 0 60px;
}

.edit-msg {
    font-size: 16px;
    cursor: pointer;
}

.sign-select {
    /deep/ .el-input {
        width: 150px;
        margin-bottom: 10px;
    }
}

.meta-title-wrap {
    display: flex;
    justify-content: space-between;
}

.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>