<template>
  <div :class="{wrapper:isMobile}">
    <div class="prize" v-if="!isMobile">
      <LuckyWheel
        class="lw"
        ref="LuckyWheel"
        width="340px"
        height="340px"
        :blocks="blocks"
        :prizes="prizes"
        :buttons="buttons"
        @start="startCallBack"
        @end="endCallBack"
      />
      <div class="bubble">
        <img
          class="btip"
          :src="require('@/assets/images/question/tipdialog.png')"
          alt=""
        />
        <div class="b-title">本轮奖品详情</div>
        <ul>
          <li v-for="(item, i) in 10" :key="i">一等奖：可爱的发哥抱枕</li>
        </ul>
        <div class="desc">
          <p>
            请保存当前二维码，可到现场领取精美礼品一份<br />活动截止时间：2021年12月31日
          </p>
        </div>
      </div>

      <div class="lingjiang" v-show="lingjiang">
        <div class="ljcon">
          <img
            @click="lingjiang = false"
            class="qclose"
            :src="require('@/assets/images/question/close.png')"
            alt=""
          />
          <img
            class="lbg"
            :src="require('@/assets/images/question/lingjiang_bg.png')"
            alt=""
          />
          <div class="lbody">
            <div class="ltitle">领取奖励</div>
            <img
              class="qrcode"
              :src="require('@/assets/images/question/qrcode.png')"
              alt=""
            />
            <p>{{ currentPrize.title }}</p>
            <div class="ldesc">
              请保存当前二维码，可到现场领取精美礼品一份<br />活动截止时间：2021年12月31日
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="prize mobilePrize" v-if="isMobile">
      <h1 v-if="isMobile">幸运大转盘</h1>
      <LuckyWheel
        class="lw"
        ref="LuckyWheel"
        width="340px"
        height="340px"
        :blocks="blocks"
        :prizes="prizes"
        :buttons="buttons"
        @start="startCallBack"
        @end="endCallBack"
      />
      <div class="bubble">
        <!-- <img
        class="btip"
        :src="require('@/assets/images/question/tipdialog.png')"
        alt=""
      /> -->
        <div class="b-title">
          <div class="txt">本轮奖品详情</div>
        </div>
        <ul>
          <li v-for="(item, i) in 10" :key="i">一等奖：可爱的发哥抱枕</li>
        </ul>
        <div class="desc">
          <p>
            请保存当前二维码，可到现场领取精美礼品一份<br />活动截止时间：2021年12月31日
          </p>
        </div>
      </div>

      <div class="lingjiang" v-show="lingjiang">
        <div class="ljcon">
          <img
            @click="lingjiang = false"
            class="qclose"
            :src="require('@/assets/images/question/close.png')"
            alt=""
          />
          <img
            class="lbg"
            :src="require('@/assets/images/question/lingjiang_bg.png')"
            alt=""
          />
          <div class="lbody">
            <div class="ltitle">领取奖励</div>
            <img
              class="qrcode"
              :src="require('@/assets/images/question/qrcode.png')"
              alt=""
            />
            <p>{{ currentPrize.title }}</p>
            <div class="ldesc">
              请保存当前二维码，可到现场领取精美礼品一份<br />活动截止时间：2021年12月31日
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import browser from "@/util/browser";
// 设置奖品
const prizes = [];
let data = [
  "感谢参与",
  "一等奖",
  "二等奖",
  "三等奖",
  "一等奖",
  "二等奖",
  "三等奖",
  "一等奖",
  "二等奖",
  "三等奖",
  "二等奖",
  "三等奖",
];
data.forEach((item, index) => {
  prizes.push({
    title: item,
    fonts: [
      {
        fontColor: index % 2 ? "#ffffff" : "#311B04",
        text: item,
        lengthLimit: "20",
        fontSize: 12,
      },
    ],
  });
});
export default {
  data() {
    return {
      blocks: [
        {
          padding: "40px",
          imgs: [
            {
              src: require("@/assets/images/question/prize_bigbg.png"),
              width: "100%",
              rotate: false,
            },
          ],
        },
        {
          padding: "20px",
          imgs: [
            {
              src: require("@/assets/images/question/prize_bg.png"),
              width: "100%",
              rotate: true,
            },
          ],
        },
      ],
      defaultStyle: {},
      prizes,
      defaultConfig: {
        stopRange: 0,
      },
      currentPrize: {},
      lingjiang: false,
      buttons: [
        {
          fonts: [
            {
              fontSize: 18,
              fontWeight: 800,
              text: "开始",
              top: -12,
              fontColor: "#54320B",
            },
          ],
          radius: "50%",
          pointer: false,
          imgs: [
            {
              src: require("@/assets/images/question/pointer.png"),
              top: -48,
              width: 64,
            },
          ],
        },
      ],
      isMobile: browser.mobile,
    };
  },
  methods: {
    startCallBack() {
      this.$refs.LuckyWheel.play();
      setTimeout(() => {
        let stop = (Math.random() * 12) >> 0;
        console.log(data[stop]);
        this.$refs.LuckyWheel.stop(stop);
      }, 1000);
    },
    endCallBack(prize) {
      this.currentPrize = prize;
      this.lingjiang = true;
    },
  },
};
</script>

