<template>
  <div class="template-game">
    <img class="bg-image" :src="bgImg" />
    <div class="content">
      <div class="right-btn rule">游戏规则</div>
      <div class="right-btn award">我的奖品</div>
      <div class="music-icon iconfont" :class="isPlay ? 'icon-yinfu' : 'icon-xingzhuangjiehe2x'"></div>
      <div class="integral" v-if="ruleData.type == 0">{{ ruleData.val }}积分/次</div>

      <div class="box-box">
        <img v-for="item in boxList" :key="item" :src="boxImg" :style="{ left: item.left, top: item.top }" @click="showOpenBoxDialog = true" />
      </div>

      <div class="points-count-box">
        <div class="text-box">
          <div class="text">1500</div>
          <img class="text-shadow" src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/circle_bg.png" />
          <img class="title-image" src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/我的积分.png" />
        </div>
        <div class="game-name-box">
          <img :src="tipsImg" style="width: 224px;height: 22px;" />
        </div>
        <div class="text-box">
          <div class="text">55</div>
          <img class="text-shadow" src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/circle_bg.png" />
          <img class="title-image" src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/剩余次数.png" />
        </div>
      </div>

      <img class="ad-image" :src="adImg" mode="widthFix" v-if="adImg" />
      <!-- <div class="share-box" @click="clickShareBtn">
        <div class="icon">
          <div class="iconfont icon-yaoqing"></div>
        </div>
        <img src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/邀请助力.png" />
      </div> -->
    </div>
  </div>
</template>

<script>
import img from '../../../components/upload/img.vue';
const box6 = [
  {
    left: '24%',
    top: '202px'
  },
  {
    left: '50%',
    top: '266px'
  },
  {
    left: '77%',
    top: '202px'
  },
  {
    left: '24%',
    top: '338px'
  },
  {
    left: '50%',
    top: '393px'
  },
  {
    left: '77%',
    top: '338px'
  }
];
const box9 = [
  {
    left: '51%',
    top: '214px'
  },
  {
    left: '33%',
    top: '262px'
  },
  {
    left: '66%',
    top: '258px'
  },
  {
    left: '16%',
    top: '307px'
  },
  {
    left: '52%',
    top: '306px'
  },
  {
    left: '84%',
    top: '307px'
  },
  {
    left: '35%',
    top: '351px'
  },
  {
    left: '68%',
    top: '355px'
  },
  {
    left: '53%',
    top: '400px'
  }
];
export default {
  components: { img },
  data() {
    return {
      list: ['刷卡拉拉卡', '阿拉卡萨卢克和史莱克', '刷卡拉拉卡', '阿拉卡萨卢克和史莱克'],
      boxList: box9,
      isPlay: true,
      name: '猜盲盒'
    };
  },
  props: {
    bgImg: {
      type: String,
      default: ''
    },
    tipsImg: {
      type: String,
      default: ''
    },
    boxImg: {
      type: String,
      default: ''
    },
    adImg: {
      type: String,
      default: ''
    },
    ruleData: {
      type: Object,
      default: () => {}
    },
    templateId: String
  },
  created() {
    document.title = '猜盲盒';
  },
  watch: {
    templateId(val) {
      if (val == 1 || val == 2) {
        this.boxList = box9;
      }
      if (val == 3) {
        this.boxList = box6;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
img {
  object-fit: fill;
}
.template-game {
}
.bg-image {
  width: 375px;
  position: absolute;
  height: 724px;
  overflow-y: auto;
}
.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: absolute;
  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: 501px;
  width: 100%;
  position: relative;
}

@keyframes box-animation {
  from {
    transform: translate(-50%, -50%);
  }
  to {
    transform: translate(-50%, 0);
  }
}
.box-box img {
  position: absolute;
  transform: translate(-50%, 0);
  width: 95px;
  height: 95px;
  animation-timing-function: ease-in;
  /* animation-name: box-animation; */
  animation-duration: 1s;
}
.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: #388ccc;
  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;
}

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

.share-box {
  position: absolute;
  z-index: 10;
  right: 20px;
  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, #01ffde 0%, #01fff4 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>
