<template>
 <!-- *****************komli shaker chobi nei tai akta consule prolem show hocce -->
  <v-container>
    <v-layout row wrap>
      <v-row>
        <v-col v-for="Service in catServices" :key="catServices.id" sm="6" md="6" lg="2">
          <nuxt-link :to="`/${Service.slug}`">
            <v-card class="mx-auto mb-1">
              <v-img :src="`https://api7.siliconpin.com/assets/${Service.img}`" aspect-ratio="1.2"></v-img>

              <v-card-text>
                <h3> {{Service.name}}</h3>
              </v-card-text>
              <v-rating half-increments dense size="20" v-model="Service.rating" background-color="orange lighten-3"
                color="orange"></v-rating>
              <p style="font-size:16px;padding:0 5px 10px 5px;"> {{Service.description}} <br>
                <span style="font-weight:bold"> মূল্য {{Service.price}} টাকা ।</span>
                <span v-if="Service.p2" style="font-weight:bold"> মূল্য {{Service.p2}} টাকা ।</span>
              </p>

            </v-card>
          </nuxt-link>
        </v-col>

        <v-col v-for="Service in catServices" :key="catServices.id" sm="6" md="6" lg="2">
          <nuxt-link :to="`/${Service.slug}`">
            <v-card class="mx-auto mb-1">
              <v-img :src="`https://api7.siliconpin.com/assets/${Service.img}`" aspect-ratio="1.2"></v-img>

              <v-card-text>
                <h3> {{Service.name}}</h3>
              </v-card-text>
              <v-rating half-increments dense size="20" v-model="Service.rating" background-color="orange lighten-3"
                color="orange"></v-rating>
              <p style="font-size:16px;padding:0 5px 10px 5px;"> {{Service.description}} <br>
                <span style="font-weight:bold"> মূল্য {{Service.price}} টাকা ।</span>
                <span v-if="Service.p2" style="font-weight:bold"> মূল্য {{Service.p2}} টাকা ।</span>
              </p>

            </v-card>
          </nuxt-link>
        </v-col>

      </v-row>
    </v-layout>
    <!-- <div>
  <p v-if="$fetchState.pending">Fetching mountains...</p>
  <p v-else-if="$fetchState.error">An error occurred :(</p>
  <div v-else>
    <h1>Nuxt Mountains {{mountains}} </h1>
    <ul>
      <li v-for="mountain of mountains">{{ mountain.title }}</li>
    </ul>
    <button @click="$fetch">Refresh</button>
  </div>
</div> -->
  </v-container>
</template>

<script>
  export default {
    data() {
      return {
        smProducts: [],
        catFruits: [],
        catVegetables: [],
        catGrocery: [],
        catServices: [],
        catJewlry: [],
        catCosmetics: [],
        catCloths: []
      }
    },
    async fetch() {
      this.smProducts = await fetch(
        'https://api7.siliconpin.com/items/swarnamath?offset=0&limit=90'
      ).then(res => res.json())

      this.catFruits = this.smProducts.data.filter(item => { if (item.cat == "fruits") return item });
      this.catVegetables = this.smProducts.data.filter(item => { if (item.cat == "vegetables") return item });
      this.catGrocery = this.smProducts.data.filter(item => { if (item.cat == "grocery") return item });
      this.catServices = this.smProducts.data.filter(item => { if (item.cat == "services") return item });
      this.catJewlry = this.smProducts.data.filter(item => { if (item.cat == "jewlry") return item });
      this.catCosmetics = this.smProducts.data.filter(item => { if (item.cat == "cosmetics") return item });
      this.catCloths = this.smProducts.data.filter(item => { if (item.cat == "cloths") return item });
      // console.log(this.catFruits)
    }
  }
</script>
<style scoped>
  a {
    text-decoration: none;
  }

  #flas {
    height: 100px;
    width: 100%;
  }
</style>