<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"  class="text" id="text" ref="textareaDiv">

          </div>
          <div class="btn-block">
            <input type="file" accept="image/*" class="input"/>
            <img :src="imgUrl.imgIcon" />
          </div>
        </div>
        <div class="text-block">
          解释说明：
          <div class="text-content">
            各位爸爸妈妈，记得在每日完成学习后记录宝宝一天的学习过程哦！养成良好的学习习惯也是很重要的一环，记录并分享后更可以获得
            <span style="color: #333">唱学加油包</span>哦！
          </div>
        </div>
        <img :src="imgUrl.shareIcon" class="share-icon"/>
      </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>
</template>

<script>
  import {show1,share} from "../../util/imgUrl";
  import { Toast , Indicator } from 'mint-ui';
  export default {
    name: "show1",
    props:[
      'nowLesson',
    ],
    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(){
    },
    methods:{
      subLog(){
        this.goNext(this.nowLesson.content.nextIndex,true);
      },
      goNext(i,next){
        this.$emit('goNext',{i:i,next:!!next})
      },
    }
  }
</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>