<template>
  <div class="index">
    <banner/>
    <news/>
    <garden/>
  </div>
</template>

<script>
  import { Banner, News, Garden } from '@/components/home'
  export default {
    name: 'Index',
    layout: 'town',
    fetch ({ store }) {
      return Promise.all([
        store.dispatch('loadCarouselInfo', { client_type: 'cc', cityId: store.state.option.user.data.currentCity ? store.state.option.user.data.currentCity.id : null }),
        store.dispatch('loadNewsList', { limit: 4, page: 1 }),
        store.dispatch('loadGardenList', { limit: 4, page: 1 })
      ])
    },
    components: {
      News,
      Banner,
      Garden
    },
    computed: {
      bannerData () {
        return this.$store.state.carouselInfo.infoData.data.index
      }
    }
  }
</script>
