<template>
  <div id="tool">
    <div id="posterBox">
      <img id="qrcode" src="../assets/qrcode.png">
    </div>
    <div id="createButton">
      <span @click="create">生成海报</span>
    </div>
    <div id="poster" v-show="showPoster">
      <img :src="posterUrl">
      <span @click="close">×</span>
    </div>
    <div class="loading">
      <div class="loadingCon">
        <img src="../assets/loading.gif">
      </div>
    </div>
    <navigation :is-x="isX" :apply-status="applyStatus" :tool-status="toolStatus" :mine-status="mineStatus"></navigation>
  </div>
</template>
<script>
import navigation from '../components/navigaton/navigation.vue'
import html2canvas from 'html2canvas'
import request from '../utils/request'
export default {
  data() {
    return{
      posterUrl: '',
      showPoster: false,
      isX: false,
      applyStatus: false,
      toolStatus: true,
      mineStatus: false,
    }
  },
  components: {
    navigation
  },
  mounted() {
      var u = navigator.userAgent, app = navigator.appVersion;
      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      if (isiOS) {
        var w=window.screen.width * window.devicePixelRatio;
        var h=window.screen.height * window.devicePixelRatio;
        if(w==1125&&h==2436){
          this.isX = true;
        }
      }
    // request({
    //   url: '/api/index',
    //   method: 'get',
    // }).then(response => {
    // })
  },
  methods: {
    create() {
      html2canvas(document.getElementById('posterBox'), {
        useCORS: true,
        backgroundColor:null,
      }).then(canvas => {
        // console.log(canvas.toDataURL('image/png'));
        // img.src =canvas.toDataURL("image/png").replace("image/png","image/octet-stream")
        // img.src = canvas.toDataURL().replace("image/png", "image/octet-stream");
        this.posterUrl = canvas.toDataURL('image/png')
        this.showPoster = true
      })
    },
    close() {
      this.showPoster = false
    }
  }
}
</script>
<style lang="scss">
  #tool{
    height: 100%;
    padding-bottom: 55px;
  }
  #posterBox{
    position: relative;
    height: 90%;
    background: url('../assets/posterBg.png') no-repeat;
    background-size: 100% 100%;
  }

  #qrcode{
    width: 200px;
    position: absolute;
    right: 30px;
    bottom: 100px;
  }

  #createButton{
    height: 10%;
    text-align: center;
  }
  #createButton span{
    display: inline-block;
    padding: 10px;
    border-radius: 5px;
    font-size: 30px;
    background: #ccc;
  }


  #poster{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
  }
  #poster img{
    width: 100%;
    height: 100%;
  }
  #poster span{
    font-size: 50px;
    position: absolute;
    top: 10px;
    right: 10px;
  }
</style>