<template>
  <div class="containerbox">
    <div class="title">唐元集</div>
    <div class="titlename">好礼送女神</div>
    <div class="engname">New users will have a lucky draw, only once</div>
    <div class="chouimg">
      <div class="chouname">您有一次抽奖的机会</div>
      <img src="../../../assets/chouimg.png" alt />
      <div class="box">
        <div @click="cj" class="list listk" :class="cjChange > 0 ? 'grey' : ''">
          <img src="../../../assets/beginchou.png" alt />
        </div>

        <div
          class="list"
          :class="cjChange == item.index ? 'change_in' : ''"
          v-for="(item,index) in prizeList"
          :key="index"
        >
          <div class="list_t">
            <img :src="item.imgsrc" alt />
          </div>
          <!-- <div class="list_b">{{item.prizeName}}</div> -->
        </div>
      </div>
    </div>

    <div class="register" v-if="hideshow">
      <div class="lingimg">
        <img src="../../../assets/daijinquan.png" alt />
        <div class="money">200</div>
        <div class="riqi">
          <div class="youxiaodate">有效时间</div>
          <div class="youxiaodate">2020.6.15 12:10-6.31</div>
        </div>
      </div>
      <div class="chaimg" @click="closeimg">
        <img src="../../../assets/chaimg.png" alt />
      </div>
    </div>

    <!-- <div class="choujiangimg">
      <img src="../../../assets/chujiangimg.png" alt />
    </div>-->
    <div class="uppage">上一页</div>
  </div>
</template>

<script>
let timer;
let cjIn = false;
let cjChange = 0; //抽奖过程KEY
export default {
  data() {
    return {
      closeimg: false,
      prizeList: [
        { id: '001', index: 1, imgsrc: 'https://www.baidu.com/img/bd_logo1.png', prizeName: '奖品名称111' },
        { id: '002', index: 2, imgsrc: 'https://www.baidu.com/img/bd_logo1.png', prizeName: '奖品名称222' },
        { id: '003', index: 3, imgsrc: 'https://www.baidu.com/img/bd_logo1.png', prizeName: '奖品名称333' },
        { id: '004', index: 4, imgsrc: 'https://www.baidu.com/img/bd_logo1.png', prizeName: '奖品名称444' },
        { id: '005', index: 5, imgsrc: 'https://www.baidu.com/img/bd_logo1.png', prizeName: '奖品名称555' },
        { id: '006', index: 6, imgsrc: 'https://www.baidu.com/img/bd_logo1.png', prizeName: '奖品名称666' },
        { id: '007', index: 7, imgsrc: 'https://www.baidu.com/img/bd_logo1.png', prizeName: '奖品名称777' },
        { id: '008', index: 8, imgsrc: 'https://www.baidu.com/img/bd_logo1.png', prizeName: '奖品名称88888888888888' },
      ],

      cjChange: null, //抽奖过程KEY
      prizeResult: null, //抽奖结果KEY
      prizeName: null, //抽奖结果KEY对应的奖品名称

      showAgain: false, //是否抽奖后显示再抽一次按钮


    }
  },

  methods: {
    closeimg() {
      this.closeimg = false
    },
    cj() {
      console.log(9998)
      if (cjIn) {
        return;
      } else {
        cjIn = true;
      }

      let This = this;

      clearInterval(timer);
      timer = setInterval(This.changePrize, 80);
      // test start
      let res = {
        stutus: 1,
        prizeResult: 8,
        prizeName: '奖品名称88888888888888',

      }
      if (res.stutus == 1) {
        setTimeout(function () {
          clearInterval(timer);
          timer = setInterval(This.changePrize, 160);
          setTimeout(function () {
            clearInterval(timer);
            timer = setInterval(This.changePrize, 300);

            setTimeout(function () {
              This.prizeResult = res.prizeResult
              This.prizeName = res.prizeName

            }, 1000)
          }, 1000)
        }, 2000)
      }
      // test end



    },
    //抽奖过程奖品切换
    changePrize() {
      cjChange++;
      cjChange = cjChange > 8 ? 1 : cjChange;

      let This = this;
      This.cjChange = cjChange

      if (This.prizeResult == cjChange) {
        clearInterval(timer);
        This.showAgain = true

        console.log('获得奖品：' + This.prizeName)
      }
    },
    //点击再抽一次按钮
    againBtn() {
      cjIn = false;
      cjChange = 0; //抽奖过程KEY

      let This = this;
      This.setData({
        cjChange: null, //抽奖过程KEY
        prizeResult: null, //抽奖结果KEY
        prizeName: null, //抽奖结果KEY对应的奖品名称
        showAgain: false, //是否抽奖后显示再抽一次按钮
      });
    },


  }
}
</script>

