<template>
    <div class="app-container" style="width: 100%; display: flex; justify-content: center; flex-wrap: wrap">
        <div style="width: 100%">
            <div style="width: 200px; margin: auto">
                <!-- <el-button type="primary" plain size="mini" @click="closeCurrentTab">关闭
                </el-button> -->
                <el-button type="primary" plain size="mini" @click="downloadProve">下载
                </el-button>
                <el-button type="primary" plain size="mini" @click="printTable">打印
                </el-button>
            </div>

        </div>

        <el-card style="height: 100%;width: 900px;">
            <br /> <br />
            <div id="postFormContainer">
                <div style="text-align: center; font-weight: 800; font-size: 35px">
                    学籍表
                </div>
                <br />
                <table border="1px solid black" cellspacing="0" style="width: 860px">
                    <tr>
                        <th rowspan="7" class="leftThree">
                            学生基本信息
                        </th>
                        <th width="80px">
                            学校
                        </th>
                        <td style="height: 40px" colspan="6">东营市第二中学</td>
                        <td rowspan="4" class="tdStyle">
                            <img v-if="studentInfo.avatar" :src="baseUrl + studentInfo.avatar" width="130px" height="160px"
                                style="margin: 0 0 -3px 0;">
                            <div v-else
                                style="width: 130px; height: 160px; border: 1px solid #ddd; display: flex; justify-content: center; align-items: center;"
                                :src="无照片">
                            </div>
                        </td>

                    </tr>
                    <tr>
                        <th>姓名</th>
                        <td colspan="2" class="tdStyle" width="220px" style="height: 40px">{{ studentInfo.studentName }}
                        </td>
                        <th width="80px">性别</th>
                        <td width="100px" class="tdStyle">
                            <dict-tag :options="dict.type.sys_user_sex" :value="studentInfo.sex" />
                        </td>
                        <th width="80px">民族</th>
                        <td class="tdStyle">{{ studentInfo.nation }}</td>
                    </tr>
                    <tr>
                        <th style="height: 40px">省学籍辅号</th>
                        <td colspan="2" class="tdStyle">{{ studentInfo.provincialNumber }}</td>
                        <th>出生日期</th>
                        <td class="tdStyle">{{ studentInfo.birthday }}</td>
                        <th>邮政编码</th>
                        <td colspan="1" class="tdStyle">{{ studentInfo.postalCode }}</td>
                    </tr>
                    <tr>
                        <th style="height: 40px">全国学籍号</th>
                        <td colspan="2" class="tdStyle">{{ studentInfo.nationalNumber }}</td>
                        <th>所在年级</th>
                        <td class="tdStyle">{{ studentInfo.currentGrade }}</td>
                        <th>联系电话</th>
                        <td colspan="1" class="tdStyle">{{ studentInfo.stuTelephone }}</td>
                    </tr>
                    <tr>
                        <th style="height: 40px">身份证号</th>
                        <td colspan="2" class="tdStyle">{{ studentInfo.idCard }}</td>
                        <th>通信地址</th>
                        <td colspan="5">{{ studentInfo.postalAddress }}</td>
                    </tr>
                    <tr>
                        <th style="height: 50px">籍贯</th>
                        <td colspan="3">{{ studentInfo.nativePlace }}</td>
                        <th width="80px">现住址</th>
                        <td colspan="5">{{ studentInfo.homeAddress }}</td>
                    </tr>
                    <tr>
                        <th style="height: 50px">出生地</th>
                        <td colspan="3">{{ studentInfo.birthAddress }}</td>
                        <th>户口所在地</th>
                        <td colspan="5">{{ studentInfo.registeredAddress }}</td>
                    </tr>

                    <tr>
                        <th rowspan="3" class="leftThree">监护人信息</th>
                        <th>
                            姓名
                        </th>
                        <th colspan="1" width="90px">
                            关系
                        </th>
                        <th colspan="2">
                            工作单位
                        </th>
                        <th colspan="2">
                            联系地址
                        </th>
                        <th>
                            联系电话
                        </th>
                        <th>
                            邮政编码
                        </th>
                    </tr>
                    <tr>
                        <td class="tdStyle" style="height: 40px"><span
                                v-if="studentParents.length > 0 && studentParents[0].parentName">{{
                                    studentParents[0].parentName }}</span>
                        </td>
                        <td class="tdStyle"><span v-if="studentParents.length > 0 && studentParents[0].relationship">
                                <dict-tag :options="dict.type.relationship" :value="studentParents[0].relationship" />
                            </span></td>
                        <td colspan="2"><span v-if="studentParents.length > 0 && studentParents[0].workAddress">{{
                            studentParents[0].workAddress
                        }}</span></td>
                        <td colspan="2"><span v-if="studentParents.length > 0 && studentParents[0].contactAddress"> {{
                            studentParents[0].contactAddress
                        }}</span></td>
                        <td><span v-if="studentParents.length > 0 && studentParents[0].telephone">{{
                            studentParents[0].telephone
                        }}</span></td>
                        <td><span v-if="studentParents.length > 0 && studentParents[0].postalCode"> {{
                            studentParents[0].postalCode
                        }}</span></td>
                    </tr>
                    <!--      第二行-->
                    <tr>
                        <td class="tdStyle" style="height: 40px"><span
                                v-if="studentParents.length > 1 && studentParents[1].parentName">{{
                                    studentParents[1].parentName }}</span>
                        </td>
                        <td class="tdStyle"><span v-if="studentParents.length > 1 && studentParents[1].relationship">
                                <dict-tag :options="dict.type.relationship" :value="studentParents[1].relationship" />
                            </span></td>
                        <td colspan="2"><span v-if="studentParents.length > 1 && studentParents[1].workAddress">{{
                            studentParents[1].workAddress
                        }}</span></td>
                        <td colspan="2"><span v-if="studentParents.length > 1 && studentParents[1].contactAddress"> {{
                            studentParents[1].contactAddress
                        }}</span></td>
                        <td><span v-if="studentParents.length > 1 && studentParents[1].telephone">{{
                            studentParents[1].telephone
                        }}</span></td>
                        <td><span v-if="studentParents.length > 1 && studentParents[1].postalCode"> {{
                            studentParents[1].postalCode
                        }}</span></td>
                    </tr>
                    <tr>
                        <th rowspan="7" class="leftThree">
                            其他学籍信息
                        </th>
                    </tr>
                    <tr>
                        <th style="height: 40px">国家地区</th>
                        <td class="tdStyle" colspan="2">{{ studentInfo.region }}</td>
                        <th>外语语种</th>
                        <td class="tdStyle" colspan="4">{{ studentInfo.foreignLanguages }}</td>
                    </tr>

                    <tr>
                        <th style="height: 40px">政治面貌</th>
                        <td class="tdStyle" colspan="2">
                            <dict-tag :options="dict.type.politics_tatus" :value="studentInfo.appearance" />
                        </td>
                        <th>血型</th>
                        <td class="tdStyle" colspan="4">{{ studentInfo.bloodType }}</td>
                    </tr>

                    <tr>
                        <th style="height: 40px">健康状况</th>
                        <td class="tdStyle" colspan="2">{{ studentInfo.health }}</td>
                        <th>港澳台侨</th>
                        <td class="tdStyle" colspan="4">{{ studentInfo.otherRegions }}</td>
                    </tr>
                    <tr>
                        <th style="height: 40px">独生子女</th>
                        <td class="tdStyle" colspan="2">
                            <dict-tag :options="dict.type.only_child" :value="studentInfo.onlyChild" />
                        </td>
                        <th>流动人口状况</th>
                        <td class="tdStyle" colspan="4">{{ studentInfo.floatingPopulation }}</td>
                    </tr>
                    <tr>
                        <th style="height: 50px">接收资助状况</th>
                        <td colspan="7">{{ studentInfo.support }}</td>
                    </tr>
                    <tr style="height: 300px">
                        <td colspan="8">
                            <div style="height: 300px">
                                备注信息: {{ remark }}
                            </div>
                        </td>

                    </tr>

                </table>
            </div>
        </el-card>
    </div>
