<template>
  <div id="detailBox">
    <div class="detailCon">
      <img class="detailConImg" v-if="thumb" :src="thumb">
      <div class="detailConTitle"><span>{{title}}</span><img @click="share" src="../assets/icon_share.png"></div>
      <div class="detailContDes">
        <div>
          <img src="../assets/icon_enrollment.png">
          <span>活动时间：{{beginTime}} ~ {{endTime}}</span>
        </div>
        <div v-if="status==1">活动已开始</div>
        <div v-else-if="status==2">活动已结束</div>
        <div v-else-if="status==3">报名截止还剩：<span v-if="diffDays<1">不足1天</span><span v-else>{{diffDays}}天</span></div>
      </div>
      <div class="detailContDes">
        <div>
          <img src="../assets/icon_activitytime.png">
          <span>报名人数：{{participants}}/{{peoples}}</span>
        </div>
      </div>
    </div>
    <div id="introduce">
      <audio id="music" loop="loop" :src="musicUrl" autoplay v-show="false"></audio>
      <img id="iconMusic" class="iconMusicPlay" v-show="isPlaying" @click="musicPause" src="../assets/icon_music.png">
      <img id="iconMusic" v-show="!isPlaying" @click="musicPlay" src="../assets/icon_silent.png">
      <img :src="detailImgUrl">
    </div>
    <div id="applyButtonBox">
      <span class="noApplyButton" v-if="status == 5">已报名</span>
      <span @click="toApply" class="canApplyButton" v-else>立即报名</span>
    </div>
    <div class="tipDialog" v-show="tipDialogShow">
      <div class="tipDialogCon">
        <p>{{tipDialogText1}}</p>
        <p>{{tipDialogText2}}</p>
        <span @click="tipDialogShow=false">{{tipDialogBtn}}</span>
      </div>
    </div>
    <div id="shareWrap" v-show="shareWrapShow" @click="shareWrapShow=false">
      <span>点击此处分享</span>
      <img src="../assets/icon_arrow.png">
    </div>
    <loading :loadingShow="loadingShow"></loading>
  </div>
