<template>
  <div class="container">
    <div class="container col-md-12">
      <div class="col-sm-12">
        <div class="about-img-box">
          <img
            v-if="menu.logo !== ''"
            :src="menu.logo"
            alt="Restaurant Details"
            class="img-fluid"
            style="width:800px;height:400px; border-radius:10px"
          />
          <img
            v-else
            src="../../../public/img/DefaultImg.png"
            class="img-fluid"
            style="width:800px;height:400px; border-radius:10px"
          />
        </div>
        <div class="sinse-box" style="border-radius:10px">
          <h3 class="sinse-title">{{ menu.name }}</h3>
          <p>{{ menu.categories }}</p>
          <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>{{ menu.deliveryFee }}</span>
            </li>
            <li>
              <h4 class="card-info-title">
                <img src="/img/delivery-truck-with-circular-clock.png" height="30px" width="30px" />
              </h4>
              <span>{{ menu.deliveryTime }}</span>
            </li>
          </ul>
          <p>{{ menu.suburb }}, {{ menu.city }}, {{ menu.province }}, {{ menu.postalCode }}</p>
        </div>
      </div>
    </div>
    <!-- TODO: Revisit this -->
    <!-- <div class="container col-md-12">
      <ul v-for="(item, i) in menu.categoryList" :key="i" class="navbar-nav">
        <li style="float: left;">{{item}}</li>
      </ul>
    </div>-->
    <div v-if="!showOptions">
      <div v-for="iMenu in menu.menuList" :key="iMenu.category">
        <div class="row section-t3" style="text-align:left">
          <div class="col-sm-12">
            <div class="title-box-d">
              <h3 class="title-d">{{ iMenu.category }}</h3>
            </div>
          </div>
          <div
            class="col-md-4"
            v-for="(iMenuItem, i) in iMenu.items"
            :key="i"
            style="cursor: pointer;"
          >
            <div class="carousel-item-c" @click="ShowOptions(iMenuItem)">
              <div class="card-box-b card-shadow news-box">
                <div class="img-box-b">
                  <img
                    v-if="iMenuItem.image !== ''"
                    :src="iMenuItem.image"
                    alt
                    class="img-b img-fluid"
                  />
                  <img
                    v-else
                    src="../../../public/img/DefaultImg.png"
                    alt
                    class="img-b img-fluid"
                    style="object-fit: cover;"
                  />
                </div>
                <div class="card-overlay">
                  <div class="card-header-b">
                    <div class="card-title-b">
                      <h2 class="title-2" style="color: #ffffff;">{{ iMenuItem.name }}</h2>
                    </div>
                    <div class="card-date">
                      <span class="date-a">{{ iMenuItem.description }}</span>
                    </div>
                    <br />
                    <div class="card-category-b">
                      <span class="category-b">
                        <b>{{ iMenuItem.price }}</b>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else>
      <MenuOptions :showItem="CurrentOption" @CloseOptions="CloseOptions" />
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import MenuOptions from "./menuOptions";

export default {
  name: "MenuLayout",
  components: {
    MenuOptions
  },
  data() {
    return {
      wait: true,
      radio: "",
      showOptions: false
    };
  },
  methods: {
    ...mapActions("homeMenu", ["getMenu", "getOptions"]),
    ShowOptions(item) {
      this.getOptions(item);
      this.showOptions = true;
    },
    CloseOptions(value) {
      this.showOptions = value;
    }
  },
  computed: {
    ...mapState("homeMenu", ["menu", "options"]),
    CurrentOption() {
      return this.options;
    }
  },
  mounted() {
    this.getMenu(this.$route.params.restautantid);
  }
  // watch: {
  //   options: {
  //     immediate: true,
  //     handler(val, oldVal) {
  //       if (val) this.options = val;
  //     }
  //   }
  // }
};
</script>
