<style lang="less">
  .raffles-list{
    padding-bottom:30rpx;
  }
  .raffle-none{
    font-size: 28rpx;
    padding-top:300rpx;
    text-align: center;
  }
  .raffle-item{
    background-color: #fff;
    padding:30rpx 0 0 30rpx;
    overflow: hidden;
    .item-img{
      float: left;
    }
    .item-right{
      margin-left:170rpx;
      min-height: 150rpx;
      border-bottom:1rpx solid #E6E6E6;
      padding-bottom:30rpx;
      padding-right:30rpx;
      position: relative;
    }
    .item-title {
      font-size: 26rpx;
      color: #333;
      width:70%;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2; //行数
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .item-corn{
      color:#FF5D15;
      font-size: 28rpx;
      position: absolute;
      bottom:30rpx;
    }
    .item-status {
      position: absolute;
      right:30rpx;
      top:30%;
      font-size: 28rpx;
    }
    .item-button{
      height:60rpx;
      color:#fff;
      background-color: #FF5D15;
      border-radius: 10rpx;
      text-align: center;
      line-height: 60rpx;
      font-size: 28rpx;
    }
    .grey{
      color:#999;
    }
    .red{
      color:#FF1212
    }
    .green{
      color:#097A00;
    }
  }
  .raffle-item:last-child {
    .item-right {
      border-bottom: none;
    }
  }
</style>
<wxs module="prize">
  function computClass (status) {
    var cls=['','green','grey','','red','red'];
    var index = status.value || 0;
    console.log(status)
    return cls[index]
  };
  module.exports = {
    computClass:computClass
  }
</wxs>
<template>
  <view class="raffles-list">
    <view class="raffle-item" wx:for="{{list}}" wx:key="index">
      <van-image use-loading-slot src="{{item.prize.photoUrl}}" class="item-img" width="150rpx" height="150rpx" radius="10rpx" fit="cover">
        <van-loading slot="loading" type="spinner" size="20" vertical />
      </van-image>
      <!--<image src="{{item.prize.photoUrl}}" class="item-img"></image>-->
      <view class="item-right">
        <view class="item-title">{{item.prize.name}}</view>
        <view class="item-corn">花费: {{item.quantity}}克币</view>
        <view class="item-status">
          <button data-id="{{item.id}}" class="item-button" bindtap="goprize"  v-if="item.status.value==3">领取</button>
          <text class="{{prize.computClass(item.status)}}" v-else>{{fonts[item.status.value]}}</text>
        </view>
      </view>
    </view>
    <view class="raffle-none" v-if="!list.length">您暂没有任何抽奖~</view>
  </view>
</template>
<script>
  import wepy from '@wepy/core';
  import { getRaffles } from '../common/api';
  wepy.page({
    data: {
      list: [],
      fonts: ['', '待开奖', '未中奖', '待领取', '未发货', '已发货']
    },
    methods: {
      goprize(event) {
        let detail = event.$wx.currentTarget;
        let id = detail.dataset.id || '';
        wx.navigateTo({url: '/pages/prize?joinRecordId=' + id});
      }
    },
    onLoad () {
      getRaffles().then(res => {
        this.list = res || [];
      });
    }
  });
</script>
<config>
  {
    navigationBarTitleText: '我的抽奖',
    "usingComponents": {
      "van-image": "../components/vant/image/index",
      "van-loading": "../components/vant/loading/index",
    }
  }
</config>
