<template>
  <div v-if="game && game.gameExt">
    <img class="bg-image" :src="game.gameExt.backImageUrl" mode="widthFix" />

    <div class="right-btn rule" @click="toGameRule">游戏规则</div>

    <div class="right-btn award" @click="toMyReward">我的奖品</div>

    <div class="content">
      <div
        class="music-icon iconfont"
        :class="isPlay ? 'icon-yinfu' : 'icon-xingzhuangjiehe2x'"
        @click="playMusic"
        v-if="game.backMusicFlag && game.gameExt.backMusicUrl"
      ></div>
      <div class="integral" v-if="rule.integral">
        {{ rule.integral || 0 }}积分/次
      </div>

      <swiper
        class="swiper-class"
        ref="mySwiper"
        :options="swiperOptions"
        :autoplay="swiperOptions.autoplay"
        v-if="game.bulletFlag && barrageList && barrageList.length > 3"
      >
        <swiper-slide v-for="item in barrageList" :key="item">
          <div class="swiper-item">
            <img src="./images/tips_bg.png" />
            <span>恭喜 {{ item.memberName }} 获得 {{ item.prizeName }}</span>
          </div>
        </swiper-slide>
      </swiper>

      <div class="box-box">
        <img
          v-for="(item, index) in boxList"
          :key="item"
          :src="
            game.gameExt.prizeStyleList.length == 1
              ? game.gameExt.prizeStyleList[0].imageNoSelectUrl
              : game.gameExt.prizeStyleList[index].imageNoSelectUrl
          "
          :style="{ left: item.left, top: item.top }"
          @click="clickBox(index)"
        />
      </div>

      <div class="points-count-box">
        <div>
          <!-- 左边显示-右边次数显示且积分玩法开启才显示在左边 -->
          <div
            class="text-box"
            v-if="
              rule.integral && playNumberObj && playNumberObj.playNumberFlag
            "
          >
            <div class="text">{{ currentIntegral }}</div>
            <img class="text-shadow" src="./images/circle_bg.png" />
            <img class="title-image" src="./images/我的积分.png" />
          </div>
        </div>

        <img
          class="guide-img"
          :src="game.gameExt.noticeImageUrl"
          mode="widthFix"
        />
        <div>
          <div
            class="text-box"
            v-if="playNumberObj && playNumberObj.playNumberFlag"
          >
            <div class="text">{{ playNumberObj.playNumber }}</div>
            <img class="text-shadow" src="./images/circle_bg.png" />
            <img class="title-image" src="./images/剩余次数.png" />
          </div>
          <div class="text-box" v-else-if="rule.integral">
            <div class="text">{{ currentIntegral }}</div>
            <img class="text-shadow" src="./images/circle_bg.png" />
            <img class="title-image" src="./images/我的积分.png" />
          </div>
        </div>
      </div>

      <img
        class="ad-image"
        :src="game.gameExt.adsImageUrl"
        mode="widthFix"
        @click="clickAdImg"
        v-if="game.adsFlag"
      />

      <div class="share-box" @click.stop="clickShareBtn" v-if="rule.shareFlag">
        <div class="icon">
          <div class="iconfont icon-yaoqing"></div>
        </div>
        <img src="./images/邀请助力.png" />
      </div>
    </div>

    <open-box-dialog
      :show.sync="showOpenBoxDialog"
      :title="openBoxTitle"
      :data="openBoxData"
      @open="open()"
    ></open-box-dialog>
    <reward-dialog
      :show.sync="showRewardDialog"
      :reward="rewardDetail"
    ></reward-dialog>
    <reward-fail-dialog :show.sync="showRewardFailDialog"></reward-fail-dialog>
    <share-select-dialog
      :show.sync="showShareSelectDialog"
      v-show="showShareSelectDialog"
      :memberId="memberId"
      :enterpriseId="enterpriseId"
      :gameId="gameId"
      :shareConditionObj="shareConditionObj"
      @shareWx="shareWx"
      @sharePyq="sharePyq"
    ></share-select-dialog>

    <share-img-dialog
      :show.sync="showShareImgDialog"
      v-bind="pyqOptions"
    ></share-img-dialog>

    <alert-dialog v-bind.sync="alertOptions"></alert-dialog>
  </div>
