<style lang="less">
  .raffles-list{
    padding-bottom:30rpx;
  }
  .raffle-item{
    background-color: #fff;
    padding:30rpx 0 0 30rpx;
    overflow: hidden;
    .item-img{
      width:150rpx;
      height:150rpx;
      float: left;
      border-radius: 10rpx;
    }
    .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;
      margin-top: 45rpx;
    }
    .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">
      <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>{{item.status.name}}</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
  import wepy from '@wepy/core';
  wepy.page({
    data: {
      list:[]
    },
    methods: {
      goprize(event) {
        let detail = event.$wx.currentTarget;
        let id = detail.dataset.id || '';
        wx.navigateTo({url:'/pages/prize?joinRecordId='+id});
      }
    },
    onLoad () {
      this.list = [
        {id:1,status:{name:'待开奖',value:1},quantity:500,prize:{name:'Nintendo Switch任天堂游戏机任天堂游戏机',photoUrl:'/static/images/test1.jpg'}},
        {id:2,status:{name:'未中奖',value:2},quantity:200,prize:{name:'Nintendo Switch任天堂游戏机任天堂游戏机',photoUrl:'/static/images/test1.jpg'}},
        {id:3,status:{name:'待领取',value:3},quantity:300,prize:{name:'Nintendo Switch任天堂游戏机任天堂游戏机',photoUrl:'/static/images/test1.jpg'}},
        {id:4,status:{name:'未发货',value:4},quantity:400,prize:{name:'Nintendo Switch任天堂游戏机任天堂游戏机',photoUrl:'/static/images/test1.jpg'}},
        {id:5,status:{name:'已发货',value:5},quantity:500,prize:{name:'Nintendo Switch任天堂游戏机任天堂游戏机',photoUrl:'/static/images/test1.jpg'}},
        ];
    },
  });
</script>
<config>
  {
    navigationBarTitleText: '我的抽奖',
  }
</config>
