<template>
  <view
    :class="['yfs-item', { 'yfs-sell-out': item.curr_num === 0 }]"
    @click="handleClick"
  >
    <view v-if="item" class="yfs-item-media">
      <image class="yfs-item-img" :src="item.img" mode="aspectFill"></image>
      <view class="yfs-item-bar">
        <view
          :class="[
            'yfs-item-label',
            {
              'yfs-item-label-dark': item.is_final,
            },
          ]"
          >{{ item.sub_info }}赏</view
        >
        <view class="yfs-item-number"
          >{{ item.curr_num }}/{{ item.total_num }}</view
        >
        <view class="yfs-item-progress">{{ item.percent }}</view>
      </view>
    </view>
    <view v-else class="yfs-item-media skeleton"></view>
    <view v-if="item" class="yfs-item-body">
      <view class="yfs-item-title">{{ item.name }}</view>
      <view class="yfs-item-desc">参考价:&yen;{{ item.sale_price }}</view>
    </view>
    <view v-else class="yfs-item-body">
      <view class="yfs-item-title skeleton"></view>
      <view class="yfs-item-desc skeleton"></view>
    </view>
  </view>
</template>

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

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

<style lang="scss">
.yfs-item {
  width: 220rpx;
  height: 290rpx;
  background: linear-gradient(180deg, #1c1c20 0%, #252932 100%);
  border: 2rpx solid;
  border-image: linear-gradient(
      180deg,
      rgba(75, 119, 215, 1),
      rgba(51, 216, 174, 1),
      rgba(65, 168, 217, 1),
      rgba(33, 216, 165, 1),
      rgba(91, 110, 229, 1)
    )
    2 2;
  position: relative;
  .skeleton {
    // background-color: #f1f1f1;
    background-image: linear-gradient(
      90deg,
      #1c1c20 25%,
      #252932 37%,
      #1c1c20 63%
    );
    width: 100%;
    height: 0.6rem;
    list-style: none;
    background-size: 400% 100%;
    background-position: 100% 50%;
    animation: skeleton-loading 1.4s ease infinite;
  }
  &.yfs-sell-out::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: url(@/assets/icon/icon-none.png) no-repeat center
      rgba(0, 0, 0, 0.76);
    background-size: 145rpx 132rpx;
  }
  .yfs-item-media {
    width: 220rpx;
    height: 220rpx;
    position: relative;
    .yfs-item-img {
      width: 220rpx;
      height: 220rpx;
    }
    .yfs-item-bar {
      box-sizing: border-box;
      width: 100%;
      height: 32rpx;
      font-size: 20rpx;
      color: #ffffff;
      line-height: 32rpx;
      display: flex;
      position: absolute;
      left: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.6);
      padding-right: 8rpx;
      .yfs-item-number {
        flex: 1;
      }
      .yfs-item-label {
        background: #4efbff;
        padding: 0 6rpx;
        font-weight: 500;
        color: #222222;
        position: relative;
        margin-right: 18rpx;

        &::after {
          position: absolute;
          content: "";
          border-style: solid;
          border-color: transparent transparent transparent #4efbff;
          border-width: 32rpx 0 0 12rpx;
          left: 100%;
          top: 0;
        }
        &.yfs-item-label-dark {
          background-color: #fc5e94;
          &::after {
            border-color: transparent transparent transparent #fc5e94;
          }
        }
      }
    }
  }
  .yfs-item-body {
    padding: 8rpx 18rpx 0;
    .yfs-item-title {
      width: 100%;
      height: 30rpx;
      overflow: hidden;
      white-space: nowrap;
      font-size: 22rpx;
      color: #ffffff;
      line-height: 30rpx;
      text-overflow: ellipsis;
    }
    .yfs-item-desc {
      width: 100%;
      height: 26rpx;
      overflow: hidden;
      white-space: nowrap;
      font-size: 22rpx;
      color: #7f8798;
      line-height: 26rpx;
      text-overflow: ellipsis;
      &.skeleton {
        width: 70%;
      }
    }
  }
}
</style>
