<template>
  <view class="whole">
    <view class="hots" v-for="(item, index) in recordsList" :key="index">
      <image
        class="indexhot"
        :src="`${imgUrl}${item.effectPictureCode}`"
        @click="tabdetail(item)"
        mode="aspectFill"
      ></image>

      <view class="hotborder">
        <view class="hotText1">{{ item.styleTag }}</view>
        <view class="hotText2">
          <image
            class="iconhot"
            :src="`${imgUrl}${item.effectPictureCode}`"
            mode=""
          ></image>
          <text class="wen">{{ item.materialName }}</text>
          <image
            class="iconLove"
            src="@/static/images/brank/blackxin.png"
            v-if="!item.isFavorite"
            @click="tabImage(item)"
          >
          </image>
          <image
            class="iconLove"
            src="@/static/images/brank/lightxin.png"
            v-else
            @click="tabImage(item)"
          ></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    // 数据
    recordsList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      imgUrl: this.$IMG_URL, // 上传地址
    };
  },
  created() {
    // this.unCollectionFn(1);
  },
  methods: {
    // 点击切换心心选项
    tabImage(item) {
      // console.log(item.isFavorite);
      if (item.isFavorite == true) {
        this.$u.toast(`已取消收藏`);
        this.unCollectionFn(item.id);
      } else {
        this.$u.toast(`已收藏款式`);
        this.collectionFn(item.id);
      }
    },
    // 跳转到详情
    tabdetail(item) {
      console.log(1);
      this.$Router.push("/pages/brands/detail?id=" + item.id);
    },
    //收藏款式接口
    collectionFn(item) {
      this.$http("mobileBrand.styleCollect", { id: item }).then((res) => {
        if (res.code == 200) {
          this.$emit("update");
        }
      });
    },
    //取消款式接口
    unCollectionFn(item) {
      let param = [item];
      this.$http("mobileBrand.cancelCollect", param).then((res) => {
        if (res.code == 200) {
          this.$emit("update");
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.whole {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.hots {
  height: 578rpx;
  width: 330rpx;
  margin-bottom: 20rpx;
  // margin-right: 16rpx;
  border: 2rpx solid #e3e1e0;

  .indexhot {
    display: inline-block;
    height: 434rpx;
    width: 330rpx;
    border-radius: 10rpx 10rpx 0 0;
  }

  .hotborder {
    height: 144rpx;
    // width: 193rpx;
    // border: 2rpx solid #e3e1e0;
    // border-top: 0rpx !important;
    border-radius: 0 0 10rpx 10rpx;
  }

  .hotText1 {
    font-size: 24rpx;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.8);
    margin: 24rpx 0rpx 0 0rpx;
    padding: 0 28rpx 0rpx 28rpx;
    width: 100%;

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .hotText2 {
    width: 100%;
    // background-color: red;
    margin-top: 16rpx;
    display: flex;
    align-items: center;

    // margin: 24rpx 0rpx 0 20rpx;
    .iconhot {
      width: 40rpx;
      height: 40rpx;
      margin-left: 20rpx;
    }

    .wen {
      width: 192rpx;
      font-size: 24rpx;
      margin-left: 10rpx;

      overflow: hidden;
      /*超出部分隐藏*/
      white-space: nowrap;
      /*禁止换行*/
      text-overflow: ellipsis;
    }

    .iconLove {
      width: 36rpx;
      height: 32rpx;
      margin-left: 20rpx;
    }
  }
}
</style>