<template>
  <view class="yfs-record-item">
    <image
      v-if="item"
      class="yfs-record-avatar"
      :src="item.avatar"
      mode="aspectFill"
    ></image>
    <view v-else class="yfs-record-avatar skeleton"></view>
    <view v-if="item" class="yfs-record-code">{{ item.nickname }}</view>
    <view v-else class="yfs-record-code"><view class="skeleton"></view></view>
    <view v-if="item" class="yfs-record-last">
      <view
        :class="[
          'yfs-record-label',
          {
            'yfs-record-label-dark': item.is_final,
          },
        ]"
        >{{ item.level_name }}赏</view
      >
      <view class="yfs-record-name">{{ item.name }}</view>
    </view>
    <view v-else class="yfs-record-last">
      <view class="yfs-record-label skeleton"></view>
      <view class="yfs-record-name skeleton"></view>
    </view>
  </view>
</template>

<script>
export default {
  name: "YfsRecordItem",
  props: {
    item: {
      type: Object,
      default: () => null,
    },
  },
  data() {
    return {};
  },

  methods: {
    handleClick() {
      this.$emit("click", this.item);
    },
  },
};
</script>

<style lang="scss">
.yfs-record-item {
  display: flex;
  align-items: center;
  height: 110rpx;
  .skeleton {
    background-image: linear-gradient(
      90deg,
      #252932 25%,
      #2c3241 37%,
      #252932 63%
    );
    list-style: none;
    background-size: 400% 100%;
    background-position: 100% 50%;
    animation: skeleton-loading 1.4s ease infinite;
  }
  .yfs-record-avatar {
    width: 60rpx;
    height: 60rpx;
    background-color: #d9d9d9;
    margin-right: 22rpx;
    border-radius: 100%;
  }
  .yfs-record-code {
    flex: 1;
    width: 0;
    font-size: 26rpx;
    color: #ffffff;
    .skeleton {
      width: 300rpx;
      height: 36rpx;
    }
  }
  .yfs-record-last {
    text-align: right;
    margin-left: 22rpx;
  }
  .yfs-record-label {
    font-family: ysbth;
    font-size: 32rpx;
    color: #4efbff;
    line-height: 42rpx;
    &.yfs-record-label-dark {
      color: #fc5e94;
    }
    &.skeleton {
      height: 42rpx;
      width: 60rpx;
      margin: 0 0 0 auto;
    }
  }
  .yfs-record-name {
    white-space: nowrap;
    font-size: 22rpx;
    color: #ffffff;
    line-height: 30rpx;
    &.skeleton {
      height: 30rpx;
      width: 174rpx;
      margin: 0 0 0 auto;
    }
  }
}
</style>
