<template>
  <div class="about--page page--container">
    <section class="s1">
      <div class="container">
        <div class="txt">
          <h1>درباره کافه رستوران برگ</h1>
          <!-- <p>{{storeInfo.caption}}</p> -->
           <p>
            وسعت یک شهر، زیر پای شماست،
            <br />
و منظره ای از یک فضای آرام میخکوبتان خواهد کرد.
<br />
رستوران برگ با این ویژگی های منحصر به فرد، تجربه ی بی نظیری از طعم انواع کباب های ایرانی را برای شما به ارمغان خواهد آورد.
<br />
این مجموعه با ظرفیت پذیرش 200 مهمان ، سالهاست نامی آشنا میان همشهریان اراکی است.

           </p>
        </div>
      </div>
    </section>
    <section class="s2">
<!--      <div id="slick">-->
<!--        <div>-->
<!--          <img src="~/assets/img/aboutPage/about-i1.jpg" data-thumb-image="1" alt="">-->
<!--        </div>-->
<!--        <div>-->
<!--          <img src="~/assets/img/aboutPage/about-i2.jpg" data-thumb-image="2" alt="">-->
<!--        </div>-->
<!--        <div>-->
<!--          <img src="~/assets/img/aboutPage/about-i3.jpg" data-thumb-image="3" alt="">-->
<!--        </div>-->
<!--        <div>-->
<!--          <img src="~/assets/img/aboutPage/about-i4.jpg" data-thumb-image="4" alt="">-->
<!--        </div>-->
<!--        <div>-->
<!--          <img src="~/assets/img/aboutPage/about-i4.jpg" data-thumb-image="5" alt="">-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="imageModal">-->
<!--        <div class="relativePos">-->
<!--          <div class="bg"></div>-->
<!--          <div class="imgBox">-->
<!--            <div class="relativePos">-->
<!--              <IconsCloseBtn class="close&#45;&#45;btn"/>-->
<!--              &lt;!&ndash; images will be here &ndash;&gt;-->
<!--              <img src="~/assets/img/aboutPage/about-i1.jpg" data-2x-image="1" alt="">-->
<!--              <img src="~/assets/img/aboutPage/about-i2.jpg" data-2x-image="2" alt="">-->
<!--              <img src="~/assets/img/aboutPage/about-i3.jpg" data-2x-image="3" alt="">-->
<!--              <img src="~/assets/img/aboutPage/about-i4.jpg" data-2x-image="4" alt="">-->
<!--              <img src="~/assets/img/aboutPage/about-i4.jpg" data-2x-image="5" alt="">-->
<!--              &lt;!&ndash; images will be here &ndash;&gt;-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
    </section>
  </div>
</template>


<script>
if (process.client) require('slick-carousel')
export default {
  data(){
    return{
      storeInfo :null
    }
  },
  mounted() {
    ////////////////////////////////////////////////////////////////////////
    $('#slick').slick({
      slidesToShow: 4,
      rtl: true,
      draggable: false
    })

    $('#slick img').click(function () {
      $('.about--page .imageModal img').removeClass('zoom')
      $('.about--page .imageModal').addClass('modal--active')
      $(`.about--page *[data-2x-image="${$(this).attr('data-thumb-image')}"]`).addClass('zoom')
    })

    $('.about--page .imageModal .bg,.about--page .imageModal .close--btn').click(function () {
      $('.about--page .imageModal').removeClass('modal--active')
      $('.about--page .imageModal img').removeClass('zoom')
    })

    ////////////////////////////////////////////////////////////////////////
  },
  async asyncData({$axios, error}) {
    try {
      const storeInfo = await $axios.get('/api/public/storeInfo')
      return {
        storeInfo: storeInfo.data
      }
    } catch (e) {
      if (e?.response?.status === 401) {
        error({
          status: 401,
          message: 'شما اجازه دسترسی به این صفحه را ندارید لطفا دوباره وارد شوید'
        })
      } else {
        error({
          status: 500,
          message: "مشکلی در گرفتن اطلاعات بوجود آمده است",
        });
      }
    }
  }
}
</script>
