<template>
  <div class="home-list">
    <div v-if="goodsList.length" class="home-list-header">
      <div class="Hl-header-center">{{ title }}</div>
    </div>
    <div class="home-list-container">
      <div class="left">
        <Card :list="leftList" :show-cart="showCart" />
      </div>
      <div class="right">
        <Card :list="rightList" :show-cart="showCart" />
      </div>
    </div>
  </div>
</template>
<script>
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);
    }
  }
};
</script>
<style lang="less" scoped>
.home-list {
  &-header {
    .text-size(18);
    display: flex;
    align-items: center;
    padding: 0 10px 0;
    height: 48px;
    color: @black;
    .Hl-header-center {
      color: @gray-4;
      .text-size(12);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 15px 0;
      width: 100%;
      text-align: center;
      &:before,
      &:after {
        display: inline-block;
        content: '';
        width: 50px;
        height: 0;
        border-top: 1px solid @gray-7;
        margin-right: 5px;
      }
      &:after {
        margin-left: 5px;
        margin-right: 0;
      }
    }
  }
  &-container {
    overflow: hidden;
    .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>