<style lang="less" scoped>

.prize {
  margin: 0 auto;
  position: relative;
  z-index: 999;
  text-align: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  .lw {
    margin: 0 auto;
  }
  .bubble {
    width: 340px;
    height: 350px;
    position: relative;
    background-color: #fff;
    border-radius: 10px;
    margin-right: 40px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    @wh: 30px;
    &:after {
      content: "";
      position: absolute;
      top: 100%;
      left: 40px;
      width: 0;
      height: 0;
      border-top: @wh solid #fff;
      border-right: @wh solid transparent;
      color: #fff;
    }
    .btip {
      position: absolute;
      bottom: -50px;
      right: -30px;
      pointer-events: none;
    }
    .b-title {
      background-color: #311b04;
      font-size: 18px;
      font-weight: bold;
      border-radius: 9px 9px 0 0;
      padding: 14px 0;
      width: 100%;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    }
    > ul {
      width: 100%;
      height: 240px;
      overflow-y: auto;
      > li {
        color: #fa3800;
        line-height: 1.5;
        margin: 8px 0;
      }
    }
    .desc {
      font-size: 12px;
      color: #311b04;
      line-height: 1.5;
      margin-top: 14px;
      width: 100%;
    }
  }
  .lingjiang {
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
    .ljcon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      .qclose {
        position: absolute;
        right: 30px;
        top: 24px;
        cursor: pointer;
        z-index: 999;
      }
      .lbody {
        position: absolute;
        top: 42%;
        width: 80%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;

        .ltitle {
          font-size: 24px;
          font-weight: bold;
        }
        .qrcode {
          margin-top: 10px;
        }
        > p {
          margin: 10px 0 20px;
          font-weight: bold;
        }
        .ldesc {
          font-size: 12px;
          color: #311b04;
          line-height: 1.5;
        }
      }
    }
  }
}
// 移动端


.wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.mobilePrize {
  display: block;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  > h1 {
    font-size: 24px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 31px;
    margin-top: 18px;
  }
  .lw {
    width: 88% !important;
    // overflow-x:auto!important;
    > canvas {
      width: 200% !important;
    }
  }
  .bubble {
    width: 80%;
    margin: 0 auto;
    margin-top: -180px;
    z-index: -1;
    height: auto;
    margin-bottom: 10px;
    .b-title {
      background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0.5),
        rgba(250, 56, 0, 0.6),
        rgba(250, 56, 0, 0.8),
        rgba(250, 56, 0, 0.6),
        rgba(255, 255, 255, 0.5)
      );
      height: 200px;
      position: relative;
      padding: 0;
      box-shadow: none;
      > .txt {
        position: absolute;
        bottom: 14px;
        text-align: center;
        left: 50%;
        transform: translateX(-50%);
        color: #311b04;
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: bold;
      }
    }
    &::after {
      display: none;
    }
    > ul {
      width: 186px;
      height: 96px;
      overflow-y: auto;
      margin: 0 auto;
      background: rgba(255, 255, 255, 1);
      > li {
        font-size: 16px;
      }
    }
    .desc {
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      line-height: 18px;
      color: #311b04;
    }
  }
}
@media screen and (max-width: 320px) {

 }
</style>
