<template>
  <div id="tool">
    <div id="posterCon">
      <div id="posterBox">
        <img :src="templateUrl">
        <div id="posterBoxText">
          <p>{{posterText2}}</p>
          <p>{{posterText1}}</p>
        </div>
        <div id="addpicBox">
          <img @click="selectPic" src="../assets/addpic.png">
          <img :src="uploadPic" v-show="false">
        </div>
        <div id="posterBom">
          <div id="posterTime">
            <div :style="{background: backgroundColor}">
              <input type="tel" @blur="inputBlur" v-model="currentDay" placeholder="请输入" maxlength="2">
              <span>/{{days}}</span>
            </div>
            <p :style="{color: backgroundColor}">“让护眼，像刷牙一样成为习惯”</p>
          </div>
          <div id="posterQRcode">
            <div :style="{background: backgroundColor}">
              <img :src="qrcodeUrl">
            </div>
            <p>扫码参与</p>
            <p>护眼活动</p>
          </div>
        </div>
      </div>
      <img src="../assets/shadow.png">
    </div>
    <div id="createButton">
      <span @click="upload">上传截图</span>
      <span @click="create">生成海报</span>
    </div>
    <div id="posterOut">
      <img :src="templateUrl">
      <div id="posterOutText">
        <p>{{posterText2}}</p>
        <p>{{posterText1}}</p>
      </div>
      <div id="posterOutAddpicBox">
        <img :src="uploadPic">
      </div>
      <div id="posterOutBom">
        <div id="posterOutTime">
          <div :style="{background: backgroundColor}">
            <span>{{currentDay}}</span>/{{days}}
          </div>
          <p :style="{color: backgroundColor}">“让护眼，像刷牙一样成为习惯”</p>
        </div>
        <div id="posterOutQRcode">
          <div :style="{background: backgroundColor}">
            <img :src="qrcodeUrl">
          </div>
          <p>扫码参与</p>
          <p>护眼活动</p>
        </div>
      </div>
    </div>
    <div id="poster" v-show="showPoster">
      <img :src="posterUrl">
      <img id="posterClose" @click="close" src="../assets/icon_close.png">
    </div>
    <div class="applyDialog" v-show="applyDialogShow">
      <div class="applyDialogCon">
        <p>您还未报名，报名后可用。</p>
        <div>
          <span @click="applyDialogShow=false">我知道了</span>
          <span @click="toIndex">前往报名</span>
        </div>
      </div>
    </div>
    <div class="createDialog" v-show="createDialogShow">
      <div class="createDialogCon">
        <p>如何打卡：</p>
        <p>1.长按生成的海报保存</p>
        <p>2.将海报发朋友圈并截图</p>
        <p>3.回到活动工具，点击上传截图</p>
        <div>
          <span @click="createDialogShow=false">我知道了</span>
        </div>
      </div>
    </div>
    <navigation :is-x="isX" :apply-status="applyStatus" :tool-status="toolStatus" :mine-status="mineStatus"></navigation>
    <loading :loadingShow="loadingShow"></loading>
  </div>
