<template>
  <div v-show="divShow" style="z-index: -1;position: absolute">
    <div :class="{shareTimeBlock2:imgList.length<3,shareTimeBlock3:imgList.length==3}" :style="{backgroundImage:`url('${imgUrl.bg}')`}" id="capture33">
      <img v-for="i in imgList" :src="imgUrl[i]">
    </div>
  </div>
</template>

<script>
  import {shareTime} from "../util/shareTime";
  import html2canvas from 'html2canvas'
  export default {
    name: "shareTime",
    props:['day'],
    data(){
      return {
        divShow:false,
        imgUrl:shareTime,
        imgList:[],
        dataURL:''
      }
    },
    created(){
    },
    mounted(){
    },
    methods:{
      initPage(){
        let str = this.day.toString();
        for(let i=0;i<str.length;i++){
          this.imgList.push(str[i])
        }
        this.divShow = true;
        let that = this
        this.$nextTick(()=>{
          html2canvas(document.getElementById('capture33'),{
            async: true,
            scrollX:1,
            scale: 1,
            letterRendering: true,
          }).then((canvas) => {
            this.divShow = false;
            let dataURL = canvas.toDataURL("image/jpg");
            // console.log(dataURL)
            this.dataURL = dataURL;
            this.$fetch('/api/public/qiniu/token',{file_name: `Day${this.day}.jpg`,is_rand : 0}).then(res=>{
              var pic = dataURL.replace('data:image/png;base64,','');
              var url = "https://upload.qiniup.com/putb64/-1/key/"+ window.btoa(res.new_name); //非华东空间需要根据注意事项 1 修改上传域名
              var xhr = new XMLHttpRequest();
              xhr.open("POST", url, true);
              xhr.setRequestHeader("Content-Type", "application/octet-stream");
              xhr.setRequestHeader("Authorization", "UpToken "+res.token);
              xhr.send(pic);
              xhr.onreadystatechange = function() {
                if (xhr.readyState == 4) {
                  //当XHR的状态为4时判断请求成功与否，然后处理响应的数据，虽然当XHR的状态为2或者3时可以获取到响应状态，但是此时的数据还未下载完全，不能处理响应数据
                  if (xhr.status == 200) {
                    //请求成功，处理响应数据
                    that.$emit('changeIcon',process.env.IMAGE_URL_HEAD+JSON.parse(xhr.response).key)
                  } else {
                    //请求失败
                  }
                }
              }
            });
          }).catch(res=>{alert(res);console.log()});
        })
      },
    }
  }
</script>

<style scoped lang="less">
  @import "../util/public";
  .shareTimeBlock2{
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 200*@toVw;
    height: 200*@toVw;
    text-align: center;
    line-height: 200*@toVw;
    img{
      width:90*@toVw;
      vertical-align: middle;
    }
  }
  .shareTimeBlock3{
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 200*@toVw;
    height: 200*@toVw;
    text-align: center;
    line-height: 200*@toVw;
    img{
      width:60*@toVw;
      vertical-align: middle;
    }
  }
</style>