<template>
  <div class="activity">
    <div class="activity-detail" @click="modal.detail = true">
      <span class="activity-detail-text">活动详情</span>
      <svg-icon class-name="activity-detail-svg" icon-class="arrow" />
    </div>
    <cr-image
      class="activity-title"
      width=""
      height=""
      fit="cover"
      src="@/assets/images/home/biaoti@2x.png"
    />
    <div class="activity-desc">
      <p>参与投票即可抽取最高<span>18888</span>元红包</p>
      <p>芒果保险老用户专享</p>
    </div>
    <div class="activity-prize">
      <div class="activity-prize-pointer" @click="gameStart"></div>
    </div>
    <!-- <div class="activity-award">
      <div class="activity-award-container">
        <p class="Aa-container-congratulate">恭喜您已中奖</p>
        <p class="Aa-container-public">快关注「芒果保险」公众号</p>
        <p class="Aa-container-progress">查看红包进度</p>
        <cr-image
          class="Aa-container-qrcode"
          width=""
          height=""
          fit="cover"
          src="@/assets/images/home/qrcode.jpg"
        />
        <p class="Aa-container-focus">截图或长按保存二维码</p>
        <p class="Aa-container-focus">使用「微信」扫一扫即可关注</p>
      </div>
    </div> -->
    <div class="activity-swiper">
      <cr-swipe
        class="activity-swiper-container"
        :autoplay="3000"
        :show-indicators="false"
        vertical
      >
        <cr-swipe-item>
          <p>138****8888</p>
          <p>刚刚抽中了<span>18888</span>元红包</p>
        </cr-swipe-item>
        <cr-swipe-item>
          <p>138****8887</p>
          <p>刚刚抽中了<span>18888</span>元红包</p>
        </cr-swipe-item>
        <cr-swipe-item>
          <p>138****8886</p>
          <p>刚刚抽中了<span>18888</span>元红包</p>
        </cr-swipe-item>
      </cr-swipe>
    </div>
    <div class="activity-button" @click="modal.guide = true">立即抽奖 100%领钱</div>
    <div class="activity-withdrawal">
      <p>累计可提现红包</p>
      <p>5元</p>
    </div>
    <div class="activity-vote">
      <p class="activity-vote-title">投保“国民保·百万医疗险”的用户</p>
      <p class="activity-vote-desc">参与投票，即可抽取最高<span>18888</span>元可提现红包</p>
      <div class="activity-vote-body">
        <div class="Av-body-left">
          <cr-image
            class="Avb-left-image"
            width=""
            height=""
            fit="cover"
            src="@/assets/images/home/vote@2x.png"
          />
          <div class="Avb-left-text">
            <p>您会为家人购买</p>
            <p>百万医疗险吗？</p>
          </div>
        </div>
        <cr-button class="Av-body-right" @click="modal.vote = true">
          去投票
        </cr-button>
      </div>
    </div>
    <div class="activity-intro">
      <p>奖品使用说明</p>
      <p>1、“红包”仅限芒果保险用户可领取；</p>
      <p>2、领取“红包”的手机账号需与提现的手机账号保持一致；</p>
      <p>3、“红包”将通过“芒果保险”微信公众号发放至“微信零钱”；</p>
      <p>4、请查看“活动详情”，了解更详细的“红包”发放规则、发放时间等信息。</p>
    </div>
    <Modal v-model="modal.winning" type="winning"></Modal>
    <Modal v-model="modal.guide" type="guide"></Modal>
    <Modal v-model="modal.vote" type="vote"></Modal>
    <Modal v-model="modal.detail" type="detail"> </Modal>
  </div>
</template>
<script>
import Modal from "../modules/Modal";

export default {
  name: "Activity",
  components: {
    Modal
  },
  data() {
    return {
      isGoing: false,
      modal: {
        winning: false,
        guide: false,
        vote: false,
        detail: false
      }
    };
  },
  computed: {},
  methods: {
    gameStart() {
      this.$nextTick(() => {
        if (this.isGoing) return;
        this.isGoing = true;
        console.log("游戏开始");
        const turntable = document.querySelector(".activity-prize");
        const pointer = document.querySelector(".activity-prize-pointer");
        // 1. 计算旋转角度
        let rotateItemDeg = (3 * 360) / 6; // 每个item旋转角度, 第一个不用旋转
        let rotate = rotateItemDeg + 5 * 360;
        let rotateSpeed = ((rotateItemDeg / 360) * 1 + 5).toFixed(2);
        // 2. 重置转盘样式
        turntable.removeAttribute("style");
        pointer.removeAttribute("style");
        // 3. 保证下一次旋转动画生效
        setTimeout(() => {
          turntable.style.transform = `rotate(${rotate}deg)`;
          pointer.style.transform = `rotate(-${rotate}deg)`;
          pointer.style.transition = `transform ${rotateSpeed}s ease-out`;
          turntable.style.transition = `transform ${rotateSpeed}s ease-out`;
        }, 10);

        // 4. 动画结束，显示中奖结果，中奖结果如何显示，视实际情况而定
        setTimeout(() => {
          console.log("中奖了");
          this.isGoing = false;
          this.modal.winning = true;
        }, rotateSpeed * 1000);
      });
    }
  }
};
</script>
<style lang="less" src="./index.less" scoped></style>
