<template>
  <div class="box">
    <div class="page-bg">
      <img src="./images/rulebg.png" class="bg-img" mode="widthFix">
    </div>
    <div class="content">
      <div class="content-cell" v-if="rule && rule.gameId">
        <div class="cell-top">
          <div class="iconfont icon-duobianxing"></div>
          <div class="title">游戏规则</div>
          <div class="iconfont icon-duobianxing"></div>
        </div>
        <div class="rule-box">
          <div class="rule-item">
            <div class="title">游戏时间</div>
            <div class="value">{{ rule.startDate | formatDate }}-{{ rule.endDate | formatDate }}</div>
          </div>
          

          <div class="rule-item" v-if="rule.playConditionFlag">
            <div class="title">参与门槛</div>
            <div class="value point" v-for="item in rule.gameRuleConditionList" :key="item">
              <div v-if="item.conditionObj.type == 21">每天增加 {{ item.conditionObj.value }} 次免费游戏机会</div>
              <div v-else-if="item.conditionObj.type == 22">赠送 {{ item.conditionObj.value }} 次免费游戏机会</div>
              <div v-else-if="item.conditionObj.type == 1">每参加 1 次游戏消耗 {{ item.conditionObj.value }} 积分</div>
              <div v-else-if="item.conditionObj.type == 11">每邀请 {{ item.conditionObj.inviteNum }} 位用户认证，增加 {{ item.conditionObj.value }} 次游戏机会</div>
              <div v-else-if="item.conditionObj.type == 12">每邀请 {{ item.conditionObj.inviteNum }} 位用户关注服务号，增加 {{ item.conditionObj.value }} 次游戏机会</div>
            </div>
          </div>

          <div class="rule-item" v-if="rule.playTimes">
            <div class="title">游戏参与次数</div>
            <div class="value">每人{{ rule.playTimes }}次</div>
          </div>

          <div class="rule-item">
            <div class="title">适用人群</div>
            <div class="value">{{ rule.memberDesc }}</div>
          </div>

          <div class="rule-item">
            <div class="title">游戏说明</div>
            <div class="value point" v-html="rule.gameRule"></div>
          </div>

        </div>
      </div>

      <div class="content-cell" v-if="rewardList && rewardList.length">
        <div class="cell-top">
          <div class="iconfont icon-duobianxing"></div>
          <div class="title">游戏奖品</div>
          <div class="iconfont icon-duobianxing"></div>
        </div>
        <div class="reward-box">
          <div class="reward-item-box" v-for="item in rewardList" :key="item">
            <div class="reward-item-detail">
              <div class="img-box">
                <img :src="item.prizeImageUrl" class="reward-img" mode="scaleToFit">
              </div>
              <div class="reward-name">{{ item.prizeName }}</div>
              <div class="reward-des">{{ item.prizeDesc }}</div>
            </div>
          </div>
        </div>
      </div>

    </div>
    

  </div>
</template>

<script>
import { gameRequestApi } from "@/api/common.js";
const {
  getGameRule,
  getGameReward,
} = gameRequestApi;


export default {
  components:{},
  data(){
    return {
      rule:{},
      rewardList:[],
    }
  },
  created(){
    document.title = "游戏规则"
    this.loadData();
  },
  methods:{
    loadData(){
      this.getGameRule();
      this.getGameReward();
    },
    async getGameRule(){
      let rule = await getGameRule({
        ...this.$route.query
      })
      rule.gameRuleConditionList && rule.gameRuleConditionList.map((item)=>{
        item.conditionObj = JSON.parse(item.conditionJson);
      })
      this.rule = rule;
    },
    async getGameReward(){
      let rewardList = await getGameReward({
        ...this.$route.query
      })
      this.rewardList = rewardList;
    },

  },
  filters:{
    formatDate(value){
      if (!value) return '--';
      let date = new Date(value);
      return date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日"
    }
  }
}
</script>

<style scoped>

.box{
  position: relative;
}

.page-bg{
  position: fixed;
  z-index: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #ADDFCD;
}

.page-bg .bg-img{
  width: 100%;
}

.content{
  position: relative;
  z-index: 1;
}

.content-cell{
  border-radius: 8px;
  border: 1px solid #21252B;
  background: white;
  margin: 12px 12px 3px;
  width: calc(100% - 24px);
  box-sizing: border-box;
}

.cell-top{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: linear-gradient(180deg, #D9FCF5 0%, rgba(238, 247, 225, 0.3) 100%);
  border-radius: 8px 8px 0 0;
}

.cell-top .title{
  color: #27292B;
  font-size: 17px;
  padding: 0 10px;
  font-weight: 600;
}

.cell-top .iconfont{
  color: #21252B;
  font-size: 15px;
}

.reward-box{
  padding: 15px 0 6px;
  display: flex;
  flex-wrap: wrap;
}

.reward-item-box{
  width: calc(50% - 19px);
  padding: 0 6px 12px;
}

.reward-item-box:nth-child(2n + 1){
  padding-left: 13px;
}

.reward-item-box:nth-child(2n + 2){
  padding-right: 13px;
}

.reward-item-detail{
  background: #F6F6F6;
  border-radius: 4px;
  padding: 6px;
}

.reward-item-detail .img-box{
  padding-top: 100%;
  position: relative;
  background: white;
}

.reward-item-detail .img-box .reward-img{
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: calc(100% - 20px);
  height: calc(100% - 20px);
}

.reward-item-detail .reward-name{
  color: #21252B;
  font-size: 14px;
  font-weight: 500;
  padding: 11px 0 0;
}

.reward-item-detail .reward-des{
  color: #21252B;
  font-size: 11px;
  font-weight: 300;
  padding: 4px 0 7px;
}



.rule-box{
  
}
.rule-item{
  padding: 15px 13px 0;
}
.rule-item:last-child{
  padding-bottom: 16px;
}

.rule-item .title{
  color: #21252B;
  font-size: 14px;
  font-weight: 600;
}

.rule-item .value{
  color: #21252B;
  font-size: 13px;
  margin-top: 8px;
}

.rule-item .value.point{
  padding-left: 10px;
  position: relative;
}

.rule-item .value.point::before{
  content: " ";
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #38BDCD;
  top: 7px;
  left: 0;
  z-index: 1;
}


</style>