<template>
    <div class="box">
        <el-row :gutter="24">
            <el-col :span="24">
                <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-button type="primary" size="small" round v-preventReClick @click="saveAdd('form')">保存</el-button>
                        </div>
                    </div>              
                </el-card>

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

                    <div>
                        <el-table :data="infoData" class="info-table" style="margin-bottom: 40px" 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="className" 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>

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

                    <div class="mgb20">
                        <div class="meta-title-wrap">
                            <p class="meta-title"><i class="el-icon-discount"></i> 实验目的</p>
                        </div>
                        <el-input v-model="form.purpose" type="textarea" :disabled="true" rows="5"></el-input>
                    </div>

                    <div class="mgb20">
                        <div class="meta-title-wrap">
                            <p class="meta-title"><i class="el-icon-discount"></i> 实验原理</p>
                        </div>
                        <el-input v-model="form.principle" type="textarea" :disabled="true" rows="5"></el-input>
                    </div>

                    <div class="mgb20">
                        <div class="meta-title-wrap">
                            <p class="meta-title"><i class="el-icon-discount"></i> 实验内容</p>
                        </div>
                        <el-input v-model="form.content" type="textarea" :disabled="true" rows="5"></el-input>
                    </div>

                    <div class="mgb20">
                        <div class="meta-title-wrap">
                            <p class="meta-title"><i class="el-icon-discount"></i> 实验器材（设备、元器件）</p>
                        </div>
                        <el-input v-model="form.equipment" type="textarea" :disabled="true" rows="5"></el-input>
                    </div>

                    <div class="mgb20">
                        <div class="meta-title-wrap">
                            <p class="meta-title"><i class="el-icon-discount"></i> 实验步骤</p>
                        </div>
                        <el-input v-model="form.step" type="textarea" :disabled="true" rows="5"></el-input>
                    </div>

                    <div class="mgb20">
                        <div class="meta-title-wrap">
                            <p class="meta-title">实验数据</p>
                            <!-- <span>得分：50/60</span> -->
                        </div>
                        <el-table :data="sjData" 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="judgmentPointsName" label="考核点" align="center">
                            </el-table-column>
                            <el-table-column prop="userAnswers" label="学生答案" align="center">
                                <template slot-scope="scope">
                                    <pre v-html="scope.row.userAnswers"></pre>
                                </template>
                            </el-table-column>
                            <el-table-column prop="referenceAnswer" label="参考答案" align="center">
                            </el-table-column>
                            <el-table-column prop="score" label="得分" width="100" align="center">
                                <template slot-scope="scope">
                                    <el-input v-if="edit" type="number" v-model="scope.row.score"></el-input>
                                    <template v-else>{{scope.row.score}}</template>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" align="center" v-if="edit">
                                <template slot-scope="scope">
                                    <el-button type="text" @click="save(scope.row)">保存</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>

                    <div class="mgb20">
                        <div class="meta-title-wrap">
                            <p class="meta-title"><i class="el-icon-discount"></i> 实验数据及结果分析</p>
                        </div>
                        <div class="data-wrap">
                            <el-table :data="goodsData" :span-method="objectSpanMethod" stripe header-align="center" style="flex: 1;margin-right: 10px">
                                <el-table-column prop="name" label="现货" align="center"></el-table-column>
                                <el-table-column prop="num" label="数量" align="center"></el-table-column>
                                <el-table-column prop="time"  label="时间" align="center"></el-table-column>
                                <el-table-column prop="price" label="价格" align="center"></el-table-column>
                                <el-table-column prop="marketValue" label="现货市值" align="center"></el-table-column>
                                <el-table-column prop="proftAndLoss" label="累计盈亏" align="center"></el-table-column>
                            </el-table>
                            <el-table :data="futuresData" :span-method="objectSpanMethod1" stripe header-align="center" style="flex: 1;margin-right: 10px">
                                <el-table-column prop="name" label="期权名称" align="center"></el-table-column>
                                <el-table-column prop="dir" label="交易方向" align="center"></el-table-column>
                                <el-table-column prop="num"  label="数量" align="center"></el-table-column>
                                <el-table-column prop="time" label="时间" align="center"></el-table-column>
                                <el-table-column prop="price" label="价格" align="center"></el-table-column>
                                <el-table-column prop="marketValue" label="期权市值" align="center"></el-table-column>
                                <el-table-column prop="proftAndLoss" label="累计盈亏" align="center"></el-table-column>
                            </el-table>
                            <div style="width: 150px;">
                                <el-table :data="futuresLoss" stripe header-align="center">
                                    <el-table-column prop="futuresLoss" label="策略总盈亏" align="center"></el-table-column>
                                </el-table>
                            </div>
                        </div>
                        <el-input style="margin-top: 20px" v-model="form.analysis" type="textarea" :disabled="true" rows="5"></el-input>
                    </div>

                    <div class="mgb20">
                        <div class="meta-title-wrap">
                            <p class="meta-title"><i class="el-icon-discount"></i> 实验结论</p>
                        </div>
                        <el-input type="textarea" v-model="form.conclusion" rows="5" disabled></el-input>
                    </div>

                    <div class="mgb20">
                        <div class="meta-title-wrap">
                            <p class="meta-title"><i class="el-icon-discount"></i> 总结及心得体会</p>
                        </div>
                        <el-input type="textarea" v-model="form.summarize" rows="5" disabled></el-input>
                    </div>

                    <div class="mgb20">
                        <div class="meta-title-wrap">
                            <p class="meta-title"><i class="el-icon-discount"></i> 对本实验过程及方法、手段的改进建议</p>
                        </div>
                        <el-input type="textarea" rows="5" v-model="form.improvement" disabled></el-input>
                    </div>

                    <div class="mgb20">
                        <div class="meta-title-wrap">
                            <p class="meta-title"><i class="el-icon-discount"></i> 老师评语</p>
                        </div>
                        <el-input type="textarea" rows="5" v-model="form.comment" disabled></el-input>
                    </div>

                    <el-card shadow="hover" class="mgb20">
                        <p class="mgb20">教师签名</p>
                        <template v-if="edit">
                            <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>
                                <el-col :span="6">
                                    <template v-if="autograph == 2">
                                        <el-select v-model="signId" placeholder="请选择签名" size="mini" @change="signChange">
                                            <el-option
                                            v-for="item in signList"
                                            :key="item.id"
                                            :label="item.signatureName"
                                            :value="item.id"
                                            >
                                            </el-option>
                                        </el-select>
                                        <img class="sign-img" :src="signSrc" alt="" style="max-width: 400px;margin: 10px 0;">
                                        <div>
                                            <el-button size="mini" type="danger" @click="delSign">删除</el-button>
                                        </div>
                                    </template>
                                    <template v-else-if="autograph == 3">
                                        <el-upload
                                        :data="{userId: userId,reportId: id}"
                                        :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>
                                    </template>
                                </el-col>
                            </el-row>
                        </template>
                        <template v-else>
                            <img :src="signSrc" alt="" style="max-width: 400px;">
                        </template>
                    </el-card>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        data (){
            return {
                id: this.$route.query.id,
                title: '实验报告',
                studentId: this.$route.query.studentId,
                userName: this.$route.query.userName,
                class: this.$route.query.class,
                edit: this.$route.query.edit,
                userId: this.$store.state.userLoginId,
                form: {
                    analysis: '',
                    conclusion: '',
                    content: '',
                    equipment: '',
                    data: '',
                    purpose: '',
                    experimentId: '',
                    experimentalClassName: '',
                    improvement: '',
                    laboratory: '',
                    period: '',
                    principle: '',
                    projectName: '',
                    score: 0,
                    step: '',
                    submitTime: '',
                    summarize: '',
                    teacherName: '',
                    userId: this.userId,
                    userName: this.userName,
                    workNumber: '',
                    analysis: '',
                    comment: ''
                },
                signId: '',
                signSrc: '',
                autograph: '1',
                signList: [],
                sjData: [],
                infoData: [],
                expData: [],
                goodsData: [],
                futuresData: [],
                futuresLoss: [],
            }
        },
        mounted(){
            this.getData()
            this.getSgin()
        },
        methods: {
            getData(){
                let data = {
                    reportId: this.id,
                    userId: this.studentId,
                }
                this.$get(this.api.getReport,data).then(res => {
                    let report = res.data.experimentalReportEntity
                    let steps = []
                    for(let i in report){
                        if(i.includes('steps') && report[i]) steps.push(JSON.parse(report[i]))
                    }
                    this.form = report
                    if(report.steps9){
                        let steps9 = JSON.parse(report.steps9)
                        this.goodsData = steps9.goodsData ? steps9.goodsData: []
                        this.futuresData = steps9.futuresData ? steps9.futuresData: []
                        this.futuresLoss = steps9.futuresLoss ? steps9.futuresLoss: []
                    }

                    let score = res.data.score
                    let answerList = []
                    for(let i in res.data.userAnswersList){
                        answerList = answerList.concat(res.data.userAnswersList[i])
                    }
                    let sjData = []
                    answerList.map(n => {
                        if(n.type == 1){
                            this.$post(this.api.queryItem,n.levelThree)
                            .then((res) => {
                                n.levelFour = res.subject.find(e => e.id == n.levelFour).itemDescription
                                console.log(11,n)
                            }).catch((err) => {})
                        }
                    })
                    setTimeout(() => {
                        score.map(n => {
                            let item = answerList.find(e => e.tradingJudgmentPointsId == n.tradingJudgmentPointsId)
                            sjData.push({
                                judgmentPointsName: item.judgmentPointsName,
                                userAnswers: n.userAnswers,
                                referenceAnswer: item.levelFour,
                                score: n.score,
                                id: n.id
                            })
                        })
                    },500)

                    this.sjData = sjData
                    this.infoData = [{
                        workNumber: report.workNumber,
                        className: report.className,
                        teacherName: report.teacherName,
                        period: report.period,
                        laboratory: report.laboratory,
                        startTime: report.creationTime,
                        score: report.score,
                        userName: this.userName
                    }]
                }).catch(res => {})
            },
            //合并行
            objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0 || columnIndex === 1 || columnIndex === 5) {
                if (rowIndex % 2 === 0) {
                return {
                    rowspan: 2,
                    colspan: 1
                };
                } else {
                return {
                    rowspan: 0,
                    colspan: 0
                };
                }
            }
            },
            //合并行
            objectSpanMethod1({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2 || columnIndex === 6) {
                if (rowIndex % 2 === 0) {
                return {
                    rowspan: 2,
                    colspan: 1
                };
                } else {
                return {
                    rowspan: 0,
                    colspan: 0
                };
                }
            }
            },
            getSgin(){
                if(this.edit){
                    let data = {
                        reportId: this.id
                    }
                    this.$get(this.api.querySignature,data).then(res => {
                        this.signList = res.data
                        if(res.data.length){
                            this.signId = res.data[0].id
                            this.signSrc = this.signList.find(n => n.id == this.signId).signatureUrl
                        }
                    }).catch(res => {})
                }else{
                    let data = {
                        reportId: this.id
                    }
                    this.$get(this.api.reportSignature,data).then(res => {
                        this.signSrc = res.data.signatureUrl
                    }).catch(res => {})
                }
            },
            signChange(){
                this.signSrc = this.signList.find(n => n.id == this.signId).signatureUrl
                this.$post(`${this.api.selectSignature}?reportId=${this.id}&id=${this.signId}`).then(res => {
                    
                }).catch(res => {})
            },
            delSign(){
                this.$confirm('确定要删除吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    let data = {
                        id: this.signId
                    }
                    this.$post(this.api.daleteSignature,data).then(res => {
                        this.$message.success('删除成功')
                        this.getSgin()
                    }).catch(res => {})
                }).catch(() => {})
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            save(row){
                let data = {
                    id: row.id,
                    reportId: this.id,
                    score: row.score
                }
                this.$post(this.api.editScore,data).then((res) => {
                    if(res.status == 10000){
                        this.$message.error(res.message)
                    }else{
                        this.$message.success('修改成功')
                        this.getData()
                    }
                }).catch((err) => {})
            },
            handleExceed(files, fileList) {
                this.$message.warning(
                    `当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！` 
                );
            },
            uploadSuccess(res,file){
                if(res.status == 200){
                    this.$message.success('上传成功')
                    this.getSgin()
                }else{
                    this.$message.error(res.errmessage)
                }
            },
            saveAdd(){
                let data = {
                    comment: this.configId,
                    id: this.id,
                    level: this.form.systemType,
                }
                this.$post(this.api.updateComment,data).then((res) => {
                    this.$router.back()
                }).catch((res) => {})
            },
            goback(){
                this.$router.go(-1)
            },
        }
    }
