<template>
  <div class="app-container" style="width: 100% ;display: flex; justify-content: center">
    <div style="width: 960px;">
      <div style="float: right">
        <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>

      <el-card style="height: 100%;width: 940px;">
        <div style="width: 100%; margin:0 auto" id="postFormContainer" class="box">
          <br/>
          <div style="text-align: center; font-weight: 800; font-size: 25px;">
            东营市第二中学学生异动审批表
          </div>
          <br/>
          <span style=" display: block; text-align: center; font-size: 18px;"> {{ time }}</span>
          <br/>
          <table border="1px solid black" cellspacing="0" style="width: 870px">
            <tr>
              <th width="120px">姓名</th>
              <td class="tdStyle" style="height: 40px">{{ studentInfo.studentName }}</td>
              <th width="100px">性别</th>
              <td class="tdStyle">{{ studentInfo.sex }}</td>
              <th class="tdStyle" width="100px">出生年月</th>
              <td class="tdStyle">{{ studentInfo.birthday }}</td>
            </tr>
            <tr>
              <th height="40px">年级班级</th>
              <td class="tdStyle">{{ studentInfo.classAlias }}</td>
              <th>学号</th>
              <td class="tdStyle">{{ studentInfo.nationalNumber }}</td>
              <th>身份证号</th>
              <td class="tdStyle">{{ studentInfo.idCard }}</td>
            </tr>
            <tr>
              <th style="height: 40px">家长姓名</th>
              <td class="tdStyle">{{ studentInfo.parentName }}</td>
              <th>住址</th>
              <td class="tdStyle" width="180px">{{ studentInfo.homeAddress }}</td>
              <th>联系电话</th>
              <td class="tdStyle">{{ studentInfo.telephone }}</td>
            </tr>
            <tr>
              <th style="height: 40px">变更类型</th>
              <td class="tdStyle">{{ studentInfo.changeType }}</td>
              <td class="tdStyle" colspan="4"> A 转入&nbsp;B转入借读&nbsp;C转出&nbsp;D转出借读&nbsp;E退学&nbsp;F休学&nbsp;G复学</td>
            </tr>
            <tr>
              <th style="height: 40px">转出入学校</th>
              <td class="tdStyle" colspan="2">{{ studentInfo.turnSchool }}</td>
              <th style="width:120px ;">是否保留学籍</th>
              <td class="tdStyle" colspan="3">{{ studentInfo.isSave }}</td>
            </tr>
            <tr>
              <th style="height: 150px">异动原因</th>
              <td colspan="5">
                <div style="height:100px ;"></div>
                <div style="width: 100%; text-align: right;padding: 0 100px 0 0;">
                  <div style="height:30px ;">学生（签名并按手印）：</div>
                  <div style="height:30px ;">家长（签名并按手印）：</div>
                </div>
                <div style="width: 100%; text-align: right;">
                  <span style="margin: 0 30px 0 0 ;">年</span><span style="margin: 0 30px 0 0 ;">月</span><span
                  style="margin: 0 10px 0 0 ;">日</span>
                </div>
              </td>
              <!-- <th>户口所在地</th>
              <td colspan="4">{{ studentInfo.registeredAddress }}</td> -->
            </tr>

            <tr>
              <th style="height: 120px">级部</th>
              <td colspan="5">
                <div style="height:100px ;"></div>
                <div style="width: 100%; text-align: right;padding: 0 50px 0 0;">

                </div>
                <div style="width: 100%; text-align: right;"><span style="margin: 0 30px 0 0 ;">年</span><span
                  style="margin: 0 30px 0 0 ;">月</span><span style="margin: 0 10px 0 0 ;">日</span></div>
              </td>

            </tr>
            <tr>
              <th style="height: 120px">教学指导中心</th>
              <td colspan="5">
                <div style="height:100px ;"></div>
                <div style="width: 100%; text-align: right;padding: 0 50px 0 0;">
                </div>
                <div style="width: 100%; text-align: right;"><span style="margin: 0 30px 0 0 ;">年</span><span
                  style="margin: 0 30px 0 0 ;">月</span><span style="margin: 0 10px 0 0 ;">日</span></div>
              </td>

            </tr>
            <tr>
              <th style="height: 120px">校长意见</th>
              <td colspan="5">
                <div style="height:100px ;"></div>
                <div style="width: 100%; text-align: right;padding: 0 50px 0 0;">
                </div>
                <div style="width: 100%; text-align: right;"><span style="margin: 0 30px 0 0 ;">年</span><span
                  style="margin: 0 30px 0 0 ;">月</span><span style="margin: 0 10px 0 0 ;">日</span></div>
              </td>

            </tr>
            <tr>
              <th style="height: 80px" rowspan="4">财产交接</th>
            </tr>
            <tr>
              <th style="height: 40px">图书馆</th>
              <td colspan="2"></td>
              <th style="height: 40px">音美体</th>
              <td colspan="2"></td>
            </tr>
            <tr>
              <th style="height: 40px">总务处</th>
              <td colspan="2"></td>
              <th style="height: 40px">班级</th>
              <td colspan="2"></td>
            </tr>
          </table>
          <div>
            <br/>
            <!--            <div>1审批顺序。①②③④</div>-->
            <div style="margin: 0 0 0 32px;">注：此表交教学指导中心存档。</div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>


