<template>
    <!--startprint--><!--注意要加上html里star和end的这两个标记-->
    <div class="card">
        <div class="r-main" v-if="showMain">
            <div class="r-top">
                <div>
                    <p>身份证号：{{ studentData.card_num }}</p>
                    <p>考生姓名：{{ studentData.name }}</p>
                </div>
            </div>
            <el-table
                ref="multipleTable"
                border
                :header-cell-style="headStyle"
                :data="admData"
            >
                <el-table-column prop="number" label="序号" width="50">
                    <template slot-scope="scope">{{ scope.$index + 1 }}</template>
                </el-table-column>
                <el-table-column prop="exam_name" label="考试名称" width="180">
                </el-table-column>
                <el-table-column prop="series_name" label="考试系列" width="150">
                </el-table-column>
                <el-table-column prop="level_name" label="考试级别" width="120">
                </el-table-column>
                <el-table-column prop="subject_name" label="考试科目" width="150">
                </el-table-column>
                <el-table-column prop="time" label="考试时间" width="120">
                </el-table-column>
                <el-table-column label="操作" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="lookAdm(scope.$index)">
                            查看准考证
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="show-adm-card" v-else>
            <div class="show-adm-card-body">
                <div class="show-adm-card-body-div">
                    <h2 class="title">{{ this.currAdm.title }}</h2>
                    <div class="left-top">
                        <div class="left-top-left">
                            <span class="left-top-left-span">
                                <h3 class="key">姓名<i></i></h3>
                                <div class="value">:
                                    <font>小小文</font>
                                </div>
                            </span>
                            <span class="left-top-left-span">
                                <h3 class="key">准考证号<i></i></h3>
                                <div class="value">:
                                    <font>32163546</font>
                                </div>
                            </span>
                            <span class="left-top-left-span">
                                <h3 class="key">系列级别<i></i></h3>
                                <div class="value">:
                                    <font>工程理论中高级</font>
                                </div>
                            </span>
                            <span class="left-top-left-span">
                                <h3 class="key">座位号<i></i></h3>
                                <div class="value">:
                                    <font>32</font>
                                </div>
                            </span>
                        </div>
                        <div class="avatar">
                            <img src="../../assets/img/dog.jpeg"/>
                        </div>
                    </div>
                    <span class="left-top-left-span">
                         <h3 class="key">考场<i></i></h3>
                         <div class="value">:
                               <font>北京大学海淀校区美术学院第四教学楼5层302教室</font>  
                         </div>
                    </span>
                    <span class="left-top-left-span">
                          <h3 class="key">身份证号<i></i></h3>
                          <div class="value">:
                                <font>1302832200000</font>
                          </div>
                    </span>
                </div>
                <div class="show-adm-card-body-right">
                    <h3 class="title">考试时间及科目</h3>
                    <h3 class="date">2021年11月09日 星期六</h3>
                    <h3 class="time">9:00-11:00 水利专业理论</h3>
                    <h3 class="place">考试地点：南水北调中线考场(河北分局)</h3>
                    <h3 class="unit">水利部职改办制</h3>
                </div>
            </div>
            <div class="show-exam-content">
                <p class="show-exam-content-title">考试须知：</p>
                <p>1、考生必须带齐准考证、身份证，方可进入考场。</p>
                <p>2、笔试题一律用黑色笔记的钢笔、签字笔或圆珠笔作答。考生自备黑色字迹的钢笔、签字笔或圆珠笔。</p>
                <p>3、严禁将移动电话、电子笔记本、计算器等带有记忆性的、有运算功能的或有通讯功能的电子设备带至座位。</p>
                <p>4、考生需提前10分钟进入考场，考试开始30分钟后，不得入场；考试开始半小时内，不得退场。</p>
                <p>5、考生必须遵守考场规则，若有作弊行为，将被取消考试资格。</p>
            </div>
            <div class="show-adm-card-footer">
                <el-button class="show-adm-card-footer-btn" type="primary" @click="showMain = true">返回</el-button>
                <el-button class="show-adm-card-footer-btn" type="primary" @click="print()">打印准考证</el-button>
            </div>
        </div>
    </div>
    <!--endprint-->
</template>

<script>
import {
    getStudentInfo, //个人资料
    getAdmissionList, //列表
} from "@/api/home";

