<template>
  <div class="AppLuckyDraw">
    <!-- <div @click="showPhoneMask=true">绑定手机号</div> -->

    <div class="header-bg">
      <img src="./img/header-bg.png" alt="" class="header-bg-img">
      <img src="./img/share-btn.png" alt="" class="share-bg-img">
      <div class="share-btn">分享活动</div>
    </div>
    <div class="box-content">
      <div class="title">
        <img src="./img/title-bg.png" alt="">
        <p>打卡活动</p>
      </div>
      <p class=" text-line">新年伊始，企业微信团队为创建安全和谐的网络办公环境，诚邀大家使用企业微信参与打卡活动！活动详情如下：</p>
    </div>

    <div class="box-content pad-lf18">
      <div class="title">
        <img src="./img/title-bg.png" alt="">
        <p>打卡进度</p>
      </div>
      <p class="count-text">当前已打卡<span>{{activeInfo.clockCount}}</span>天</p>
      <div class="flex-img">
        <div class="flex-img-item">
          <div>抽奖<br/>次数</div>
        </div>
        <div class="flex-img-item">
          <div>抽奖<br/>次数</div>
        </div>
        <div class="flex-img-item">
          <div>抽奖<br/>次数</div>
        </div>
        <div class="flex-img-item">
          <div>解锁<br/>奖励</div>
        </div>
      </div>
      <div class="count-line">
        <div class="line-item" v-for="(item, index) in 20" :key="index" :class="activeInfo.clockCount > index ? 'active' : ''"></div>
      </div>
      <div class="flex-day">
        <div>1天</div>
        <div>5天</div>
        <div>10天</div>
        <div>20天</div>
      </div>
    </div>

    <div class="box-content">
      <div class="title">
        <img src="./img/title-bg.png" alt="">
        <p>大转盘</p>
      </div>
      <div class="turntable-content">
        <view :animation="animationData" class="turntable">
          <view v-for="(item, index) in activeInfo.prizes" :key="index" class="sector-item">
            <view class="sector" :style=" 'transform: rotate(' + (index * (360 / activeInfo.prizes.length) - 0.5 * (360 / activeInfo.prizes.length)) + 'deg)'">
              <view class="inner" :style=" 'transform: rotate(' + 360 / activeInfo.prizes.length +'deg)'"></view>
            </view>
            <div :style=" 'transform: rotate(' + index * (360 / activeInfo.prizes.length) + 'deg) ;' " class="cell">
              {{ item.name }}
              <img :src="item.picture" alt="" class="cell-img" />
            </div>
          </view>
        </view>
        <img src="./img/pointer.png" alt="" class="point-img">
        <div class="turntable-btn" v-if="!activeInfo.signupTime" @click="signUp">活动报名</div>
        <div class="turntable-btn" v-else @click="raffle">立即抽奖</div>
      </div>
      <div class="lucky-list">
        <u-notice-bar mode="vertical" :is-circular="false" :list="luckyList" :volume-icon="false" bg-color="#FFDEAC" padding="0rpx 0rpx" border-radius="60rpx"></u-notice-bar>
        <u-notice-bar mode="vertical" :is-circular="false" :list="luckyList2" :volume-icon="false" bg-color="#FFDEAC" padding="0rpx 0rpx" border-radius="60rpx"></u-notice-bar>
        <u-notice-bar mode="vertical" :is-circular="false" :list="luckyList3" :volume-icon="false" bg-color="#FFDEAC" padding="0rpx 0rpx" border-radius="60rpx"></u-notice-bar>
      </div>
    </div>

    <div class="box-content">
      <div class="title">
        <img src="./img/title-bg.png" alt="">
        <p>活动时间</p>
      </div>
      <p class="text-line">活动时间：2023年2月7日~2023年3月8日 </p>
      <p class="text-line">兑换时间：预计3月9日起</p>
    </div>

    <div class="box-content">
      <div class="title">
        <img src="./img/title-bg.png" alt="">
        <p>活动规则</p>
      </div>
      <div class="title-text">报名方式</div>
      <p class="text-line">打开企业微信，点击工作台，找到村微的应用，打开活动列表，点击参与。</p>

      <div class="title-text">打卡方式</div>
      <p class="text-line">①企微内至少3个同事发消息或在至少1个群聊中发言，保持日常工作沟通习惯即可。</p>
      <p class="text-line">②使用企微工作台中任意应用，有操作上的疑问请联系技术支持。</p>
      <p class="text-line">③使用企微工作台点击进入宣传栏任意海报，停留进行浏览至少5分钟。</p>
      <p class="text-line">④使用工作台会议进行内部办公沟通。</p>

      <div class="title-text">抽奖规则</div>
      <p class="text-line">第一批2月8日，抽奖条件第一次报名即可参与抽奖，将活动分享三位给同事即可额外获得一次抽奖机会。</p>
      <p class="text-line">第二批2月15日，抽奖条件要求2月7日至2月14日打卡成功5天或以上。
      <p class="text-line">第三批2月23日，抽奖条件要求2月7日至2月22日打卡成功10天或以上。
      <p class="text-line">第四批终极大奖3月9日，抽奖条件要求2月7日至3月8日打卡成功20天或以上。</p>

      <div class="title-text">奖品内容</div>
      <p class="text-line">企业微信笔记本礼盒，腾讯Q宠公仔，腾讯Q宠手办，终极大奖（华为P50手机，华为meatpad平板电脑，华为watch GT3智能手表）。</p>

      <div class="title-text">联系方式</div>
      <p class="text-line">①联系企业微信“锡林郭勒盟党政云平台”内“技术支持”分组的工作人员；</p>
      <p class="text-line">②企业微信扫下方二维码联系技术支持人员。</p>
      <img src="./img/qrcode-img.png" alt="" class="qrcode-img">

      <div class="title-text">领取地点</div>
      <p class="text-line">2023年2月20日起根据各旗县网信办通知地点领取，一切解释权属企业微信团队，有任何疑问请联系“锡林郭勒盟党政云平台”内“技术支持”分组的工作人员。</p>
    </div>
    <div class="share-bottom-btn">活动报名</div>
    
    <u-modal v-model="showPhoneMask" ref="uModal" :show-cancel-button="true" :async-close="true" @confirm="bindPhoneConfirm" @cancel="cancel" class="phone-mask">
      <div class="item">
        <span class="label"><span class="tips">*</span>手机号</span>
        <div class="value">
          <u-input type="tel" placeholder="请填写手机号" v-model="phone" input-align="right" placeholder-style="color:#999;font-size:15px;" height="42"  :maxlength="11" :clearable="false" />
        </div>
      </div>
    </u-modal>
  </div>
