<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" v-if="status !== 'HAS_WINNING'">
      <div class="activity-prize-pointer" @click="drawLottery"></div>
    </div>
    <div class="activity-award" v-if="status === 'HAS_WINNING'">
      <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" v-if="status !== 'HAS_WINNING'">
      <cr-swipe
        class="activity-swiper-container"
        :autoplay="3000"
        :show-indicators="false"
        vertical
      >
        <cr-swipe-item v-for="(item, index) in personList" :key="index">
          <p>{{ item.phone }}</p>
          <p>
            刚刚抽中了<span>{{ item.amount }}</span
            >元红包
          </p>
        </cr-swipe-item>
      </cr-swipe>
    </div>
    <div class="activity-draw" v-if="status !== 'HAS_WINNING'">
      <p class="activity-draw-tips" v-if="status === 'HAS_CHANCE'">您有1次抽奖机会</p>
      <div class="activity-draw-button" @click="drawLottery">立即抽奖 100%领钱</div>
    </div>
    <div class="activity-withdrawal">
      <p>累计可提现红包</p>
      <p>{{ withdrawalText }}</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_winning': status === 'HAS_WINNING' }, 'Av-body-right']"
          @click="drawLottery"
        >
          {{ voteButtonText }}
        </cr-button>
      </div>
      <div class="activity-vote-win" v-if="status === 'HAS_WINNING'">
        <p class="Av-win-time">{{ winningTimeText }}</p>
        <p class="Av-win-instruction">{{ winningIntroText }}</p>
      </div>
      <p></p>
    </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" @game-start="gameStart"></Modal>
    <Modal v-model="modal.detail" type="detail"> </Modal>
  </div>
</template>
<script>
import Modal from "../modules/Modal";
import localStorage from "@/service/localStorage";
import personList from "./constants";
import { getLotteryRecord, drawLottery } from "@/api/activity";
import { parseTime } from "@/service/utils";

export default {
  name: "Activity",
  components: {
    Modal
  },
  data() {
    return {
      record: {},
      isGoing: false,
      status: "HAS_NOT_CHANCE", // HAS_NOT_CHANCE: 无机会 HAS_CHANCE: 有机会 HAS_WINNING
      personList,
      modal: {
        winning: false,
        guide: false,
        vote: false,
        detail: false
      }
    };
  },
  created() {
    if (localStorage.get("mongoToken")) {
      this.getLotteryRecord();
    }
  },
  computed: {
    voteButtonText() {
      let text = "去投票";
      if (this.status === "HAS_WINNING") {
        text = "已中奖";
      } else if (this.status === "HAS_CHANCE") {
        text = "去抽奖";
      }
      return text;
    },
    withdrawalText() {
      return this.record.amount ? `${this.record.amount}元` : "0元";
    },
    winningTimeText() {
      return `获奖时间：${this.record.time}`;
    },
    winningIntroText() {
      return `奖品说明：您的奖品将在${parseTime(
        this.record.toTime,
        "{y}年{m}月{d}日"
      )}，保单成功续期交费后，发放至您的“微信零钱”中，请注意查收。`;
    }
  },
  methods: {
    async gameStart() {
      const result = await drawLottery();
      if (result.amount === 5) {
        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 + 4 * 360;
          let rotateSpeed = ((rotateItemDeg / 360) * 1 + 4).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-in-out`;
            turntable.style.transition = `transform ${rotateSpeed}s ease-in-out`;
          }, 10);

          // 4. 动画结束，显示中奖结果，中奖结果如何显示，视实际情况而定
          setTimeout(() => {
            console.log("中奖了");
            this.isGoing = false;
            this.modal.winning = true;
            this.updateRecord({ ...result, state: true });
          }, (+rotateSpeed + 1) * 1000);
        });
      }
    },
    async getLotteryRecord() {
      const record = await getLotteryRecord();
      this.updateRecord(record);
    },
    drawLottery() {
      if (this.status === "HAS_NOT_CHANCE") {
        this.modal.guide = true;
      } else if (this.status === "HAS_CHANCE") {
        this.modal.vote = true;
      }
    },
    updateRecord(record) {
      this.record = record;
      if (record?.state) {
        this.status = "HAS_WINNING";
      } else if (record?.cnt > 0) {
        this.status = "HAS_CHANCE";
      } else {
        this.status = "HAS_NOT_CHANCE";
      }
    }
  }
};
</script>
<style lang="less" src="./index.less" scoped></style>
