<style lang="less">
  .raffle-wrapper {
    width:100%;
    height:100%;
    background-color:#F1F1F1;
    padding-top:40rpx;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  .raffle-content {
    background-color: #fff;
    width: 94%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin:0 auto;
    padding:50rpx 50rpx 40rpx 50rpx;
    border-radius: 10rpx;
    box-shadow:0px 2rpx 20rpx 0px rgba(188,188,188,0.75);
    .img .van-image {
      box-shadow:0px 3rpx 13rpx 1rpx rgba(163,163,163,0.38);
    }
  }
  .goodsinfo {
    margin-top:15rpx;
    overflow: hidden;
    .text {
      font-size: 28rpx;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2; //行数
      -webkit-box-orient: vertical;
      overflow: hidden;
      float: left;
      text-align: left;
      width: 65%;
      color: #333;
    }
    .money{
      float: right;
      width:30%;
      color:#FF5D15;
      font-size: 30rpx;
      text-align: right;
      font-weight:bold;
    }
  }
  .raffle-chance {
    font-size: 24rpx;
    color:#666;
    margin-top:20rpx;
  }
  .raffle-progress {
    font-size: 24rpx;
    color:#666;
  }
  .progress {
    width: 298rpx;
    height:18rpx;
    background-color:#fff;
    border:1px solid #FF5D15;
    border-radius: 4rpx;
    color:#666;
    display: inline-block;
    position: relative;
    top:3rpx;
    .orange {
      height:100%;
      transition:all 1s;
      background-color: #FF5D15;
    }
  }
  .pronumber{
    font-size: 20rpx;
    color:#666;
    margin-left:10rpx;
    position: relative;
    top:-3rpx;
  }
  .user-wish {
    padding-left:35rpx;
    font-size: 24rpx;
    color:#aaa;
    margin-top:25rpx;
    height:50rpx;
    line-height: 50rpx;
    .checkimg{
      display: inline-block;
      width:24rpx;
      height:24rpx;
      border:3rpx solid #aaa;
      border-radius: 4rpx;
      vertical-align: middle;
      position: relative;
      &.checked{
        background-color: #FF5D15;
        border:3rpx solid #FF5D15;
      }
    }
    .checkicon {
      position: absolute;
      top:0;
      left:0;
      right:0;bottom:0;margin:0 auto;
      &.hide {
        display: none;
      }
    }
    .checktext{
      margin-left:10rpx;
      position: relative;
      top:3rpx;
    }
  }
  .joinin {
    width:380rpx;
    height:70rpx;
    line-height: 70rpx;
    background-color: #FF5D15;
    border-radius:10rpx;
    margin:0 auto;
    margin-top:80rpx;
    font-size: 34rpx;
    color:#fff;
  }
</style>
<template>
  <view class="raffle-wrapper">
    <view class="raffle-content">
      <van-image use-loading-slot src="{{photoUrl}}" class="img" width="610rpx" height="610rpx" radius="10rpx" fit="cover">
        <van-loading slot="loading" type="spinner" size="20" vertical />
      </van-image>
      <view class="goodsinfo">
        <text class="text">{{name}}</text>
        <text class="money">{{quantity}}克币</text>
      </view>
      <view class="raffle-chance">中奖概率: {{chance}}</view>
      <view class="raffle-progress">开奖进度:
        <view class="progress">
          <view class="orange" style="{{progressStyle}}"></view>
        </view>
        <text class="pronumber">{{progress}}</text>
      </view>
    </view>
    <view class="user-wish" bindtap="check">
      <view class="checkimg {{isCheck?'checked':''}}">
        <van-icon name="success" color="#fff" size="24rpx" class="checkicon {{isCheck?'':'hide'}}"/>
      </view>
      <text class="checktext">我同意花费所有克币参与抽奖，并承诺商品不退货。</text>
    </view>
    <button class="joinin" open-type="{{opentype}}" bindtap="joinin" bindgetphonenumber="getPhoneNumber">{{btnfont}}</button>
    <van-notify id="van-notify" />
    <van-dialog id="van-dialog" confirmButtonColor="#FF5D15"/>
  </view>
</template>
<script>
  import wepy from '@wepy/core';
  import Notify from '../components/vant/notify/notify';
  import Dialog from '../components/vant/dialog/dialog';
  import { updateUserPhone, confirmRaffle, register, login, getAwardsDetail } from '../common/api';
  import store from '../store';
  wepy.page({
    store,
    data: {
      progress: '0%',
      progressStyle: '',
      isCheck: true,
      batchId: null,
      quantity: '',
      name: '',
      chance: '',
      photoUrl: '',
      btnfont: '立即参与',
      hasPhone: false
    },
    methods: {
      check() {
        this.isCheck = !this.isCheck;
      },
      async getPhoneNumber(e) {
        if (this.btnfont !== '立即参与') { return; }
        let that = this;
        let detail = e.$wx.detail || {};
        function goprize() {
          updateUserPhone(detail).then(() => {
            that.confirmRaff();
            wx.setStorageSync('hasPhone', true);
            that.hasPhone = true;
          }).catch(() => {
            that.btnfont = '立即参与';
          });
        }
        if (detail.encryptedData) {
          this.btnfont = '提交中...';
          const { code } = await wepy.wx.login();
          await login(code);
          goprize();
        } else {
          Notify({message: '参与失败，请重新授权!', background: '#FF5D15'});
        }
      },
      async confirmRaff() {
        let title = ['参与成功!', '参与失败!', '参与失败!'];
        let message = ['参与成功，坐等开奖。', '当前抽奖已结束。', '当前奖品已经没有库存了。'];
        // 如果用户还未注册
        let isRegister = wx.getStorageSync('isRegister');
        if (isRegister === false) {
          await register(store.state.userInfo);
          wx.setStorageSync('isRegister', true);
        }
        this.btnfont = '提交中...';
        confirmRaffle({batchId: this.batchId}).then(data => {
          this.btnfont = '立即参与';
          let code = data.joinCode;
          if (code === undefined) code = 3;
          Dialog.alert({
            title: title[code],
            message: message[code]
          }).then(() => {
            wx.reLaunch({url: '/pages/index'});
          });
        }).catch(() => {
          this.btnfont = '立即参与';
        });
      },
      joinin() {
        if (!this.isCheck) {
          Notify({message: '勾选同意后才可以抽奖!', background: '#FF5D15'});
          return;
        }
        if (this.hasPhone) {
          this.confirmRaff();
        }
      },
      async getProgress(id) {
        let detail = await getAwardsDetail({ prizeId: id });
        detail = detail || {};
        this.batchId = detail.id;
        if (detail.quantity) {
          this.progress = Math.round((detail.join / detail.quantity) * 100) + '%';
          this.progressStyle = 'width:' + this.progress;
        }
      }
    },
    computed: {
      opentype() {
        if (this.isCheck && !this.hasPhone) {
          return 'getPhoneNumber';
        } else {
          return '';
        }
      }
    },
    onLoad (query) {
      let {prizeId, quantity, name, chance, photoUrl} = query;
      this.getProgress(prizeId);
      this.hasPhone = wx.getStorageSync('hasPhone');
      this.quantity = quantity || '';
      this.name = name;
      this.chance = chance;
      this.photoUrl = photoUrl;
    }
  });
</script>
<config>
  {
    navigationBarTitleText: '参与抽奖',
    "usingComponents": {
      "van-notify": "../components/vant/notify/index",
      "van-image": "../components/vant/image/index",
      "van-loading": "../components/vant/loading/index",
      "van-dialog": "../components/vant/dialog/index",
      "van-icon": "../components/vant/icon/index",
    }
  }
</config>
