<template>
  <div id="codeBox">
    <div class="blueCard">
      <div class="name">{{studentInfo.travelerName ? studentInfo.travelerName : ''}}</div>
      <div class="school">
        <div class="pic"><img src="@/assets/yxCode/school.png" style="width:100%;height:100%" /></div>
        <div class="gray">学校：</div>
        <div>{{studentInfo.schoolName ? studentInfo.schoolName : ''}}</div>
      </div>
      <div class="school">
        <div class="pic"><img src="@/assets/yxCode/classroom.png" style="width:100%;height:100%" /></div>
        <div class="gray">入学年份：</div>
        <div>{{studentInfo.enrollYear ? studentInfo.enrollYear : ''}}</div>
      </div>
    </div>
    <div id="qrcode" ref="imageWrapper" v-if="!imgUrl"></div>
    <div class="codeDiv">
      <img :src="imgUrl" v-if="imgUrl" style="width:100%;height:100%" />
    </div>
    <div class="fontDiv">
      <div @click="sweep">绑定研学码</div>
      <div class="blueLine"></div>
      <div @click="downQrCode">下载一生一码</div>
    </div>

  </div>
</template>

<script>
import QRCode from 'qrcodejs2';
import html2canvas from "html2canvas"
export default {
  data () {
    return {
      studentInfo: {},
      qrcodePIc: {},
      imgUrl: ''
    }
  },
  mounted () {
    this.studentInfo = JSON.parse(localStorage.getItem('StudentDetialInfo'));
    this.creatQrCode()
  },
  methods: {
    //扫一扫页面
    sweep () {
      this.$router.push({ name: 'YanxueInfo' })
    },
    //创建qrcode
    creatQrCode () {
      let text = this.studentInfo.studyCode ? this.studentInfo.studyCode : ""
      if (text == '') {
        this.$toast('请先绑定研学码');
      }
      // let text = 'https://www.baidu.com/'
      console.log(text)
      document.getElementById('qrcode').innerHTML = '';
      this.qrcodePIc = new QRCode('qrcode', {
        text: text,
        width: 240,
        height: 240,
        colorDark: '#333333', // 二维码颜色
        colorLight: '#ffffff', // 二维码背景色
        correctLevel: QRCode.CorrectLevel.L // 容错率，L/M/H
      });
      let canvas = document.getElementById('qrcode').innerHTML
      console.log(canvas)
      this.canvanqrCode()
    },
    canvanqrCode () {
      html2canvas(this.$refs.imageWrapper, {
        width: 240,
        height: 240
      }).then(canvas => {
        let dataURL = canvas.toDataURL("image/png");
        this.imgUrl = dataURL;
      });
    },
    downQrCode () {
      //下载二维码
      this.$toast('请长按二维码进行保存!')
    },
  }
}
</script>

<style lang="scss" scoped>
#codeBox {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .blueCard {
    width: 94vw;
    height: 35vw;
    margin: 5vw auto;
    // background-color: royalblue;
    background-image: url("~@/assets/yxCode/bck.png");
    -moz-background-size: 100% 100%;
    background-size: 100% 100%;
    padding: 5vw 7vw;
    box-sizing: border-box;
    border-radius: 3vw;

    .name {
      color: #fff;
      font-size: 4.5vw;
      margin-bottom: 4vw;
    }
    .school {
      color: #fff;
      display: flex;
      font-size: 3.7vw;
      margin-bottom: 4vw;
      display: flex;
      align-items: center;
      .pic {
        width: 4.7vw;
        height: 4.7vw;
        margin-right: 2vw;
      }
      .gray {
        color: #f3f3f3;
      }
    }
  }
  .codeDiv {
    width: 67vw;
    height: 67vw;
    margin: 8vw auto;
  }
  .fontDiv {
    width: 56vw;
    margin: 0 auto;
    font-size: 4vw;
    color: #4092ff;
    display: flex;
    justify-content: space-between;

    .blueLine {
      height: 3.8vw;
      width: 0.5px;
      margin-top: 1vw;
      background-color: #000000;
      display: flex;
      align-items: center;
    }
  }
  #qrcode {
    position: absolute;
    top: -100vh;
    left: -100vw;
  }
}
</style>
<style lang="scss">
// 长辈版
.elder {
  #codeBox .blueCard .school .gray,#codeBox .fontDiv{
    font-size: 36px;
  }
}
</style>