</template>

<script>
import { gameRequestApi } from "@/api/common.js";
const {
  getGameInfo,
  getGamePlayNumber,
  getGamePlayBarrage,
  getIntegral,
  getGameRule,
  getGameShareQrCodeUrl,
} = gameRequestApi;

import { Swiper, SwiperSlide } from "vue-awesome-swiper";

import { Manager } from "../../manager";

import "swiper/css/swiper.css";

import OpenBoxDialog from "./components/open-box.vue";

import RewardDialog from "./components/reward-dialog.vue";
import RewardFailDialog from "./components/reward-fail.vue";
import ShareSelectDialog from "./components/share-select-dialog.vue";
import ShareImgDialog from "./components/share-img-dialog.vue";
import AlertDialog from "./components/alert.vue";
export default {
  components: {
    OpenBoxDialog,
    Swiper,
    SwiperSlide,
    RewardDialog,
    RewardFailDialog,
    ShareSelectDialog,
    ShareImgDialog,
    AlertDialog,
  },
  data() {
    return {
      showOpenBoxDialog: false,
      showRewardDialog: false,
      showRewardFailDialog: false,
      showShareSelectDialog: false,
      showShareImgDialog: false,
      shareConditionObj: {},
      alertOptions: {},
      list: [
        "刷卡拉拉卡",
        "阿拉卡萨卢克和史莱克",
        "刷卡拉拉卡",
        "阿拉卡萨卢克和史莱克",
      ],
      boxList: [
        {
          left: "calc(51% - 47px)",
          top: "214px",
        },
        {
          left: "calc(33% - 47px)",
          top: "262px",
        },
        {
          left: "calc(66% - 47px)",
          top: "258px",
        },
        {
          left: "calc(16% - 47px)",
          top: "307px",
        },
        {
          left: "calc(52% - 47px)",
          top: "306px",
        },
        {
          left: "calc(84% - 47px)",
          top: "307px",
        },
        {
          left: "calc(35% - 47px)",
          top: "351px",
        },
        {
          left: "calc(68% - 47px)",
          top: "355px",
        },
        {
          left: "calc(53% - 47px)",
          top: "400px",
        },
      ],
      swiperOptions: {
        direction: "vertical",
        loop: true,
        autoplay: {
          delay: 2000,
          stopOnLastSlide: false,
          disableOnInteraction: true,
        },
      },
      isPlay: false,
      name: "猜盲盒",
      game: {},
      gameId: "",
      enterpriseId: "",
      memberId: "",
      isAttest: 0,
      currentIntegral: "--",
      rule: {},
      playNumberObj: {},
    };
  },
  created() {
    document.title = "猜盲盒";
    this.manager = new Manager(this);
    let query = this.$route.query;
    this.gameId = query.gameId;
    this.enterpriseId = query.enterpriseId;
    this.memberId = query.memberId;
    this.isAttest = +query.isAttest;

    if (!this.audio) {
      this.audio = new Audio();
      this.audio.autoplay = true;
      this.audio.addEventListener(
        "ended",
        () => {
          if (this.isPlay) {
            this.audio.play();
          }
        },
        false
      );
    }
    this.getGame();
    this.getGameRule();
    this.getGamePlayNumber();
    this.getIntegral();
    this.getGamePlayBarrage();

    this.manager.startPolling();
  },
  mounted(){
    this.manager.stopPolling();
  },
  methods: {
    async getGame() {
      let res = await getGameInfo({
        gameId: this.gameId,
        enterpriseId: this.enterpriseId,
      });

      document.title = res.gameName;
      res.gameExt.prizeStyleList = JSON.parse(
        res.gameExt.prizeStyleJson || "[]"
      );
      this.game = res;

      this.audio.src = res.gameExt.backMusicUrl;

      if (this.isPlay) {
        this.audio.play();
      } else {
        this.audio.pause();
      }
    },
    async getGameRule() {
      let rule = await getGameRule({
        gameId: this.gameId,
        enterpriseId: this.enterpriseId,
      });
      let gameRuleConditionList = rule.gameRuleConditionList || [];
      gameRuleConditionList.map((item)=>{
        let obj = JSON.parse(item.conditionJson);
        if(+obj.type == 11 || +obj.type == 12){
          this.shareConditionObj = obj;
        }
      })
      this.rule = rule;
      window.wx.miniProgram.postMessage({
        data: {
          shareTitle: rule.shareRuleDesc,
          shareImage: rule.shareImageUrl,
        },
      });
    },
    async getGamePlayNumber() {
      let playNumberObj = await getGamePlayNumber({
        gameId: this.gameId,
        enterpriseId: this.enterpriseId,
        memberId: this.memberId || "",
      });
      this.playNumberObj = playNumberObj;
    },
    async getGamePlayBarrage() {
      let barrageList = await getGamePlayBarrage({
        gameId: this.gameId,
        enterpriseId: this.enterpriseId,
      });
      this.barrageList = barrageList || [];
    },
    async getIntegral() {
      let currentIntegral = await getIntegral({
        enterpriseId: this.enterpriseId,
        memberId: this.memberId,
      });
      this.currentIntegral = currentIntegral;
    },
    clickBox(index) {
      let prizeStyleList = this.game.gameExt.prizeStyleList;
      let itemIndex = prizeStyleList.length > index ? index : 0;
      let boxItem = prizeStyleList[itemIndex];
      this.showOpenBoxDialog = true;
      this.openBoxData = boxItem;
      if(this.playNumberObj.playNumber == 0 && this.rule.integral && this.currentIntegral > this.rule.integral){
        this.openBoxTitle = `每次参与游戏消耗${ this.rule.integral }积分`
      }else{
        this.openBoxTitle = "";
      }
    },
    toGameRule() {
      this.$router.push({
        path: "/cmh/3/rule",
        query: {
          gameId: this.gameId,
          enterpriseId: this.enterpriseId,
        },
      });
    },
    toMyReward() {
      this.$router.push({
        path: "/cmh/3/my-reward",
        query: {
          gameId: this.gameId,
          enterpriseId: this.enterpriseId,
          memberId: this.memberId,
        },
      });
    },
    playMusic() {
      this.isPlay = !this.isPlay;
      if (this.isPlay) {
        this.audio.play();
      } else {
        this.audio.pause();
      }
    },
    async clickShareBtn() {
      await this.manager.checkAttest();
      this.showShareSelectDialog = true;
    },
    shareWx() {
      let options = this.shareConditionObj;
      this.showShareSelectDialog = false;
      this.manager.shareWx({
        title: options.shareTitle,
        imageUrl: options.shareCard,
        path: `/pages/game/game-h5?gameId=${ this.gameId }&shareMemberId=${ this.memberId }`,
      })
    },
    async sharePyq() {
      let options = this.shareConditionObj;
      let result = await getGameShareQrCodeUrl({
        gameId: this.gameId,
        enterpriseId: this.enterpriseId,
        memberId: this.memberId,
        shareType: options.type == 12 ? 2 : 1,
      });

      this.pyqOptions = {
        bgImage: options.shareReport,
        qrcodeUrl: result.qrCodeUrl,
      };
      this.showShareSelectDialog = false;
      this.showShareImgDialog = true;
    },
    clickAdImg() {
      window.wx.miniProgram.navigateTo({
        url: '/' + this.game.gameExt.adsLinkUrl,
      })
    },
    async open() {
      let gameRes = await this.manager.play();

      this.showOpenBoxDialog = false;
      // this.rewardDetail = {};
      if (gameRes.prizeType) {
        this.rewardDetail = gameRes;
        this.showRewardDialog = true;
      } else {
        this.showRewardFailDialog = true;
      }
      this.getGamePlayNumber();
      this.getIntegral();
    },
  },
};
</script>

