<template>
  <view class="home-list">
    <view v-if="showHeader" class="home-list-header">
      <view v-if="headerType === 'left'">
        <image src="https://img.lkbang.net/xcx/guess_like.png" />
        <text>猜你喜欢</text>
      </view>
      <view v-if="headerType === 'center'" class="Hl-header-center">猜你喜欢</view>
    </view>
    <view class="home-list-container">
      <view class="left">
        <Card :list="leftList" :is-delete="isDelete" :no-share="noShare" />
      </view>
      <view class="right">
        <Card :list="rightList" :is-delete="isDelete" :no-share="noShare" />
      </view>
    </view>
  </view>
</template>
<script>
import Card from "./card.vue";
export default {
  name: "GoodsCard",

  components: {
    Card
  },
  props: {
    goodsList: {
      type: Array,
      default: () => []
    },
    showHeader: {
      type: Boolean,
      default: true
    },
    isDelete: {
      type: Boolean,
      default: true
    },
    headerType: {
      type: String,
      default: "left"
    },
    noShare: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    leftList() {
      return this.goodsList.filter((item, index) => index % 2 === 0);
    },
    rightList() {
      return this.goodsList.filter((item, index) => index % 2 === 1);
    }
  }
};
</script>
<style lang="scss" scoped>
.home-list {
  &-header {
    display: flex;
    align-items: center;
    padding: 20rpx 20rpx 0;
    height: 96rpx;
    font-size: 36rpx;
    color: #333333;
    image {
      margin-right: 10rpx;
      width: 40rpx;
      height: 40rpx;
    }
    .Hl-header-center {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 30rpx 0;
      width: 100%;
      font-size: 24rpx;
      color: #999999;
      text-align: center;
      &:before,
      &:after {
        display: inline-block;
        content: "";
        width: 100rpx;
        height: 0;
        border-top: 2rpx solid #d8d8d8;
        margin-right: 10rpx;
      }
      &:after {
        margin-left: 10rpx;
        margin-right: 0;
      }
    }
  }
  &-container {
    padding-top: 20rpx;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    height: 100%;
    .Hl-container-item {
      position: relative;
      margin-bottom: 25rpx;
      width: 339rpx;
      background: #fff;
      border-radius: 12rpx;
      &-img {
        height: 340rpx;
        display: flex;
        align-items: center;
      }
      .Hlc-item-img {
        width: 100%;
        height: 346rpx;
        border-radius: 12rpx;
      }
      .Hlc-item-title {
        height: 76rpx;
        margin: 10rpx 20rpx 0rpx 14rpx;
        text {
          font-size: 26rpx;
          line-height: 36rpx;
          color: #333333;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }

      .Hlc-item-tag {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        margin: -10rpx 0rpx 0rpx 14rpx;

        &-normal {
          display: inline-block;
          font-size: 10px;
          box-sizing: border-box;
          border: 1rpx solid #ff5a4b;
          color: #ff5a4b;
          padding: 0px 4px;
          border-radius: 3px;
          margin-right: 5px;
          line-height: 14px;
        }
        &-icon {
          height: 14px;
          margin-right: 5px;
        }
      }

      .Hlc-item-info {
        margin: 16rpx 20rpx 14rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .Hlcu-info-left {
          display: flex;
          align-items: flex-end;
          text {
            &:nth-child(1) {
              font-size: 20rpx;
              color: #ec3333;
              font-weight: bold;
            }
            &:nth-child(2) {
              margin-right: 4rpx;
              font-size: 30rpx;
              line-height: 34rpx;
              color: #ec3333;
              font-weight: bold;
            }
            &:nth-child(3) {
              font-size: 19rpx;
              line-height: 26rpx;
              color: #999999;
              text-align: right;
            }
          }
        }
        .Hlcu-info-right {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 6rpx;
          // width: 66rpx;
          width: 40rpx;
          height: 40rpx;
          .Hlcui-right-dot {
            width: 6rpx;
            height: 6rpx;
            background: #d8d8d8;
            border-radius: 50%;
          }
          // font-size: 35rpx;
          // line-height: 26rpx;
          // letter-spacing: -6rpx;
          // color: #D8D8D8;
        }
      }
      .Hlc-item-mask {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: rgba(0, 0, 0, 0.4);
        border-radius: 12rpx;
        .Hlci-mask-button {
          padding: 0 60rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 266rpx;
          height: 60rpx;
          border-radius: 31rpx;
          font-size: 24rpx;
          color: #333333;
          &:first-child {
            margin-bottom: 40rpx;
          }
          image {
            width: 36rpx;
            height: 36rpx;
          }
        }
      }
    }
  }
}
</style>
