<template>
  <div id="active-detail">
    <img class="bg" src="../../../public/img/activeDetail_bg.jpg" alt="bg" />
    <template v-if="type === 'coupon'">
      <div class="coupon">
        <div class="user-icon">用户头像</div>
        <p class="slogan">送你限量优惠券，手慢无～</p>
        <div class="coupon-content">
          <img src="../../../public/img/coupon.png" alt="coupon_bg" />
          <div class="content">
            <div class="money">10元</div>
            <div class="split">
              <img src="../../../public/img/split.png" alt="split" />
            </div>
            <div class="other">
              <p>满50元可用</p>
              <p>有效期：09.09-09.10</p>
              <p>全店通用</p>
            </div>
          </div>
        </div>
        <div class="btn">立即领取</div>
      </div>
    </template>
    <template v-if="type === 'wheel'">
      <div class="wheel-container">
        <p class="title">幸运大抽奖！</p>
        <div class="wheel">
          <div class="wheel-point" @click="Start_Game">Start</div>
          <img src="../../../public/img/wheel.png" alt="wheel" />
          <div
            class="wheel-bg"
            :class="{freeze: freeze}"
            :style="`transform: rotate(${wheelDeg}deg)`"
          >
            <div class="prize-list">
              <div class="prize-item-wrapper" v-for="(item,index) in prizeList" :key="index">
                <div
                  class="prize-item"
                  :style="`transform: rotate(${(360/ prizeList.length) * index }deg)`"
                >
                  <div class="prize-name">{{ item.name }}</div>
                  <div class="prize-icon">
                    <img :src="item.icon" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="awards">
          <ul>
            <li>
              <span>一等奖：</span>
              <span>价值280元的优惠券</span>
            </li>
          </ul>
        </div>
        <div class="time-line">
          距离结束仅剩
          <span>16天10:45:38</span>
        </div>
        <div class="description">
          <div class="t">活动介绍</div>
          <div
            class="content"
          >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magn</div>
        </div>
      </div>
    </template>
    <div class="btn-share" :style="type === 'coupon'? 'bottom: 0': ''" @click="handleShare">立即分享</div>
  </div>
</template>

<script>
export default {
  name: "active-detail",
  components: {},
  data() {
    return {
      type: "coupon",
      freeze: false,
      rolling: false,
      wheelDeg: 0,
      prizeNumber: 6,
      prizeListOrigin: [
        {
          name: "奖0",
          icon:
            "http://wuhanshangcheng.oss-cn-beijing.aliyuncs.com/shangchengnormal/7E4C1866C2874AA5A788B5E59630A7ED.png"
        },
        {
          name: "奖1",
          icon:
            "http://wuhanshangcheng.oss-cn-beijing.aliyuncs.com/shangchengnormal/7E4C1866C2874AA5A788B5E59630A7ED.png"
        },
        {
          name: "奖2",
          icon:
            "http://wuhanshangcheng.oss-cn-beijing.aliyuncs.com/shangchengnormal/7E4C1866C2874AA5A788B5E59630A7ED.png"
        },
        {
          name: "奖3",
          icon:
            "http://wuhanshangcheng.oss-cn-beijing.aliyuncs.com/shangchengnormal/7E4C1866C2874AA5A788B5E59630A7ED.png"
        },
        {
          name: "奖4",
          icon:
            "http://wuhanshangcheng.oss-cn-beijing.aliyuncs.com/shangchengnormal/7E4C1866C2874AA5A788B5E59630A7ED.png"
        },
        {
          name: "奖5",
          icon:
            "http://wuhanshangcheng.oss-cn-beijing.aliyuncs.com/shangchengnormal/7E4C1866C2874AA5A788B5E59630A7ED.png"
        }
      ]
    };
  },
  created() {
    this.type = this.$route.query.type;
  },
  watch: {
    prizeNumber() {
      this.freeze = true;
      this.wheelDeg = 0;

      setTimeout(() => {
        this.freeze = false;
      }, 0);
    }
  },
  computed: {
    prizeList() {
      return this.prizeListOrigin.slice(0, this.prizeNumber);
    }
  },
  methods: {
    Start_Game() {
      this.rolling = true;
      const { wheelDeg, prizeList } = this;
      const random = parseInt(6 * Math.random(0, 5));
      console.log(random);
      this.wheelDeg =
        wheelDeg -
        (wheelDeg % 360) +
        6 * 360 -
        (360 / prizeList.length) * random;
      setTimeout(() => {
        this.rolling = false;
      }, 4500);
    },
    handleShare() {
      console.log("立即分享");
      // wx.onMenuShareWechat({
      //   title: "测试", // 分享标题
      //   desc: "分享到微信", // 分享描述
      //   link: "", // 分享链接
      //   imgUrl: "", // 分享图标
      //   success: function() {
      //     // 用户确认分享后执行的回调函数
      //     console.log("share---", "background: limegreen;");
      //   },
      //   cancel: function() {
      //     // 用户取消分享后执行的回调函数
      //   }
      // });
    }
  }
};
</script>