<style scoped>
.bg-image {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
}
.content {
  position: relative;
  z-index: 1;
}

.music-icon {
  text-align: center;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 10;

  background: rgba(39, 41, 43, 0.5);
  color: white;
  font-size: 20px;
  /* transform: rotate(90deg); */
}

@keyframes transform {
  0% {
    transform: rotate(0%);
  }
  25% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.music-icon.icon-yinfu {
  animation-name: transform;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.right-btn {
  writing-mode: tb-rl;
  position: fixed;
  right: 0;
  top: 20px;
  padding: 7px 5px;
  border-radius: 8px 0 0 8px;
  background: rgba(39, 41, 43, 0.5);
  z-index: 10;
  color: white;
  font-size: 11px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
}

.right-btn.award {
  top: 89px;
}

.integral {
  position: absolute;
  z-index: 2;
  top: 126px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 120px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  padding: 0 10px;
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px solid white;
  background: rgba(255, 255, 255, 0.3);
  color: #27292b;
  font-size: 12px;
}

.swiper-class {
  position: absolute;
  left: 20px;
  top: 160px;
  z-index: 10;
  width: 300px;
  height: 36px;
}
.swiper-item {
  width: 300px;
  height: 36px;
  box-sizing: border-box;
  border-radius: 17px 0 0 17px;
  position: relative;
  display: flex;
  align-items: center;
}
.swiper-item img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.swiper-item span {
  padding-left: 30px;
  color: white;
  font-size: 12px;
  z-index: 2;
}

.box-box {
  height: 531px;
  width: 100%;
  position: relative;
}

@keyframes box-animation {
  from {
    transform: translate(0, -50%);
  }
  to {
    transform: translate(0, 0);
  }
}
.box-box img {
  position: absolute;
  transform: translate(0, -50%);
  width: 95px;
  height: 95px;
  animation-timing-function: ease-in;
  animation-name: box-animation;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}
.box-box img:nth-child(1) {
  animation-delay: 0s;
}
.box-box img:nth-child(2) {
  animation-delay: 0.1s;
}
.box-box img:nth-child(3) {
  animation-delay: 0.2s;
}
.box-box img:nth-child(4) {
  animation-delay: 0.3s;
}
.box-box img:nth-child(5) {
  animation-delay: 0.4s;
}
.box-box img:nth-child(6) {
  animation-delay: 0.5s;
}
.box-box img:nth-child(7) {
  animation-delay: 0.6s;
}
.box-box img:nth-child(8) {
  animation-delay: 0.7s;
}
.box-box img:nth-child(9) {
  animation-delay: 0.8s;
}

.points-count-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
}

.text-box {
  position: relative;
  text-align: center;
}
.text-box .text {
  font-family: DINAlternate-Bold, DINAlternate;
  font-size: 20px;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 23px;
  position: relative;
  z-index: 2;
}

.text-box .text-shadow {
  position: absolute;
  left: 50%;
  top: 17px;
  transform: translateX(-50%);
  width: 41px;
  height: 8px;
  z-index: 1;
}

.text-box .title-image {
  padding-top: 5px;
  width: 48px;
  height: 16px;
}

.guide-img {
  width: 174px;
  height: 17px;
}

.ad-image {
  margin: 39px 15px 15px;
  border-radius: 8px;
  width: calc(100% - 30px);
}

.share-box {
  position: fixed;
  z-index: 10;
  right: 10px;
  bottom: 40px;
  padding: 10px;
}
.share-box .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #27292b;
  box-shadow: inset 0px 3px 2px 0px rgba(243, 243, 243, 0.4);
}
.share-box .icon .iconfont {
  background-image: -webkit-linear-gradient(180deg, #A7FAF6 0%, #D5F8E6 100%);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;
  font-size: 18px;
}
.share-box img {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 48px;
  height: 16px;
  transform: translateX(-50%);
  z-index: 2;
}
</style>