<script>

import printJS from "print-js";

import {
  getTurnover
} from '@/api/smartSchool/teachAffairAdministration/alterManage/index'
// import { format } from 'path';
import {closeCurrentTab} from "@/utils/utilLibrary/routerBatch/routerBatch.js";


export default {
  name: '',
  pev: process.env.VUE_APP_BASE_API,
  dicts: ["change_status", "change_type", "grade_type", "Grade"],
  data() {
    return {
      pev: process.env.VUE_APP_BASE_API,
      studentInfo: {},
      url: '',
      father: {},
      mother: {},
      remark: " ",
      time: " ",
      // classAlias: " ",
    }
  },
  components: {},
  methods: {
    closeCurrentTab,
    getImage() {
      const studentId = this.$route.query.id;
      getTurnover(studentId).then((res) => {
        this.studentInfo = res.data
        if (res.data.sex == 0) {
          this.studentInfo.sex = "男"
        } else {
          this.studentInfo.sex = "女"
        }
        if (res.data.birthday.charAt(5) == 0) {
          if (res.data.birthday.charAt(8) == 0) {
            this.studentInfo.birthday = res.data.birthday.slice(0, 4) + "年" + res.data.birthday.slice(6, 7) + "月"
          } else {
            this.studentInfo.birthday = res.data.birthday.slice(0, 4) + "年" + res.data.birthday.slice(6, 7) + "月"
          }

        } else {
          if (res.data.birthday.charAt(8) == 0) {
            this.studentInfo.birthday = res.data.birthday.slice(0, 4) + "年" + res.data.birthday.slice(5, 7) + "月"
          } else {
            this.studentInfo.birthday = res.data.birthday.slice(0, 4) + "年" + res.data.birthday.slice(5, 7) + "月"
          }
        }
        if (res.data.isSave == 0) {
          this.studentInfo.isSave = "是"
        } else {
          this.studentInfo.isSave = "否"
        }
        switch (res.data.changeType) {
          case "0":
            this.studentInfo.changeType = "A转入"
            break;
          case "1":
            this.studentInfo.changeType = "B转入借读"
            break;
          case "2":
            this.studentInfo.changeType = "C转出"
            break;
          case "3":
            this.studentInfo.changeType = "D转出借读"
            break;
          case "4":
            this.studentInfo.changeType = "E退学"
            break;
          case "5":
            this.studentInfo.changeType = "F休学"
            break;
          case "6":
            this.studentInfo.changeType = "G复学"
            break;
        }
        // if (res.data.appearance == 0) {
        //   this.studentInfo.appearance = "中共党员"
        // } else if (res.data.appearance == 1) {
        //   this.studentInfo.appearance = "共青团员"
        // } else {
        //   this.studentInfo.appearance = "群众"
        // }
        // res.studentParents.forEach(item => {
        //   if (item.relationship == 0) {
        //     this.father = item
        //     this.father.relationship = "父亲"
        //   } else if (item.relationship == 1) {
        //     this.mother = item
        //     this.mother.relationship = "父亲"
        //   }
        // });
        this.url = this.pev + this.studentInfo.avatar
        this.remark = res.studentTurnover[0].remark
        // this.classAlias = res.studentClassRelation[0].classAlias
      });
    },
    // 打印
    printTable() {
      // 重置表单
      // const style = '@page {margin:0 10mm};' //可选-打印时去掉眉页眉尾
      printJS({
        printable: 'postFormContainer',
        // maxWidth: 10000,
        // header: '<b style="text-align: center">学籍表</b>',
        // ignoreElements: ['no-print', 'back-no-print', 'front-no-print'],
        targetStyles: ['*'],
        // gridHeaderStyle: "border: 1px solid black",
        type: "html",
        style: ".box{width: 100%; margin:0 auto; }"
        // gridStyle: `text-align: center; border: 1px solid black`,
      })
    },

    downloadProve() {
      this.download(`/studentTurnover/download/${this.$route.query.id}`, {
        // id: this.form.id
      }, `${this.$route.query.name}.xlsx`)
    },
    /**
     * 获取当前时间
     */
    currentTime() {
      var date = new Date();
      var year = date.getFullYear(); //月份从0~11，所以加一
      let month = date.getMonth();
      console.log("month", month);
      var dateArr = [
        date.getMonth() + 1,
        date.getDate(),
      ];
      var strDate =
        year + "年" + dateArr[0] + "月" + dateArr[1] + "日"
      console.log("strDate", strDate);
      return strDate

    },
  },
  created() {
    this.getImage()
    this.time = this.currentTime()
  },
}
</script>

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

.my-label {
  width: 50px;
}

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