<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:'',
        count:0
      }
    },
    created(){
    },
    mounted(){
    },
    methods:{
      initPage(){
        console.log(this.day)
        this.imgList = []
         let num = 999
          let str=this.count.toString();
          // str = str.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.count}.jpg`,is_rand : 0,is_number:1}).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) {
                      //请求成功，处理响应数据
                      console.log(xhr.response)
                      console.log(that.count,num)
                      // debugger
                      if(that.count<num){
                        that.count++
                        that.initPage()
                      }
                      // debugger
                      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>