<template>
  <div>
    <div class="show1" :style="{backgroundImage:`url(${imgUrl.bg})`}" v-if="!showType">
      <img :src="imgUrl.riji" class="riji"/>
      <img :src="imgUrl.yeziyou" class="yeziyou"/>
      <img :src="imgUrl.yezizuo" class="yezizuo"/>
      <img :src="imgUrl.zhaopianqiang" class="zhaopianqiang"/>
      <div class="bg-block" :style="{backgroundImage:`url(${imgUrl.contentBg})`}">
        <div class="title-block">
          <img :src="imgUrl.title"/>
        </div>
        <div class="textarea">
          <div :contenteditable="true" v-html="showData" class="text" id="text" ref="textareaDiv">

          </div>
          <div class="btn-block">
            <input type="file" accept="image/*" @change="uploadImg" class="input"/>
            <img :src="imgUrl.imgIcon" @click="chooseImage"/>
          </div>
        </div>
        <div class="text-block">
          解释说明：
          <div class="text-content">
            各位爸爸妈妈，记得在每日完成学习后记录宝宝一天的学习过程哦！养成良好的学习习惯也是很重要的一环，快来记录并分享宝宝的学习情况吧！
          </div>
        </div>
        <img :src="imgUrl.shareIcon" class="share-icon" @click="toShare()"/>
      </div>
      <div class="bottom-block">
        <img :src="imgUrl.backBtn" @click="goNext(nowLesson.content.lastIndex)"/>
        <img :src="imgUrl.jiayoubao" @click="subLog(nowLesson.content.nextIndex)"/>
      </div>
    </div>
    <div class="share" :style="{backgroundImage:`url(${imgUrl2.background})`}" v-show="showType">
      <img :src="imgUrl.backShow" class="back-show" @click="showType = false"/>
      <img :src="imgUrl2.tips" class="tips"/>
      <img :src="dataURL" class="contentImg" v-if="dataURL">
      <div class="text-tips">长按图片保存哦！</div>
      <div class="content test-block" :style="{backgroundImage:`url(${imgUrl2.list[num]})`}" v-if="!dataURL && user" ref="imageWrapper">
        <img :src="this.posterAvatar" class="head">
        <div id="qrcode"></div>
        <div class="name">{{user.nickname}}</div>
        <div class="day">{{watchLog.total_day}}</div>
        <div class="num">{{pNum}}</div>
        <div class="time">{{watchLog.total_time}}</div>
      </div>
    </div>
  </div>
</template>

