<template>
  <div>
    <q-carousel
      v-model="slide"
      transition-prev="slide-right"
      transition-next="slide-left"
      animated
      swipeable
      control-color="white"
      navigation
      padding
      arrows
      height="35em"
      class="bg-grey-10 shadow-1"
    >
      <q-carousel-slide
        v-for="slide in slides"
        :key="slide.image"
        :img-src="`statics/carousel/${slide.image}.png`"
        :name="slide.image"
        class="column no-wrap">
        <div class="carousel-title">
          <div class="text-h2 title" >
            <span class="q-pa-xs">{{ $t(slide.title) }}</span>
          </div>
          <div class="text-h5 subtitle">
            <span class="q-pa-xs">{{ $t(slide.subtitle) }}</span>
          </div>
        </div>
      </q-carousel-slide>
    </q-carousel>
    <h2 class="text-center text-grey-7">{{$t('recentNews')}}</h2>
    <div class="q-pa-sm row items-start">
      <div
        class="new-card q-pa-sm"
        v-for="myNew in news"
        :key="myNew.id">
        <q-card>
          <q-img :src="`${$imageBase}/news/full/${myNew.image}`">
          </q-img>
          <q-card-section>
            <div class="text-h4">{{ myNew.title }}</div>
          </q-card-section>
          <q-card-section class="new-body" v-html="myNew.text">
          </q-card-section>
        </q-card>
      </div>
    </div>
    <q-page-sticky position="bottom-right" :offset="[18, 18]">
      <q-btn
        fab
        icon="add_shopping_cart"
        color="accent"
        :to="{name: 'catalog'}"
        :title="$t('startOrder')"
      />
    </q-page-sticky>
  </div>
</template>

<style lang="stylus" scoped>
  .carousel-title
    position absolute
    margin 5em
    bottom 0
    left 0
    .title
      color: white
      text-shadow: 1px 1px 2px rgba(0, 0, 0, .4), 0 0 1em rgba(0, 0, 0, .4), 0 0 0.2em rgba(0, 0, 0, .4);
      span
        background-color rgba(234, 143, 0, .7)
    .subtitle
      margin-top .8em
      color: white
      span
        background-color rgba(234, 143, 0, .7)

  .new-card
    width 100%
  @media screen and (min-width: 1000px) and (max-width: 1399px)
    .new-card
      width 50%
  @media screen and (min-width: 1400px) and (max-width: 1699px)
    .new-card
      width 33.33%
  @media screen and (min-width: 1700px)
    .new-card
      width 25%;
</style>

<style lang="stylus">
  .new-body
    a
      text-decoration none
      color #385898
      &:hover
        text-decoration: underline
    h1
      font-size 3em
    h2
      font-size 2em
    h3
      font-size 1.6em
    h4
      font-size 1.3em
    h5
      font-size 1em
    h6
      font-size .8em
</style>

<script>
export default {
  name: 'PageIndex',
  data () {
    return {
      slide: null,
      slides: [
        {
          image: 'tulip',
          title: 'weThinkForYou',
          subtitle: 'everythingYouNeed'
        }, {
          image: 'orders',
          title: 'servedOrdersAmount',
          subtitle: 'servedOrders'
        }, {
          image: 'sales',
          title: 'nEmployees',
          subtitle: 'employeesDedicatedToYou'
        }, {
          image: 'field',
          title: 'fieldsArea',
          subtitle: 'cropsToProductGreens'
        }, {
          image: 'app',
          title: 'makeYourOrder',
          subtitle: 'byPhoneWebOrApp'
        }, {
          image: 'stock',
          title: 'realStock',
          subtitle: 'realOnlineStock'
        }, {
          image: 'holland',
          title: 'n1InPrice',
          subtitle: 'ourBigVolumeAllows'
        }
      ],
      news: []
    }
  },
  mounted () {
    let params = { filter: { order: 'priority, created DESC' } }
    this.$axios.get('News', { params })
      .then(res => (this.news = res.data))

    this.slide = this.slides[0].image
    this.interval = setInterval(() => {
      let index = this.slides.findIndex(i => i.image === this.slide)
      let nextIndex = (index + 1) % this.slides.length
      this.slide = this.slides[nextIndex].image
    }, 8000)
  },
  beforeDestroy () {
    clearInterval(this.interval)
  }
}
</script>
