<template>
  <div>
    <!-- 许愿期 -->
    <div v-if="getTaskresp != 3">
      <div class="countback" v-if="this.wishStartTime < new Date().getTime() && new Date().getTime() < this.time " >
        <van-count-down :time="time - new Date().getTime()">
          <template #default="timeData">
            <span class="colon">开奖倒计时：</span>
            <span class="block">{{ timeData.days >= 10 ? timeData.days : '0' + timeData.days }}</span>
            <span class="colon">天</span>
            <span class="block">{{ timeData.hours >= 10 ? timeData.hours : '0' + timeData.hours }}</span>
            <span class="colon">时</span>
            <span class="block">{{ timeData.minutes >= 10 ? timeData.minutes : '0' + timeData.minutes }}</span>
            <span class="colon">分</span>
            <span class="block">{{ timeData.seconds >= 10 ? timeData.seconds : '0' + timeData.seconds }}</span>
            <span class="colon">秒</span>
          </template>
        </van-count-down>
      </div>


      <!-- 主页 -->
      <div class="wishMainPage" v-if="accordingType == 0">
        <div class="wishCardBtn" @click="accordingPop"></div>
         <div v-if="this.wishEndTime<new Date().getTime() && new Date().getTime()<showStartTime">活动许愿期已结束，请等待开奖</div>
        <!-- <div v-if="getTaskresp == 2">活动许愿期已结束，请等待开奖</div> -->
        <component
          ref="dataRef"
          v-for="(value, key, index) in componentsData"
          :key="index"
          :is="key"
          :templateData="templateData"
          :isTemplate="isTemplate"
          :styleData="value.styleData"
          :datas="value.datas"
          :keyData="value.keyData"
          :getTaskresp="getTaskresp"
          :wishStartTime="wishStartTime"
        ></component>
      </div>

      <!-- 许愿期我的许愿卡 -->
      <div class="wishCard" v-if="accordingType == 1">
        <div class="allWishCard">
          <ul>
            <li v-for="(item, index) in getTaskCardSendList" :key="index">
              <div class="img"></div>
              <p>编号：{{ item.cardId }}</p>
            </li>
          </ul>
        </div>

        <div class="backHome" v-lz-click="'27'" @click="backHome"></div>
      </div>
    </div>

    <!-- 开奖期中奖 -->
    <div v-if="accordingType == 0">
      <div v-if="getTaskresp == 3 && winPrize == 1">
        <div class="congratulations"></div>
        <wishGetPrizeInfo></wishGetPrizeInfo>
        <div class="wishCardBtn1" @click="accordingPop1"></div>
        <wishAward class="wishAward"></wishAward>
      </div>

      <!-- 开奖期未中奖 -->
      <div v-if="getTaskresp == 3 && winPrize == 0">
        <div class="wishCardBtn2" @click="accordingPop2"></div>
        <div class="sorry"></div>

        <wishAward class="wishAward" style="margintop: 0.5rem"></wishAward>
      </div>
    </div>
    <!-- 开奖期我的许愿卡 -->

    <div class="wishCard1" v-if="accordingType == 2">
      <div class="topExchange"></div>
      <div class="allWishCard1">
        <ul>
          <li v-for="(item, index) in getTaskCardSendList" :key="index">
            <div :class="{ img: item.winType, img1: !item.winType }"></div>
            <p>编号：{{ item.cardId }}</p>
           
          <div v-if="item.winType == 1">
              <div v-if='item.receive == 1' class="button"
              v-lz-click="'16'"
            @click="
              lingqu(
                item.prizeId,
                item.prizeType,
                item.position,
                item.prizeName,
                item.showImg,
                item.cardId,
                index
              )
            "
          >
          已领取
          </div>
          <div v-else class="button1"
          v-lz-click="'16'"
           @click="
              lingqu(
                item.prizeId,
                item.prizeType,
                item.position,
                item.prizeName,
                item.showImg,
                item.cardId,
                index
              )
            ">立即兑换</div>
          </div>
             
          </li>
        </ul>
      </div>

      <div class="backHome" v-lz-click="'27'" @click="backHome"></div>
    </div>

    <div class="wishCard" v-if="accordingType == 3">
      <div class="allWishCard2">
        <ul>
          <li v-for="(item, index) in getTaskCardSendList" :key="index">
            <div class="img"></div>
            <p>编号：{{ item.cardId }}</p>
          </li>
        </ul>
      </div>

      <div class="backHome" v-lz-click="'4'" @click="backHome"></div>
    </div>
  </div>
