<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>
  <!--解决wepy打包之后picker没有toolbar的问题-->
  <import src="../components/vant/picker/toolbar.wxml" />
  <view class="prize-wrapper">
    <view class="prize-top">
      <van-image use-loading-slot src="{{prize.photoUrl}}" class="img" width="400rpx" height="400rpx" radius="10rpx" fit="cover">
        <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="{{idNumber}}" data-form="idNumber" 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">{{btnfont}}</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';
  import { getOneRaffle, getUserPhone, getPrize } from '../common/api';
  var raffle = require('../common/raffleProbability');
  var area = require('../components/custom/china.js');
  wepy.page({
    data: {
      quantity: 0,
      prize: {},
      name: '',
      phone: '',
      address: '',
      province: '',
      city: '',
      county: '',
      cityValue: '',
      areaList: [],
      showAddress: false,
      joinRecordId: null,
      chance: '',
      btnfont: '领取',
      idNumber: ''
    },
    methods: {
      goprize() {
        if (!this.prize.cash) {
          if (!this.name) {
            Notify({message: '请填写收货人', background: '#FF5D15'});
            return;
          }
          let reg = /^1\d{10}$/;
          if (!this.phone) {
            Notify({message: '请填写手机号码', background: '#FF5D15'});
            return;
          }
          if (!reg.test(this.phone)) {
            Notify({message: '请填写正确的手机号码', background: '#FF5D15'});
            return;
          }
          if (!this.idNumber) {
            Notify({message: '请填写身份证号', background: '#FF5D15'});
            return;
          }
          if (!this.city) {
            Notify({message: '请选择所在地区', background: '#FF5D15'});
            return;
          }
          if (!this.address) {
            Notify({message: '请填写详细地址', background: '#FF5D15'});
            return;
          }
        }
        let params = {
          joinRecordId: this.joinRecordId,
          name: this.name,
          phone: this.phone,
          province: this.province,
          city: this.city,
          county: this.county,
          address: this.address,
          idNumber: this.idNumber
        };
        let message = '您所领取的奖品我们将在3到5个工作日内寄出，请您耐心等待，感谢您的参与!';
        let cashmeg = '您所领取的奖品我们将会在几分钟内发出，请您耐心等待，感谢您的参与!';
        let that = this;
        if (this.btnfont !== '领取') return;
        this.btnfont = '...';
        getPrize(params).then(() => {
          this.btnfont = '领取';
          Dialog.alert({
            title: '领取成功',
            message: that.prize.cash ? cashmeg : message
          }).then(() => {
            wx.reLaunch({url: '/pages/index'});
          });
        }).catch(() => {
          this.btnfont = '领取';
        });
      },
      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.county = 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'});
      // 请求接口得到数据
      getOneRaffle({joinRecordId: joinRecordId}).then(data => {
        let dat = data || {};
        this.prize = dat.prize;
        this.quantity = dat.quantity;
        this.chance = raffle.getProbability(+dat.quantity, +dat.prize.coinQuantity);
      });
      getUserPhone().then(data => {
        this.phone = data.phone;
      });
      this.areaList = area.areaList;
      /* this.prize = {cash:false,name:'Nintendo Switch任天堂游戏机Nintendo Switch任天堂游戏机',photoUrl:'/static/images/test2.png',coinQuantity:5000};
      this.quantity = 300;
      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>