<style scoped>
.lingimg {
  width: 7.5rem;
  height: 8.5rem;
  font-size: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.riqi {
  position: absolute;

  top: 4.9rem;
  left: 50%;
  transform: translateX(-50%);
}
.youxiaodate {
  color: #437b6a;
  font-size: 0.28rem;
  text-align: center;
}
.chaimg {
  width: 0.48rem;
  height: 0.48rem;
  font-size: 0;
  position: absolute;
  bottom: 1.82rem;
  left: 3.52rem;
}
.money {
  color: #0a5b5c;
  font-size: 1.2rem;
  position: absolute;
  top: 3.6rem;
  left: 3rem;
}
.chouname {
  color: #39683c;
  font-size: 0.32rem;
  font-weight: bold;
  position: absolute;
  top: 0.65rem;
  left: 50%;
  transform: translateX(-50%);
}
.uppage {
  position: fixed;
  bottom: 0.4rem;
  left: 0.32rem;
  width: 6.86rem;
  height: 0.88rem;
  border: 0.02rem solid #ffffff;
  border-radius: 0.08rem;
  color: #fff;
  font-size: 0.34rem;
  text-align: center;
  line-height: 0.88rem;
}
.choujiangimg {
  width: 5.94rem;
  height: 5.94rem;
  font-size: 0;
  margin: 0.2rem auto 0;
}
.chouimg {
  width: 7.36rem;
  height: 7.36rem;
  margin: 0.2rem auto 0;
  position: relative;
}
.titlename {
  color: #fff;
  font-size: 1.04rem;
  text-align: center;
  font-weight: bold;
  margin-top: 0.22rem;
}
.engname {
  color: #ffffff;
  font-size: 0.24rem;
  text-align: center;
  margin-top: 0.1rem;
}
.title {
  color: #fff;
  font-size: 0.3rem;
  position: relative;
  text-align: center;
  margin-top: 0.42rem;
  margin-bottom: 0.22rem;
}
.title::before {
  content: "";
  position: absolute;
  display: block;
  left: 46%;
  top: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  border-top: 0.02rem solid #fff;
  width: 1.44rem;
}
.title::after {
  content: "";
  position: absolute;
  display: block;
  left: 56%;
  top: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  border-top: 0.02rem solid #fff;
  width: 1.44rem;
}

.title::before {
  margin-left: -1.2rem;
}
.title::after {
  margin-left: 1.2rem;
}

body,
html {
  height: 100%;
  background: #5e955d !important;
}
.containerbox {
  height: 100%;
  background: #5e955d;
  overflow: hidden;
}
#app {
  height: 100%;
  background: #5e955d;
  box-sizing: border-box;
  padding-top: 0.25rem;
}

.box {
  width: 5.5rem;
  height: 4.2rem;
  margin: 0 auto;
  box-sizing: border-box;
  position: relative;
  /* -webkit-box-shadow: 0.08rem 0.08rem 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0.08rem 0.08rem 0 rgba(0, 0, 0, 0.2); */
  position: absolute;
  left: 50%;
  top: 55%;
  transform: translate(-50%, -50%);
}
.list {
  width: 1.6rem;
  height: 1.2rem;
  position: absolute;
  /* background-color: #fff; */
  display: flex;
  flex-direction: column;
  /* flex-wrap: wrap; */
  justify-content: center;
  align-content: center;
  align-items: center;
  /* border: 1px solid red; */
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 抽奖过程中选定样式 */
.list.change_in {
  color: #fff;
  background-color: #5e955d;
}
.list_t {
  width: 1.1rem;
  height: 0.8rem;
  font-size: 0;
}
.list_t image {
  width: 100%;
  height: 100%;
}
.list_b {
  width: 90%;
  height: 0.4rem;
  line-height: 0.4rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.32rem;
}
.listk {
  width: 1.7rem;
  height: 1.4rem;
  top: 51% !important;
}
/* 根据TOP */
.list:nth-child(1) {
  left: 50%;
  top: 50%;
  color: #fff;
  background-color: #1cbbb4;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.list.grey:nth-child(1) {
  background-color: #5f9ea0;
}
.list:nth-child(2),
.list:nth-child(3),
.list:nth-child(4) {
  top: 0;
}
.list:nth-child(6),
.list:nth-child(7),
.list:nth-child(8) {
  bottom: 0;
}
.list:nth-child(5),
.list:nth-child(9) {
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
/* 根据LEFT */
.list:nth-child(2),
.list:nth-child(8),
.list:nth-child(9) {
  left: 0;
}
.list:nth-child(3),
.list:nth-child(7) {
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.list:nth-child(4),
.list:nth-child(5),
.list:nth-child(6) {
  right: 0;
}
</style>

<style>
</style>