<template>
  <div class="container">
    <div class="top">
      <el-button
        type="danger "
        style="float:right"
        @click="ExportSavePdf(htmlTitle, nowTime)"
        >下载成绩单</el-button
      >
    </div>
    <div id="pdfContent" class="main">
      <div class="up">
        <div class="title">
          <div class="text">
            <p>UNIVERSITY OF SHANGHAI FOR SCIENCE AND TECHNOLOGY</p>
            <p>EDP CENTER</p>
            <p>ACADEMIC TRANSCRIPT</p>
          </div>
        </div>
        <div class="stuInfo">
          <div class="leftInfo">
            <p>NAME:</p>
            <p>ID NUMBER:</p>
          </div>
          <div class="leftText">
            <p>{{ list.name }}</p>
            <p>{{ birth }}</p>
          </div>
          <div class="rightInfo">
            <p>GENDER:</p>
            <p>SEMESTER:</p>
          </div>
          <div class="rightText">
            <p>
              <span v-if="list.sex == 1">Male</span
              ><span v-else-if="list.sex == 0">Female</span
              ><span v-else>Unknown</span>
            </p>
            <p>{{ list.usstid }}</p>
          </div>
        </div>
      </div>
      <div class="down">
        <!-- <div class="begin">
            <p>Beginning of Undergraduate Record</p>
        </div> -->
        <div class="mainTable">
          <!-- <div class="term">
                 <span>Semester:</span>
                <span>{{newTerm}}</span>
                <span>{{list.yearTime}}</span>
            </div> -->
          <div class="table">
            <el-table
              :data="userCourseList"
              style="width: 100%"
              :row-style="{ height: '40px' }"
              :header-cell-style="{
                'text-align': 'center',
                color: '#333',
                'border-bottom': '2px solid'
              }"
              :cell-style="{
                padding: '0px',
                'text-align': 'center',
                color: '#333'
              }"
            >
              <el-table-column label="Course Code">
                <template slot-scope="scope">
                  {{ scope.row.auditCourseCode }}</template
                >
              </el-table-column>
              <el-table-column label="Description">
                <template slot-scope="scope">{{
                  scope.row.courseName
                }}</template>
              </el-table-column>
              <el-table-column prop="units" label="CREDITS">
                4.0
              </el-table-column>
              <!-- <el-table-column prop="earned" label="Earned" width="85">
                4.0
              </el-table-column> -->
              <!-- <el-table-column label="Grade" width="85">
                <template slot-scope="scope">
                  <span v-if="scope.row.gpa <= 100 && scope.row.gpa >= 96"
                    >A+</span
                  >
                  <span v-if="scope.row.gpa <= 95 && scope.row.gpa >= 90"
                    >A
                  </span>
                  <span v-if="scope.row.gpa <= 89 && scope.row.gpa >= 85"
                    >A-</span
                  >
                  <span v-if="scope.row.gpa <= 84 && scope.row.gpa >= 82"
                    >B+</span
                  >
                  <span v-if="scope.row.gpa <= 81 && scope.row.gpa >= 78"
                    >B
                  </span>
                  <span v-if="scope.row.gpa <= 77 && scope.row.gpa >= 75"
                    >B-</span
                  >
                  <span v-if="scope.row.gpa <= 74 && scope.row.gpa >= 71"
                    >C+</span
                  >
                  <span v-if="scope.row.gpa <= 70 && scope.row.gpa >= 66"
                    >C
                  </span>
                  <span v-if="scope.row.gpa <= 65 && scope.row.gpa >= 62"
                    >C-</span
                  >
                  <span v-if="scope.row.gpa <= 61 && scope.row.gpa >= 60"
                    >D
                  </span>
                  <span v-if="scope.row.gpa < 60">F </span>
                </template>
              </el-table-column> -->
              <el-table-column label="Points">
                <template slot-scope="scope">{{ scope.row.gpa }}</template>
              </el-table-column>
            </el-table>
            <img
              class="logo"
              src="../../../assets/images/成绩单水印.png"
              alt=""
            />
          </div>
        </div>
        <div class="end">
          <p>End of Transcript</p>
        </div>
        <div class="inscribe">
          <div class="schoolInfo">
            <p>EDP Center, BS</p>
            <p style="font-weight:bold">
              University of Shanghai for Science and Technology
            </p>
            <p>Address: Room 703, Building B, BS, Jungong Road</p>
            <p>No. 334,Yangpu District,Shanghai, China 200093</p>
          </div>
          <div class="sign">
            <div class="date">
              <span>Date of Issue:</span>
              <span>{{ getTime }}</span>
              <p>SEAL</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getGpaOne } from "@/api/cso2";

