<template>
  <view class="yfs-result-item">
    <view class="yfs-result-img-wrap">
      <image class="yfs-result-img" :src="item.img" mode="aspectFill" />
    </view>
    <view class="yfs-result-body">
      <view class="yfs-result-title">{{ item.nickname }}</view>
      <view
        :class="[
          'yfs-result-label',
          {
            'yfs-result-label-dark': item.is_final === 1,
            'yfs-result-label-dark2': item.is_final === 2,
          },
        ]"
        >{{ item.level_name }}</view
      >
      <view class="yfs-result-desc">{{ item.name }}</view>
    </view>
    <view class="yfs-result-num">x{{ item.number }}发</view>
  </view>
</template>

<script>
export default {
  name: "YfsResultItem",
  props: {
    item: {
      type: Object,
      default: () => null,
    },
  },
  data() {
    return {};
  },
  methods: {
    handleClick() {
      this.$emit("click", this.item);
    },
  },
};
</script>

<style lang="scss">
.yfs-result-item {
  display: flex;
  align-items: center;
  width: 704rpx;
  border-bottom: 2rpx solid #262628;
  margin: 0 auto;
  padding: 28rpx 0 26rpx;
  .yfs-result-img-wrap {
    box-sizing: border-box;
    width: 150rpx;
    height: 152rpx;
    padding: 26rpx 26rpx 30rpx;
    background: url(@/assets/detail/result-bg.png) no-repeat;
    background-size: contain;
    overflow: hidden;
    margin-right: 18rpx;
  }
  .yfs-result-img {
    display: block;
    width: 100%;
    height: 100%;
  }
  margin-right: 18rpx;
  .yfs-result-body {
    width: 0;
    flex: 1;
    overflow: hidden;
    .yfs-result-title {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      height: 40rpx;
      font-size: 28rpx;
      font-weight: 500;
      color: #ffffff;
      line-height: 40rpx;
    }
    .yfs-result-desc {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      height: 34rpx;
      font-size: 24rpx;
      color: #ffffff;
      line-height: 40rpx;
    }
  }
  .yfs-result-num {
    font-size: 24rpx;
    color: #4efbff;
    white-space: nowrap;
    margin-left: 18rpx;
  }

  .yfs-result-label {
    height: 46rpx;
    font-size: 36rpx;
    color: #4efbff;
    line-height: 46rpx;
    font-family: ysbth, Helvetica Neue, Helvetica, Arial, Hiragino Sans GB,
      Hiragino Sans GB W3, Microsoft YaHei UI, Microsoft YaHei,
      WenQuanYi Micro Hei, sans-serif;
    &.yfs-result-label-dark {
      color: #fc5e94;
    }
    &.yfs-result-label-dark2 {
      color: #fbff00;
    }
  }
}
</style>
