<template>
  <!-- 浏览记录组件和收藏 -->
  <view class="browse">
    <u-card
      :head-border-bottom="false"
      v-for="(item, index) in list"
      :key="index"
    >
      <view slot="head" style="display: none"></view>
      <!-- 主体 -->
      <view slot="body">
        <view class="item u-border-bottom">
          <!-- 照片 -->
          <image class="imges" :src="`${imgUrl}${item.effectPictureCode}`" />
          <!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
          <view class="title-wrap">
            <view class="title">{{ item.styleTag }}</view>
            <!-- 款号 -->
            <view class="modelno">
              <text class="textStyle1">款号</text>
              <text class="textStyle2">{{ item.styleCode }}</text>
              <!-- 是否需要爱心 -->
              <view v-if="isbrowse">
                <image
                  @click="browerClick(item)"
                  src="@/static/images/brank/blackxin.png"
                  v-if="!item.isFavorite"
                ></image>
                <image
                  @click="browerClick(item)"
                  src="@/static/images/brank/lightxin.png"
                  v-else
                ></image>
              </view>
            </view>
            <!-- 面料 -->
            <view class="fabric">
              <text class="textStyle1">面料</text>
              <text class="textStyle2">{{ item.materialName }}</text>
            </view>
          </view>
        </view>
      </view>
    </u-card>
  </view>
</template>

<script>
export default {
  props: {
    //是否显示爱心
    isbrowse: {
      type: Boolean,
      default: false,
    },
    // 数据
    list: { type: Array },
  },
  data() {
    return {
      islove: false, // 爱心的黑暗显影
      imgUrl: this.$IMG_URL, // 图片前面的url
    };
  },
  computed: {},
  methods: {
    //收藏款式接口
    collectionFn(item) {
      this.$http("mobileBrand.styleCollect", { id: item }).then((res) => {
        if (res.code == 200) {
          this.$emit("update");
        }
      });
    },
    //取消款式接口
    unCollectionFn(param) {
      this.$http("mobileBrand.cancelCollect", param).then((res) => {
        if (res.code == 200) {
          this.$emit("update");
        }
      });
    },
    // 爱心点击
    browerClick(item) {
      if (item.isFavorite == true) {
        this.$u.toast(`已取消收藏`);
        console.log(item.id);
        this.unCollectionFn([item.id]);
      } else {
        this.$u.toast(`已收藏款式`);
        this.collectionFn(item.id);
      }
    },
  },
  components: {},
};
</script>

<style lang="scss" scoped>
// 选项
.checkstyle {
  font-size: 42rpx;
  margin-right: 10rpx;
}

.browse {
  ::v-deep .u-card__body {
    padding-top: 0rpx !important;
  }
  ::v-deep .u-card__head {
    padding-bottom: 0rpx !important;
  }
}
.item {
  display: flex;
  padding: 20rpx;
}

.imges {
  width: 162rpx;
  height: 162rpx;
  margin-right: 20rpx;
  border-radius: 12rpx;
}

.title {
  width: 440rpx;
  font-size: 28rpx;
  height: 40rpx;
  line-height: 40rpx;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 700;
  text-align: left;
  color: #333333;

  overflow: hidden; /*超出部分隐藏*/
  white-space: nowrap; /*禁止换行*/
  text-overflow: ellipsis;
}
//头部时间图标
.browseicon {
  width: 32rpx;
}
//头部时间
.browseTime {
  width: 252rpx;
  height: 32rpx;
  font-size: 32rpx;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  margin-left: 10rpx;
}
// 款号
.modelno {
  height: 40rpx;
  margin-top: 16rpx;
  display: flex;
  position: relative;
  image {
    height: 40rpx;
    width: 45rpx;
    position: absolute;
    right: 29rpx;
  }
}
//面料
.fabric {
  margin-top: 6rpx;
}
//款号面料
.textStyle1 {
  color: rgba(0, 0, 0, 0.4);
}
.textStyle2 {
  margin-left: 40rpx;
  font-size: 14px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 500;
  color: #333333;
}
::v-deep .u-border-bottom {
  padding-left: 0rpx;
}
</style>