</template>
<script>
import request from '../utils/request'
import loading from '../components/loading/loading.vue'
export default {
  data() {
    return{
      loadingShow: false,//加载
      title: '',
      thumb: '',
      beginTime: '',
      endTime: '',
      status: '',
      diffDays: '',
      participants: '',
      peoples: '',
      detailImgUrl: '',
      qualifications: '',
      musicUrl: '',
      unenrollDesc: '',

      isPlaying: true,

      tipDialogShow: false,//弹窗
      tipDialogBtn: '',
      tipDialogText1: '',
      tipDialogText2: '',

      shareWrapShow: false,
    }
  },
  components: {
    loading
  },
  mounted() {
    this.loadingShow = true
    request({
      url: '/api/MarketingToolApi/Activities/detail',
      method: 'post',
      data: {
        activityId: this.$route.params.id,
        token: localStorage.getItem("token")
      }
    }).then(response => {
      this.loadingShow = false
      this.title = response.data.title
      this.thumb = response.data.thumb
      this.beginTime = response.data.beginTime
      this.endTime = response.data.endTime
      this.status = response.data.status
      this.diffDays = response.data.diffDays
      this.participants = response.data.participants
      this.peoples = response.data.peoples
      this.detailImgUrl = response.data.detailImgUrl
      this.qualifications = response.data.qualifications
      this.musicUrl = response.data.musicUrl
      this.unenrollDesc = response.data.unenrollDesc

      // var music = document.getElementById('music');
      // var state = 0;
      // document.addEventListener('touchstart', function(){
      //   if(state==0){
      //     music.play();
      //     state=1;
      //   }
      // }, false);

      // document.addEventListener("WeixinJSBridgeReady", function () {
      //   music.play();
      // }, false)
      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

        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: this.appId, // 必填，公众号的唯一标识
          timestamp: this.timestamp, // 必填，生成签名的时间戳
          nonceStr: this.nonceStr, // 必填，生成签名的随机串
          signature: this.signature,// 必填，签名
          jsApiList: ['updateAppMessageShareData','updateTimelineShareData','hideMenuItems'] // 必填，需要使用的JS接口列表
        })
        let me = this
        wx.ready(function(){
          document.getElementById('music').play();
          // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
          wx.updateAppMessageShareData({
            title: me.title, // 分享标题
            desc: '', // 分享描述
            link: _url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: me.thumb, // 分享图标
            success: function () {
              // 设置成功
            }
          })
          // 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容
          wx.updateTimelineShareData({
            title: me.title, // 分享标题
            link: _url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: me.thumb, // 分享图标
            success: function () {
              // 设置成功
            }
          })

          wx.hideMenuItems({
            menuList: ["menuItem:share:qq","menuItem:share:weiboApp","menuItem:share:facebook","menuItem:share:QZone","menuItem:copyUrl","menuItem:openWithQQBrowser","menuItem:openWithSafari","menuItem:share:email","menuItem:share:brand"] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮
          });
        })
        wx.error(function(res){})
      })

    })
    
  },
  methods: {
    toApply(){
      if(this.status == 4){//4：活动报名人数已满
        this.tipDialogText1='太火爆了'
        this.tipDialogText2='报名活动的人数已满'
        this.tipDialogBtn='关闭'
        this.tipDialogShow = true
      }else if(this.status == 1){//1：活动已经开始
        this.tipDialogText1='活动已开始'
        this.tipDialogText2='无法报名'
        this.tipDialogBtn='关闭'
        this.tipDialogShow = true
      }else if(this.status == 2){//2：活动已结束；
        this.tipDialogText1='抱歉'
        this.tipDialogText2='本次活动已结束'
        this.tipDialogBtn='关闭'
        this.tipDialogShow = true
      }else{
        if(this.qualifications==1){//允许报名
          this.$router.push({name: 'applyInfo',params:{id: this.$route.params.id}})
        }else{
          // this.tipDialogText1='完成'+this.title+'后'
          // this.tipDialogText2='才能报名本活动'
          // this.tipDialogBtn='知道了'
          // this.tipDialogShow = true

          this.tipDialogText1= this.unenrollDesc
          // this.tipDialogText2='不允许报名'
          this.tipDialogBtn='知道了'
          this.tipDialogShow = true
        }
      }
    },
    share() {
      this.shareWrapShow = true
    },
    musicPause() {
      this.isPlaying = false
      document.querySelector('#music').pause();
    },
    musicPlay() {
      this.isPlaying = true
      document.querySelector('#music').play();
    }
  }
}
</script>
<style lang="scss">
#detailBox{
  height: 100%;
  padding-bottom: 70px;
}
.detailCon{
  background-color: #fff;
  padding: 10px;
  margin-bottom: 10px;
}
.detailConImg{
  display: block;
  width: 100%;
  height: 200px;
}
.detailConTitle{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 19px;
  color: #282B2F;
  padding: 10px 0 5px;
  img{
    width: 21px;
    height: 21px;
  }
}
.detailContDes{
  font-size: 12px;
  color: #70767A;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  div{
    display: flex;
    align-items: center;
    >img{
      width: 14px;
      height: 14px;
      margin-right: 5px;
    }
  }
}
#introduce{
  background-color: #fff;
  padding: 10px 10px 75px;
  position: relative;
  >img{
    width: 100%;
  }
  #iconMusic{
    position: absolute;
    right: 10px;
    top: 10px;
    width: 32px;
    height: 32px;
  }
  @keyframes circle { 100% { transform:rotate(360deg); transform-origin: 50% 50%; } }
  @keyframes circle { 100% { transform:rotate(360deg); transform-origin: 50% 50%; } }
  @-moz-keyframes circle { 100% { -moz-transform:rotate(360deg); -moz-transform-origin: 50% 50%; } }
  @-ms-keyframes circle { 100% { -ms-transform:rotate(360deg); -ms-transform-origin: 50% 50%; } }
  @-webkit-keyframes circle { 100% { -webkit-transform:rotate(360deg); -webkit-transform-origin: 50% 50%; } }
  @-o-keyframes circle { 100% { -o-transform:rotate(360deg); -o-transform-origin: 50% 50%; } }
  .iconMusicPlay{
    animation:circle 2s linear infinite;
    -moz-animation:circle 2s linear infinite;
    -ms-animation:circle 2s linear infinite;
    -webkit-animation:circle 2s linear infinite;
    -o-animation:circle 2s linear infinite;
  }
}
#applyButtonBox{
  background-color: #fff;
  padding: 11px 0;
  text-align: center;
  position: fixed;
  bottom: 0;
  width: 100%;
  span{
    display: inline-block;
    text-align: center;
    font-size: 18px;
    color: #FFFFFF;
    height: 38px;
    width: 250px;
    line-height: 38px;
    border-radius: 19px;
  }
  .canApplyButton{
    background-color: #F7B500;
  }
  .noApplyButton{
    background-color: #ccc;
  }
}

#shareWrap{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 16px;
  text-align: right;
  span{
    margin-top: 30px;
    display: inline-block;
  }
  img{
    width: 35px;
    margin: 0 15px 0 10px;
  }
}
</style>