</script>

<style lang="scss" scoped>
    .box{
        padding: 0 50px;
        background-color: #fff;
    }
    /deep/.el-textarea.is-disabled .el-textarea__inner{
        background-color: #ebfafd;
    }
    #pdfDom{
        padding: 50px;
        /deep/.info-table{
        border: 0;
        th{
            background-color: #fff !important;
            .cell{
                color: #444;
            }
        }
        tr{
            border: 0;
        }
        tr:hover,tr:hover>td{
            background-color: #c6f2f8 !important;
        }
        td{
            border: {
                left: 4px solid #fff;
                right: 4px solid #fff;
            }
            &:first-child{
                border-left: 0;
            }
            &:last-child{
                border-right: 0;
            }
            background-color: #c6f2f8;
            border-bottom: 0;
        }
        }
        /deep/.table th{
            background-color: #a2a2a2 !important;
        }
    }
    
    /deep/.cell{
        font-size: 12px;
    }
    /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;
        align-items: center;
        span{
            font-size: 13px;
            color: #444;
        }
    }
    .flex-between{
        span{
            font-size: 13px;
            color: #444;
        }
    }
    .meta-title{
        display: flex;
        align-items: center;
        padding: 10px 20px;
        margin-bottom: 10px;
        font-size: 16px;
        color: #fff;
        background-color: #9076FF;
        i{
            margin-right: 10px;
        }
    }
    .step-title{
        margin-bottom: 10px;
        font-size: 16px;
        color: #9278ff;
    }
    .bd-title{
        padding-top: 20px;
        border-top: 1px dashed #ccc;
    }
</style>