<template>
  <div>
    <div id="gameDiv">
      <canvas id="GameCanvas" width="750" height="100vh"></canvas>
    </div>
    <div class="bizDiv" v-if="ifShowPop">

      <div :class="gamePop">
        <!--popStatus 0介绍 1成功 没有游戏机会 2成功还有机会  3失败没有机会 4失败还有机会 -->
        <div :class="popTitleClass">{{ popTitle }}</div>
        <div :class="introduce" v-if="popStatus==0">
          <div v-if="activityType==10082">
            <div class="intContent">①得分超<span>{{ ruleScore }}</span>分即可抽奖</div>
            <div class="intContent">②点击屏幕控制角色跳动，躲避出现的障碍物</div>
            <img class="clickIcon" :src="clickIcon">
            <div class="intContent">③躲避障碍物越多，分数越高</div>
            <div class="intContent">④小鸟碰到障碍物则游戏结束</div>
          </div>
          <div v-else-if="activityType==10084">
            <div class="intContent">①点击或滑动邻近两个元素交换位置</div>
            <img class="contectImgUrl" :src="contectImgUrl1">
            <div class="intContent">②出现横向或纵向连续3个相同元素则触发消除</div>
            <img class="contectImgUrl" :src="contectImgUrl2">
            <div class="intContent">③每次限制交换步数</div>
            <div class="intContent">④步数用完触发结算</div>
          </div>
          <div v-else-if="activityType==10086">
            <div class="intContent">①需要按住屏幕的小人进行蓄力，然后松手跳跃。</div>
            <img class="contectImgUrl" :src="contectImgUrl3">
            <div class="intContent">②每次从当前方块跳到下一个方块，跳至方块中心有额外1分奖励</div>
            <div class="intContent">③只能跳一格，不能跳两格，请合理掌握力度</div>
            <div class="intContent">④如果没有跳到下一个方块上则游戏结束</div>
          </div>
          <div v-else-if="activityType==10089">
            <img class="contectImgUrl89" :src="contectImgUrl4">
          </div>
          <div v-else-if="activityType==10091">
            <img class="contectImgUrl89" :src="contectImgUrl5">
          </div>
          <div v-else-if="activityType==10094">
            <img class="contectImgUrl94" :src="contectImgUrl6">
          </div>
          <div v-else-if="activityType==10095">
            <img class="contectImgUrl95" :src="contectImgUrl7">
          </div>
        </div>

        <div :class="gameResult" v-else>
          <!-- 成功 -->
          <img class="trophyImg" :src="trophy1" v-if="popStatus==1||popStatus==2">
          <!-- 失败 -->
          <img class="trophyImg" :src="trophy2" v-else>
          <div class="resultText1">当前成绩</div>
          <div class="resultText2 marB20" v-if="popStatus==1||popStatus==2">{{ score }}分</div>
          <div class="resultText2" v-else>{{ score }}分</div>

          <div :class="resultText3" v-if="popStatus==3||popStatus==4">达到<span>{{ ruleScore }}</span>分才可获得抽奖机会哦~</div>

        </div>

        <div :class="popBtnDiv">
          <!-- 红 我知道了/再次挑战 -->
          <div :class="popBtn1" v-if="popStatus==0||popStatus==2" @click="btnClick1">{{ popBtn1Text }}</div>
          <!--红 获取更多游戏机会 -->
          <div class="popBtn3" v-if="popStatus==1||popStatus==4" @click="btnClick1">{{ popBtn1Text }}</div>
          <!--黄 popStatus=0 不再提醒 popStatus=1 点击抽奖 popStatus=4 再次挑战 -->
          <div :class="popBtn2" @click="btnClick2" v-if="popStatus!=3">{{ popBtn2Text }}</div>
          <!--popStatus=3 获取更多机会 -->
          <div class="popBtn4" v-if="popStatus==3" @click="btnClick1">{{ popBtn1Text }}</div>
        </div>

      </div>

    </div>

  </div>

</template>
<script>
import {Toast} from "vant";
import apis1 from "../util/apis1";

let {gameInit, gameStart, gameEnd} = apis1;
import JSEncrypt from 'jsencrypt'

