<template>
    <div class="testPaper" id="testPaper" ref="testPaper">
        <div class="content">
            <div class="paper-left">
                <div class="paperName">{{ this.paperName }}</div>
                <el-divider></el-divider>
                <div class="bigBox">
                    <div
                        class="operating"
                        v-for="(item, index) in this.paperData.questionsInfoVos"
                    >
                        <div class="title">
                            <span>{{ index + 1 }}、</span>
                            <span
                                >[ {{ getDictName('sttx', item.type) }}]
                            </span>
                            <span v-html="item.question"></span>
                            <span v-if="item.type == 3">( )</span>
                        </div>
                        <div class="operating_content">
                            <el-radio-group
                                v-model="item.result"
                                v-if="item.type === '1'"
                            >
                                <template v-for="x in item.options">
                                    <el-radio
                                        :label="x.optionKey"
                                        :key="x.optionKey"
                                        v-if="x.optionContent"
                                        :checked="item.result == x.optionKey"
                                        >{{ x.optionKey }}、<span
                                            v-html="x.optionContent"
                                        ></span
                                    ></el-radio>
                                </template>
                            </el-radio-group>
                            <el-radio-group
                                v-model="item.result"
                                v-if="item.type === '2'"
                            >
                                <template v-for="x in item.options">
                                    <el-radio
                                        :label="x.optionKey"
                                        :key="x.optionKey"
                                        v-if="x.optionContent"
                                        :checked="item.result == x.optionKey"
                                        >{{ x.optionKey }}、<span
                                            v-html="x.optionContent"
                                        ></span
                                    ></el-radio>
                                </template>
                            </el-radio-group>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {mapState} from 'vuex'
import {TableMixin} from '@/mixins/tableMixin'
import dictUtils from '@/components/dict/DictSelectUtils.js'
import ypMenu from '@/api/examination/ypMenu.js'
import utils from '@/utils.js'
import printJS from 'print-js'

export default {
    mixins: [TableMixin],
    name: 'testPaper',
    components: {},
    data() {
        return {
            circleUrl:
                'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png', //头像
            hr: 1,
            min: 30,
            sec: 0,
            radio: '',
            checkList: [],
            radio3: '',
            input: '',
            textarea: '',
            end: Date.parse(new Date()) + 1 * 30 * 60 * 1000,
            paperData: {}, //试卷数据
            value: [],
            topicList: [], //题目类型
            formalType: false, //正式考试
        }
    },
    created() {
        this.topicList = dictUtils.getDictItemsFromCache('sttx')
        // console.log(this.topicList)
    },
    mounted() {},
    methods: {
        //字段
        getDictName(code, value) {
            return utils.getDictName(code, value)
        },
        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.getUserRecord(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
                    console.log(this.paperData)

                    setTimeout(() => {
                        // window.print() // 调用window打印方法
                        // window.close()
                        let style = `
					* {
						font-size:12px !important;
					}
					.paperName {
						text-align:center
					}
					.el-radio-group 
					{
						display:flex
					}
					.operating .title .title-left {
						display:flex;
						width:100%
					}
				
				`
                        printJS({
                            printable: this.$refs.testPaper,
                            type: 'html',
                            scanStyles: false,
                            // style:style,
                        })
                        // this.$router.go(-1)
                    }, 1000)
                }
            })
        },
    },
}
</script>

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

    .content {
        display: flex;
        box-sizing: border-box;

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

            .paperName {
                margin-top: 20px;
                text-align: center;
                font-size: 24px;
            }
        }

        .paper-right {
            background-color: #ffffff;
            padding: 0 20px;
            width: 20%;

            .block {
                height: 120px;
                display: flex;
                align-items: center;
                justify-content: space-evenly;
            }

            .information {
                .second {
                    text-align: center;

                    div:nth-child(1) {
                        font-size: 26px;
                        color: #34a9fd;
                    }

                    div:nth-child(4) {
                        font-weight: 700;
                        line-height: 30px;
                    }

                    div:nth-child(3) {
                        margin-top: 20px;
                        font-weight: 700;
                        line-height: 30px;
                    }
                }

                .third {
                    div:nth-child(1) {
                        height: 30px;
                        text-align: center;
                    }
                }

                .fourth {
                    text-align: center;
                }
            }
        }
    }
}

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

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

.bigBox {
    .operating {
        width: 100%;
        margin: 20px 0;

        .title {
            padding: 20px 0;

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

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

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

.operating_content {
    i {
        font-weight: bold;
    }
}

::v-deep .el-radio__label {
    font-size: 16px;
    line-height: 20px;
}

::v-deep .el-radio__input {
    display: none;
}

@media print {
    @page {
        size: auto;
        margin: 0;
        margin-top: 30px;
    }
}
</style>
