<template>
  <view class="home-list">
    <view v-if="goodsList.length" class="home-list-header">
      <view class="Hl-header-center">{{ title }}</view>
    </view>
    <view class="home-list-container">
      <view class="left">
        <Card :list="leftList" :show-cart="showCart" />
      </view>
      <view class="right">
        <Card :list="rightList" :show-cart="showCart" />
      </view>
    </view>
  </view>
</template>
<script>
import { saTrackEvent } from "@/utils/sa.js";
import Card from "./card.vue";
export default {
  components: {
    Card
  },
  props: {
    goodsList: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      default: "猜你喜欢"
    },
    showCart: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    leftList() {
      return this.goodsList.filter((item, index) => index % 2 === 0);
    },
    rightList() {
      return this.goodsList.filter((item, index) => index % 2);
    }
  },
  methods: {
    toDetail(good, index) {
      const currentPage = getCurrentPages();
      saTrackEvent("PD_YXMMAEC_UserClickCommodityDetailGuessYouLikeCommodityCard", {
        page_id: currentPage[currentPage.length - 1].route,
        commodity_id: good.goodsId,
        position_number: index
      });
      uni.reportAnalytics("c_commoditydetailguessyoulike", {
        page_id: currentPage[currentPage.length - 1].route,
        commodity_id: good.goodsId,
        position_number: index
      });
      uni.navigateTo({
        url: `/pages/product/goodDetail?skuNo=${
          good.goodsId
        }&count=1&receiverId=&goodsName=${encodeURIComponent(good.goodsName)}&goodsImage=${
          good.goodsImage
        }`
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.home-list {
  &-header {
    display: flex;
    align-items: center;
    padding: 0rpx 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 {
    // display: flex;
    // justify-content: space-between;
    // flex-wrap: wrap;
    .left {
      float: left;
      width: 49%;
      height: 100%;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
    }
    .right {
      float: right;
      width: 49%;
      height: 100%;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
    }
  }
}
</style>
