<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 {
      width:24rpx;
      height:24rpx;
      vertical-align: middle;
      margin-right:10rpx;
    }
    .checktext{
      top: 2rpx;
      position: relative;
    }
  }
  .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">
      <image src="{{imgsrc}}" class="checkimg"></image>
      <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,getUserPhone } 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 = '立即参与';
          });
        }
        this.btnfont = '提交中...';
        if(detail.encryptedData) {
          wx.checkSession({
            success () {
              goprize();
            },
            async fail () {
              await wepy.wx.login();
              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();
        }
      }
    },
    computed: {
      imgsrc() {
        let imgsrc = '/static/images/selected.png';
        if(this.isCheck) {
          imgsrc = '/static/images/selected.png';
        } else {
          imgsrc = '/static/images/selectno.png';
        }
        return imgsrc;
      },
      opentype() {
        if (this.isCheck && !this.hasPhone) {
          return 'getPhoneNumber';
        } else {
          return '';
        }
      }
    },
    onLoad (query) {
      let {batchId, quantity, name, chance, photoUrl, progress} = query;
      if (progress) {
        this.progress = progress;
        this.progressStyle = 'width:' + progress;
      }
      this.hasPhone = wx.getStorageSync('hasPhone');
      this.batchId = batchId;
      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",
    }
  }
</config>
