<template>
  <view :class="['level-wrap', `level-wrap-${item.level}`]">
    <view class="level-title"
      ><text class="level-title-type">{{ item.level }}</text
      >概率：{{ item.percent }}</view
    >
    <view class="level-item-list">
      <view
        v-for="goods in item.data"
        :key="goods.id"
        class="level-item"
        @click="handleClick(goods)"
      >
        <image
          :src="goods.img"
          mode="aspectFill"
          class="level-item-img"
        ></image>
        <view class="level-item-name">{{ goods.name }}</view>
      </view>
    </view>
  </view>
</template>

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

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

<style lang="scss">
.level-wrap {
  width: 702rpx;
  background: #1b1c1e;
  box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(242, 83, 83, 0.25);
  border: 2rpx solid rgba(242, 83, 83, 0.3);
  margin: 0 auto 20rpx;
  .level-title {
    height: 42rpx;
    width: 100%;
    background: left center no-repeat;
    background-image: linear-gradient(
      90deg,
      rgba(188, 69, 70, 0.5) 0%,
      rgba(242, 83, 83, 0) 80%
    );
    background-size: 246rpx 100%;
    padding: 0 18rpx;
    line-height: 42rpx;
    font-size: 24rpx;
    font-family: ysbth;
    color: #ffffff;
    .level-title-type {
      font-size: 34rpx;
      color: #fc5e94;
      margin-right: 18rpx;
    }
  }
  .level-item-list {
    display: flex;
    justify-content: start;
    align-items: flex-start;
    overflow: auto;
    padding: 8rpx;
    .level-item {
      flex-shrink: 0;
      box-sizing: border-box;
      width: 150rpx;
      height: 180rpx;
      background: url(@/assets/detail/level-item-bg.png) no-repeat center;
      background-size: contain;
      margin: 8rpx 5rpx;
      padding-top: 26rpx;
      .level-item-img {
        width: 96rpx;
        height: 96rpx;
        display: block;
        margin: 0 auto 12rpx;
      }
      .level-item-name {
        text-align: center;
        width: 120rpx;
        margin: 0 auto;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        font-size: 20rpx;
        color: #ffffff;
        line-height: 23rpx;
      }
    }
  }
  &.level-wrap-sp,
  &.level-wrap-SP {
    .level-title {
      background-image: linear-gradient(
        90deg,
        rgba(188, 69, 70, 0.5) 0%,
        rgba(242, 83, 83, 0) 100%
      );
      .level-title-type {
        color: #f25353;
      }
    }
  }
  &.level-wrap-ssr,
  &.level-wrap-SSR {
    .level-title {
      background-image: linear-gradient(
        90deg,
        rgba(255, 217, 82, 0.51) 0%,
        rgba(255, 217, 82, 0) 100%
      );
      .level-title-type {
        color: #ffd952;
      }
    }
  }
  &.level-wrap-sr,
  &.level-wrap-SR {
    .level-title {
      background-image: linear-gradient(
        90deg,
        rgba(252, 94, 148, 0.5) 0%,
        rgba(252, 94, 148, 0) 100%
      );
      .level-title-type {
        color: #fc5e94;
      }
    }
  }
  &.level-wrap-r,
  &.level-wrap-R {
    .level-title {
      background-image: linear-gradient(
        90deg,
        rgba(78, 251, 255, 0.5) 0%,
        rgba(78, 251, 255, 0) 100%
      );
      .level-title-type {
        color: #4efbff;
      }
    }
  }
  &.level-wrap-n,
  &.level-wrap-N {
    .level-title {
      background-image: linear-gradient(
        90deg,
        rgba(0, 199, 119, 0.6) 0%,
        rgba(75, 216, 90, 0) 100%
      );
      .level-title-type {
        color: #4bd85a;
      }
    }
  }
}
</style>
