<template>
  <view class="record-container">
    <view class="record-title">最新记录</view>
    <view v-for="(item, index) in records" :key="index" class="record-item">
      <view class="user-info">
        <image class="user-avatar" :src="item.avatar" @error="handleError" v-if="item.avatar&&!isError"></image>
        <image class="user-avatar" src="/static/images/new_ui/wutu.png" v-else></image>
        <view class="user-details">
          <view class="user-name">{{ item.nickname }}</view>
          <!-- <view class="user-id">ID:{{ item.out_trade_no }}</view> -->
          <view class="consume-amount">消费金额 {{ item.money || "0.00" }}</view>
        </view>
      </view>
      <view class="record-info">
        <view class="record-time">{{ item.pay_time }}</view>
        <view class="pv-info">pv: {{ item.pv }}</view>
        <view v-for="(reward, rewardIndex) in rewards" :key="rewardIndex" class="reward-info">
         {{ reward.name }} : {{ reward.type=="jingdou"?item.jingdou||0 :item.gongxian ||0}} 
        </view>
      </view>
    </view>
  </view>
</template>
<script>

export default {
    props:{
      records:{
        type:Array,
        default:()=>[]
      }
    },
  data() {
    return {
        isError:false,
         rewards: [
            { type:"gongxian", name: '贡献值' },
            { type:"jingdou", name: '京豆' }
          ],
    };
  },
  methods: {
      handleError(e) {
        this.isError = true;
      }
  }
}
</script>
<style lang="scss" scoped>
.record-container {
    width: calc(100% - 55rpx);
  height: 100%;
    background: #ffffff;
    border-radius: 16rpx;
}
.record-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  padding: 15rpx 25rpx;
}
.record-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1rpx solid #e0e0e0;
  padding: 0 20rpx 20rpx 15rpx;
  margin-bottom: 20rpx;
  &:last-child{
     border-bottom:none;
  }
}
.user-info {
  display: flex;
  align-items: center;
}
.user-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}
.user-details {
  display: flex;
  flex-direction: column;
}
.user-name {
  font-size: 32rpx;
  margin-bottom: 10rpx;
}
.user-id {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 10rpx;
}
.consume-amount {
  font-size: 28rpx;
  background-color: #f0f9ff;
  color: #1890ff;
  padding: 6rpx 12rpx;
  border-radius: 4rpx;
}
.record-info {
  text-align: right;
}
.record-time {
  font-size: 28rpx;
  margin-bottom: 10rpx;
}
.pv-info {
  font-size: 28rpx;
  margin-bottom: 10rpx;
}
.reward-info {
  font-size: 28rpx;
}
</style>