<!-- 查看试卷 -->
<template>
	<div class="testPaper" ref="testPaper">
		<div class="content">
			<div class="paper-left" ref="testPage">
				<div class="paperName">{{this.paperName}}</div>
				<div class="userInfo">
                    <span>姓名：{{paperData.userName}}</span>
                    <span>分数：{{paperData.userScore || '--'}}分</span>
                </div>
				<el-divider></el-divider>
				<div class="bigBox">
					<div class="operating" v-for="(item,index) in this.paperData.questionsInfoVos">
						<div class="title">
							<div class="title-left">
								{{index+1}}、
                [{{ item.typeName }}]
								{{processingFields(item.question)}}
								({{item.score}}分)
							</div>
						</div>
						<div class="operating_content" :class="[item.isRight==1?'active':'onActive']">
							<el-radio-group v-model="item.result" v-if="item.type==1">
								<el-radio :label="x.optionKey" v-for="x in item.options" disabled>{{x.optionKey}}、{{processingFields(x.optionContent)}}</el-radio>
							</el-radio-group>
							<el-checkbox-group v-model="item.result" v-if="item.type==2" disabled>
                                <!-- <div class="check-class"> -->
								<el-checkbox :label="x.optionKey" v-for="x in item.options">{{x.optionKey}}、{{processingFields(x.optionContent)}}</el-checkbox>
                                <!-- </div> -->
							</el-checkbox-group>
							<el-radio-group v-model="item.result" v-if="item.type==3" disabled>
								<!-- <el-radio :label="x.optionKey" v-for="x in item.options" > <span v-html="x.optionContent"></span><i :class="el-icon-check"></i></el-radio> -->
								<el-radio label="1">对</el-radio>
								<el-radio label="0">错</i></el-radio>
							</el-radio-group>
                            <div v-if="item.type==4 || item.type==5 || item.type==6">
                               答：{{processingFields(item.result)}}

                            </div>
							<!-- <el-input v-model="item.result" v-if="item.type==4" disabled></el-input>
							<el-input v-model="item.result" v-if="item.type==5" type="textarea" disabled>
							</el-input>
							<el-input v-model="item.result" v-if="item.type==6" type="textarea" disabled>
							</el-input> -->

						</div>
                        <div class="score">得分：{{item.actualScore}}</div>
						<div class="operating_footer">
							正确答案：
							<span v-if="item.type==3">
								{{item.rightOption==1?'对':item.rightOption==0?'错':''}}
							</span>
							<span v-else>
								{{item.rightOption}}
							</span>
						</div>
						<!-- <div class="operating_footer">
							题目解析：{{item.parsing?item.parsing:'无解析'}}
						</div> -->
						<!-- <div class="operating_footer" v-if="item.type==4||item.type==5||item.type==6">
							实际得分：<el-input-number v-model="item.actualScore"  size="small" controls-position="right"  :min="0" :max="item.score"></el-input-number>
						</div> -->
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import {TableMixin} from '@/mixins/tableMixin'
import dictUtils from '@/components/dict/DictSelectUtils.js'
import ypMenu from '@/api/examination/ypMenu.js'
import printJS from 'print-js'
export default {
    mixins: [TableMixin],
    name: 'lookPaper',
    components: {},
    data() {
        return {
            circleUrl:
                'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png', //头像
            hr: 1,
            min: 60,
            sec: 0,
            radio: '',
            checkList: [],
            radio3: '',
            input: '',
            textarea: '',
            end: null,
            paperData: {}, //试卷数据
            topicList: [], //题目类型
            formalType: false, //正式考试
            param: {
                status: 0,
                recordId: null,
                questionOptionList: [],
            },
            userKey: null,
            paperName: null,
            newParams: {},
        }
    },
    created() {
        this.topicList = dictUtils.getDictItemsFromCache('sttx')
    },
    methods: {
        loadData() {
            console.log(this.$route.params)
            if (
                this.$route.params.id !== {} &&
                typeof this.$route.params.id === 'string'
            ) {
                this.userKey = this.$route.params.id
                this.paperName = this.$route.params.paperName
                sessionStorage.setItem('userkey', this.userKey) //初次收到userKey，存起来
                sessionStorage.setItem('paperName', this.paperName) //初次收到userKey，存起来
            } else {
                if (sessionStorage.getItem('userkey')) {
                    this.userKey = sessionStorage.getItem('userkey') //不是第一次了，取出来
                    this.paperName = sessionStorage.getItem('paperName') //不是第一次了，取出来
                } else {
                    //如果实在是没有了，就直接去store里面取
                    this.userKey = store.state.user.userInfo.userKey
                    this.paperName = store.state.user.userInfo.paperName
                }
            }

            ypMenu.getUserRecordAndTotal(this.userKey, (res) => {
                if (res) {
                    res.questionsInfoVos.forEach((e) => {
                        if (e.parsing) {
                            e.parsing = e.parsing.replace(/<[^>]+>/g, '')
                        }
                        if (e.result) {
                            if (e.type == 2) {
                                let arr = JSON.parse(
                                    JSON.stringify(e.result.split(','))
                                )
                                e.result = []
                                arr.forEach((re) => {
                                    e.result.push(re)
                                })
                            }
                        } else {
                            if (e.type == 2) {
                                e.result = []
                            } else {
                                e.result = ''
                            }
                        }
                        this.topicList.forEach((t) => {
                            if (e.type == t.value) {
                                e.typeName = t.name
                            }
                        })
                    })
                    this.paperData = res
                    this.param.recordId = res.recordId
                    setTimeout(() => {
                        // window.print() // 调用window打印方法
                        // window.close()
                        let style = `
					* {
						font-size:12px !important;
					}
					.paperName {
						text-align:center;
                        font-size:18px !important;
                        margin:0 0 10px 0;
					}
                    .userInfo {
                        margin:10px 0px;
                        display:flex;
                        justify-content:center;
                    }
                    .userInfo span {
                        font-size:16px !important;
                    }
                    .userInfo span:nth-last-child(1) {
                        margin-left:30px
                    }
                    .operating {
                        margin:15px 0 ;
                    }
					.operating .title .title-left {
						display:flex;
						width:100%
					}
                    .operating .title .title-left p{
						display:inline !important ;
					}
                    .operating .operating_content {
                        margin:10px 0;
                    }
                    .operating .operating_content .el-radio {
                        display:block;
                    }
                    .operating .operating_content .el-radio:nth-child(1) {
                        margin:0;
                    }
                    .operating .operating_content .el-checkbox:nth-child(1) {
                        margin:0;
                    }
                    .operating .operating_content .el-checkbox-group .el-checkbox {
                        display:block;
                    }
				`
                        printJS({
                            printable: this.$refs.testPaper,
                            type: 'html',
                            scanStyles: false,
                            style: style,
                        })
                        this.$router.go(-1)
                    }, 1000)
                }
            })
        },
        processingFields(value) {
            return value.replace(/<p>/g, '').replace(/<\/p>/g, '').replace(/&nbsp;/g, '')
        },
    },
}
</script>

