<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" >立即参与</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 } from '../common/api'
  import store from '../store';
  wepy.page({
    store,
    data: {
      progress: '0%',
      progressStyle: '',
      isCheck: false,
      batchId: null,
      quantity: '',
      name: '',
      chance: '',
      photoUrl: '',
    },
    methods: {
      check() {
        this.isCheck = !this.isCheck;
      },
      async getPhoneNumber(e) {
        let that = this;
        let title = ['参与成功!','参与失败!','参与失败!'];
        let message = ['','当前抽奖已结束。','当前奖品已经没有库存了。']
        let detail = e.$wx.detail || {};
        let isRegister = wx.getStorageSync('isRegister');
        //如果用户还未注册
        if(isRegister === false) {
          await register(store.state.userInfo);
        }
        if(detail.encryptedData) {
          wx.checkSession({
            success () {
              updateUserPhone(detail).then(()=>{
                confirmRaffle({batchId:that.batchId}).then(data=>{
                  let code = data[0].joinCode;
                  Dialog.alert({
                    title: title[code],
                    message: message[code],
                  }).then(() => {
                    wx.reLaunch({url:'/pages/index'})
                  });
                }).catch(()=>{
                  Notify({message: '参与失败，请重新点击参与!',background:'#FF5D15'})
                })
              }).catch(()=>{
                Notify({message: '参与失败，请重新点击参与!',background:'#FF5D15'})
              });
            },
            fail () {
              wx.login();
            }
          });
        }else {
          Notify({message: '参与失败，请重新授权!',background:'#FF5D15'})
        }
      },
      joinin() {
        if(!this.isCheck) {
          Notify({message: '请先勾选!', background:'#FF5D15'})
          return;
        }
      }
    },
    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) {
          return 'getPhoneNumber';
        } else {
          return '';
        }
      }
    },
    onLoad (query) {
      let {batchId, quantity, name, chance, photoUrl, progress} = query;
      if (progress) {
        this.progress = progress;
        this.progressStyle = 'width:' + progress;
      }
      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>
