<template>
  <view v-if="Object.keys(enjoyGoods).length" class="member-goods">
    <view class="content">
      <view class="title">
        <text class="big">{{ enjoyGoods.title || "" }}</text>
        <text class="point">·</text>
        <text class="small">{{ enjoyGoods.desc || "" }}</text>
      </view>
      <view v-if="enjoyGoods.goodsList && enjoyGoods.goodsList.length" class="goods-list">
        <view
          v-for="(item, index) in enjoyGoods.goodsList"
          :key="index"
          class="goods-list-item"
          @click="toGoodDetail(item.jumpUrl)"
        >
          <view class="goods-list-item-img">
            <image :src="item.goodsImage" mode="widthFix" style="width: 100%; height: auto" />
          </view>
          <text class="goods-list-item-name">{{ item.goodsName || "" }}</text>
          <!-- <view class="goods-list-item-tag">
            
          </view> -->
          <goodMemberTag />
          <text v-if="item.vipPrice" class="goods-list-item-price">¥{{ item.vipPrice }}</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import goodMemberTag from "@/components/goodMemberTag.vue";
import { jumpToUrl } from "@/mixins/common";
export default {
  components: {
    goodMemberTag
  },
  props: {
    enjoyGoods: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    toGoodDetail(url) {
      jumpToUrl(url);
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/style/var.scss";
.member-goods {
  padding-top: 26rpx;
  background: $gray-1;
  display: flex;
  justify-content: center;
  .content {
    width: 702rpx;
    height: 526rpx;
    padding: 24rpx;
    box-sizing: border-box;
    background-image: url("https://img.lkbang.net/xcx/memberCenter/goods_bg.png");
    background-size: cover;
    .title {
      display: flex;
      align-items: center;
      .big {
        color: #832700;
        font-weight: $font-weight-bold;
        @include text-size(32);
      }
      .point {
        color: #b45805;
        font-weight: $font-weight-bold;
        @include text-size(36);
        margin: 0 $padding-unit;
      }
      .small {
        color: #c15200;
        @include text-size(24);
      }
    }
    .goods-list {
      width: 100%;
      display: flex;
      overflow-x: auto;
      margin-top: $padding-sm;
      &-item {
        margin-right: 20rpx;
        flex-shrink: 0;
        width: 278rpx;
        height: 400rpx;
        background: $white;
        border-radius: 16rpx;
        padding: 6rpx 24rpx;
        display: flex;
        flex-direction: column;
        // align-items: center;
        &-img {
          flex-shrink: 0;
          width: 228rpx;
          height: 228rpx;
        }
        &-name {
          margin-top: 12rpx;
          font-size: 22rpx;
          height: 60rpx;
          flex-shrink: 0;
          color: $black;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        &-tag {
          height: 28rpx;
          flex-shrink: 0;
          width: 100%;
        }
        &-price {
          margin-top: $padding-unit;
          @include text-size(24);
          color: $gray-5;
        }
      }
    }
  }
}
</style>
