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

    <ul class="shop_cards">
      <li v-for="(item, index) in data" :key="'card_' + index">
        <shop-card :data="item" :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,
      required: true,
    },
  },
  methods: {
    goto() {
      if (this.to) {
        this.$router.push(this.to);
      }
    },
  },
};
</script>

<style scoped>
.shop_list-title {
  margin: 13px 20px;
}
.shop_list-title > span {
  font-size: 18px;
  font-weight: bold;
  color: #0d1847;
  line-height: 27px;
}
.shop_list-title > a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  background-color: #fff;
  border: 1px solid #edeff6;
  border-radius: 5px;
  overflow: hidden;
  margin-left: 10px;
}
.shop_list-title > a > i {
  font-weight: bolder;
  color: #1e3595;
}
.shop_cards {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.shop_cards > li {
  width: calc((100% - 60px) / 4);
}
</style>