</template>
<script>
import navigation from '../components/navigaton/navigation.vue'
import html2canvas from 'html2canvas'
import request from '../utils/request'
import loading from '../components/loading/loading.vue'
export default {
  data() {
    return{
      posterUrl: '',
      showPoster: false,
      isX: false,
      applyStatus: false,
      toolStatus: true,
      mineStatus: false,
      loadingShow: false,//加载

      posterText1: '明亮眼睛',
      posterText2: '光明的视界',
      qrcodeUrl:'',
      templateUrl:'',
      backgroundColor:'',
      days:'',
      currentDay: '',
      enrollStatus: '',
      uploadPic: '',// 上传的头像地址

      applyDialogShow: false,
      createDialogShow: false,

      appId: '', // 必填，公众号的唯一标识
      timestamp: '', // 必填，生成签名的时间戳
      nonceStr: '', // 必填，生成签名的随机串
      signature: '',// 必填，签名

    }
  },
  components: {
    navigation, loading
  },
  mounted() {
    // var u = navigator.userAgent, app = navigator.appVersion;
    // var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    // if (isiOS) {
    //   var w=window.screen.width * window.devicePixelRatio;
    //   var h=window.screen.height * window.devicePixelRatio;
    //   if(w==1125&&h==2436){
    //     this.isX = true;
    //   }
    // }
    let _url = document.location.href.split('#')[0]
    request({
      url: '/api/MarketingToolApi/Wechat/getSignPackage',
      method: 'post',
      data: {
        url : _url,
        token: localStorage.getItem("token")
      }
    }).then(response => {
      this.appId = response.data.appId
      this.nonceStr = response.data.nonceStr
      this.signature = response.data.signature
      this.timestamp = response.data.timestamp
    })

    this.loadingShow = true
    request({
      url: '/api/MarketingToolApi/Posters/template',
      method: 'post',
      data: {
        token: localStorage.getItem("token")
      }
    }).then(response => {
      this.loadingShow = false
      this.qrcodeUrl = response.data.qrcodeUrl
      this.posterText1 = response.data.note1
      this.posterText2 = response.data.note2
      this.templateUrl = response.data.templateUrl
      this.backgroundColor = response.data.backgroundColor
      this.days = response.data.days
      this.enrollStatus = response.data.enrollStatus
    })
  },
  methods: {
    create() {
      if(this.enrollStatus==1){//已报名
        html2canvas(document.getElementById('posterOut'), {
          useCORS: true,
          backgroundColor:null,
        }).then(canvas => {
          this.posterUrl = canvas.toDataURL('image/png')
          this.showPoster = true
          this.createDialogShow = true
        })
      }else{
        this.applyDialogShow = true
      }
    },
    upload() {
      if(this.enrollStatus==1){//已报名
      }else{
        this.applyDialogShow = true
      }
    },
    close() {
      this.showPoster = false
    },
    toIndex() {
      this.$router.push({name: 'index'})
    },
    selectPic() {
      if(this.enrollStatus==1){//已报名
        wx.config({
          debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: this.appId, // 必填，公众号的唯一标识
          timestamp: this.timestamp, // 必填，生成签名的时间戳
          nonceStr: this.nonceStr, // 必填，生成签名的随机串
          signature: this.signature,// 必填，签名
          jsApiList: ['chooseImage'] // 必填，需要使用的JS接口列表
        })
        wx.ready(function(){
          wx.checkJsApi({
            jsApiList: [
              'chooseImage',
            ],
            success: function (res) {
              // alert(JSON.stringify(res))
              // alert('微信分享初始化成功')
              wx.chooseImage({
                count: 1, // 默认9
                sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                success: function (res) {
                  console.log(res.localIds)
                  this.uploadPic = res.localIds // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                }
              });
            }
          })
        })
        wx.error(function(res){})
      }else{
        this.applyDialogShow = true
      }
    },
    inputBlur(){
      var u = navigator.userAgent, app = navigator.appVersion
      var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
	    if (isIOS) {
	    	this.blurAdjust()
      }
    },
    // 解决苹果不回弹页面
    blurAdjust(e){
      setTimeout(()=>{
        if(document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA'){
          return
        }
        let result = 'pc';
        if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOS
          result = 'ios'
        }else if(/(Android)/i.test(navigator.userAgent)) {  //判断Android
          result = 'android'
        }
        
        if( result = 'ios' ){
          document.getElementById('posterBox').scrollIntoViewIfNeeded(true);
        }
      },100)
    }

  }
}
</script>
<style lang="scss">
  #tool{
    height: 100%;
    padding-bottom: 55px;
  }
  #posterCon{
    padding: 10px 35.5px 0;
    >img{
      height: 30px;
      width: 290px;
      display: block;
      margin: 0 auto;
    }
  }
  #posterBox{
    background-color: #fff;
    width: 100%;
    height: 440px;
    position: relative;
    >img{
      height: 77.8%;
      width: 100%;
      display: block;
    }
    #addpicBox{
      width: 170px;
      height: 170px;
      position: absolute;
      top: 66px;
      left: 30px;
      img{
        width: 170px;
        height: 170px;
        position: absolute;
      }
      img:nth-child(1){
        z-index: 1;
      }
      img:nth-child(2){
        z-index: 0;
      }
    }
    #posterBoxText{
      font-size: 15px;
      color: #fff;
      position: absolute;
      right: 15px;
      top: 19px;
      display: flex;
      p{
        width: 15px;
        line-height: 15px;
        word-wrap: break-word;/*英文的时候需要加上这句，自动换行*/
        margin-right: 5px;
        text-align: center;
      }
      p:nth-child(1){
        margin-top: 17px;
      }
    }
    #posterBom{
      display: flex;
      justify-content: space-between;
      #posterTime{
        padding: 25px 0 0 33px;
        >div{
          width: 100%;
          height: 42px;
          line-height: 42px;
          color: #fff;
          font-size: 30px;
          input{
            color: #fff;
            font-size: 30px;
            font-weight: 600;
            background: none;
            border: none;
            width: 40px;
            height: 36px;
            line-height: 36px;
            text-align: right;
            padding: 0;
          }
          input::-webkit-input-placeholder {
            font-size: 12px;
            line-height: 36px;
            color: #fff;
          }
          input::-moz-input-placeholder {
            font-size: 12px;
            line-height: 36px;
            color: #fff;
          }
          input::-ms-input-placeholder {
            font-size: 12px;
            line-height: 36px;
            color: #fff;
          }
        }
        >p{
          font-size: 6px;
          margin-top: 4px;
        }
      }
      #posterQRcode{
        padding: 12px 50px 0 0;
        >div{
          padding: 3px;
          width: 49px;
          height: 49px;
          margin-bottom: 2px;
          img{
            display: block;
            width: 100%;
            height: 100%;
          }
        }
        p{
          font-size: 8px;
          color: #000000;
          font-weight: 500;
          text-align: center;
        }
      }
    }
  }

  #posterOut{
    background-color: #fff;
    width: 100%;
    height: 100%;
    position: fixed;
    top: -2000px;
    // top: 0;
    z-index: 999999;
    >img{
      height: 74%;
      width: 100%;
      display: block;
    }
    #posterOutAddpicBox{
      width: 225px;
      height: 225px;
      position: absolute;
      top: 80px;
      left: 30px;
      img{
        width: 100%;
        height: 100%;
      }
    }
    #posterOutText{
      font-size: 30px;
      color: #fff;
      position: absolute;
      right: 10px;
      top: 38px;
      display: flex;
      p{
        width: 30px;
        line-height: 30px;
        word-wrap: break-word;/*英文的时候需要加上这句，自动换行*/
        margin-right: 10px; 
        writing-mode: vertical-lr;/*从左向右 从右向左是 writing-mode: vertical-rl;*/  
        writing-mode: tb-lr;/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/ 
      }
      p:nth-child(1){
        margin-top: 34px;
      }
    }
    #posterOutBom{
      display: flex;
      justify-content: space-between;
      #posterOutTime{
        padding: 25px 0 0 33px;
        >div{
          width: 168px;
          height: 84px;
          line-height: 84px;
          text-align: center;
          color: #fff;
          font-size: 60px;
          span{
            font-weight: 600;
          }
        }
        >p{
          font-size: 12px;
          margin-top: 8px;
        }
      }
      #posterOutQRcode{
        padding: 8px 31px 0 0;
        >div{
          padding: 6px;
          width: 98px;
          height: 98px;
          margin-bottom: 4px;
          img{
            display: block;
            width: 100%;
            height: 100%;
          }
        }
        p{
          font-size: 16px;
          color: #000000;
          font-weight: 500;
          text-align: center;
          line-height: 17px;
        }
      }
    }
  }

  #createButton{
    padding: 0 31px;
    display: flex;
    justify-content: space-between;
  }
  #createButton span{
    display: inline-block;
    height: 38px;
    line-height: 38px;
    width: 149px;
    text-align: center;
    border-radius: 19px;
    font-size: 18px;
    color: #FFFFFF;
    background-color: #44D7B6;
  }


  #poster{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    img{
      width: 100%;
      height: 100%;
    }
    #posterClose{
      width: 37px;
      height: 37px;
      position: absolute;
      top: 20px;
      right: 20px;
    }
  }