</template>

<script>
import { Toast, CountDown } from 'vant';
import apis1 from '../../../util/apis1.js';
let { getTaskType, getTaskCardSend, immediatelyDraw1, wishGetPrize } = apis1;
import getWishCard from '../../basisComponent/getWishCard/getWishCard.vue';
import wishAward from '../wishAward/wishAward.vue';
import wishPrizeList from '../../basisComponent/wishPrizeList/wishPrizeList.vue';
import wishGetPrizeInfo from '../../basisComponent/wishGetPrizeInfo/wishGetPrizeInfo.vue';

import countDown from '../../basisComponent/countdown/countdown.vue'; //倒计时

// 中奖弹窗
import { virtualWinningService, wishRealWinnersService } from '../../../util/comCreate.js';
export default {
  components: {
    getWishCard, 
    wishPrizeList,
    wishAward,
    wishGetPrizeInfo,
    countDown
  },
  props: ['styleData', 'datas', 'keyData', 'isTemplate', 'templateData'],
  data() {
    return {
      getTaskresp: 1, //活动状态
      winPrize: 0,
      accordingType: 0,
      componentsData: {},
      getTaskCardSendList: [],
      wishaddressId: 0,
      wishid: 0,
      time: '',

      drawTime: '', //开奖期
      showEndTime: '', //公示结束时间
      showStartTime: '', //公示开始时间
      wishEndTime: '', //许愿结束时间
      wishStartTime: '', //许愿开始时间
      startTime: ''
    };
  },
  // 父beforeCreated ->父created ->父beforeMounted ->子beforeCreated ->子created ->子beforeMounted ->子mounted -> 父mounted
  mounted() {
   
this.initDatas();
  },
  created() {
    this.componentsData = {
      //获取许愿卡片
      getWishCard: {
        styleData: {
          getWishCardStyle: {
            color: 'yellow'
          }
        }
      },
      //奖品列表
      wishPrizeList: {
        styleData: {
          wishPrizeList: {
            width: ' 7.45rem',
            height: ' 7.15rem',
            'background-image': ' url(//img10.360buyimg.com/imgzone/jfs/t1/161907/8/18009/23128/607510ebE602db26f/22610f44b149ac45.png)',
            'background-size': '100%',
            position: 'relative',
            display: 'flex',
            'justify-content': 'center'
          }
        }
      }
    };
  },
  methods: {
    setTime1(time1,time2){
      //time1  活动开始时间   time2 许愿开始时间
       if(new Date().getTime()<time2&&new Date().getTime()>time1){
              Toast('未到许愿时间')
          }
    },
    initDatas() {
      if (this.isTemplate) {
        if (this.templateData) {
          this.getTaskCardSendList = [
            {
              cardId: '00000000001',
              winType: 0,
              prizeId: '1381550043719766017',
              prizeType: '2'
            },
            {
              cardId: '00000000002',
              winType: 0,
              prizeId: '1381548413280555010',
              prizeType: '3'
            },
            {
              cardId: '00000000003',
              winType: 0,
              prizeId: '1381550043719766017',
              prizeType: '2'
            }
          ];

          var timeDiff = parseInt(this.templateData.wishHy.showStartTime - this.nowDate) + ''; //公示开始时间和现在时间差

          var timeDiff2 = parseInt(this.templateData.wishHy.draw.drawTime - this.nowDate) + ''; // 开奖时间与现在时间差

          var timeDiff3 = parseInt(this.templateData.activity.startTime - this.nowDate) + ''; //活动开始时间和现在时间差

          if (timeDiff >= 0) {
            //如果没有到公示时间
            if (timeDiff.length >= 9) {
              var timeDiff11 = 24 * 60 * 60 * 1000;
            } else {
              var timeDiff11 = timeDiff;
            }
          }

          //自动刷新(开奖时间)
          //20s
          if (timeDiff2 >= 0) {
            //许愿期未结束
            if (timeDiff2.length >= 9) {
              //许愿期未结束
              var timeDiff11 = 24 * 60 * 60 * 1000;
            } else {
              var timeDiff11 = timeDiff2;
            }
          }

          if (timeDiff3 >= 0) {
            //没有到开将期
            if (timeDiff3.length >= 9) {
              //许愿期未结束
              var timeDiff11 = 24 * 60 * 60 * 1000;
            } else {
              var timeDiff11 = timeDiff3;
            }
          }

          if (timeDiff >= 0 || timeDiff2 >= 0 || timeDiff3 >= 0) {
            //自动刷新(开奖时间)
            var a = setInterval(() => {
              //重新请求
              this.initDatas();
              clearInterval(a);
            }, parseInt(timeDiff11));
          }
        } else {
          this.getTaskCardSendList = [
            {
              cardId: '00000000001',
              winType: 0,
              prizeId: '1381550043719766017',
              prizeType: '2'
            },
            {
              cardId: '00000000002',
              winType: 0,
              prizeId: '1381548413280555010',
              prizeType: '3'
            },
            {
              cardId: '00000000003',
              winType: 0,
              prizeId: '1381550043719766017',
              prizeType: '2'
            }
          ];
        }
      } else {
        getTaskType(data => {
          this.getTaskresp = data.data.status;
          this.winPrize = data.data.winPrize;
          this.time = data.data.drawTime;

          (this.showEndTime = data.data.showEndTime), //公示结束时间
            (this.showStartTime = data.data.showStartTime), //公示开始时间
            (this.wishEndTime = data.data.wishEndTime), //许愿结束时间
            (this.wishStartTime = data.data.wishStartTime), //许愿开始时间
            (this.startTime = data.data.startTime);
           setTimeout(()=>{
              this.setTime1(this.startTime,this.wishStartTime)
        }, 1500);



          var timeDiff = parseInt(this.showStartTime - this.nowDate) + ''; //公示开始时间和现在时间差

          var timeDiff2 = parseInt(this.time - this.nowDate) + ''; // 开奖时间与现在时间差

          var timeDiff3 = parseInt(this.startTime - this.nowDate) + ''; //活动开始时间和现在时间差

          if (timeDiff >= 0) {
            //如果没有到公示时间
            if (timeDiff.length >= 9) {
              var timeDiff11 = 24 * 60 * 60 * 1000;
            } else {
              var timeDiff11 = timeDiff;
            }
          }

          //自动刷新(开奖时间)
          //20s
          if (timeDiff2 >= 0) {
            //许愿期未结束
            if (timeDiff2.length >= 9) {
              //许愿期未结束
              var timeDiff11 = 24 * 60 * 60 * 1000;
            } else {
              var timeDiff11 = timeDiff2;
            }
          }

          if (timeDiff3 >= 0) {
            //没有到开将期
            if (timeDiff3.length >= 9) {
              //许愿期未结束
              var timeDiff11 = 24 * 60 * 60 * 1000;
            } else {
              var timeDiff11 = timeDiff3;
            }
          }

          if (timeDiff >= 0 || timeDiff2 >= 0 || timeDiff3 >= 0) {
            //自动刷新(开奖时间)
            var a = setInterval(() => {
              //重新请求
              this.initDatas();
              clearInterval(a);
            }, parseInt(timeDiff11));
          }
        }),
          getTaskCardSend(data => {
            this.getTaskCardSendList = data.data;
          });
      }
    },
    //按钮点击
    accordingPop() {
      this.accordingType = 1;
      if (this.isTemplate) {
        if (this.templateData) {
        }
      } else {
        getTaskCardSend(data => {
          this.getTaskCardSendList = data.data;
        });
      }
    },
    accordingPop1() {
      this.accordingType = 2;

      getTaskCardSend(data => {
        this.getTaskCardSendList = data.data;
      });
    },
    accordingPop2() {
      this.accordingType = 3;
    },
    backHome() {
      this.accordingType = 0;
    },
    lingqu(prizeId, prizeType, position, prizeName, showImg, cardId, index) {
      if (this.getTaskCardSendList[index].receive == 1) {
        Toast('您已经领取过');
        return;
      } else {
        if (prizeType == 3) {
          //实物中奖
          immediatelyDraw1(prizeId, data => {
            this.wishaddressId = data.data.addressId;
            this.wishid = data.data.id;
            wishGetPrize(cardId, data => {
              wishRealWinnersService.create(position, prizeName, showImg, cardId, this.wishaddressId, this.wishid, submit => {
                this.initDatas();
                wishRealWinnersService.close();
              });
            });
          });
        } else {
          immediatelyDraw1(prizeId, data => {
            wishGetPrize(cardId, data => {
              // this.getTaskCardSendList[index].receive = 1;
              virtualWinningService.create(position, prizeName, showImg, cardId, submit => {
                this.initDatas();
                virtualWinningService.close();
              });
            });
          });
        }

        // immediatelyDraw1(prizeId, (data) => {
        //   if (data.data.result) {
        //     if (prizeType == 3) {
        //       //实物中奖
        //        wishRealWinnersService.create(
        //           position,
        //           prizeName,
        //           showImg,
        //           cardId,
        //           (submit) => {
        //             console.log(submit, "sub1111miqqaa111atq");
        //             wishRealWinnersService.close();
        //           }
        //         );
        //     } else {
        //       // debugger
        //       wishGetPrize(cardId, (data) => {
        //         this.getTaskCardSendList[index].receive = 1;
        //         virtualWinningService.create(
        //           position,
        //           prizeName,
        //           showImg,
        //           cardId,
        //           (submit) => {
        //             console.log(submit, "sub1111miaa111atq");
        //             virtualWinningService.close();
        //           }
        //         );
        //       });
        //     }
        //   } else {
        //     Toast("很遗憾，您与奖品擦肩而过");
        //   }
        // });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.wishMainPage {
  width: 100%;
  // height: 10rem;
  // background: yellowgreen;
  .wishCardBtn {
    width: 3.84rem;
    height: 1.02rem;
    background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/160962/23/18191/21599/607537c3Ede1d8fa1/7e226848d281bdd0.png);
    background-size: 100%;
    // position: absolute;
    // top: 6.3rem;
    margin-left: calc(50% - 3.84rem / 2);
  }
}
.wishCard {
  width: 100%;
  // height: 9rem;
}
.allWishCard {
  width: 7.45rem;
  height: 8.8rem;
  background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/158777/30/18868/27019/607541f3Edce70820/3f2bdc2000386cc1.png);
  background-size: 100%;
  display: flex;
  justify-content: center;
  position: relative;

  ul {
    width: 90%;
    height: 7rem;
    //  background: red;
    position: absolute;
    top: 1.5rem;
    overflow-y: scroll;

    li {
      width: 1.94rem;
      height: 3.5rem;
      float: left;
      margin-left: 0.225rem;

      .img {
        width: 1.94rem;
        height: 2.74rem;
        background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/157575/27/18892/66511/607541f3E7457229a/11decc1b61ad2855.png);
        background-size: 100%;
      }

      p {
        font-size: 0.2rem;
      }
    }
  }
}
.backHome {
  width: 3.84rem;
  height: 1.02rem;
  background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/158209/2/19342/20298/6075493fEe0226bca/dc6cd5e2ac48e65a.png);
  background-size: 100% 100%;
  // position: absolute;
  margin-left: calc(50% - 3.84rem / 2);
}
.wishAward {
  // margin-top: 3rem;
}
.wishCardBtn1 {
  width: 3.84rem;
  height: 1.02rem;
  background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/160962/23/18191/21599/607537c3Ede1d8fa1/7e226848d281bdd0.png);
  background-size: 100%;
  // position: absolute;
  // top: 5.5rem;
  margin-left: calc(50% - 3.84rem / 2);
  margin-top: 0.3rem;
  margin-bottom: 0.3rem;
}
.congratulations {
  width: 2.37rem;
  height: 0.29rem;
  background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/157404/35/18936/3084/60765198E4ce40ce5/caa4b398aec781c7.png);
  background-size: 100%;
  margin-left: calc(50% - 2.37rem / 2);
}
.allWishCard1 {
  width: 7.45rem;
  height: 10.46rem;
  background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/175246/25/3947/27853/60765f0aE37a66e1f/da8ad2decd85f0db.png);
  background-size: 100%;
  display: flex;
  justify-content: center;
  position: relative;

  ul {
    width: 90%;
    height: 8.5rem;
    position: absolute;
    top: 1.5rem;
    overflow-y: scroll;
    // background: yellow;

    li {
      width: 1.94rem;
      height: 3.9rem;
      float: left;
      margin-left: 0.225rem;
      // background: red;
      position: relative;
      margin-bottom: 0.35rem;

      .img {
        width: 1.94rem;
        height: 2.74rem;
        background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/169269/38/18405/50884/6076651cEc83b7a71/e75e8c45d22dff98.png);
        background-size: 100%;
      }

      .img1 {
        width: 1.94rem;
        height: 2.74rem;
        background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/157981/3/19248/49660/6076651cE23022d6b/90c6dd3023b05221.png);
        background-size: 100%;
      }

      p {
        font-size: 0.2rem;
      }
     .button {
        width: 1.75rem;
        height: 0.45rem;
        background: #878787;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        border-radius: .225rem;
        left: calc(50% - 1.75rem / 2);
        font-size: .24rem;
      }
      .button1 {
         width: 1.75rem;
        height: 0.45rem;
        background: #3a91f7;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        border-radius: .225rem;
        left: calc(50% - 1.75rem / 2);
        font-size: .24rem;
      }
    }
  }
}
.wishCard1 {
  width: 100%;
  height: 12rem;

  .topExchange {
    width: 4.37rem;
    height: 0.77rem;
    background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/163794/29/19960/6227/607f906cEac55bb8e/4f689836a27552fe.png);
    background-size: 100%;
    margin-left: calc(50% - 4.37rem / 2);
  }
}
.sorry {
  width: 4.06rem;
  height: 0.3rem;
  background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/176634/28/4356/4192/6077ef23Ec9181d39/e9de366aa7c53f08.png);
  background-size: 100%;
  margin-left: calc(50% - 4.06rem / 2);
}
.block {
  color: white;
  width: 1rem;
  height: 2rem;
  background: #5ea9f2;
}
.colon {
  color: #db782e;
}
.countback {
  width: 7.12rem;
  height: 0.46rem;
  background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/167649/21/18786/991/6077e666E6ae01b7d/26b8573d086ddf1b.png);
  background-size: 100%;
  position: absolute;
  left: calc(50% - 7.16rem / 2);
  top: 0.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wishCardBtn2 {
  width: 3.84rem;
  height: 1.02rem;
  background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/160962/23/18191/21599/607537c3Ede1d8fa1/7e226848d281bdd0.png);
  background-size: 100%;
  // position: absolute;
  // top: 5.5rem;
  margin-left: calc(50% - 3.84rem / 2);
  margin-top: 0.1rem;
  margin-bottom: 0.1rem;
}
.allWishCard2 {
  width: 7.45rem;
  height: 8.8rem;
  background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/158777/30/18868/27019/607541f3Edce70820/3f2bdc2000386cc1.png);
  background-size: 100%;
  display: flex;
  justify-content: center;
  position: relative;

  ul {
    width: 90%;
    height: 7rem;
    //  background: red;
    position: absolute;
    top: 1.5rem;
    overflow-y: scroll;

    li {
      width: 1.94rem;
      height: 3.5rem;
      float: left;
      margin-left: 0.225rem;

      .img {
        width: 1.94rem;
        height: 2.74rem;
        background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/157981/3/19248/49660/6076651cE23022d6b/90c6dd3023b05221.png);
        background-size: 100%;
      }

      p {
        font-size: 0.2rem;
      }
    }
  }
}
</style>