export default {
  name: "NewGpaPdf",
  data() {
    return {
      list: {},
      userCourseList: [],
      pageSize: null,
      pageNum: null,
      total: null,
      birth: "",
      newTerm: "",
      listLoading: true,
      grade: "",
      htmlTitle: " ",
      nowTime: "",
      userId: "",
      termCourseId: "",
      getTime: ""
    };
  },

  created() {
    this.userId = this.$route.query.userId;
    this.termCourseId = this.$route.query.termCourseId;
    this.getData();
    this.getCurrentTime();
  },
  methods: {
    getData() {
      //   console.log(this.userId,this.termCourseId);

      getGpaOne({
        userId: this.userId,
        termCourseId: this.termCourseId
      }).then(res => {
        this.list = res.data;
        this.userCourseList = res.data.userCourseList;
        this.htmlTitle = res.data.name;

        //  console.log(res, "res,getGpaOne");
        //  console.log(this.list, "list,GpaOne");
        //  console.log(this.userCourseList,"userCourseList,GpaOne");
        this.changeDate();
        this.changeTerm();
        this.$forceUpdate();
      });
    },
    changeDate() {
      let time = (this.list.birthday || "").split("-");
      let [a, b, c] = time;
      time = [b, c, a];
      this.birth = time.join("/");
      console.log(this.birth, "birth");
    },
    changeTerm() {
      let term = this.list.term || "";
      this.newTerm =
        term.slice(0, 1).toUpperCase() + term.slice(1).toLowerCase();
      console.log(this.newTerm, "newTerm");
    },
    getCurrentTime() {
      //获取当前时间并打印
      var _this = this;
      let yy = new Date().getFullYear();
      let mm =
        new Date().getMonth() < 9
          ? "0" + (new Date().getMonth() + 1)
          : new Date().getMonth() + 1;
      let dd =
        new Date().getDate() <= 9
          ? "0" + new Date().getDate()
          : new Date().getDate();

      this.getTime = mm + "/" + dd + "/" + yy;
    }
  }
};
</script>

<style lang="scss" scoped>
.table >>> .el-table__row > td {
  /* 去除表格线 */
  border: none;
}

.table >>> .el-table th.is-leaf {
  /* 去除上边框 */
  border: none;
}

.table >>> .el-table::before {
  /* 去除下边框 */
  height: 0;
}
.table >>> .el-table th.el-table__cell > .cell {
  // text-decoration: underline;
}
.container {
  // box-sizing: border-box;
  font-family: "Microsoft YaHei";

  .top {
    display: inline-block;
    height: 60px;
    width: 100%;
    padding-top: 12px;
  }
  .main {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
    margin-left: 200px;
    // border: 2px solid;
    width: 760px;
    height: 1080px;
    margin-bottom: 100px;
    // background-color: #ecf0f1;

    .up {
      height: 295px;
      width: 100%;

      // border-bottom: 2px solid;

      .title {
        width: 740px;
        height: 160px;
        margin: 0 auto;
        .text {
          display: flex;
          flex-flow: column;
          justify-content: center;
          align-items: center;
          p {
            font-family: "Times New Roman", Times, serif;
            font-weight: 800;
            font-size: 22px;
            line-height: 0;
          }
        }
      }
      .stuInfo {
        display: flex;
        width: 100%;
        height: 105px;
        p {
          margin-top: 25px;
          font-family: "Times New Roman", Times, serif;
        }

        .leftInfo {
          flex: 1;
          padding-left: 45px;
          p {
            text-align: left;
            // font-weight: 800;
          }
        }
        .leftText {
          margin-right: 40px;
          flex: 2;
        }
        .rightInfo {
          margin-left: 20px;
          flex: 1;
          padding-right: 30px;
          p {
            text-align: left;
            // font-weight: bold;
          }
        }
        .rightText {
          flex: 2;
        }
      }
    }
    .down {
      width: 100%;
      height: 782px;

      // border-top: 2px solid ;

      .begin {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 130px;
        p {
          font-weight: bold;
        }
      }
      .mainTable {
        width: 100%;
        height: 260px;

        .term {
          width: 100%;
          height: 20px;
          padding-left: 25px;
        }
        .table {
          // display: flex;
          // flex-direction: column;
          // align-items: center;
          // margin-top: 20px;
          margin-right: -10px;
          height: 100%;
          width: 100%;
          .logo {
            width: 90%;
            object-fit: contain;
            margin: 0 auto;
            margin-top: 60px;
          }
        }
      }
      .end {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 140px;
        margin: 60px 0 100px;
        p {
          // font-weight:bold;
        }
      }
      .inscribe {
        width: 100%;
        height: 150px;

        display: flex;
        justify-content: space-between;
        font-size: 14px;

        .schoolInfo {
          p {
            font-style: oblique;
          }
        }

        .sign {
          .date {
            position: relative;
            margin-top: 70px;
            p {
              position: absolute;
              top: -31px;
              left: 111px;
            }
          }
        }
      }
    }
  }
}
</style>