.applyDialog{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100000;
  background-color: rgba( 0, 0, 0,0.6);
  .applyDialogCon{
    background: #fff;
    width: 240px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -120px;
    margin-top: -60px;
    border-radius: 5px;
    text-align: center;
    padding: 30px 0 17px;
    font-size: 14px;
    color: #282B2F;
    span{
      display: inline-block;
      width: 100px;
      height: 28px;
      line-height: 28px;
      background: #F9BE3C;
      border-radius: 14px;
      font-size: 14px;
      color: #FFFFFF;
      margin-top: 30px;
    }
    span:nth-child(2){
      margin-left: 15px;
    }
  }
}

.createDialog{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100000;
  background-color: rgba( 0, 0, 0,0.6);
  .createDialogCon{
    background: #fff;
    width: 240px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -120px;
    margin-top: -120px;
    border-radius: 5px;
    text-align: center;
    padding: 30px 20px 17px;
    font-size: 14px;
    color: #282B2F;
    p{
      text-align: left
    }
    p:nth-child(1){
      margin-bottom: 10px;
    }
    span{
      display: inline-block;
      width: 100px;
      height: 28px;
      line-height: 28px;
      background: #F9BE3C;
      border-radius: 14px;
      font-size: 14px;
      color: #FFFFFF;
      margin-top: 30px;
    }
    span:nth-child(2){
      margin-left: 15px;
    }
  }
}
</style>