<style>
.testPaper p {
    display: inline !important;
}
</style>
<style lang="scss" scoped>
.testPaper {
    background-color: #ebeef5;
    display: flex;
    justify-content: space-evenly;

    .content {
        width: 1200px;
        display: flex;

        .paper-left {
            padding: 10px 20px;
            box-sizing: border-box;
            background-color: #ffffff;
            width: 100%;
            margin-right: 10px;

            .paperName {
                margin-top: 20px;
                text-align: center;
                font-size: 24px;
            }
            .userInfo {
                margin: 10px 0px;
                display: flex;
                justify-content: center;
                span {
                    font-size: 20px;
                    &:nth-last-child(1) {
                        margin-left: 30px;
                    }
                }
            }
            .operating {
                // width: 100%;
                margin: 10px 0;
                padding-right: 10px;

                .title {
                    padding: 20px 0;
                    display: flex;
                    justify-content: space-between;

                    span:nth-child(1) {
                        font-weight: bold;
                    }

                    span:nth-child(2) {
                        color: #34a9fd;
                    }

                    .title-left {
                        width: 70%;
                    }

                    .title-right {
                        width: 25%;
                        // color: #999 !important;
                        display: flex;
                        align-items: center;
                    }
                }
            }
        }
    }
}

.score {
    margin-top: 20px;
    color: #2ba5fc;
}

.operating_footer {
    margin-top: 15px;
    color: #999 !important;
    display: flex;
    align-items: center;
}

.tagBox {
    width: 40px;
    height: 35px;
    line-height: 35px;
    margin-right: 5px;
    text-align: center;
    margin-bottom: 5px;
}

.isTag {
    background-color: #36aafd;
    color: #ffffff;
}

.onIsTag {
    background-color: #f56c6c;
    color: #ffffff;
}

.bIsTag {
    background-color: orange;
    color: #ffffff;
}

.wIsTag {
    background-color: #fff;
    color: #000;
}

.bigBox {
    height: calc(100% - 100px);
    overflow-y: auto;
}

// active
.active {
  ::v-deep .el-radio__input.is-checked + .el-radio__label {
        color: #2ba5fc !important;
    }

  ::v-deep .el-radio {
        //从这里开始 就是更改颜色的代码，将你的颜色           改掉我的颜色就可以了
        .el-radio__label {
            color: #000 !important;
        }

        .el-radio__input {
            margin-bottom: px(5);

            &.is-checked {
                .el-radio__inner {
                    background-color: #2ba5fc;
                    border-color: #2ba5fc;
                }
            }

            .el-radio__inner {
                &:hover {
                    border-color: #2ba5fc;
                }
            }
        }
    }

  ::v-deep .el-checkbox {
        .el-checkbox__input {
            margin-bottom: px(5);

            &.is-checked {
                .el-checkbox__inner {
                    background-color: #2ba5fc;
                    border-color: #2ba5fc;
                }
            }

            .el-checkbox__inner {
                &:hover {
                    border-color: #2ba5fc;
                }
            }
        }
    }
}

// // onActive
.onActive {
  ::v-deep .el-radio__input.is-checked + .el-radio__label {
        color: #f56c6c !important;
    }

  ::v-deep .el-radio {
        //从这里开始 就是更改颜色的代码，将你的颜色           改掉我的颜色就可以了
        .el-radio__label {
            color: #000 !important;
        }

        .el-radio__input {
            margin-bottom: px(5);

            &.is-checked {
                .el-radio__inner {
                    background-color: #f56c6c;
                    border-color: #f56c6c;
                }
            }

            .el-radio__inner {
                &:hover {
                    border-color: #f56c6c;
                }
            }
        }
    }

  ::v-deep .el-checkbox {
        .el-checkbox__input {
            margin-bottom: px(5);

            &.is-checked {
                .el-checkbox__inner {
                    background-color: #f56c6c;
                    border-color: #f56c6c;
                }
            }

            .el-checkbox__inner {
                &:hover {
                    border-color: #f56c6c;
                }
            }
        }
    }
}

::-webkit-scrollbar {
    width: 3px !important;
}
</style>