export default {
  name: "tempIndex",
  data() {
    return {
      gamePop: 'gamePop10082',
      popTitleClass: 'popTitle10082',
      introduce: 'introduce10082',
      gameResult: 'gameResult10082',
      resultText3: 'resultText3-10082',
      popBtnDiv: 'popBtnDiv10082',
      popBtn1: 'popBtn1Small',
      popBtn2: 'popBtn2Small',

      activityType: '',
      gameSources: '',
      ifShowPop: false,
      limitScore: 0,//门槛分数
      score: 0,//分数
      publicKey: '',//公钥
      jsonContent: '',

      count: '',//剩余次数
      resultJson: {
        id: '',
        score: ''
      },

      popStatus: 0,//0介绍 1成功 没有游戏机会 2成功还有机会  3失败没有机会 4失败还有机会
      ruleScore: '',
      actUrl: '',
      popTitle: '',
      popBtn1Text: '',
      popBtn2Text: '',

      popTitleList: ['游戏介绍', '挑战成功', '挑战失败'],
      popBtn1TextList: ['我知道了', '获取更多游戏机会', '再次挑战', '获取更多机会'],
      popBtn2TextList: ['不再提醒', '点击抽奖', ''],

      clickIcon: '//img10.360buyimg.com/imgzone/jfs/t1/143093/8/28977/4331/638070ffE7b991ec1/1c1f837b32f5e5c1.png',
      trophy1: '//img10.360buyimg.com/imgzone/jfs/t1/26081/33/20036/1735/63808f1dEd84bbe5d/0dda349f76b7d1f5.png',//成功奖杯
      trophy2: '//img10.360buyimg.com/imgzone/jfs/t1/96745/28/34944/1697/63808f1dEce2577ff/13f6ec048e490baa.png',//失败奖杯
      contectImgUrl1: '//img10.360buyimg.com/imgzone/jfs/t1/218556/4/22208/34516/639c1227E90c0342c/dd914db4fad40a7f.png',
      contectImgUrl2: '//img10.360buyimg.com/imgzone/jfs/t1/195704/6/30716/43325/639c1227Ec42a9e6b/fae026e264b4b368.png',//消消乐内容
      contectImgUrl3: '//img10.360buyimg.com/imgzone/jfs/t1/168048/23/32953/18656/63ad6014Fb8b92087/4baf2a42befcdc2e.png',//跳一跳
      contectImgUrl4: '//img10.360buyimg.com/imgzone/jfs/t1/182447/6/31655/143229/63e0c561Fb7d71fa5/739c6d6cfa34d782.png',//2048
      contectImgUrl5: '//img10.360buyimg.com/imgzone/jfs/t1/125887/16/34441/33392/63e214a5Fac45228a/15bbcdb06bac4ade.png',//物理弹球
      contectImgUrl6: '//img10.360buyimg.com/imgzone/jfs/t1/173264/19/32036/61406/64001d5cF9498b513/6e245ef86bbcbb5b.png',//幸运大灌篮
      contectImgUrl7: '//img10.360buyimg.com/imgzone/jfs/t1/161725/27/35627/76465/64003e8bFab1b743f/edcbb02b11f78132.png',//城市跑酷

    }
  },

  async mounted() {
    this.activityType = sessionStorage.getItem('activityType');
    this.gameSources = decodeURIComponent(this.$route.query.gameSources)
    // this.limitScore = this.$route.query.score

    this.popTitle = this.popTitleList[0]
    this.popBtn1Text = this.popBtn1TextList[0]
    this.popBtn2Text = this.popBtn2TextList[0]

    if (!sessionStorage.getItem('FlappyBirdnoRemind')) {
      this.ifShowPop = true
    }

    Toast.loading({
      duration: 0,
      message: "加载中...",
      forbidClick: true
    });
    await this.loadScript(this.gameSources)

    await this.gameInit();

    await window.boot(this.jsonContent)

    //游戏资源加载完成
    Toast.clear();

    window.onGameStart = (callback => {
      this.gameStart(callback)
    })

    //游戏结束
    window.onGameOver = (score) => {
      this.resultJson.score = score.toString()
      this.gameEnd(JSON.stringify(this.resultJson))
      this.score = score;
    }

  },

  watch: {
    popStatus(value, oldValue) {
      switch (value) {
        case 0:
          break
        case 1:
          // 挑战成功
          this.popTitle = this.popTitleList[1]
          this.popBtn1Text = this.popBtn1TextList[1] // 获取更多游戏机会
          this.popBtn2Text = this.popBtn2TextList[1] // 点击抽奖
          break
        case 2:
          // 挑战成功
          this.popTitle = this.popTitleList[1]
          this.popBtn1Text = this.popBtn1TextList[2] // 再次挑战
          this.popBtn2Text = this.popBtn2TextList[1] // 点击抽奖
          break
        case 3:
          this.popTitle = this.popTitleList[2]
          this.popBtn1Text = this.popBtn1TextList[3]
          break
        case 4:
          this.popTitle = this.popTitleList[2]
          this.popBtn1Text = this.popBtn1TextList[1]
          this.popBtn2Text = this.popBtn1TextList[2]
          break
        default:
          break
      }
    },

    activityType: {
      handler(newVal, oldVal) {
        switch (newVal) {
          case '10082':
            this.gamePop = 'gamePop10082'
            this.popTitleClass = 'popTitle10082'
            this.introduce = 'introduce10082'
            this.gameResult = 'gameResult10082'
            this.resultText3 = 'resultText3-10082'
            this.popBtnDiv = 'popBtnDiv10082'
            break;
          case '10084':
          case '10086':
            this.gamePop = 'gamePop10084'
            this.popTitleClass = 'popTitle10084'
            this.introduce = 'introduce10084'
            this.gameResult = 'gameResult10084'
            this.resultText3 = 'resultText3-10084'
            this.popBtnDiv = 'popBtnDiv10084'
            break
          case '10089':
          case '10091':
          case '10094':
          case '10095':
            this.popTitleClass = 'popTitle10084'
            this.gameResult = 'gameResult10084'
            this.resultText3 = 'resultText3-10084'
            this.popBtnDiv = 'popBtnDiv10084'
            this.gamePop = 'gamePop10089'
            this.introduce = 'introduce10089'
            this.popBtn1 = 'popBtn1Big'
            this.popBtn2 = 'popBtn2Big'
            break;
        }
      },
      immediate: true,
      deep: true
    }

  },
  methods: {
    //左按钮
    btnClick1() {
      this.ifShowPop = false
      if (this.popStatus == 1 || this.popStatus == 3 || this.popStatus == 4) {
        this.locationReplace(this.actUrl)
      } else if (this.popStatus == 2) {
        this.plagGameAgain();
      }

      if (this.popStatus == 0) {
        this.changeBigBtn();
      }

    },

    //右按钮
    btnClick2() {
      this.ifShowPop = false

      if (this.popStatus == 0) {
        sessionStorage.setItem('FlappyBirdnoRemind', true);
        this.changeBigBtn();
      } else if (this.popStatus == 1 || this.popStatus == 2) {
        this.locationReplace(this.actUrl + '&gameDraw=true')

      } else if (this.popStatus == 4) {
        this.plagGameAgain();
      }

    },

    //换成小按钮
    changeBigBtn() {
      if (this.activityType == '10089' || this.activityType == '10091' || this.activityType == '10094' || this.activityType == '10095') {
        this.gamePop = 'gamePop10084'
        this.popBtn1 = 'popBtn1Small'
        this.popBtn2 = 'popBtn2Small'
      }
    },

    //初始化
    async gameInit() {
      let templateId = sessionStorage.getItem('templateId')
      await gameInit(templateId, data => {
        this.publicKey = data.data.publicKey;
        let newObj = JSON.parse(data.data.gameVOS[0].jsonContent)
        this.$set(newObj, 'limitScore', this.$route.query.score)
        this.jsonContent = JSON.stringify(newObj)
        this.ruleScore = data.data.ruleScore
        this.actUrl = data.data.actUrl
      });
    },

    //游戏开始
    gameStart(callback) {
      this.changeBigBtn();
      gameStart(data => {
        if (data.resp_code == 0) {
          this.resultJson.id = data.data.id;
          this.count = data.data.count
          callback()
        } else {
          Toast(data.resp_msg);
          this.locationReplace(this.actUrl)
        }
      });

    },

    //游戏结束
    gameEnd(resultJson) {
      let params = {
        result: this.getEnData(resultJson, this.publicKey),
        activityId: sessionStorage.getItem('activityId')
      }
      gameEnd({...params}, data => {
        if (data.data == 1) {
          if (this.count > 1) {
            this.popStatus = 2
          } else {
            this.popStatus = 1
          }
        } else {
          if (this.count > 1) {
            this.popStatus = 4
          } else {
            this.popStatus = 3
          }
        }
        this.ifShowPop = true

      });
    },

    //加密
    getEnData(str, key) {
      let encrypt = new JSEncrypt();
      encrypt.setPublicKey(key);
      let encryptData = encrypt.encrypt(str).toString();
      return encryptData;
    },

    //再玩一次
    plagGameAgain() {
      window.onGameReplay();
    },

    /**
     * 加载脚本
     * @export
     * @param {string} src 脚本资源地址
     * @return {*}  {Promise<void>}异步promise
     */
    loadScript(src) {
      return new Promise((resolve) => {
        const script = document.createElement('script');
        script.type = 'text/javascript';
        script.onload = () => {
          resolve();
        };
        script.src = src + '?v=' + new Date().getTime();
        document.body.appendChild(script);
      });
    },

    locationReplace(url) {
      if (history.replaceState) {
        history.replaceState(null, document.title, url);
        history.go(0);
      } else {
        location.replace(url);
      }
    },

  }
}
</script>

