<template>
    <div class="print">
        <div style="margin-top: 10px;">
            <div style=" display: inline-block; margin-left: 10px; margin-right: 10px; width: 8px; height: 30px; background: #2a7eec"></div>
            <b style="line-height: 30px; vertical-align: top">打印准考证</b>
            <el-divider></el-divider>
        </div>

        <!-- 打印 -->
        <div class="pic" v-if="!hasAdmissionCard">
            <div style="font-weight: 700">暂无准考证信息</div>
        </div>

        <div v-else>
            <el-button type="primary" style="display:block; font-weight: bold; margin: auto"
                       @click="print">打印准考证
            </el-button>
            <el-card style="width: 940px; margin: auto">
                <!--                <div id="printArea" style="background: gold; margin: auto; width:  900px; height: 100%">-->
                <br/>
                <div id="printArea" class="main">
                    <br/>
                    <div class="title">东营市第二中学{{
                        todayYear
                        }}特色招生专业测试
                    </div>
                    <div class="titleSub">
                        准考证
                    </div>
                    <br/><br/><br/>
                    <div>
                        <div class="left">
                            <ul style="margin-left: 40px">
                                <li>
                                    <b>姓名：</b>{{ examForm.studentName }}<br/><br/>
                                </li>
                                <li>
                                    <b>准考证号：</b>{{ examForm.examNumber }}<br/><br/>
                                </li>
                                <li>
                                    <b>测试项目：</b>{{ examForm.project }}<br/><br/>
                                </li>
                                <li>
                                    <b>组别(座号)：</b>{{ examForm.inGroup }}<br/><br/>
                                </li>
                                <li>
                                    <b>联系电话：</b>{{ examForm.phoneNumber }}<br/><br/>
                                </li>
                                <li>
                                    <b>毕业学校：</b>{{ examForm.schoolName }}<br/><br/>
                                </li>
                            </ul>
                        </div>
                        <div class="right">
                            <el-image :src="examForm.photoData"
                                      style="width: 180px; height: 220px;"></el-image>
                        </div>
                    </div>

                    <table border="1">
                        <tr>
                            <th style="width: 35%;height: 30px;text-align: center;">考试时间({{
                                todayYear
                                }}年)
                            </th>
                            <th style="width: 30%;height: 30px;text-align: center;">考试时间</th>
                            <th style="width: 35%;height: 30px;text-align: center;">考试地点</th>
                        </tr>
                        <tr>
                            <th style="height: 30px;text-align: center;">{{ examForm.examDate }}</th>
                            <th style="height: 30px;text-align: center;">{{ examForm.examTime }}</th>
                            <th style="height: 30px;text-align: center;">{{ examForm.examAddress }}</th>
                        </tr>
                    </table>
                    <br/>
                    <div style="width: 800px;height:600px; margin: auto">
                        <b style="font-size: 16px; line-height: 30px">注意事项：</b>
                        <p v-html="examForm.notice" style="line-height: 22px; font-size: 14px"></p>
                    </div>

                </div><!--                    main的结束div-->

                <!--                </div>-->
            </el-card>
            <br/> <br/> <br/> <br/>
        </div>
    </div>
</template>

<script>
import printJS from 'print-js'
import {allInfo, printCard} from '@/api/student'

export default {
    name: 'Print',
    props: ['PropTestId', 'PropStudentId'],

    created() {
        this.studentId = this.$store.state.user.studentId
        //获取表单数据
        this.getAllInfo()
    },
    computed: {
        todayYear() {
            const time = new Date()
            return time.getFullYear()
        }
    },
    data() {
        return {
            studentId: undefined,
            baseUrl: 'http://localhost:8848',//前缀
            examForm: {},
            hasAdmissionCard: undefined,
        }
    },
    methods: {
        getAllInfo() {
            allInfo(this.PropTestId, this.studentId).then(res => {
                if (res.node == 4) {
                    this.$emit("changeTab", 3, "成绩查询")
                } else if (res.node == 3) {
                    /** 允许打印准考证 */
                    this.examForm = res.data
                    this.hasAdmissionCard = true
                } else {
                    this.hasAdmissionCard = false
                }
            })
        },
        print() {
            // 重置表单
            printJS({
                printable: 'printArea',
                targetStyles: ['*'],
                type: "html",
            })
        },
    }
}
</script>

<style scoped lang="less">

.print {
    width: 100%;
  //background:firebrick ;
  height: 780px;
  overflow-y: auto;
}

.title {
  font-size: 32px;
  font-weight: bolder;
  text-align: center;
  letter-spacing: 5px
}

.titleSub {
  text-align: center;
  font-weight: bold;
  font-size: 30px;
  margin-top: 15px;
  letter-spacing: 10px
}

.pic {
  width: 210px;
  height: 199px;
  margin: 110px auto;
  background-image: url(../assets/image/nocard.png);
}

.main {
  width: 95%;
  //  width: 840px;
  //background: greenyellow;
  height: 1200px;
  margin: auto;
  border: 1px solid rgb(101, 98, 98);
}

.notice {
  width: 700px;
  margin: auto;
}

.left {
  width: 65%;
  height: 260px;
  display: inline-block;
  vertical-align: top;
  //background: red;

  ul li {
    list-style: none;
  }
}

.right {
  display: inline-block;
  width: 25%;
  //background: yellow;
}

table {
  //background: #8c939d;
  border-color: rgb(101, 98, 98);
  border-collapse: collapse;
  width: 100%;
  height: 120px;
  //margin: auto;
  //border: 1px solid black;
}

.el-divider--horizontal {
  margin: 15px 0;
}


</style>