<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="!showData" v-html="showData" class="text" id="text" ref="textareaDiv">

        </div>
        <div class="btn-block" v-if="!
        showData">
          <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">
          各位爸爸妈妈，记得在每日完成学习后记录宝宝一天的学习过程哦！养成良好的学习习惯也是很重要的一环，记录并分享后更可以获得
          <span style="color: #333">唱学加油包</span>哦！
        </div>
      </div>
    </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="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="user.avatar" class="head">
      <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 {uploadFileApi,getUserWatchApi,getUserDetailApi,getwechatParam,subUserLessonApi} from "../../service/api";
  import { Toast , Indicator } from 'mint-ui';
  import html2canvas from 'html2canvas'
  export default {
    name: "show1",
    props:[
      'nowLesson',
      'showData',
      '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: '',
        num:randomNum(0,4),
        pNum:randomNum(80,95),
        watchLog:null,
        user:null
      }
    },
    mounted(){
      this.initPage()
    },
    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);
          this.watchLog = res
        });
        getUserDetailApi().then(res=>{
          this.user = res;
          let _this = this;
          this.toDataURLBase64(this.user.avatar, function (avatarUrl) {
            _this.posterAvatar = avatarUrl;
          })
        });
        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
          });
        });
      },
      subLog(){
        if(!this.isShare){
          this.showType = true;
          this.$emit('subLog',this.$refs.textareaDiv.innerHTML);
          Indicator.open('生成图片中...');
          getUserWatchApi().then(res=>{
            let that = this;
            this.showObj = res;
            this.showFinish = true;
            that.$nextTick(()=>{
              setTimeout(()=>{
                that.toImage()
              },300)
            });
            wx.onMenuShareAppMessage({
              title: '打卡', // 分享标题
              desc: '打卡',// 分享描述
              link: process.env.BUY_URL + 'shopId=8', // 分享链接
              imgUrl:  'https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png', // 分享图标
              success: function() {
                Toast('分享成功');
                that.goNext(that.nowLesson.content.nextIndex,true);
                that.showFinish = false
              },
            });
            wx.onMenuShareTimeline({
              title: '打卡', // 分享标题
              desc: '打卡',// 分享描述
              link: process.env.BUY_URL + 'shopId=8', // 分享链接
              imgUrl:  'https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png', // 分享图标
              success: function() {
                Toast('分享成功');
                that.goNext(that.nowLesson.content.nextIndex,true);
                that.showFinish = false
              },
            });
          })
        }else{
          this.goNext(this.nowLesson.content.nextIndex);
        }
      },
      uploadImg(e){
        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">`;
        })
      },
      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;
      }
    }
    .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;
    }
    .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;
      }
      .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>