<style lang="scss">
#active-detail {
  height: 100%;
  .bg {
    position: fixed;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -10;
  }
  .coupon {
    position: relative;
    top: 15%;
    width: 90%;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #000;

    .user-icon {
      position: absolute;
      top: -54px;
      left: 0;
      right: 0;
      display: block;
      width: 100px;
      height: 100px;
      margin: 0 auto;
      text-align: center;
      line-height: 100px;
      font-size: 18px;
      border: 1px solid;
      border-radius: 50%;
      background: #fff;
      // filter: blur(2px);
    }

    .slogan {
      height: 80px;
      padding-top: 25px;
      line-height: 80px;
      font-size: 16px;
      text-align: center;
    }

    .coupon-content {
      position: relative;
      width: 90%;
      margin: 10px auto;
      img {
        width: 100%;
      }
      .content {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 80%;
        height: 92%;
        margin: 0 auto;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .money {
          font-size: 32px;
          font-weight: bold;
        }
        .split > img {
          height: 70px;
        }
        .other {
          font-size: 14px;
          font-weight: 400;
          p {
            margin-bottom: 5%;
          }
        }
      }
    }

    .btn {
      width: 85%;
      height: 50px;
      margin: 10px auto 30px;
      line-height: 50px;
      text-align: center;
      font-size: 0.5625rem;
      background-color: #fc0;
      border-radius: 4px;
    }
  }

  .wheel-container {
    .title {
      padding-top: 15%;
      font-size: 40px;
      text-align: center;
      color: #fff;
    }

    .wheel {
      position: relative;
      width: 100%;
      img {
        width: 100%;
      }

      .wheel-point {
        width: 20%;
        height: 32px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        font-size: 32px;
        text-align: center;
        line-height: 32px;
        z-index: 10;
      }

      .wheel-bg {
        width: 74%;
        height: 74%;
        border-radius: 1000px;
        overflow: hidden;
        // background: #fff;
        transition: transform 4s ease-in-out;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        &.freeze {
          transition: none;
          background: red;
        }
      }

      .prize-list {
        width: 90%;
        height: 90%;
        margin: auto;
        position: relative;
        text-align: center;
      }

      .prize-item-wrapper {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        height: 62%;
      }

      .prize-item {
        width: 90%;
        height: 90%;
        margin: 0 auto;
        transform-origin: bottom;

        .prize-name {
          padding: 16px 0 0;
          font-size: 14px;
        }

        .prize-icon {
          width: 100%;
          img {
            min-width: 32px;
            min-height: 32px;
            width: 50%;
          }
        }
      }
    }

    .awards {
      width: 80%;
      min-height: 100px;
      background: #ff9;
      margin: 0 auto 10px;
      border-radius: 10px;
      li {
        padding: 10px 20px;
        font-size: 0.5rem;
        font-weight: bold;
      }
    }

    .time-line {
      width: 80%;
      text-align: center;
      font-size: 16px;
      margin: 0 auto 20px;
      border-radius: 4px;
      background: #fff;
      span {
        color: #f00;
        font-size: 18px;
      }
    }

    .description {
      width: 100%;
      padding: 5px 1px;
      background: #fff;
      .t {
        position: relative;
        font-size: 16px;
        font-weight: bold;
        padding-left: 20px;
        &::before {
          content: "";
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: 8px;
          height: 21px;
          background: #fc0;
        }
      }
      .content {
        padding: 10px;
        font-size: 14px;
      }
    }
  }

  .btn-share {
    position: absolute;
    display: block;
    width: 100%;
    height: 45px;
    margin: 0.3125rem auto;
    text-align: center;
    font-size: 18px;
    line-height: 45px;
    background-color: #169bd5;
  }
}
</style>