<template>
  <div
    class="jiugonggeDrawContentC"
    ref="jiugongge"
    @click.stop="styleClick('click', 'jiugongge')"
    @mousemove.stop="styleClick('mousemove', 'jiugongge')"
    @mouseout.stop="styleClick('mouseout')"
  >
    <div :style="styleData.drawPlateBg" :class="[isWebClick?'':'animated zoomInDown']">
      <div class="draw-plate" :style="backgroundDiv">
        <div v-for="(item, index) in prizeListData" :key="index">

          <div
            v-if="item.position % 2 == 0"
            :class="['lottery-unit11 lottery-unit lottery-unit-0 draw-item-0' + item.position,'active']"
            :style="styleData.drawItem1"
            style="padding: 0.1rem; box-sizing: border-box"
          >
            <!-- <img :src="showImg" alt="" class="prizeIcon" /> -->
            <div class="mask" v-if="index == current"></div>
            <i data-index="0" class="icon-common"><img :src="item.showImg" alt /></i>
            <div :style="styleData.drawItemName" class="draw-item-name draw-item-jf" v-if="item.showImg">{{ item.prizeName }}</div>
            <div :style="styleData.drawItemName1" class="draw-item-name1 draw-item-jf" v-if="!item.showImg">{{ item.prizeName }}</div>
          </div>

          <div
            v-else
            :style="styleData.drawItem"
            :class="['lottery-unit22 lottery-unit lottery-unit-0 active','draw-item-0' + item.position]"
            style="padding: 0.1rem; box-sizing: border-box"
          >
            <div class="mask" v-if="index == current"></div>
            <i data-index="0" class="icon-common"><img :src="item.showImg" alt /></i>
            <div :style="styleData.drawItemName" class="draw-item-name draw-item-jf" v-if="item.showImg">{{ item.prizeName }}</div>
            <div :style="styleData.drawItemName1" class="draw-item-name1 draw-item-jf" v-if="!item.showImg">{{ item.prizeName }}</div>
          </div>


          <div v-if="isWebClick" :style="styleData.drawStart">
            <span v-if="followShow">关注店铺</span>
            <div class="draw-start-main" v-else>
              <p class="draw-start-main-text">抽</p>
                <span class="draw-start-main-time-color">{{ restDrawCount }}</span>
                次机会
              </p>
            </div>
          </div>
          <div v-else :style="styleData.drawStart" v-lz-click="'12'" @click="startPlay">
            <!-- <span v-if="followShow">关注店铺</span>
            <div class="draw-start-main" v-else>
              <p class="draw-start-main-text">抽</p>
              <p class="draw-start-main-time">
                <span class="draw-start-main-time-color">{{ restDrawCount }}</span>
                次机会
              </p>
            </div> -->
          </div>
          <div class="draw-isdraw-bg" style="display: none"></div>
        </div>

          <div class="flower-container">
  <div class="flower flower-1"></div>
  <div class="flower flower-2"></div>
  <div class="flower flower-3"></div>
</div>
<div class="flower-cover"></div>

      </div>
      <div class="times-text" :style="styleData.drawInfo">
        <div class="f-tac draw-chance" style="margin-top: 0.54rem;margin-bottom: 0.15rem;"><div :style="styleData.drowChanceBtn" class="f-ib" @click="dialogMoreNew" v-if="moreShow"></div></div>
      当前还有
      <span class="times-text-span" :style="styleData.drawNum">{{ restDrawCount }}</span>
      次抽奖机会
      <br />

    </div>
    </div>
    <div class="heart-container">
            <div class="heart"></div>
          </div>
    <div class="pigeon">
<div class="bird">
</div>
<div class="hole">
      <div class=" thick"></div>
      <div class=" thin"></div>
    </div>
</div>
    <div class="f-tac seeShiwuPrize">
      <div
        class="inline-block seeShiwuPrizes"
        style="
          line-height: 0.3rem;
          color: rgb(255, 255, 255);
          font-size: 0.2rem;
        "
      ></div>
    </div>
  </div>
