<template>
  <view class="score-item">
    <view class="item-user u-flex-center">
      <!-- headPhoto -->
      <image class="user-avatar" :src="item.headPhoto || $defaultAvatar" mode="aspectFill"></image>
      <view class="user-info">
        <view class="user-name">{{ item.userName || "--" }}</view>
        <view class="user-mobile u-flex-center">
          <text class="iconfont">&#xe679;</text>
          <view>{{ item.userMobile || "--" }}</view>
        </view>
        <view class="user-num">
          <text class="label">核销积分数：</text>
          <text class="value">{{ item.integral || "--" }}</text>
        </view>
      </view>
    </view>
    <view class="item-footer">
      <view class="item-footer-content u-flex-center-sb">
        <view class="label">核销时间：</view>
        <view class="value">{{ item.createTime || "--" }}</view>
      </view>
      <view class="item-footer-content u-flex-center-sb">
        <view class="label">核销员：</view>
        <view class="value">{{ item.verifierName || "--" }}</view>
      </view>
    </view>
  </view>
</template>

<script setup name="scoreItem">
import { ref, watch } from "vue";

const props = defineProps({
  item: {
    type: Object,
    required: true,
  },
});

const item = ref(props.item || {});

watch(
  () => props.item,
  (newValue) => {
    console.log(newValue);
    item.value = newValue;
  }
);
</script>

<style lang="scss" scoped>
.score-item {
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 24rpx;
  margin-bottom: 20rpx;
  padding: 40rpx 30rpx;
  .item-user {
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 30rpx;
    margin-bottom: 10rpx;
    .user-avatar {
      width: 146rpx;
      height: 146rpx;
      border-radius: 14rpx;
      flex-shrink: 0;
      margin-right: 30rpx;
    }
    .user-info {
      flex: 1;
      .user-name {
        font-size: 28rpx;
        font-weight: 700;
      }
      .user-mobile {
        font-size: 28rpx;
        color: #808080;
        margin: 7rpx 0;
        .iconfont {
          margin-right: 10rpx;
        }
      }
      .user-num {
        .label {
          font-size: 24rpx;
          color: #999999;
        }
        .value {
          font-size: 34rpx;
          font-weight: 700;
          color: #da4f4f;
        }
      }
    }
  }
  .item-footer {
    .item-footer-content {
      padding-top: 20rpx;
      .label {
        font-size: 28rpx;
        color: #999999;
        flex-shrink: 0;
        margin-right: 10rpx;
      }
      .value {
        font-size: 28rpx;
        color: #1a1a1a;
      }
    }
  }
}
</style>
