<template>
  <div class="cert">
    <back title="证书"></back>
    <div
      v-if="is_cert == 1"
      v-show="loginInfo.member_realname == ('演示账号1' || '李琳') ? true : false"
    >
      <div class="cert-box">
        <img src="../../../static/img/zhengshu.jpg" />
        <div class="c1">
          <h2><br />职业安全健康管理知识培训</h2>
        </div>
        <div class="c2">{{ loginInfo.member_realname }}&emsp;同志</div>
        <div class="c3">
          您于{{ startTime }}到
          {{ endTime }}
          参加了{{ companyName }}组织的职业安全健康培训，达到规定学时数
          <div class="">
            <p v-for="i in courseName" :key="i">课时证明：{{ i }}</p>
          </div>
          <!-- 通过考试，培训合格，特发此证。 -->
          <div class="c9">考核成绩合格，特发此证。</div>
        </div>
        <!-- <div class="c3 c6">证书编号：2019AQPX-xxx</div> -->
        <div class="c4">{{ certificateshowdate }}</div>
        <div class="c5">{{ companyName }}</div>
        <!-- <div class="c5">{{cert.company_name}}人事部</div> -->
      </div>
      <!-- <div class="cert-box">
        <img src="../../../static/img/zhengshu.jpg" />

        <div class="c1">
          <h2><br />职业安全健康管理知识培训</h2>
        </div>
        <div class="c2 c8"><p v-for="i in 2" :key="i">xxx课程</p></div>
        <div class="c4">xxxx年xx月xx日</div>
        <div class="c5">上海建科检验有限公司</div>
      </div> -->
    </div>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
import Back from "../common/Back.vue";
import { getStore } from "@/utils/storage";
import { MessageBox } from "mint-ui";
import { mapState } from "vuex";
export default {
  name: "certificate",
  components: { Back },
  data() {
    return {
      cert: {},
      is_cert: 1,
      startTime: "",
      endTime: "",
      companyName: "",
      certificateshowdate: "",
      courseName: [],
    };
  },
  mounted() {
    // this.getPageData()
    this.d();
  },
  methods: {
    d() {
      // console.log("login=>", this.loginInfo);
      var startdate = new Date(this.loginInfo.start_time * 1000);
      var enddate = new Date(this.loginInfo.end_time * 1000);
      //账号起始时间
      this.startTime =
        startdate.getFullYear() +
        "-" +
        (startdate.getMonth() + 1 < 10
          ? "0" + (startdate.getMonth() + 1)
          : startdate.getMonth() + 1) +
        "-" +
        (startdate.getDate() < 10 ? "0" + startdate.getDate() : startdate.getDate());
      //账号终止时间
      this.endTime =
        enddate.getFullYear() +
        "-" +
        (enddate.getMonth() + 1 < 10
          ? "0" + (enddate.getMonth() + 1)
          : enddate.getMonth() + 1) +
        "-" +
        (enddate.getDate() < 10 ? "0" + enddate.getDate() : enddate.getDate());
      //公司名称
      var cn = this.loginInfo.company_name;
      this.companyName =
        cn.indexOf("建科") != -1 ? "上海建科检验有限公司" : "上海市化工职业病防治院";
      //证书展示日期
      var today = new Date();
      var yyyy = today.getFullYear();
      var MM = String(today.getMonth() + 1).padStart(2, "0");
      var DD = String(today.getDate()).padStart(2, "0");
      this.certificateshowdate = yyyy + "年" + MM + "月" + DD;
      //课程名称（数组类型）
      this.courseName = JSON.parse(localStorage.getItem("courseName"));
      // console.log("courseNsame", this.courseName);
    },
    // getPageData(){
    //   this.getData('/Member/getCert',{token:getStore('token')}).then(
    //     data=>{
    //       if(data.code==1){
    //         this.cert = data.data;
    //         this.is_cert = 1;
    //       }else{
    //         MessageBox.alert(data.msg).then(action => {
    //           // this.$router.push({path: '/'});
    //         }
    //         );
    //       }
    //     },
    //     err=>{  })
    // },
  },
  computed: {
    ...mapState(["loginInfo"]),
  },
};
</script>

<style lang="scss" scoped>
.cert {
  padding-top: 5rem;
  .cert-box {
    width: 100%;
    position: relative;
    /*transform:rotate(90deg);*/
    /*-ms-transform:rotate(90deg); 	!* IE 9 *!*/
    /*-moz-transform:rotate(90deg); 	!* Firefox *!*/
    /*-webkit-transform:rotate(90deg); !* Safari 和 Chrome *!*/
    /*-o-transform:rotate(90deg); 	!* Opera *!*/

    img {
      width: 100%;
      height: auto;
    }
    .c1,
    .c2,
    .c3,
    .c4,
    .c5 {
      position: absolute;
      width: 100%;
    }
    .c1 {
      text-align: center;
      font-size: 1.2rem;
      font-weight: bolder;
      top: 7rem;
      left: 0;
    }
    .c2 {
      width: 50%;
      text-align: left;
      font-size: 0.9rem;
      font-weight: bold;
      font-style: oblique;
      top: 16.5rem;
      left: 7rem;
    }
    .c3 {
      width: 65%;
      text-align: left;
      font-size: 0.9rem;
      font-weight: bold;
      top: 19rem;
      left: 7rem;
      text-indent: 2rem;
    }
    .c4 {
      text-align: right;
      font-size: 0.9rem;
      font-weight: bold;
      bottom: 10rem;
      right: 7rem;
    }
    .c5 {
      text-align: right;
      font-size: 0.9rem;
      font-weight: bold;
      bottom: 8rem;
      right: 7rem;
    }
    .c6 {
      top: 26rem;
    }
    .c8 {
      text-indent: 2em;
      font-style: inherit;
      top: 14rem;
      > p {
        margin-bottom: 0.5rem;
      }
    }
    .c9 {
      padding-top: 3rem;
    }
  }
}
</style>