</template>
<script>
export default {
  name: "AppLuckyDraw",
  appName: "幸运抽奖",
  data() {
    return {
      deg: 0, // 初始化角度
      duration: 2000, //动画时长
      awardNumber: 2, // 中奖区域 从1开始
      isStart: false, //防止多次触发动画
      animationData: {}, //动画对象
      showPhoneMask: false,
      phone: '',
      activityId: '',
      friendId: '',
      activeInfo: {},
      luckyList:  ['1用户获得限量版公仔一个', '2用户获得限量版公仔一个', '3用户获得限量版公仔一个'],
      luckyList2:  ['4用户获得限量版公仔一个', '5用户获得限量版公仔一个', '6用户获得限量版公仔一个'],
      luckyList3:  ['7用户获得限量版公仔一个', '8用户获得限量版公仔一个', '9用户获得限量版公仔一个'],
    };
  },
  onLoad(option) {
    // this.activityId = option.activityId
    // this.friendId = option.friendId || ''
    this.activityId = '75a4c4493de54f9fb63868817079c89c'
    this.getDetail()
  },
  onShow() {
    //创建对象，并将对象存放在data中以挂载在需要进行动画的元素之上
    var animation = uni.createAnimation({
      duration: this.duration,
      timingFunction: "ease-in-out", //旋转模式
    });
    this.animation = animation; //挂载在vue实例上以便渲染
  },
  methods: {
    //封装动画旋转整数圈的方法，只需接受（角度，时间）即可开始旋转动画
    rotate(deg, duration) {
      if (this.isStart) return; //防止用户多次点击动画
      this.isStart = true; //此时旋转开始，动画无法再次触发
      setTimeout(
        function () {
          //设置定时器在动画时间后方可再次触发转盘动画
          this.isStart = false;
        }.bind(this),
        duration
      ); //此时用的普通函数，存在this指向问题，需要改变this指向
      this.animation
        .rotate(deg)
        .step()
        .rotate((this.awardNumber - 1) * -(360 / this.reword.length))
        .step({
          duration: 0,
          timingFunction: "linear",
        });
      this.animationData = this.animation.export();
    },
    //开始旋转
    onStart() {
      //提前将要转的角度算好，再传入要转的时长即可转到自己想要的角度
      this.rotate( 360 + (360 - (this.awardNumber - 1) * (360 / this.reword.length)),this.duration);
    },


    bindPhoneConfirm() {
      this.$refs.uModal.clearLoading()
      if(!this.phone) {
        return this.$u.toast('请输入手机号')
      }
      let regTel = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
      if (!regTel.test(this.phone)) {
        return this.$u.toast('请输入正确的手机号')
      }

      this.$http.post(`/app/appmarketingactivityinfo/bindPhone?phone=${this.phone}`).then((res) => {
        if (res.code == 0) {
          this.getDetail()
          this.$u.toast('绑定成功')
        }
      })
    },
    cancel() {
      this.phone = ''
      this.showPhoneMask = false 
    },
    getDetail() {
      this.$http.post(`/app/appmarketingactivityinfo/queryDetailByIdWXCP?activityId=${this.activityId}&friendId=${this.friendId}`).then((res) => {
        if (res.code == 0) {
          this.activeInfo = {...res.data}
          // arr = arr.slice(0,4)
        }
      })
    },
    //抽奖
    raffle() {
      if(!this.activeInfo.vaildPhone) {
        return this.showPhoneMask = true
      }
      this.$http.post(`/app/appmarketingactivityinfo/raffle?activityId=${this.activityId}`).then((res) => {
        if (res.code == 0) {
          this.awardNumber = res.data
          this.onStart()
        }
      })
    },
    //活动报名
    signUp() {
      this.$http.post(`/app/appmarketingactivityinfo/signup?activityId=${this.activityId}`).then((res) => {
        if (res.code == 0) {
          this.$u.toast('活动报名成功！')
          this.getDetail()
        }
      })
    },
  },
  onShareAppMessage() {
    return {
      // title: this.info.title,
      // imageUrl: this.info.coverFile.url,
      path: `/pages/AppLuckyDraw/AppLuckyDraw?id=${''}&areaId=${''}`
    }
  }
};
</script>