</template>
<script>

import printJS from "print-js"
import { closeCurrentTab } from "@/utils/utilLibrary/routerBatch/routerBatch.js";
import { getTableInfo } from '@/api/smartSchool/teachAffairAdministration/affairStudentManage'

export default {
    name: 'teachAffairStudentTable',
    dicts: ['only_child', 'politics_tatus', 'sys_user_sex', 'Grade', 'Class', 'student_type', 'Whether_Delete', 'child_state', 'student_nature', "change_type", 'relationship'],
    data() {
        return {
            baseUrl: process.env.VUE_APP_BASE_API,
            studentInfo: {},
            studentParents: [],
            url: '',
            father: {},
            mother: {},
            remark: " ",
        }
    },
    methods: {
        getInfo() {
            let id = this.$route?.query?.id
            getTableInfo(id).then((res) => {
                this.studentInfo = res.data
                console.log(this.studentInfo, 'this.studentInfo');
                this.studentParents = res.studentParents
                console.log(this.studentParents, 'this.studentParents');
            })
        },
        closeCurrentTab,
        // 打印
        printTable() {
            printJS({
                printable: 'postFormContainer',
                targetStyles: ['*'],
                type: "html",
            })
        },

        downloadProve() {
            this.download(`/school/studentStatus/exportStatus/${this.$route.query.id}`, {}, `${this.studentInfo.studentName}.xlsx`)
        },

    },
    created() {
        this.getInfo()
    },
    activated() {
        this.getInfo()
    },
}
</script>

<style scoped>
.tdStyle {
    text-align: center;
}

.leftThree {
    width: 20px;
    margin: 0 auto;
    line-height: 24px;
    font-size: 20px;
}

.my-label {
    width: 50px;
}

/* .el-descriptions__body .el-descriptions__table.is-bordered .el-descriptions__cell {
    border: var(--el-descriptions-table-border);
    padding: 7px 11px;
} */
</style>
