<style lang="less">
  .prize-top {
    background-color: #fff;
    padding:30rpx 50rpx;
    .img{
      display: block;
      margin:0 auto;
      width: 400rpx;
      .van-image {
        box-shadow:0px 3rpx 13rpx 1rpx rgba(163,163,163,0.38);
      }
    }
    .goodsname{
      padding:25rpx 0;
      font-size: 28rpx;
      color:#333;
    }
    .prize-info{
      color:#999;
      font-size: 26rpx;
      .red {
        color:#FF1212;
      }
    }
  }
  .prize-address {
    padding-top:50rpx;
    .address-title {
      font-size: 32rpx;
      color: #666;
      padding-left:30rpx;
    }
    .address-cont{
      margin-top:20rpx;
    }
  }
  .footerheight {
    height:140rpx;
  }
  .footer{
    width:100%;
    height: 110rpx;
    background-color: #fff;
    position: fixed;
    bottom:0;
    left:0;
    .getprize{
      position: absolute;
      width:160rpx;
      height:70rpx;
      color:#fff;
      border-radius: 10rpx;
      background-color: #FF5D15;
      right:30rpx;
      top:20rpx;
      line-height: 70rpx;
      text-align: center;
      font-size: 30rpx;
    }
  }
  .van-picker .van-picker__cancel,.van-picker .van-picker__confirm{
    color:#FF5D15;
  }
</style>
<template>
  <view class="prize-wrapper">
    <view class="prize-top">
      <van-image use-loading-slot src="{{prize.photoUrl}}" class="img" width="400rpx" height="400rpx" radius="10rpx">
        <van-loading slot="loading" type="spinner" size="20" vertical />
      </van-image>
      <view class="goodsname">{{prize.name}}</view>
      <view class="prize-info">中奖概率: {{chance}}</view>
      <view class="prize-info">中奖结果: <text class="red">已中奖</text></view>
    </view>
    <view class="prize-address" v-show="!prize.cash">
      <view class="address-title">添加收货地址</view>
      <view class="address-cont">
        <van-field value="{{name}}" data-form="name" placeholder="收货人" bind:input	="setValue"></van-field>
        <van-field value="{{phone}}" data-form="phone" placeholder="手机号码" bind:input	="setValue"></van-field>
        <van-field value="{{cityValue}}" placeholder="所在地区"  bindtap="onClose" is-link readonly></van-field>
        <van-field value="{{address}}" data-form="address" placeholder="详细地址：如街道、小区、门牌号、楼栋号等" bind:input	="setValue"></van-field>
      </view>
    </view>
    <van-popup show="{{ showAddress }}" position="bottom" bind:close="onClose">
      <van-area area-list="{{ areaList }}" value="110101" bind:confirm="getaddress" bind:cancel="onClose" title="请选择地区"/>
    </van-popup>
    <view class="footerheight"></view>
    <view class="footer">
      <button class="getprize" bindtap="goprize">领取</button>
    </view>
    <van-dialog id="van-dialog" confirmButtonColor="#FF5D15"/>
    <van-notify id="van-notify" />
  </view>
</template>
<script>
  import wepy from '@wepy/core';
  import Dialog from '../components/vant/dialog/dialog';
  import Notify from '../components/vant/notify/notify';
  var raffle = require('../common/raffleProbability');
  var area = require('../components/custom/china.js');
  wepy.page({
    data: {
      quantity:0,
      prize:{},
      name:'',
      phone:'',
      address:'',
      province:'',
      city:'',
      country:'',
      cityValue:'',
      areaList:[],
      showAddress:false,
      joinRecordId:null,
      chance:''
    },
    methods: {
      goprize() {
        if(!this.prize.cash) {
          if(!this.name){
            Notify({message: '请填写收货人', background:'#FF5D15'});
            return;
          }
          if(!this.phone){
            Notify({message: '请填写手机号码', background:'#FF5D15'});
            return;
          }
          if(!this.city){
            Notify({message: '请选择所在地区', background:'#FF5D15'});
            return;
          }
          if(!this.address){
            Notify({message: '请填写详细地址', background:'#FF5D15'});
            return;
          }
        }
        Dialog.alert({
          title: '领取成功',
          message: '您所领取的奖品我们将在3到5个工作日内寄出，请您耐心等待，感谢您的参与!',
        }).then(() => {
          wx.reLaunch({url:'/pages/index'})
          // on confirm
        });
        console.log(this.name,this.phone,this.address);
      },
      onClose() {
        this.showAddress = !this.showAddress;
      },
      setValue(event){
        let value = event.$wx.detail;
        let form = event.$wx.currentTarget.dataset.form;
        if(form) this[form] = value;
      },
      getaddress(event) {
        let detail = event.$wx.detail.values;
        this.province = detail[0].name;
        this.city = detail[1].name;
        this.country = detail[2].name;
        this.cityValue = detail[0].name+detail[1].name+detail[2].name
        this.onClose()
      }
    },
    computed: {

    },
    onLoad (query) {
      let joinRecordId = query.joinRecordId || '';
      this.joinRecordId = joinRecordId;
      if(!joinRecordId)  Notify({message: '缺少参数错误！', background:'#FF5D15'});
      //请求接口得到数据
      this.prize = {cash:false,name:'Nintendo Switch任天堂游戏机Nintendo Switch任天堂游戏机',photoUrl:'/static/images/test2.png',coinQuantity:5000};
      this.quantity = 300;
      this.areaList = area.areaList;
      this.chance = raffle.getProbability(this.quantity,this.prize.coinQuantity);
    },
  });
</script>
<config>
  {
    navigationBarTitleText: '领取奖品',
    "usingComponents": {
      "van-field": "../components/vant/field/index",
      "van-cell": "../components/vant/cell/index",
      "van-area": "../components/vant/area/index",
      "van-popup": "../components/vant/popup/index",
      'van-dialog': '../components/vant/dialog/index',
      "van-notify": "../components/vant/notify/index",
      "van-image": "../components/vant/image/index",
      "van-loading": "../components/vant/loading/index",
    }
  }
</config>
