<template>
  <div class="container">
    <div class="form-group row"></div>
    <div class="form-group row">
      <div class="col-md-4" v-for="restaurant in restaurants" :key="restaurant.id">
        <router-link :to="`/Menu/${restaurant.id}`">
          <div class="card-box-a card-shadow">
            <div class="img-box-a">
              <img
                :src="restaurant.logo"
                alt
                class="img-a img-fluid"
                style="height:350px; width:350px; object-fit: cover;"
              />
            </div>
            <div class="card-overlay">
              <div class="card-overlay-a-content">
                <div class="card-header-a">
                  <h2 class="card-title-a">
                    <router-link :to="'/Search'" class="link-a">
                      {{
                      restaurant.name
                      }}
                    </router-link>
                  </h2>
                  <h3 class="card-title-b">
                    <router-link :to="`/Menu/${restaurant.id}`" class="link-a">
                      {{
                      restaurant.suburb
                      }}
                    </router-link>
                  </h3>
                  <h4 class="card-title-c">
                    <router-link :to="`/Menu/${restaurant.id}`" class="link-a">
                      {{
                      restaurant.subText
                      }}
                    </router-link>
                  </h4>
                </div>
                <div class="card-body-a">
                  <div class="price-box d-flex"></div>
                  <router-link :to="`/Menu/${restaurant.id}`" class="link-a">
                    <span class="ion-ios-arrow-forward"></span>
                  </router-link>
                </div>
                <div class="card-footer-a">
                  <ul class="card-info d-flex justify-content-around">
                    <li>
                      <h4 class="card-info-title">
                        <img src="/img/delivery-truck-with-dollar.png" height="30px" width="30px" />
                      </h4>
                      <span>{{ restaurant.deliveryFee }}</span>
                    </li>
                    <li>
                      <h4 class="card-info-title">
                        <img
                          src="/img/delivery-truck-with-circular-clock.png"
                          height="30px"
                          width="30px"
                        />
                      </h4>
                      <span>{{ restaurant.deliveryTime }}</span>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </router-link>
      </div>
    </div>
    <div v-if="wait" id="preloader"></div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";

export default {
  name: "restaurantSections",
  data() {
    return {
      wait: true
    };
  },
  methods: {
    ...mapActions("restaurantSearch", ["getRestaurants"])
  },
  computed: {
    ...mapState("restaurantSearch", ["restaurants"])
  },
  mounted() {
    this.getRestaurants().then(() => {
      this.wait = false;
    });
  }
};
</script>
