<template>
  <section class="cert-id">
    <section class="cert-id-box">
      <template v-if="detail.name">
        <h1>{{detail.name}}证书</h1>
        <div class="hr"></div>
        <canvas class="canvas" ref="canvas" width="850" height="520">对不起, 您的浏览器不支持绘图功能, 请更新浏览器.</canvas>
        <img ref="img" class="img" src="~@/assets/img/cert/bg.png" alt="img">
        <img ref="qrImg" class="img" :src="`/api/cert/certQrCode?uid=${detail.uid}`" alt="qrImg">
        <section class="links">
          <a class="link" :href="detail.seo_uri">开发者个人主页 ></a>
          <br>
          <nuxt-link class="link" :to="`/cert/type/${detail.cert_id}`">{{detail.name}}认证标准 ></nuxt-link>
        </section>
      </template>
      <h1 v-else>未查询到证书</h1>
    </section>
  </section>
</template>

<script>
import http from '@/plugins/http'
import bg from '@/assets/img/cert/bg.png'
import { mapState } from 'vuex'
import WxMixin from '@/mixins/wx'

let canvas = null
let ctx = null
let img = null
let interval = null
let qrLoaded = false
let imgLoaded = false
let detailLoaded = false

export default {
  async asyncData({ params }) {
    let res = await http.post(`/api/cert/getCertDetail`, { cert_no: params.no })
    let detail = {}
    if(res) {
      detail = res.data
    }
    return {
      detail
    }
  },
  head() {
    return {
      title: `${this.detail.name}证书-程序员客栈`,
    }
  },
  mixins: [WxMixin],
  data() {
    return {}
  },
  computed: {
  },
  mounted() {
    if(!this.detail.name) return
    this.initCanvas()
    this.checkInfoFull()
    interval = setInterval(this.checkInfoFull, 500)
  },
  methods: {
    checkInfoFull() {
      this.$refs.qrImg.onload = () => qrLoaded = true
      this.$refs.img.onload = () => imgLoaded = true
      if(this.detail.uid) detailLoaded = true
      if(qrLoaded && imgLoaded && detailLoaded) {
        this.fillingCanvas()
        clearInterval(interval)
      }
    },
    initCanvas() {
      canvas = this.$refs.canvas
      ctx = canvas.getContext('2d')

      img = this.$refs.img
    },
    fillingCanvas() {
      let detail = this.detail
        , canvasWidth = 850
        , textWidth = 0
        , text = ''
      // 背景
      ctx.drawImage(img, 0, 0, 850, 520)

      // 证书英文名
      let englishName = detail.english_name.toUpperCase()
      ctx.font = '43px 微软雅黑'
      textWidth = ctx.measureText(englishName).width
      ctx.save()
      ctx.fillStyle = 'rgb(44, 108, 195)'
      ctx.fillText(englishName, canvasWidth / 2 - textWidth / 2, 160)

      // 两条线
      let lineStartLeft = canvasWidth / 2 - textWidth / 2
      ctx.beginPath()
      ctx.moveTo(lineStartLeft, 170)
      ctx.lineTo(textWidth + lineStartLeft, 170)
      ctx.moveTo(lineStartLeft, 174)
      ctx.lineTo(textWidth + lineStartLeft, 174)
      ctx.lineWidth = 1
      ctx.strokeStyle = 'rgb(44, 108, 195)'
      ctx.stroke()

      // 证书名
      let name = detail.name.toUpperCase()
      ctx.beginPath()
      ctx.font = '32px 微软雅黑'
      textWidth = ctx.measureText(name).width
      ctx.fillText(name, canvasWidth / 2 - textWidth / 2, 220)

      // 真实姓名
      let realname = detail.realname || '测试'
      ctx.font = '43px 微软雅黑'
      textWidth = ctx.measureText(realname).width
      ctx.restore()
      ctx.fillText(realname, canvasWidth / 2 - textWidth / 2, 290)

      // 用户信息
      let id = detail.uid
        , nickname = detail.nickname
      ctx.font = '14px 微软雅黑'
      ctx.fillStyle = '#666'
      text = `ID ${id} | 昵称 ${nickname}`
      textWidth = ctx.measureText(text).width
      ctx.fillText(text, canvasWidth / 2 - textWidth / 2, 320)
      // 内容
      let content = detail.content
      ctx.font = '16px 微软雅黑'
      ctx.fillStyle = '#000'
      textWidth = 660
      let lineWidth = 0
        , fullWidth = 0
      for(let i = 0; i < content.length; i++) {
        lineWidth += ctx.measureText(content[i]).width
        if(lineWidth < textWidth) {
          ctx.fillText(content[i], canvasWidth / 2 - textWidth / 2 + lineWidth, 350)
          fullWidth = lineWidth
        } else {
          ctx.fillText(content[i], canvasWidth / 2 + lineWidth - fullWidth - 76, 370)
        }
      }
      // 二维码
      let qr = detail.qr
      ctx.drawImage(this.$refs.qrImg, 70, 380, 76, 76)

      // 证书编号
      let certNO = detail.cert_no
      ctx.font = '12px 微软雅黑'
      ctx.fillStyle = '#666'
      ctx.fillText(`证书编号 ${certNO}`, 160, 410)
      // 起始时间
      let startDate = detail.start_date
        , endDate = detail.end_date
        , statusName = detail.cert_status_name
      text = `有效时间 ${startDate} -  ${endDate}   ${statusName}`
      ctx.font = '12px 微软雅黑'
      ctx.fillText(text, 160, 430)
      // 状态框
      let boxWidth = ctx.measureText(statusName).width + 10
      ctx.rect(ctx.measureText(text).width - boxWidth + 165, 414, boxWidth, 22)
      ctx.stroke()
    }
  }
}
</script>

<style scoped>
@import "@/assets/css/h1_line.css";

.cert-id {
  width: 100%;
  max-width: 1000px;
}
.cert-id-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-bottom: 30px;
  margin-top: 20px;
  background: white;
}
.img {
  width: 850px;
  height: 520px;
  display: none;
}
a {
  line-height: 28px;
  margin-left: 12px;
  text-decoration: underline;
  font-size: 14px;
  font-family: PingFangSC-Regular;
  color: #666;
}
.links {
  width: 850px;
}
.link {
  color: #333;
}
@media screen and (max-width: 960px) {
  .cert-id {
    height: 100vh;
    overflow: hidden;
  }
  .cert-id-box {
    height: 420px;
  }
  .canvas {
    position: absolute;
    left: 0;
    top: -40px;
    margin-left: 4.5%;
    transform: scale(0.4);
    transform-origin: left;
  }
  .links {
    position: absolute;
    left: 0;
    top: 340px;
    width: 100%;
    padding-left: 10px;
  }
  .link {
    text-decoration: none;
  }
}
</style>