<style lang="scss" scoped="scoped">

body {
  padding: 0;
  margin: 0;
}

.vue-wrapper {
  height: 5rem;
  background-color: antiquewhite;
}

#gameDiv {
  width: 7.5rem !important;
  //height: 13.34rem !important;
  height: 100vh !important;
}

.bizDiv {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;

  .gamePop10082 {
    width: 5.49rem;
    height: 6.08rem;
    background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/220320/30/17391/3069/63805a96Ee25b1f1a/ce72eaf8391c9e29.png);
    background-repeat: no-repeat;
    background-size: 100%;
    margin: auto auto;
  }

  .gamePop10084 {
    width: 5.49rem;
    height: 6.08rem;
    background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/100070/28/32457/38273/639c0908Ea0ecbb95/8cb3e1fd5830985f.png);
    background-repeat: no-repeat;
    background-size: 100%;
    margin: auto auto;
  }

  .gamePop10089 {
    width: 5.94rem;
    height: 9.89rem;
    background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/206508/30/29317/19417/63e0c760F74a18fad/bb20d7e29dd491db.png);
    background-repeat: no-repeat;
    background-size: 100%;
    margin: auto auto;
  }

  .popTitle10082 {
    font-size: 0.36rem;
    color: white;
    margin-top: 0.3rem;
  }

  .popTitle10084 {
    font-size: 0.36rem;
    color: white;
    margin-top: 0.1rem;
  }

  .introduce10082 {
    font-size: 0.24rem;
    margin-top: 0.5rem;
    margin-bottom: 0.3rem;
    color: black;

    .intContent {
      margin-top: 0.05rem;

      span {
        color: #f40a51;
      }
    }

    .clickIcon {
      width: 0.68rem;
      height: 0.98rem;
      margin: auto auto;
      margin-top: 0.3rem;
      margin-bottom: 0.25rem;
    }
  }

  .introduce10084 {
    font-size: 0.24rem;
    margin-top: 0.2rem;
    margin-bottom: 0.3rem;
    color: black;

    .intContent {
      // margin-top: 0.05rem;

      span {
        color: #f40a51;
      }
    }

    .contectImgUrl {
      width: 2rem;
      margin: auto auto;
    }

  }

  .introduce10089 {
    font-size: 0.24rem;
    margin-top: 0.2rem;
    margin-bottom: 0.15rem;
    color: black;
  }

  .contectImgUrl89 {
    width: 5.31rem;
    height: 7.47rem;
    margin-top: 0.34rem;

  }

  .contectImgUrl94 {
    width: 5.31rem;
    height: 5.33rem;
    margin-top: 0.98rem;
    margin-bottom: 1.5rem;
  }

  .contectImgUrl95 {
    width: 5.31rem;
    height: 6.95rem;
    margin-top: 0.34rem;
    margin-bottom: 0.43rem;
  }

  .gameResult10082 {
    .trophyImg {
      width: 1.32rem;
      height: 1.39rem;
      margin: auto auto;
      margin-top: 0.6rem;
      margin-bottom: 0.2rem;
    }

    .resultText1 {
      font-size: 0.24rem;
      color: black;
      font-weight: bold;
    }

    .resultText2 {
      font-size: 0.6rem;
      color: black;
      font-weight: bold;
    }

    .marB20 {
      margin-bottom: 0.2rem;
    }

    .resultText3-10082 {
      margin-top: 0.05rem;
      font-size: 0.24rem;

      span {
        color: #f40a51;
      }
    }

  }

  .gameResult10084 {
    .trophyImg {
      width: 1.32rem;
      height: 1.39rem;
      margin: auto auto;
      margin-top: 0.4rem;
      margin-bottom: 0.2rem;
    }

    .resultText1 {
      font-size: 0.24rem;
      color: black;
      font-weight: bold;
    }

    .resultText2 {
      font-size: 0.6rem;
      color: black;
      font-weight: bold;
    }

    .marB20 {
      margin-bottom: 0.2rem;
    }

    .resultText3-10084 {
      margin-top: 0.05rem;
      margin-bottom: 0.2rem;
      font-size: 0.24rem;

      span {
        color: #f40a51;
      }
    }

  }

  .popBtnDiv10082 {
    width: 100%;
    display: flex;
    flex-direction: row;
    font-size: 0.24rem;
    line-height: 0.78rem;
    color: black;

    .popBtn1Small {
      margin-left: 1.01rem;
      width: 1.81rem;
      height: 0.72rem;
      background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/168653/27/33349/816/63807dcaE43a18054/1ac066e681d61e09.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

    .popBtn2Small {
      margin-left: 0.09rem;
      width: 1.81rem;
      height: 0.72rem;
      background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/91937/39/31845/733/63807dcaEb97aeafa/19fb8a9aab027966.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

    .popBtn3 {
      margin-left: 0.54rem;
      width: 2.28rem;
      height: 0.72rem;
      background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/168653/27/33349/816/63807dcaE43a18054/1ac066e681d61e09.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

    .popBtn4 {
      font-size: 0.3rem;
      width: 3.51rem;
      height: 0.91rem;
      line-height: 0.91rem;
      background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/40332/4/21166/776/63809c57E1bea6f67/47aebab305fdd794.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      margin: auto;
    }

  }

  .popBtn1Big {
    font-size: 0.3rem;
    letter-spacing: 0.04rem;
    margin-left: 0.17rem;
    width: 2.67rem;
    height: 0.94rem;
    line-height: 0.94rem;
    background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/39289/35/19758/2526/639becc6E6753dba7/02e8ef1ebc710782.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: white;
  }

  .popBtn2Big {
    font-size: 0.3rem;
    letter-spacing: 0.04rem;
    margin-left: 0.19rem;
    width: 2.67rem;
    height: 0.94rem;
    line-height: 0.94rem;
    background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/125160/15/28559/1778/639becc6Ecc87093a/c87d22276ca674b8.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }


  .popBtnDiv10084 {
    width: 100%;
    display: flex;
    flex-direction: row;
    font-size: 0.24rem;
    color: black;

    .popBtn1Small {
      margin-left: 1.01rem;
      width: 1.81rem;
      height: 0.6rem;
      line-height: 0.6rem;
      background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/39289/35/19758/2526/639becc6E6753dba7/02e8ef1ebc710782.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      color: white;
    }

    .popBtn2Small {
      margin-left: 0.09rem;
      width: 1.81rem;
      height: 0.6rem;
      line-height: 0.6rem;
      background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/125160/15/28559/1778/639becc6Ecc87093a/c87d22276ca674b8.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

    .popBtn3 {
      margin-left: 0.54rem;
      width: 2.28rem;
      height: 0.6rem;
      line-height: 0.6rem;
      background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/39289/35/19758/2526/639becc6E6753dba7/02e8ef1ebc710782.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      color: white
    }

    .popBtn4 {
      // font-size: 0.3rem;
      width: 2.51rem;
      height: 0.6rem;
      line-height: 0.6rem;
      background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/39289/35/19758/2526/639becc6E6753dba7/02e8ef1ebc710782.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      margin: auto;
      color: white;
    }

  }
}

.startGame {
  width: 2.80rem;
  height: 0.88rem;
  background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/194463/10/24954/4588/62972077Ec82e1af3/e0762748518d3e12.png);
  background-repeat: no-repeat;
  background-size: 100%;
  margin: auto auto;
}


</style>
