<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="leftPic">
                <img src="@/assets/images/schoolbrand.png" alt="">

            </div>
            <div class="rightSchool">
                <div class="text">
                <p class="schoolName">University of Shanghai for Science and Technology</p>
                <p class="schoolTitle">Official Transcript Record</p>
                </div>
            </div>
        </div>
        <div class="stuInfo">
            <div class="leftInfo">
                <p>Name:</p>
                <p>Birthdate:</p>
            </div>
            <div class="leftText">
                <p>{{list.name}}</p>
                <p>{{birth}}</p>
            </div>
            <div class="rightInfo">
                <p>Gender:</p>
                <p>USST ID:</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',}"
      :cell-style="{padding:'0px','text-align':'center','color':'#333'}"
      >
      <el-table-column
        label="Course Code"
        width="160"
       >
        <template slot-scope="scope"> {{ scope.row.auditCourseCode}}</template>
      </el-table-column>
       <el-table-column
        label="Description"
        width="220"
       >
        <template slot-scope="scope">{{ scope.row.courseName }}</template>
      </el-table-column>
       <el-table-column
        prop="units"
        label="Units"
        width="85">
        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"
        width="85"
        >
         <template slot-scope="scope">{{ scope.row.gpa }}</template>
      </el-table-column>
    </el-table>

            </div>
        </div>
        <div class="end">
            <p>End of Undergraduate Coursework</p>
        </div>
        <div class="inscribe">
            <p>SEAL</p>
            <div class="date">
                <span>Date of Issue:</span>
                <span>{{getTime}}</span>
            </div>


        </div>
      </div>
    </div>
</div>
 
</template>

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

 
export default {
    name:"gpaPdf",
     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.params.userId
    this.termCourseId = this.$route.params.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{
    margin-top: 10px;
    margin-left: 200px;
    border: 2px solid;
    width: 760px;
    height: 1080px;
    margin-bottom: 100px;

    .up{
        height: 295px ;
        width: 100%;
        border-bottom: 2px solid;

        .title{
            width: 756px;
            height: 190px;

            .leftPic{
                float: left;
                width: 190px;
                height: 190px;
                padding: 30px;
               
            
                img{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;

                }
            }
            .rightSchool{
                display: flex;
                justify-content:center;
                align-items:center;
                font-family: "Arial";
                float: left;
                width: 556px;
                height: 190px;
                

                .schoolName{
                    font-size: 20px;
                    font-weight:bold;
                    margin-bottom: -15px;
                }
                .schoolTitle{
                    font-size: 17px;
                    font-weight:bold;
                    font-style: oblique;
                    padding-left: 150px;
                }
                
            }
        }
        .stuInfo{
            display: flex;
            width: 100%;
            height: 105px;
            p{
                margin-top: 25px;
            }
           
            .leftInfo{
                flex: 1;
                padding-right: 30px;
                p{
                    text-align: right;
                     font-weight:bold;
                     
                }
                
            }
             .leftText{
                margin-right: 50px;
                flex: 2;
                
            }
             .rightInfo{
                margin-left: 20px;
                flex: 1;
                padding-right: 30px;
               p{
                    text-align: right;
                     font-weight:bold;
                }
            }
             .rightText{
                flex: 2;
               
            }
        }
    }
    .down{
        width: 100%;
        height: 782px ;
        margin-top: 1px;
        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{
                margin-top: 20px;
                margin-right: -10px;
                height: 100%;
                width: 100%;
            }

        }
        .end{
            display: flex;
            justify-content:center;
            align-items:center;
            width: 100%;
            height: 140px;
            p{
                font-weight:bold;
            }
        }
        .inscribe{
            width: 100%;
            height: 250px;
            position: relative;
            p{
                position: absolute;
                right: 117px;
                top: 100px;
            }
            .date{
                position: absolute;
                right: 55px;
                top: 150px;
                span{
                    margin-right: 12px;
                }
            }
        }
    }
 
}
}
</style>