<template>
  <div class="shop_list">
    <h3 class="shop_list-title">
      <span v-text="name"></span>
      <a @click.prevent="goto" :style="{ cursor: to ? 'pointer' : 'text' }"></a>
    </h3>

    <ul class="shop_cards">
      <li v-for="(item, index) in data" :key="'card_' + index">
        <shop-card
          :data="item"
          :showImg="showImg"
          :showSummary="showSummary"
          :detail-path="detailPath"
        ></shop-card>
      </li>
    </ul>
  </div>
</template>

<script>
import shopCard from "./shop-card";

export default {
  components: {
    shopCard,
  },
  props: {
    name: {
      type: String,
      required: true,
    },
    to: {
      type: String,
      required: true,
    },
    detailPath: {
      type: String,
      required: true,
    },
    data: {
      type: Array,
      default: () => [],
    },
    showImg: {
      type: Boolean,
      default: false,
    },
    showSummary: {
      type: Boolean,
      default: false,
    }
  },
  methods: {
    goto() {
      if (this.to) {
        this.$router.push(this.to);
      }
    },
  },
};
</script>

<style scoped>
.shop_list-title {
  margin: 13px 20px;
}
.shop_list-title > span {
  display: inline-block;
  vertical-align: middle;
  font-size: 18px;
  font-weight: bold;
  color: #0d1847;
  line-height: 27px;
}
.shop_list-title > a {
  display: inline-block;
  vertical-align: middle;
  background-image: url("../assets/imgs/home_btn_enter.png");
  width: 28px;
  height: 28px;
  background-size: 100%;
  vertical-align: -9px;
  margin-left: 5px;
}
.shop_list-title > a:hover {
  background-image: url("../assets/imgs/home_btn_enter_hov.png");
}
.shop_cards {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.shop_cards > li {
  width: calc((100% - 60px) / 4);
}
</style>