<script>
  import {show1,share} from "../../util/imgUrl";
  import  QRCode from 'qrcodejs2'
  import {uploadFileApi,getUserWatchApi,getUserDetailApi,getwechatParam,getNewApi} from "../../service/api";
  import { Toast , Indicator } from 'mint-ui';
  import html2canvas from 'html2canvas'
  export default {
    name: "show1",
    props:[
      'nowLesson',
      'showData',
      'lessonTitle',
      'isShare'
    ],
    data(){
      function randomNum(min,max){
        switch(arguments.length){
          case 1:
            return Math.floor(Math.random()*minNum+1);
            break;
          case 2:
            return Math.floor(Math.random()*(max-min+1)+min);
            break;
          default:
            return 0;
            break;
        }
      }
      return{
        imgUrl:show1,
        imgUrl2:share,
        showType:false,
        dataURL: '',
        posterAvatar:'',
        hasToImg:false,
        num:randomNum(0,4),
        pNum:randomNum(80,95),
        watchLog:null,
        user:null,
        newUrl:null
      }
    },
    mounted(){
      this.initPage();
      window._hmt.push(['_trackPageview', '/#/PV/show']);
    },
    methods:{
      toImage() {
        html2canvas(this.$refs.imageWrapper,{
          timeout: 300,
          useCORS:true,
          allowTaint: false,
          logging:true,
          letterRendering: true,
          backgroundColor: null
        }).then((canvas) => {
          let dataURL = canvas.toDataURL("image/png");
          Indicator.close();
          this.dataURL = dataURL;
        }).catch(res=>{alert(res);console.log()});
      },
      toDataURLBase64 (src, callback) {
        let xhttp = new XMLHttpRequest();
        xhttp.onload = function () {
          let fileReader = new FileReader();
          fileReader.onloadend = function () {
            callback(fileReader.result)
          };
          fileReader.readAsDataURL(xhttp.response)
        };
        xhttp.responseType = 'blob';
        xhttp.open('GET', src, true);
        xhttp.send()
      },
      initPage(){
        getUserWatchApi().then((res)=>{
          res.total_time = (res.total_time/60).toFixed(0)*1+1;
          this.watchLog = res
        });
        getwechatParam({
          api_list:'chooseImage,previewImage,uploadImage,downloadImage,getLocalImgData,onMenuShareAppMessage,onMenuShareTimeline',
          url:window.location.href.split('#')[0]
        }).then(res=>{
          wx.config({
            debug: false,
            appId: res.appId,
            timestamp: parseInt(res.timestamp),
            nonceStr: res.nonceStr,
            signature: res.signature,
            jsApiList: res.jsApiList
          });
        });
        getNewApi().then(res=>{
          this.newUrl = res[0].desc
          console.log(this.newUrl)
        })
      },
      qrcode(){
        let that = this;
        new QRCode('qrcode', {
          width: 150,
          height: 150, // 高度
          text: that.newUrl, // 二维码内容
          image: ''
        });
      },
      toShare(){
        this.showType = true;
        if(!this.hasToImg){
          this.hasToImg = true;
          Indicator.open('生成图片中...');
          getUserDetailApi().then(res=>{
            this.user = res;
            let _this = this;
            this.toDataURLBase64(this.user.avatar.replace('http://','https://'), function (avatarUrl) {
              _this.posterAvatar = avatarUrl;
            });
            getUserWatchApi().then(res=>{
              let that = this;
              this.showObj = res;
              this.showFinish = true;
              this.qrcode();
              that.$nextTick(()=>{
                setTimeout(()=>{
                  that.toImage()
                },300)
              });
              wx.onMenuShareAppMessage({
                title: ' 唱唱启蒙英语', // 分享标题
                desc: '每天10分钟，英语开口唱【SingsingEnglish】',// 分享描述
                link: that.newUrl, // 分享链接
                imgUrl:  'https://cdn.singsingenglish.com/new-sing/20181018/ec3a7735c11388947c106b0b507e2aaae213ed561539843913993.jpg', // 分享图标
                success: function() {
                  Toast('分享成功');
                  that.goNext(that.nowLesson.content.nextIndex,true);
                  that.showFinish = false
                },
              });
              wx.onMenuShareTimeline({
                title: `我家宝宝正在【唱唱启蒙英语】学唱童谣，已累计学习 ${that.watchLog.total_time} 分钟`, // 分享标题
                desc: `我家宝宝正在【唱唱启蒙英语】学唱童谣，已累计学习 ${that.watchLog.total_time} 分钟`,// 分享描述
                link: that.newUrl, // 分享链接
                imgUrl:  'https://cdn.singsingenglish.com/new-sing/20181018/70bd676f32d9510529c83beb45976e705bfce19a1539843913384.jpg', // 分享图标
                success: function() {
                  Toast('分享成功');
                  that.goNext(that.nowLesson.content.nextIndex,true);
                  that.showFinish = false
                },
              });
            })
          });
        }
      },
      subLog(){
        this.$emit('subLog',this.$refs.textareaDiv.innerHTML);
        this.goNext(this.nowLesson.content.nextIndex,true);
      },
      uploadImg(e){
        Indicator.open('图片上传中');
        uploadFileApi({file:e.target.files[0],type:'local'}).then(res=>{
          this.$refs.textareaDiv.innerHTML += `<img src="${process.env.IMAGE_URL_HEAD}${res.url}" style="max-width: 200px">`;
          Indicator.close();
        })
      },
      goNext(i,next){
        this.$emit('goNext',{i:i,next:!!next})
      },
      // 选择图片
      chooseImage(){
        wx.chooseImage({
          count: 1, // 默认9
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
          success: function (res) {
            let localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
            console.log(res)

          }
        });
      },
      // 选择音频
      chooseRadio(){
        wx.chooseImage({
          count: 1, // 默认9
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
          success: function (res) {
            // var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
          }
        });
      },
    }
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
  .show1{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    overflow-x: hidden;
    width: 100%;
    background-size: 100% 100%;
    &>img{
      position: absolute;
      z-index: 2;
      &.haiou{
        top: 390 * @toVw;
        left: 70/ 2 * @toVw;
        width: 81 * @toVw;
      }
      &.riji{
        width:78*@toVw ;
        top: 25 * @toVw;
        left: 0;
      }
      &.yeziyou{
        bottom: 0;
        right: 0;
        width: 258/2*@toVw;
      }
      &.yezizuo{
        width: 238 / 2 *@toVw;
        bottom: 0;
        left: 0;
      }
      &.zhaopianqiang{
        top: 400 * @toVw;
        left: 80/ 2 * @toVw;
        width: 234 / 2  * @toVw;
      }
    }
    .bg-block{
      position: relative;
      width: 344 * @toVw;
      background-size: 100%;
      height: 552 * @toVw;
      .zhuangshi{
        bottom: 0;
      }
      .share-icon{
        width: 90* @toVw;
        position: absolute;
        bottom: 30 * @toVw;
        left: 100 * @toVw;
      }
    }
    .title-block{
      padding-top: 50 * @toVw;
      text-align: center;
      img{
        width:  420 / 2 * @toVw;
      }
    }
    .textarea{
      background: #FDFDFD;
      height: 352/ 2 * @toVw;
      width: 626/ 2 * @toVw;
      margin:10*@toVw auto 0 auto;
      box-shadow: inset 1/ 2 * @toVw 1/ 2 * @toVw 3/ 2 * @toVw 1/ 2 * @toVw rgba(142,142,142,0.50);
      border-radius: 8/ 2 * @toVw;
      position: relative;
      .text{
        position: absolute;
        top: 5px;
        left: 5px;
        overflow: auto;
        outline: none;
        bottom: 5px;
        right: 5px;
      }
      .btn-block{
        position: absolute;
        bottom: 10/ 2 * @toVw;
        right: 10/ 2 * @toVw;
        .input{
          opacity: 0;
          width: 24 * @toVw;
          position: absolute;
        }
        img{
          width: 32 * @toVw;
          margin-right: 10/ 2 * @toVw;
        }
      }
    }
    .text-block{
      width: 600/ 2 * @toVw;
      margin: auto;
      padding-top: 20/ 2 * @toVw;
      text-align: left;
      font-family: PingFang-SC-Medium;
      font-size: 28/ 2 * @toVw;
      color: #666666;
      line-height: 40/ 2 * @toVw;
      .text-content{
        font-family: PingFang-SC-Regular;
        font-size: 24/ 2 * @toVw;
        color: #999999;
      }
    }
    .sub-block{
      position: absolute;
      width: 100%;
      text-align: center;
      bottom: 160/ 2 * @toVw;
      img{
        width: 88 * @toVw
      }
    }
    .bottom-block{
      width: 100%;
      text-align: center;
      position: fixed;
      z-index: 5;
      bottom: 10 * @toVw;
      img{
        width: 127 * @toVw;
        &:first-child{
          margin-right: 15 * @toVw;
        }
      }
    }
  }
  .share{
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    left: 0;
    bottom:0;
    right: 0;
    .tips{
      position: absolute;
      top: 8 * @toVw;
      height: 66 * @toVw;
      z-index: 0;
      right: 31 * @toVw;
    }
    .back-show{
      width: 30 * @toVw;
      position: absolute;
      top: 15 * @toVw;
      left: 30 * @toVw;
    }
    .text-tips{
      position: absolute;
      color: white;
      top: 550 * @toVw;
      font-size: 12px;
      z-index: 5;
      width: 100%;
      text-align: center;
    }
    img.content{
      z-index: 3;
    }
    .contentImg{
      width: 313 * @toVw;
      height: 524 * @toVw;
      position: absolute;
      top:53 * @toVw;
      left: 50%;
      z-index: 3;
      margin-left: -156 * @toVw;
    }
    .content{
      transform-origin:0 0;
      width: 626 * @toVw;
      height: 1048 * @toVw;
      background-size: 100% 100%;
      position: absolute;
      z-index: 2;
      top:53 * @toVw;
      left: 50%;
      margin-left: -156 * @toVw;
      .head{
        border-radius: 1000px;
        width: 64 * @toVw;
        position: absolute;
        top: 257 *2 * @toVw;
        left: 40 *2  * @toVw;
      }
      #qrcode{
        position: absolute;
        bottom: 90 * @toVw;
        right: 80 * @toVw;
      }
      .name{
        width:140px;
        height:40px;
        font-size:28px;
        font-family:PingFang-SC-Bold;
        font-weight:bold;
        color:rgba(51,51,51,1);
        line-height:40px;
        position: absolute;
        top: 257 * 2 * @toVw;
        left: 84 * 2 * @toVw;
      }
      .day{
        font-size:40px;
        font-family:PingFang-SC-Medium;
        font-weight:500;
        color:rgba(51,51,51,1);
        line-height:56px;
        position: absolute;
        top: 334*2 * @toVw;
        right:243*2 * @toVw;
      }
      .num{
        font-size:40px;
        font-family:PingFang-SC-Medium;
        font-weight:500;
        color:rgba(51,51,51,1);
        line-height:56px;
        position: absolute;
        top: 334 * 2 * @toVw;
        right: 167 * 2 * @toVw;
      }
      .time{
        font-size:40px;
        font-family:PingFang-SC-Medium;
        font-weight:500;
        color:rgba(51,51,51,1);
        line-height:56px;
        position: absolute;
        top: 334 * 2 * @toVw;
        right: 63 * 2 * @toVw;
      }
    }
  }
</style>
<style>
  .mint-indicator-wrapper{
    z-index: 10 !important;
  }
</style>