export default {
    data() {
        return {
            admData: [],
            studentData: [],
            form: {},
            showMain: true,
            currAdm: {
                title: '2000年考试准考证'
            }
        }
    },
    //props: ["printValue"],
    watch: {},
    mounted() {
        this.getStudent();
        this.getAdmission();
    },
    methods: {
        // 获取考生个人资料
        async getStudent() {
            let res = await getStudentInfo({
                student_id: 2,
            });

            // 解构数据
            let {code, data} = res;

            // 赋值渲染
            if (code === 200) {
                this.studentData = data.res.student;
            }
        },
        // 获取列表
        async getAdmission() {
            let res = await getAdmissionList({
                student_id: 2,
            });

            // 解构数据
            let {code, data} = res;

            // 赋值渲染
            if (code === 200) {
                this.admData = data.myAdm.list;

            }
            console.log('this.admData = ', this.admData)
        },
        // 表格头部样式回调
        headStyle() {
            return "backgroundColor:#ddd;fontSize:14px;color:#666;fontWeight:700";
        },
        lookAdm(ind) {
            console.log('点击了 ： ', ind)
            this.showMain = false
            this.currAdm = this.admData[ind]
            let year = this.currAdm.time.substring(0, 4)
            this.currAdm.title = year + this.currAdm.exam_name + '准考证'
        },
        print() {
            var bdhtml=window.document.body.innerHTML;
            var sprnstr="<!--startprint-->";
            var eprnstr="<!--endprint-->";
            var prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);
            prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));
            // window.document.body.innerHTML=prnhtml;
            //window.open(prnhtml);
            //window.print();
        }
    }
}
</script>

<style lang="less" scoped>
.card {
    padding: 20px;
    width: 100%;
}

.r-main {
    .r-top {
        background-color: #F6F7F9;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;

        p {
            margin: 20px 0 20px 0;
        }
    }

    .el-table::before {
        height: 0;
    }

    .el-table--border::after, .el-table--group::after {
        height: 0;
    }

    .el-table--border, .el-table--group {
        border: 0;
    }
}

.show-adm-card {
    display: flex;
    flex-direction: column;
    //justify-content: center;
    //align-items: center;
    width: 100%;
    .show-exam-content p{
        font-size: 16px;
        margin: 15px 0;
    }
    .show-exam-content .show-exam-content-title {
        font-size: 24px;
    }
    .show-adm-card-body {
        width: 100%;
        display: flex;
        flex-direction: row;
        //justify-content: center;
        //align-items: center;
        border: double;

        .show-adm-card-body-div {
            //background-color: #6ab5f6;
            height: 600px;
            width: 50%;
            display: flex;
            flex-direction: column;
            //justify-content: center;
            //align-items: center;
            padding-top: 40px;
            padding-left: 20px;

            //准考证标题
            .title {
                font-size: 20px;
                font-weight: bold;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .left-top {
                display: flex;
                flex-direction: row;
                //justify-content: center;
                //align-items: center;
                //width: 100%;
                margin-top: 30px;
                min-width: 300px;

                .left-top-left {
                    display: flex;
                    flex-direction: column;
                    align-items: start;
                    justify-content: center;
                    //width: 200px;
                    .key {
                        //width: 70px;
                        text-align: justify;
                    }

                    .value font {
                        //width: 90px;
                        border-bottom: 1px solid #333333;
                        padding-bottom: 4px;
                    }
                }
            }
        }
    }

    .show-adm-card-footer {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin-top: 20px;
        margin-bottom: 20px;

        .show-adm-card-footer-btn {
            width: 120px;
        }
    }
}
.left-top-left-span {
    display: flex;
    flex-direction: row;
    min-width: 200px;
    height: 40px;
    line-height: 30px;
    font-weight: bold;
    margin-bottom: 20px;
    h3 {
        width: 70px;
        //border:1px solid red;
        text-align: justify;
    }

    h3 i {
        display: inline-block;
        /*padding-left: 100%;*/
        width: 100%;
    }
    .value font {
        border-bottom: 1px solid #333333;
        padding-bottom: 4px;
    }
}
//头像
.avatar {
    display: flex;
    justify-content: center;
    height: 100%;
    flex-grow: 1;
    img{
        width: 150px;
        height: 200px;
    }
}
.show-adm-card-body-right {
    width: 49%;
    border-left: double;
    display: flex;
    flex-direction: column;
    //justify-content: center;
    align-items: center;
    .title{
        font-size: 16px;
        font-weight: bold;
    }
    h3{
        margin-top: 80px;
    }
    .unit{
        font-size: 16px;
        font-weight: bold;
    }
}
</style>