<style lang='scss'>
.AppLuckyDraw {
  // position: relative;
  width: 100%;
  background-color: #F30000;
  padding-bottom: 64px;
  // overflow: hidden;
  .header-bg {
    width: 100%;
    position: relative;
    margin-bottom: 44px;
    .header-bg-img {
      max-width: 100%;
    }
    .share-bg-img {
      width: 182px;
      position: absolute;
      top: 30px;
      right: 0;
    }
    .share-btn {
      width: 182px;
      padding-left: 58px;
      box-sizing: border-box;
      height: 52px;
      line-height: 52px;
      font-family: PingFangSC-SNaNpxibold;
      font-size: 28rpx;
      color: #FFE6C3;
      text-shadow: 0 2px 4px rgba(173,0,0,0.80);
      position: absolute;
      top: 30px;
      right: 0;
    }
    .box-content {
      width: 706px;
      background: #FFE9C7;
      border: 4px solid #FFEBA0;
      box-shadow: inset 0 0 14px 4px rgba(255,113,20,0.60);
      border-radius: 44px;
      box-sizing: border-box;
      margin: 0 0 44px 22px;
      position: relative;
    }
  }
  .box-content {
    width: calc(100% - 48px);
    padding: 64px 32px 48px;
    background: #FFE9C7;
    border: 4px solid #FFEBA0;
    box-shadow: inset 0 0 16px 4px rgba(255,113,20,0.60);
    border-radius: 48px;
    margin: 0 0 80px 24px;
    position: relative;
    box-sizing: border-box;
    background: #FFE9C7;
    .title {
      width: 250px;
      height: 96px;
      position: absolute;
      top: -48px;
      left: 50%;
      margin-left: -125px;
      img {
        width: 100%;
        height: 100%;
      }
      p {
        width: 250px;
        line-height: 74px;
        text-align: center;
        position: absolute;
        top: 0;
        left: 0;
        font-family: PingFangSC-SNaNpxibold;
        font-weight: 600;
        font-size: 32px;
        color: #FFE6C3;
        text-shadow: 0 2px 4px rgba(173,0,0,0.80);
      }
    }
    .text-line {
      width: 100%;
      font-family: PingFangSC-Regular;
      font-size: 28px;
      color: #E55500;
      line-height: 44px;
    }
    .text-content {
      text-indent: 2em;
    }
    .title-text {
      font-family: PingFangSC-SNaNpxibold;
      font-weight: 600;
      font-size: 32px;
      color: #DC0000;
      line-height: 44px;
      margin: 30px 0 14px 0;
    }
    .qrcode-img {
      width: 174px;
      height: 174px;
      margin-top: 30px;
    }
    .count-text {
      line-height: 40px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 28px;
      color: #E55500;
      text-align: center;
      margin-bottom: 24px;
      span {
        color: #1BAFB3;
      }
    }
    .flex-img {
      display: flex;
      padding: 0 0 20px;
      .flex-img-item {
        div {
          display: inline-block;
          width: 80px;
          height: 88px;
          text-align: center;
          line-height: 28px;
          padding-top: 8px;
          background-image: url('./img/count-bg.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;
          font-family: PingFangSC-Medium;
          font-family: PingFangSC-Medium;
          font-weight: 500;
          font-size: 24px;
          color: #FF7311;
        }
      }
      .flex-img-item:nth-of-type(1) {
        flex: 1;
      }
      .flex-img-item:nth-of-type(2) {
        flex: 2.5;
        text-align: right;
      }
      .flex-img-item:nth-of-type(3) {
        flex: 4;
        text-align: right;
      }
      .flex-img-item:nth-of-type(4) {
        flex: 7;
        text-align: right;
      }
    }
    .count-line {
      display: flex;
      margin-bottom: 20px;
      .line-item {
        flex: 1;
        height: 24px;
        background-color: #F5BE7B;
        margin-right: 2px;
      }
      .line-item:nth-of-type(1){
        border-radius: 12px 0 0 12px;
      }
      .line-item:nth-last-of-type(1) {
        border-radius: 0 12px 12px 0;
      }
      .active {
        background-image: linear-gradient(179deg, #FF961F 0%, #FF320F 100%);
      }
    }
    .flex-day {
      display: flex;
      justify-content: space-between;
      padding: 0 16px;
      div {
        width: 140px;
        text-align: center;
        line-height: 36px;
        font-family: PingFangSC-Regular;
        font-size: 26px;
        color: #E55500;
      }
      div:nth-of-type(1) {
        flex: 1;
      }
      div:nth-of-type(2) {
        flex: 2.5;
        text-align: right;
      }
      div:nth-of-type(3) {
        flex: 4;
        text-align: right;
      }
      div:nth-of-type(4) {
        flex: 7;
        text-align: right;
      }
    }
    .turntable-content {
      width: 640px;
      height: 888px;
      background-image: url('./img/turntable-bg.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      margin: 0 auto;
      position: relative;
      .turntable-btn {
        width: 268px;
        height: 84px;
        line-height: 84px;
        text-align: center;
        margin-left: 28px;
        color: #F30000;
        background-color: #FFCF75;
        border-radius: 42px;
        font-size: 34px;
        font-weight: 600;
        position: absolute;
        bottom: 176px;
        left: 50%;
        margin-left: -134px;
      }
      .turntable {
        position: relative;
        top: 68px;
        margin: 0 auto;
        background: #fff;
        height: 500px;
        width: 500px;
        border-radius: 50%;
        text-align: center;
        overflow: hidden;
        .cell {
          position: absolute;
          width: 120px;
          text-align: center;
          height: 50px;
          top: 0;
          left: 50%;
          margin: 0 0 0 -60px;
          transform-origin: 60px 250px;
          font-size: 20px;
          padding-top: 40px;
          box-sizing: border-box;
        }
        .cell-img {
          width: 50px;
          height: 50px;
          margin-top: 32px;
        }
        .sector {
          width: 500px;
          height: 500px;
          position: absolute;
          clip: rect(0 500px 500px 250px);
          overflow: hidden;
        }
        .inner {
          width: 100%;
          height: 100%;
          position: absolute;
          clip: rect(0 250px 500px 0);
          transform: rotate(60deg);
          border-radius: 50%;
          background-color: #FFE3B8;
          border: 20px solid #FE221A;
        }
        .sector-item:nth-of-type(2n) .inner{
          background-color: #FFF5E2;
          border: 20px solid #F7BB86;
        }
      }
      .point-img {
        position: absolute;
        width: 112px;
        height: 160px;
        top: 228px;
        left: 50%;
        margin-left: -56px;
      }
    }
    .lucky-list {
      width: 100%;
      background: #FFDEAC;
      border: 2px solid #FFAE32;
      border-radius: 28px;
      padding: 22px;
      box-sizing: border-box;
    }
  }
  .pad-lf18 {
    padding: 64px 18px 48px;
  }
  .share-bottom-btn {
    width: calc(100% - 56px);
    height: 84px;
    line-height: 84px;
    text-align: center;
    margin-left: 28px;
    color: #F30000;
    background-color: #FFCF75;
    border-radius: 42px;
    font-size: 34px;
    font-weight: 600;
  }
}



.phone-mask {
  .item{
    width: calc(100% - 32px);
    padding: 20px 32px 32px 16px;
    background: #FFFFFF;
    display: flex;
    justify-content: space-between;
    font-size: 30px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #666;
    line-height: 48px;
    box-sizing: border-box;
    margin: 0 0 0 16px;
    .color-999{
      color: #999;
    }
    .value{
      color: #333;
      .u-icon{
        margin-left: 16px;
      }
    }
    .tips{
      display: inline-block;
      width: 16px;
      font-size: 32px;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #FF4466;
      line-height: 44px;
      margin-right: 4px;
    }
  }
}
</style>