<template>
  <div class="template-game">
    <div class="bg-image-box">
      <img class="bg-image" :src="backImageUrl" />
    </div>
    <div class="content">
      <div class="right-btn rule" :style="rightBtn[templateId]">游戏规则</div>
      <div class="right-btn award" :style="rightBtn[templateId]">我的奖品</div>
      <div class="music-icon iconfont icon-yinfu" :style="rightBtn[templateId]" v-show="backMusicFlag"></div>
      <div class="integral" v-if="ruleData[0].type == 0">{{ ruleData[0].val }}积分/次</div>
      <div class="swiper-item" v-if="bulletFlag == 1" :style="bulletTop[templateId]">
        <img :src="bulletImageUrl" />
        <span>恭喜 张* 获得 100元优惠券</span>
      </div>
      <div class="box-box">
        <img v-for="item in boxList" :key="item" :src="boxImg" :style="{ left: item.left, top: item.top, width: item.width, height: item.height }" @click="showOpenBoxDialog = true" />
      </div>
      <div class="points-count-box">
        <div class="text-box">
          <div class="text" :style="textColor[templateId]">1500</div>
          <img class="text-shadow" :src="'https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template' + templateId + '/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="noticeImageUrl" style="height: 17px;" />
        </div>
        <div class="text-box">
          <div class="text fontSize" :style="textColor[templateId]">55</div>
          <img class="text-shadow" :src="'https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template' + templateId + '/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="adsImageUrl" mode="widthFix" v-if="adsImageUrl && adsFlag == 1" />
      <!-- <div class="share-box" v-if="ruleData[1].type == 1">
        <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 template3Box = [
  {
    left: '24%',
    top: '192px',
    height: '120px',
    width: '120px'
  },
  {
    left: '50%',
    top: '243px',
    height: '120px',
    width: '120px'
  },
  {
    left: '77%',
    top: '192px',
    height: '120px',
    width: '120px'
  },
  {
    left: '24%',
    top: '330px',
    height: '120px',
    width: '120px'
  },
  {
    left: '50%',
    top: '376px',
    height: '120px',
    width: '120px'
  },
  {
    left: '77%',
    top: '330px',
    height: '120px',
    width: '120px'
  }
];
// const leftVal = 0;
const template1Box = [
  {
    left: 'calc(51%)',
    top: '200px',
    height: '110px',
    width: '110px'
  },
  {
    left: 'calc(33%)',
    top: '244px',
    height: '110px',
    width: '110px'
  },
  {
    left: 'calc(69%)',
    top: '244px',
    height: '110px',
    width: '110px'
  },
  {
    left: 'calc(16%)',
    top: '291px',
    height: '110px',
    width: '110px'
  },
  {
    left: 'calc(52%)',
    top: '288px',
    height: '110px',
    width: '110px'
  },
  {
    left: 'calc(84%)',
    top: '294px',
    height: '110px',
    width: '110px'
  },
  {
    left: 'calc(35%)',
    top: '335px',
    height: '110px',
    width: '110px'
  },
  {
    left: 'calc(70%)',
    top: '338px',
    height: '110px',
    width: '110px'
  },
  {
    left: 'calc(53%)',
    top: '385px',
    height: '110px',
    width: '110px'
  }
];
const template2Box = [
  {
    left: 'calc(24.5% - 0px)',
    top: '202px',
    height: '90px',
    width: '90px'
  },
  {
    left: 'calc(50% - 0px)',
    top: '202px',
    height: '90px',
    width: '90px'
  },
  {
    left: 'calc(75.5% - 0px)',
    top: '202px',
    height: '90px',
    width: '90px'
  },
  {
    left: 'calc(24.5% - 0px)',
    top: '287px',
    height: '90px',
    width: '90px'
  },
  {
    left: 'calc(50% - 0px)',
    top: '287px',
    height: '90px',
    width: '90px'
  },
  {
    left: 'calc(75.5% - 0px)',
    top: '287px',
    height: '90px',
    width: '90px'
  },
  {
    left: 'calc(24.5% - 0px)',
    top: '379px',
    height: '90px',
    width: '90px'
  },
  {
    left: 'calc(50% - 0px)',
    top: '379px',
    height: '90px',
    width: '90px'
  },
  {
    left: 'calc(75.5% - 0px)',
    top: '379px',
    height: '90px',
    width: '90px'
  }
];
const template5Box = [
  {
    left: 'calc(24.4%)',
    top: '187px',
    height: '85px',
    width: '85px'
  },
  {
    left: 'calc(50%)',
    top: '187px',
    height: '85px',
    width: '85px'
  },
  {
    left: 'calc(76.6%)',
    top: '187px',
    height: '85px',
    width: '85px'
  },
  {
    left: 'calc(24.4%)',
    top: '295px',
    height: '85px',
    width: '85px'
  },
  {
    left: 'calc(50%)',
    top: '295px',
    height: '85px',
    width: '85px'
  },
  {
    left: 'calc(76.6%)',
    top: '295px',
    height: '85px',
    width: '85px'
  },
  {
    left: 'calc(24.4%)',
    top: '403px',
    height: '85px',
    width: '85px'
  },
  {
    left: 'calc(50%)',
    top: '403px',
    height: '85px',
    width: '85px'
  },
  {
    left: 'calc(76.6%)',
    top: '403px',
    height: '85px',
    width: '85px'
  }
];
export default {
  components: { img },
  data() {
    return {
      template1Box,
      boxList: [],
      template2Box,
      template3Box,
      template5Box,
      backImageUrl: '',
      noticeImageUrl: '',
      boxImg: '',
      adsImageUrl: '',
      bulletFlag: 0,
      bulletImageUrl: '',
      backMusicFlag: 0,
      adsFlag: 0,
      rightBtn: {
        5: 'background: #0CC6DA;box-shadow: inset 2px 1px 1px 0px rgba(255, 255, 255, 0.5);',
        3: 'background: rgba(39, 41, 43,0.5);',
        2: 'background: rgba(39, 41, 43,0.75);',
        1: 'background:rgba(39, 41, 43,0.5);'
      },
      textColor: {
        1: 'color:#38BCCC',
        2: 'color:#000000',
        3: 'color:#D8FCFA',
        5: 'color:#000000'
      },
      bulletTop: {
        1: 'top: 129px;color: #FFFFFF;',
        2: 'top: 129px;color: #FFFFFF;',
        3: 'top: 129px;color: #FFFFFF;',
        5: 'top: 148px;color: #000000;'
      }
    };
  },
  props: {
    ruleData: {
      type: Object,
      default: () => {}
    },
    basicData: {
      type: Object,
      default: () => {}
    },
    templateId: String
  },
  watch: {
    templateId(val) {
      if (!val) return;
      if (['1', '2', '3', '5'].includes(val)) {
        this.boxList = this['template' + val + 'Box'];
      } else {
        this.boxList = this.template1Box;
      }
      console.log(this.boxList);
      console.log('template' + val + 'Box');
    },
    basicData: {
      deep: true,
      // immediate: true,
      handler(val) {
        console.log('basicData----->');
        console.log(val);
        if (!val) return;
        const { backImageUrl, noticeImageUrl, boxImg, adsImageUrl, bulletFlag, bulletImageUrl, backMusicFlag, adsFlag } = val;
        this.backImageUrl = backImageUrl;
        this.noticeImageUrl = noticeImageUrl;
        this.boxImg = boxImg;
        this.adsImageUrl = adsImageUrl;
        this.bulletFlag = bulletFlag;
        this.bulletImageUrl = bulletImageUrl;
        this.backMusicFlag = backMusicFlag;
        this.adsFlag = adsFlag;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
img {
  object-fit: fill;
}
.template-game {
  height: 724px;
  // margin-top: 62px;
}
.bg-image-box {
  position: absolute;
  left: 0;
  width: 100%;
  height: 723px;
  max-height: 100%;
  overflow: hidden;
}
.bg-image {
  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); */
}

.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-weight: 500;
}

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

.integral {
  position: absolute;
  z-index: 2;
  top: 98px;
  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-item {
  width: 300px;
  height: 36px;
  box-sizing: border-box;
  border-radius: 17px 0 0 17px;
  display: flex;
  align-items: center;
  position: absolute;

  left: 19px;
}
.swiper-item img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.swiper-item span {
  padding-left: 30px;

  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);
  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 {
  font-family: DINAlternate-Bold, DINAlternate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  position: relative;
  height: 57px;
  margin-top: 30px;
}

.text-box {
  position: relative;
  text-align: center;
}
.text-box .text {
  font-family: DINAlternate-Bold, DINAlternate;
  font-size: 26px;
  font-weight: 600;
  color: #000000;
  line-height: 23px;
  position: relative;
  z-index: 2;
}
.font-size {
  font-size: 40px;
}
.text-box .text-shadow {
  position: absolute;
  left: 50%;
  top: 21px;
  transform: translateX(-50%);
  width: 41px;
  height: 8px;
  z-index: 1;
}

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

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

.share-box {
  position: absolute;
  z-index: 10;
  right: 20px;
  bottom: -75px;
  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;
}
.fontSize {
  font-size: 40px !important;
}
.share-box img {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 48px;
  height: 16px;
  transform: translateX(-50%);
  z-index: 2;
}
</style>