</template>
<script>
import buttonCom from '../../basisComponent/button/buttonCom.vue';
import dialogMore from '../../basisComponent/button/dialogMore.vue';
// import {
//   PrizeResultPopComService,
//   NoPrizeResultPopComService,
//   TaskPopComService,
//   SharePopComService,
//   ShopPopComService,
//   FollowSkuPopComService,
// } from "../../../util/comCreate.js";
import { NoPrizeResultPopComService, PrizeResultPopComService, TaskPopComServiceNew, FollowSkuPopNewComService, ShopPopComNewService } from '../../../util/hdzxtcomCreate.js';
import apis1 from '../../../util/apis1.js';
import { noDrawPosition } from '../../../js/luckyDraw';
let { drawPrize, startDraw, jiugonggeRequest, followShop, shareTask, lotteryCenter } = apis1;
import store from '../../../store/store.js'; //砍价客态
import {removeUrlShareUserId} from "../../../util/tools";


export default {
  props: ['isTemplate', 'datas', 'styleData', 'keyData', 'templateData', 'isWebClick', 'modifyContent'],
  components: {
    buttonCom,
    dialogMore
  },
  data() {
    return {
      current: -1, // 当前转动到哪个位置，第一次起点位置0,对应页面item1位置
      count: 8, // 总共有多少个位置
      times: 0, // 转动跑格子次数,
      cycle: 10, // 转动基本次数：即至少需要转动多少次再进入抽奖环节
      speed: 500, // 初始转动速度
      lampShow: false, //开始抽奖，灯光闪烁
      followShow: false, //关注店铺
      moreShow: false, //更多任务按钮
      showShare: false, //
      showFoll: false,
      showBuy: false,
      isStartPlay: false,
      noPrizeList: [],
      pointFoll: 1, // pop页显示分享任务
      pointShare: 3, // pop页显示关注任务
      pointBuy: 2, // pop页显示购买商品任务
      timer: 0, // 转动定时器
      prize: 0, // 中奖位置，接口返回
      restDrawCount: 0,
      rotNum: 0, // 旋转圈数基数
      time: 0, // 旋转时间
      endTime: '',
      startDisabled: false,
      fenxiang: false,
      task: {}, //任务列表
      task1: {}, //任务列表
      showImg: '',
      styleDataOld: {},
      prizeListData: [
        {
          position: 1,
          showImg: '',
          angle: 0,
          prizeName: '谢谢参与'
        },
        {
          position: 2,
          showImg: '',
          angle: 0,
          prizeName: '谢谢参与'
        },
        {
          position: 3,
          showImg: '',
          angle: 0,
          prizeName: '谢谢参与'
        },
        {
          position: 4,
          showImg: '',
          angle: 0,
          prizeName: '谢谢参与'
        },
        {
          position: 5,
          showImg: '',
          angle: 0,
          prizeName: '谢谢参与'
        },
        {
          position: 6,
          showImg: '',
          angle: 0,
          prizeName: '谢谢参与'
        },
        {
          position: 7,
          showImg: '',
          angle: 0,
          prizeName: '谢谢参与'
        },
        {
          position: 8,
          showImg: '',
          angle: 0,
          prizeName: '谢谢参与'
        }
      ],
      backgroundDiv: {
        backgroundImage: ''
      },
      prizeResultData: {
        styleData: {},
        datas: {},
        keyData: {
          prizeUrl: 'showImg',
          prizeName: 'prizeName',
          prizeType: 'prizeType',
          priceInfo: 'priceInfo',
          discountType: 'discountType',
          couponType: 'couponType'
        }
      }
    };
  },
  computed: {
    contractFile() {
      return store.state.fenxiang;
    }
  },
  watch: {
    contractFile: {
      immediate: true,
      handler: function(newval) {
        console.log('222222', newval);
        if (newval) {
          let taskShareData = JSON.parse(sessionStorage.getItem('taskShareData'));
          let skuid = '';
          if (taskShareData.taskType == 9) {
            skuid = taskShareData.skuInfoVO[0].skuId;
          }
          shareTask(taskShareData.taskId, skuid, data => {
            store.commit('setFenXiang', false);
            this.initData();
          });
        }
      }
    }
  },
  created() {
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    console.log(this.styleData,'styleDatastyleDatastyleData');
    var golbalPlateStyle = 2;

    //监听是否需要重新请求接口
    this.publicData.$on('notifyCallBack', ress => {
      if (ress == 'updata') {
        this.initData();
      }
    });
    this.publicData.$on('xhyFollowSkuTask', xhyFollowSkuTask => {
      if (xhyFollowSkuTask) {
        this.initData();
      }
    });
  },
  mounted() {
    this.initData();
  },
  methods: {
    //点击可修改位置的方法
    styleClick(type, refName) {
      if (this.isWebClick) {
        //传值给B端
        let byValue = {
          modifyContent: this.modifyContent,
          refName: refName,
          styleData: this.styleData,
          styleDataOld: this.styleDataOld,
          c_this: this,
          isCustomSwitching: this.isCustomSwitching
        };
        this.$emit('opertaionCom', type, byValue);
      }
    },
    dialogMoreNew() {
      console.log('ksksksk');
      if (this.isTemplate) {
        this.$toast('活动预览，仅供查看');
        return;
      }
      const self = this;
      let actStatus = sessionStorage.getItem('actStatus');
      if (actStatus == 2) {
        this.$toast('活动已结束');
        return;
      }
      if (actStatus == 1) {
        this.$toast('活动未开始');
        return;
      }
      TaskPopComServiceNew.create(
        '非常遗憾，您与大奖擦肩而过~',
        this.isTemplate,
        this.showShare,
        this.showFoll,
        this.showBuy,
        this.restDrawCount,
        this.pointFoll,
        this.pointShare,
        this.pointBuy,
        this.task,
        this.styleData,
        this.datas,
        (submit, taskType) => {
          console.log('cccc' + submit);
          console.log(taskType, 'lysssss');
          console.log('cccc121212' + taskType);
          TaskPopComServiceNew.close();
          this.initData();

        }
      );
    },
    async getLotteryCenter(isCallBack) {
      await lotteryCenter(taskDatas => {
        console.log(taskDatas, '任务数据');
        // this.getDrawPrize();
        this.publicData.$emit('taskCallBackData', taskDatas.data);
        if (taskDatas.data.taskList.length > 0) {
          this.task = taskDatas.data.taskList;
        }
        console.log(taskDatas,'taskDatastaskDatastaskDatas')
        setTimeout(() => {
            if (taskDatas.data.status == 1) {
              this.$toast("助力成功");
            } else if (taskDatas.data.status == 2) {
              this.$toast("已助力");
            } else if (taskDatas.data.status == 3) {
              this.$toast("助力失败");
            } else if (taskDatas.data.status == 4) {
              this.$toast("自己不能给自己助力！");
            } else if (taskDatas.data.status == 5) {
              this.$toast("您已为其他好友助过力了~");
            }
          }, 500);
          setTimeout(() => {
           if(store.state.shareUserId){
              removeUrlShareUserId()
           }
          }, 800);
      });
    },

    followSku(item) {
      var data = item;
      sessionStorage.setItem('taskShare', 'taskShare');
      FollowSkuPopNewComService.create(data, this.restDrawCount, this.styleData, submit => {
        console.log('cccc' + submit);
        sessionStorage.setItem('taskShare', '');
        FollowSkuPopNewComService.close();
        // this.restDrawCount = this.restDrawCount + submit;
      });
    },
    openShare() {
      // var data;
      // var title = "";
      // if (this.task.shareSkuRule) {
      //   data = this.task.shareSkuRule;
      //   title = "分享指定商品";
      // } else if (this.task.shareShopRule) {
      //   data = this.task.shareShopRule;
      //   title = "分享指定店铺";
      // } else {
      //   data = this.task.shareActiveRule;
      //   title = "分享指定活动";
      // }

      sessionStorage.setItem('taskShare', 'taskShare');
      // sessionStorage.setItem("taskShareTitle", title);
      // sessionStorage.setItem("taskShareData", JSON.stringify(data));
      // this.restDrawCount = this.restDrawCount++;
      // this.initData();
      // SharePopComService.create(this.isTemplate,title, data, this.restDrawCount, (submit) => {
      //   console.log("cccc" + data);
      //   sessionStorage.setItem("taskShare", "");
      //   this.restDrawCount = this.restDrawCount + submit;
      //   SharePopComService.close();
      // });
    },

    openShop(taskType) {
      // console.log(taskType, "taskType");
      for (var i = 0; i < this.task.length; i++) {
        if (taskType == this.task[i].taskType) {
          var data = this.task[i];
        }
      }

      if (taskType.taskType === 22) {
        // var data = taskType;
        sessionStorage.setItem('taskShare', 'taskShare');
        ShopPopComNewService.create(data, this.restDrawCount, this.styleData, submit => {
          console.log('222222222cccc' + submit);
          sessionStorage.setItem('taskShare', '');
          ShopPopComNewService.close();
          this.restDrawCount = this.restDrawCount + submit;
        });
      } else {
        console.log(data, 'this.task');

        // var data = this.task.taskOrderWaresVO;

        sessionStorage.setItem('taskShare', 'taskShare');
        ShopPopComNewService.create(data, this.restDrawCount, this.styleData, submit => {
          console.log('22222222cccc' + submit);
          sessionStorage.setItem('taskShare', '');
          ShopPopComNewService.close();
          this.restDrawCount = this.restDrawCount + submit;
        });
      }
    },

    async initData() {
      var datasAll = this.templateData;
      if (this.isTemplate == true) {
        if (this.isWebClick) {
          this.moreShow = true;
        }
        if (datasAll) {
          console.log(datasAll, 44444444);
          var prizeList = datasAll.draw.prizeList;
          if (prizeList.length > 0) {
            for (var i = 0; i < this.prizeListData.length; i++) {
              for (var j = 0; j < prizeList.length; j++) {
                if (prizeList[j].position == this.prizeListData[i].position) {
                  this.prizeListData[i] = prizeList[j];
                }
              }
            }
          }
          if (datasAll.activeConditions) {
            if (datasAll.activeConditions.involvementFlag == 1) {
              this.followShow = true;
            }
          }
          if (datasAll.basicTask.taskList.length > 1) {
            this.moreShow = true;
          }
        }
        for (var i = 0; i < this.prizeListData.length; i++) {
          this.prizeListData[i].angle = 0;
        }
        this.$set(this.prizeListData);
        if(datasAll.basicTask.taskList.length > 0){
          datasAll.basicTask.taskList.forEach(ele=>{
            if(ele.taskType == '20' && ele.rule && ele.rule.freeChargeRule){
              this.restDrawCount = ele.rule.freeChargeRule.sendNum || 0;
            }
          })
        }else{
          this.restDrawCount = 0;
        }
      } else {
        sessionStorage.setItem('taskShare', '');
        await jiugonggeRequest(mainDatas => {
          console.log(mainDatas);
          this.count = mainDatas.data.count;
          if (mainDatas.data.involvementFlag == 1) {
            this.followShow = true;
          }
          if(mainDatas.data.showWinInfo == '0' || mainDatas.data.showWinInfo == '1'){
              this.publicData.$emit('showWinInfo', mainDatas.data.showWinInfo);
            }
          if (mainDatas.data.taskList&&mainDatas.data.taskList.length > 0) {
            this.moreShow = true;
            this.task = mainDatas.data.taskList;
            this.getLotteryCenter();
          }
        });

        //请求接口
        drawPrize(initdatas => {
          console.log(initdatas);

          let prizeList = initdatas.data.prizeInfo;
          this.restDrawCount = initdatas.data.drawNumber;
          if (prizeList.length > 0) {
            for (var i = 0; i < this.prizeListData.length; i++) {
              for (var j = 0; j < prizeList.length; j++) {
                if (prizeList[j].position == this.prizeListData[i].position) {
                  this.prizeListData[i] = prizeList[j];
                }
              }
            }
          }
          console.log(this.noPrizeList);
          this.$set(this.prizeListData);
        });
      }
    },

    //点击开始抽奖
    move() {
      console.log(this.isTemplate, '2222222222222222222');
      if (this.isTemplate) {
        this.$toast('活动预览，仅供查看');
        return;
      }
      const self = this;
      let actStatus = sessionStorage.getItem('actStatus');
      if (actStatus == 2) {
        this.$toast('活动已结束');
        return;
      }
      if (actStatus == 1) {
        this.$toast('活动未开始');
        return;
      }
      if (this.times != 0 && this.isStartPlay) {
        this.$toast('正在抽奖中，请勿重复点击');
        return;
      }
      if (this.restDrawCount == 0) {
        this.$toast('您没有抽奖机会了，点击"获得更多抽奖机会"吧');
        return;
      }

      if (this.times != 0 && this.isStartPlay) {
      } else {
        if (this.followShow) {
          followShop(initdatas => {});
        }
        startDraw(initDatas => {
          console.log('中奖信息', initDatas);
          if (initDatas.resp_code == 50009) {
            this.$toast('活动已结束');
            this.isStartPlay = false;
            return;
          }

          if (initDatas.resp_code != 0) {
            this.isStartPlay = false;
          }

          const self = this;
          this.speed = 100; //每次抽奖速度初始化为200

          console.log('initDatas.data', initDatas.data);
          if (initDatas.data) {
            // 奖品id没有匹配上的时候
            var noSelect = true;
            for (var i = 0; i < this.prizeListData.length; i++) {
              if (this.prizeListData[i].id == initDatas.data.prizeInfoId) {
                console.log(self.prizeListData);
                self.pIndex = i;
                console.log('中奖id', self.pIndex);
                this.prize = self.prizeListData[self.pIndex].position - 1;
                this.startRoll(self.pIndex, initDatas.data); //执行抽奖
                // 拿到相应的角度调旋转接口

                console.log('奖品id', self.pIndex);
                this.isStartPlay = false;
                noSelect = false;
                break;
              }
            }
            if (noSelect) {
              for (var i = 0; i < self.prizeListData.length; i++) {
                if (!self.prizeListData[i].prizeType) {
                  this.prize = self.prizeListData[i].position - 1;
                }
              }
              noDrawPosition('rotaryTable', 'prizeListData', this, position => {
                this.prize = self.prizeListData[position].position - 1;
                this.startRoll('未中奖');
              });

              this.isStartPlay = false;
            }
          } else {
            for (var i = 0; i < self.prizeListData.length; i++) {
              if (!self.prizeListData[i].prizeType) {
                this.prize = self.prizeListData[i].position - 1;
              }
            }
            noDrawPosition('rotaryTable', 'prizeListData', this, position => {
              this.prize = self.prizeListData[position].position - 1;
              this.startRoll('未中奖');
            });
          }
          this.restDrawCount = this.restDrawCount - 1;
        });
      }
    },

    // 开始转动
    startRoll(tope, hope) {
      this.times += 1; // 转动次数
      this.time += this.speed;
      this.oneRoll(); // 转动过程调用的每一次转动方法，这里是第一次调用初始化
      // 如果当前转动次数达到要求 && 目前转到的位置是中奖位置
      if (this.times > this.cycle + 10 && this.prize === this.current) {
        const self = this;
        if (tope == '未中奖') {
          setTimeout(() => {
            self.fulfillHandle('未中奖');
          }, 1000);
        } else {
          setTimeout(() => {
            self.fulfillHandle(self.prizeListData[tope], hope);
          }, 1000);
          console.log(self.prizeListData, hope);
        }
      } else {
        if (this.times < this.cycle - 20) {
          this.speed -= 4; // 加快转动速度
        } else {
          this.speed += 10; // 抽奖即将结束，放慢转动速度
        }
        this.timer = setTimeout(() => {
          this.startRoll(tope, hope);
        }, this.speed); //开始转动
      }
    },

    // 每一次转动
    oneRoll() {
      let index = this.current; // 当前转动到哪个位置
      const count = 8; // 总共有多少个位置
      index += 1;
      if (index > count - 1) {
        index = 0;
      }
      this.current = index;
      console.log('a' + this.current);
    },

    // 点击开始,请求接口抽奖
    async startPlay() {
      if (this.isTemplate) {
        this.$toast('活动预览，仅供查看');
        return;
      }

      let actStatus = sessionStorage.getItem('actStatus');
      console.log(actStatus);
      if (actStatus == 2) {
        this.$toast('活动已结束');
        return;
      }
      if (actStatus == 1) {
        this.$toast('活动未开始');
        return;
      }
      if (this.times != 0) {
        this.$toast('正在抽奖中，请勿重复点击');
        return;
      }
      if (this.restDrawCount == 0) {
        this.$toast('您没有抽奖机会了，点击 "获得更多抽奖机会" 吧');
        return;
      }
      this.move();
      // console.log('1231237')
      this.isStartPlay = true;
    },
    //得奖后的处理
    fulfillHandle(prizeData, initDatas) {
      this.isStartPlay = false;
      var activityType = sessionStorage.getItem('activityType');
      this.isShowRotary = this.datas.isShowRotary == true ? true : false;
      console.log('self');
      if (prizeData == '未中奖') {
        NoPrizeResultPopComService.create(this.styleData, submit => {
          NoPrizeResultPopComService.close();
          clearTimeout(this.timer); // 清除转动定时器
          this.times = 0; // 转动跑格子次数初始化为0，可以开始下次抽奖
          this.current = -1;
          this.publicData.$emit('isNotyFiceWinnerReorrd', true, this.isTemplate);
        });
      } else {
        //中奖
        this.prizeResultData.datas = prizeData;
        PrizeResultPopComService.create(this.prizeResultData, initDatas, this.styleData, submit => {
          PrizeResultPopComService.close();
          clearTimeout(this.timer); // 清除转动定时器
          this.times = 0; // 转动跑格子次数初始化为0，可以开始下次抽奖
          this.current = -1;
          this.publicData.$emit('isNotyFiceWinnerReorrd', true, this.isTemplate);
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.times-text{
  color:#000;
  font-size:0.36rem;
  &-span{
    color:#000;
  }
}
.draw-start-main{
  &-text{
    font-size:0.5rem;
    font-weight:bold;
    color:#ad2a07;
  }
  &-time{
    font-size:0.2rem;
    color:#ad2a07;
  }
  &-time-color{
    margin-top:0.05rem;
    font-size:0.2rem;
    color:#ad2a07;
    text-align:center;
    line-height:0.33rem;
  }
}
.jiugonggeDrawContentC {
  text-align: center;
  .draw-start span {
    color: #fff;
    font-size: 0.2rem;
    position: absolute;
    bottom: 0.3rem;
    left: 50%;
    margin-left: -0.45rem;
  }
  .active {
    .mask {
      width: 1.75rem;
      height: 1.75rem;
      position: absolute;
      left: 0;
      bottom: 0;
      border-radius: 10px;
      background: rgba(0, 0, 0, 0.5);
      opacity: 0.6;
    }
  }

  // .draw-plate-bg {
  //   width: 7.3rem;
  //   height: 7.5rem;
  //   margin: 0 auto;
  //   background-image: url(https://img10.360buyimg.com/imgzone/jfs/t1/189192/18/19329/105400/611fa4bcEadb99c34/941d16c18c949bde.png);
  //   background-size: 100%;
  //   position: relative;
  //   top: -1rem;
  //   z-index: 1;
  // }
  .draw-plate {
    width: 5.5rem;
    height: 5.5rem;
    display: inline-block;
    position: relative;
    top: 0.5rem;
    z-index: 2;
  }
  .animated {
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-duration: 1s;
    animation-fill-mode: both;
  }
  .zoomInDown {
    -webkit-animation-name: zoomInDown;
    animation-name: zoomInDown;
  }

  .draw-item.active {
    z-index: 8;
  }

  .draw-item-01 {
    top: 0.05rem;
    left: 0.05rem;
    background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/164568/31/24499/1742/6295d6bbE2a27f40f/a3b00d6bf1656217.png') !important;
  }
  .draw-item-02 {
    top: 0.05rem;
    left: 1.9rem;
  }
  .draw-item-03 {
    top: 0.05rem;
    left: 3.7rem;
    background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/164568/31/24499/1742/6295d6bbE2a27f40f/a3b00d6bf1656217.png') !important;
  }
  .draw-item-04 {
    top: 1.85rem;
    left: 3.7rem;
  }
  .draw-item-05 {
    top: 3.7rem;
    left: 3.7rem;
    background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/164568/31/24499/1742/6295d6bbE2a27f40f/a3b00d6bf1656217.png') !important;
  }
  .draw-item-06 {
    top: 3.7rem;
    left: 1.9rem;
  }
  .draw-item-07 {
    top: 3.7rem;
    left: 0.05rem;
    background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/164568/31/24499/1742/6295d6bbE2a27f40f/a3b00d6bf1656217.png') !important;
  }
  .draw-item-08 {
    top: 1.85rem;
    left: 0.05rem;
  }
  // .draw-start {
  //   position: absolute;
  //   top: 2.26rem;
  //   left: 2.34rem;
  //   width: 1.64rem;
  //   height: 1.69rem;
  //   background: url(https://img10.360buyimg.com/imgzone/jfs/t27337/183/2617377802/1907/52f64fef/5c05f07cNb3d7c12b.png)
  //     no-repeat;
  //   background-size: 100%;
  // }
  .draw-isdraw-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 0.35rem;
  }
  .draw-item-mtext {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    line-height: 1.69rem;
    font-size: 0.24rem;
    color: #333;
  }
  // .draw-item {
  //   position: absolute;
  //   z-index: 2;
  //   width: 1.64rem;
  //   height: 1.69rem;
  //   background: url(https://img10.360buyimg.com/imgzone/jfs/t17275/289/374056995/546/c3d782c8/5a7126dcNb5a90721.png)
  //     no-repeat;
  //   background-size: 100%;
  // }
  .prizeIcon {
    width: 0.5rem;
    height: 0.5rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0.5rem;
  }

  img {
    border: 0;
    max-width: 100%;
  }
  .icon-jifen {
    background: url(//img10.360buyimg.com/imgzone/jfs/t1/82425/7/320/5494/5ce7a2dbE0cf643aa/d798e181a8e294af.png) no-repeat;
    background-size: 100%;
  }
  .icon-common {
    display: block;
    width: 0.9rem;
    height: 0.66rem;
    margin: 0 auto 0;
    margin-top: 0.02rem;
  }
  .iconImg {
  }
  // .draw-info {
  //   color: #424d58;
  //   text-align: center;
  //   font-size: 0.3rem;
  //   margin-top: -0.8rem;
  // }
  .draw-item-name {
    margin-top:0.35rem;
    font-size: 0.20rem;
    color: #000000 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .draw-item-name1 {
    position: absolute;
    width: 90%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.20rem;
    color: #000000 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .draw-info-drawTime {
    width: 1.16rem;
    height: 1.16rem;
    margin-left: 0.2rem;
    border-radius: 50%;
    background: #fc3c2c;
    font-size: 0.6rem;
    color: #fff;
    text-align: center;
    line-height: 1.16rem;
    margin-top: 0.1rem;
  }
  .lookDrawCondition {
    color: #fff;
    font-size: 0.24rem;
    z-index: 2;
    margin: -0.6rem auto 0;
    text-align: center;
  }
  .seeShiwuPrizes {
    color: #000 !important;
    line-height: 0.3rem;
  }
  // .draw-chance .drow-chance-btn {
  //   position: relative;
  //   overflow: hidden;
  //   width: 3.5rem;
  //   height: 1rem;
  //   line-height: 0.72rem;
  //   background-image: url(https://img10.360buyimg.com/imgzone/jfs/t20218/109/472562343/14078/12e90d2b/5b0e256eNfd19da8f.png);
  //   background-size: 100%;
  //   background-repeat: no-repeat;
  // }
  .f-tac {
    text-align: center;
  }
  .f-ib {
    display: inline-block;
    vertical-align: middle;
  }

  /* 爱心容器 */
.heart-container {
  position: absolute;
  width: 1.2rem; /* 爱心容器的宽度 */
  height: 3rem; /* 爱心容器的高度 */
  overflow: hidden; /* 隐藏溢出部分 */
  margin-left: 6.2rem;
  margin-top: -8.5rem;
}

/* 爱心样式 */
.heart {
  position: absolute;
  width: 0.83rem; /* 初始宽度 */
  height: 0.8rem; /* 初始高度 */
  background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/163616/20/34549/7907/659cbc10F57161e20/c8714bf1328f5a6e.png); /* 可以替换成你的爱心图片 */
  background-size: 100% 100%;
  // transition: width 1s, height 1s, opacity 1s; /* 过渡效果，1秒钟 */
  animation: moveUp 3s ease-in-out infinite; /* 上升动画，持续3秒钟，线性变化 */
  opacity: 0; /* 完全透明 */
}

/* 上升动画关键帧 */
@keyframes moveUp {
  0% {
    top: 100%; /* 初始位置在底部 */
    opacity: 0; /* 完全可见 */
  }
  10% {
    top: 100%; /* 初始位置在底部 */
    opacity: 1; /* 完全可见 */
  }
  50% {
    opacity: 0.5; /* 透明度降低到一半 */
  }
  100% {
    top: 0; /* 上升至顶部 */
    width: 0.4rem; /* 最终宽度 */
    height: 0.3rem; /* 最终高度 */
    opacity: 0; /* 完全透明 */
  }
}


/* 花朵容器 */
.flower-container {
    position: absolute;
    width: 4rem;
    height: 3rem;
    z-index: 5;
    top: 3.7rem;
    left: -2.1rem;
    transform-origin: 3.2rem 2.55rem;
    transform: scale(0.8) rotateZ(-8deg);
}
.flower-cover{
  position: absolute;
  background: url(//img10.360buyimg.com/imgzone/jfs/t1/100843/14/46572/44538/65a4ff6dF6c84d45f/9543736500b58827.png) no-repeat;
  z-index: 6;
  background-size: 100% 100%;
  left: 0.18rem;
  top: 6.17rem;
  width: 2.04rem;
  height: 2.1rem;
}
/* 花朵样式 */
.flower {
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  transition: transform 2s ease-in-out; /* 过渡效果 */
}

/* 每朵花的不同样式 */
.flower-1 {
  width: 2.02rem;
  height: 2.86rem;
  top: 30%;
  left: 35%;
  background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/236472/3/11709/11657/659cbc12Fc3d87245/0e92bf821fcff3d0.png); /* 花朵1的图片 */
  background-size: contain;
  transform-origin:center;
}

.flower-2 {
  width: 2.22rem;
  height: 2.61rem;
  top: 30%;
  left: 30%;
  background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/236802/18/11227/11934/659cbc11Fa5241711/15f4692d97e95957.png); /* 花朵2的图片 */
  background-size: contain;
  transform-origin:bottom;
}

.flower-3 {
  width: 1.82rem;
  height: 3.17rem;
  top: 10%;
  left: 49%;
  background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/229465/19/10682/12008/659cbc11F00f0c432/2b14cd6ba73f57b4.png); /* 花朵3的图片 */
  background-size: contain;
  transform-origin:bottom;
}

/* 每朵花的摇摆动画 */
@keyframes sway-1 {
  0% { transform: translateX(0) rotate(0deg); }
  25% { transform: translateX(-10px) rotate(-10deg); }
  50% { transform: translateX(10px) rotate(10deg); }
  75% { transform: translateX(-5px) rotate(-5deg); }
  100% { transform: translateX(0) rotate(0deg); }
}

@keyframes sway-2 {
  0% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-10px) rotate(10deg); } /* 减小摆动幅度 */
  50% { transform: translateY(10px) rotate(5deg); } /* 减小摆动幅度 */
  75% { transform: translateY(-5px) rotate(5deg); } /* 减小摆动幅度 */
  100% { transform: translateY(0) rotate(0deg); }
}

@keyframes sway-3 {
  0% { transform: translateX(0) rotate(0deg); }
  25% { transform: translateX(-5px) rotate(-10deg); }
  50% { transform: translateX(5px) rotate(10deg); }
  75% { transform: translateX(-3px) rotate(5deg); }
  100% { transform: translateX(0) rotate(0deg); }
}

/* 给每朵花应用不同的随机旋转动画 */
.flower-1 {
  animation: sway-1 4s infinite alternate ease-in-out;
}

.flower-2 {
  animation: sway-2 5s infinite alternate ease-in-out;
}

.flower-3 {
  animation: sway-3 3s infinite alternate ease-in-out;
}
.pigeon{
  width: 4.37rem;
    height: 3.89rem;
    position: absolute;
    left: 3.13rem;
    top: 10.5rem;
    z-index: 99;
}
.bird {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;

    background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/225716/22/11432/52042/659e6241F0d594ec6/ca072bd1eb1a1198.png); /* 鸽子的图片 */
  background-size: contain;
    z-index: 10;

}



.hole {
  position: absolute;
    background: rgb(239,187,218);
    width: 0.63rem;
    height: 0.6rem;
    left: 1rem;
    top: 1.3rem;
    overflow: hidden;
    z-index: 3;
}

.thick {
  height: 100%;
    width: 0.13rem;
    background: #fff;
    opacity: 0.5;
    position: absolute;
    left: 0rem;
    top: 0;
    animation: thick 2s linear infinite;
}

.thin {
  height: 100%;
    width: 0.07rem;
    background: #fff;
    opacity: 0.5;
    position: absolute;
    margin-left: -0.17rem;
    top: 0;
    animation: thin 2s linear infinite;
}

@keyframes thick {
  0% {
    left: -30%; /* 开始位置在最左边 */
  }
  100% {
    left: 110%; /* 结束位置在最右边（总宽度的负值） */
  }
}
@keyframes thin {
  0% {
    left: -10%; /* 开始位置在最左边 */
  }
  100% {
    left: 110%; /* 结束位置在最右边（总宽度的负值） */
  }
}
}
</style>
