<template> 
  <v-carousel  cycle> 
    <v-carousel-item
      
     
      reverse-transition="fade-transition"
      transition="fade-transition"
    >
    <!-- /////////////////////////////////////////////////////////////////////// -->
    <div><v-img height="50" :src="`https://api7.siliconpin.com/assets/${catVegetables[0].img}`"  gradient="to bottom, rgba(13, 191, 43,.1), rgba(15, 43, 20,.9)">
        <h1 class="text-center mt-1 white--text">
        সবজি ।
      </h1></v-img>
      <v-row>
        <v-col cols="12" lg="6" sm="12" md="12">
          <v-card flat tile class="mx-auto mb-1 pa-2 ">
              <v-img height="300"  :src="`https://api7.siliconpin.com/assets/${catVegetables[0].img}`" aspect-ratio="1.2">
              </v-img>
            <v-card-text>
              <h3> {{catVegetables[0].name}}</h3>
            </v-card-text>
            <v-rating half-increments dense size="20" v-model="catVegetables[0].rating" class="px-2 ma-0"
              background-color="orange lighten-3" color="orange"></v-rating>
            <p style="font-size:16px;padding:0 5px 10px 5px;"> {{catVegetables[0].description}} <br>
              <span style="font-weight:bold"> মূল্য {{catVegetables[0].price}} টাকা ।</span>
              <span v-if="catVegetables[0].p2" style="font-weight:bold"> মূল্য {{catVegetables[0].p2}} টাকা ।</span>
            </p>

          </v-card>

        </v-col>
        <v-col cols="12" lg="6" sm="12" md="12">
          <v-row>
            <v-col cols="12" lg="12" sm="12" md="12">
              <v-row>
                <v-col lg="12" sm="12" md="12">
                  <v-card flat tile  class="my-2 pa-1">
                    <v-row>
                      <v-col cols="12" lg="6" md="12" sm="12">
                        <v-img height="180" :src="`https://api7.siliconpin.com/assets/${catVegetables[1].img}`" aspect-ratio="1.2">
                        </v-img>

                      </v-col>
                      <v-col  cols="12" lg="6" md="12" sm="12">
                        <h3> {{catVegetables[1].name}}</h3>
                        <p style="font-size:16px;padding:0 5px 10px 5px;"> {{catVegetables[1].description}} <br>
                          <span style="font-weight:bold"> মূল্য {{catVegetables[1].price}} টাকা ।</span>
                          <span v-if="catVegetables[1].p2" style="font-weight:bold"> মূল্য {{catVegetables[1].p2}} টাকা
                            ।</span>
                        </p>
                      </v-col>

                    </v-row>

                  </v-card>

                </v-col>
                <v-col lg="12" sm="12" md="12">
                  <v-card flat tile class="my-2 pa-1">
                    <v-row>
                      <v-col cols="12" md="12" lg="6" sm="12">
                        <v-img  height="180" :src="`https://api7.siliconpin.com/assets/${catVegetables[2].img}`" aspect-ratio="1.2">
                        </v-img>

                      </v-col>
                      <v-col cols="12" lg="6" sm="12">
                        <h3> {{catVegetables[2].name}}</h3>
                        <p style="font-size:16px;padding:0 5px 10px 5px;"> {{catVegetables[2].description}} <br>
                          <span style="font-weight:bold"> মূল্য {{catVegetables[2].price}} টাকা ।</span>
                          <span v-if="catVegetables[2].p2" style="font-weight:bold"> মূল্য {{catVegetables[2].p2}} টাকা
                            ।</span>
                        </p>
                      </v-col>

                    </v-row>

                  </v-card>

                </v-col>



              </v-row>




            </v-col>


            <v-col lg="12" sm="12" md="12">
            </v-col>

          </v-row>

        </v-col>

      </v-row>

    </div>
    
    
    
    
    
    
    
    <!-- ///////////////////////////////////////////////////////////////////////// -->
    </v-carousel-item>
        <!-- ///////////////////////////////////////////////////////////////////////// -->

    <v-carousel-item
      
     
      reverse-transition="fade-transition"
      transition="fade-transition"
    >







        <!-- ///////////////////////////////////////////////////////////////////////// -->
        <div><v-img height="50" :src="`https://api7.siliconpin.com/assets/${catFruits[0].img}`"  gradient="to bottom, rgba(13, 191, 43,.1), rgba(15, 43, 20,.9)">
        <h1 class="text-center mt-1 white--text">
         ফল ।
      </h1></v-img>
      <v-row>
        <v-col cols="12" lg="6" sm="12" md="12">
          <v-card class="mx-auto mb-1 pa-2 ">
            <v-img height="300" :src="`https://api7.siliconpin.com/assets/${catFruits[0].img}`" aspect-ratio="1.2">
            </v-img>
            <v-card-text>
              <h3> {{catFruits[0].name}}</h3>
            </v-card-text>
            <v-rating half-increments dense size="20" v-model="catFruits[0].rating" class="px-2 ma-0"
              background-color="orange lighten-3" color="orange"></v-rating>
            <p style="font-size:16px;padding:0 5px 10px 5px;"> {{catFruits[0].description}} <br>
              <span style="font-weight:bold"> মূল্য {{catFruits[0].price}} টাকা ।</span>
              <span v-if="catFruits[0].p2" style="font-weight:bold"> মূল্য {{catFruits[0].p2}} টাকা ।</span>
            </p>

          </v-card>

        </v-col>
        <v-col cols="12" lg="6" sm="12" md="12">
          <v-row>
            <v-col cols="12" lg="12" sm="12" md="12">
              <v-row>
                <v-col lg="12" sm="12" md="12">
                  <v-card class="my-2 pa-1">
                    <v-row>
                      <v-col cols="12" lg="6" md="12" sm="12">
                        <v-img  height="180" :src="`https://api7.siliconpin.com/assets/${catFruits[1].img}`" aspect-ratio="1.2">
                        </v-img>

                      </v-col>
                      <v-col cols="12" lg="6" md="12" sm="12">
                        <h3> {{catFruits[1].name}}</h3>
                        <p style="font-size:16px;padding:0 5px 10px 5px;"> {{catFruits[1].description}} <br>
                          <span style="font-weight:bold"> মূল্য {{catFruits[1].price}} টাকা ।</span>
                          <span v-if="catFruits[1].p2" style="font-weight:bold"> মূল্য {{catFruits[1].p2}} টাকা
                            ।</span>
                        </p>
                      </v-col>

                    </v-row>

                  </v-card>

                </v-col>
                <v-col lg="12" sm="12" md="12">
                  <v-card class="my-2 pa-1">
                    <v-row>
                      <v-col cols="12" md="12" lg="6" sm="12">
                        <v-img  height="180" :src="`https://api7.siliconpin.com/assets/${catFruits[2].img}`" aspect-ratio="1.2">
                        </v-img>

                      </v-col>
                      <v-col cols="12" lg="6" sm="12">
                        <h3> {{catFruits[2].name}}</h3>
                        <p style="font-size:16px;padding:0 5px 10px 5px;"> {{catFruits[2].description}} <br>
                          <span style="font-weight:bold"> মূল্য {{catFruits[2].price}} টাকা ।</span>
                          <span v-if="catFruits[2].p2" style="font-weight:bold"> মূল্য {{catFruits[2].p2}} টাকা
                            ।</span>
                        </p>
                      </v-col>

                    </v-row>

                  </v-card>

                </v-col>



              </v-row>




            </v-col>


            <v-col lg="12" sm="12" md="12">
            </v-col>

          </v-row>

        </v-col>

      </v-row>

    </div>
    </v-carousel-item>
  <!-- //////////////////////////////////////////////////////////// -->
  <v-carousel-item
      
     
      reverse-transition="fade-transition"
      transition="fade-transition"
    >
  <div><v-img height="50" :src="`https://api7.siliconpin.com/assets/${catJewlry[0].img}`"  gradient="to bottom, rgba(13, 191, 43,.1), rgba(15, 43, 20,.9)">
        <h1 class="text-center mt-1 white--text">
         জুয়েলারি ।
      </h1></v-img>
      <v-row>
        <v-col cols="12" lg="6" sm="12" md="12">
          <v-card class="mx-auto mb-1 pa-2 ">
            <v-img height="300" :src="`https://api7.siliconpin.com/assets/${catJewlry[0].img}`" aspect-ratio="1.2">
            </v-img>
            <v-card-text>
              <h3> {{catJewlry[0].name}}</h3>
            </v-card-text>
            <v-rating half-increments dense size="20" v-model="catJewlry[0].rating" class="px-2 ma-0"
              background-color="orange lighten-3" color="orange"></v-rating>
            <p style="font-size:16px;padding:0 5px 10px 5px;"> {{catJewlry[0].description}} <br>
              <span style="font-weight:bold"> মূল্য {{catJewlry[0].price}} টাকা ।</span>
              <span v-if="catJewlry[0].p2" style="font-weight:bold"> মূল্য {{catJewlry[0].p2}} টাকা ।</span>
            </p>

          </v-card>

        </v-col>
        <v-col cols="12" lg="6" sm="12" md="12">
          <v-row>
            <v-col cols="12" lg="12" sm="12" md="12">
              <v-row>
                <v-col lg="12" sm="12" md="12">
                  <v-card class="my-2 pa-1">
                    <v-row>
                      <v-col cols="12" lg="6" md="12" sm="12">
                        <v-img height="150" :src="`https://api7.siliconpin.com/assets/${catJewlry[1].img}`" aspect-ratio="1.2">
                        </v-img>

                      </v-col>
                      <v-col cols="12" lg="6" md="12" sm="12">
                        <h3> {{catJewlry[1].name}}</h3>
                        <p style="font-size:16px;padding:0 5px 10px 5px;"> {{catJewlry[1].description}} <br>
                          <span style="font-weight:bold"> মূল্য {{catJewlry[1].price}} টাকা ।</span>
                          <span v-if="catJewlry[1].p2" style="font-weight:bold"> মূল্য {{catJewlry[1].p2}} টাকা
                            ।</span>
                        </p>
                      </v-col>

                    </v-row>

                  </v-card>

                </v-col>
                <v-col lg="12" sm="12" md="12">
                  <v-card class="my-2 pa-1">
                    <v-row>
                      <v-col cols="12" md="12" lg="6" sm="12">
                        <v-img height="150" :src="`https://api7.siliconpin.com/assets/${catJewlry[2].img}`" aspect-ratio="1.2">
                        </v-img>

                      </v-col>
                      <v-col cols="12" lg="6" sm="12">
                        <h3> {{catJewlry[2].name}}</h3>
                        <p style="font-size:16px;padding:0 5px 10px 5px;"> {{catJewlry[2].description}} <br>
                          <span style="font-weight:bold"> মূল্য {{catJewlry[2].price}} টাকা ।</span>
                          <span v-if="catJewlry[2].p2" style="font-weight:bold"> মূল্য {{catJewlry[2].p2}} টাকা
                            ।</span>
                        </p>
                      </v-col>

                    </v-row>

                  </v-card>

                </v-col>



              </v-row>




            </v-col>


            <v-col lg="12" sm="12" md="12">
            </v-col>

          </v-row>

        </v-col>

      </v-row>

    </div>
    </v-carousel-item>
    <!-- //////////////////////////////////////////////// -->
    <v-carousel-item
      
     
      reverse-transition="fade-transition"
      transition="fade-transition"
    >
    <div><v-img height="50" :src="`https://api7.siliconpin.com/assets/${catCosmetics[0].img}`"  gradient="to bottom, rgba(13, 191, 43,.1), rgba(15, 43, 20,.9)">
        <h1 class="text-center mt-1 white--text">
          প্রসাধন ।
      </h1></v-img>
      <v-row>
        <v-col cols="12" lg="6" sm="12" md="12">
          <v-card class="mx-auto mb-1 pa-2 ">
            <v-img height="300" :src="`https://api7.siliconpin.com/assets/${catCosmetics[0].img}`" aspect-ratio="1.2">
            </v-img>
            <v-card-text>
              <h3> {{catCosmetics[0].name}}</h3>
            </v-card-text>
            <v-rating half-increments dense size="20" v-model="catCosmetics[0].rating" class="px-2 ma-0"
              background-color="orange lighten-3" color="orange"></v-rating>
            <p style="font-size:16px;padding:0 5px 10px 5px;"> {{catCosmetics[0].description}} <br>
              <span style="font-weight:bold"> মূল্য {{catCosmetics[0].price}} টাকা ।</span>
              <span v-if="catCosmetics[0].p2" style="font-weight:bold"> মূল্য {{catCosmetics[0].p2}} টাকা ।</span>
            </p>

          </v-card>

        </v-col>
        <v-col cols="12" lg="6" sm="12" md="12">
          <v-row>
            <v-col cols="12" lg="12" sm="12" md="12">
              <v-row>
                <v-col lg="12" sm="12" md="12">
                  <v-card class="my-2 pa-1">
                    <v-row>
                      <v-col cols="12" lg="6" md="12" sm="12">
                        <v-img height="180" :src="`https://api7.siliconpin.com/assets/${catCosmetics[1].img}`" aspect-ratio="1.2">
                        </v-img>

                      </v-col>
                      <v-col cols="12" lg="6" md="12" sm="12">
                        <h3> {{catCosmetics[1].name}}</h3>
                        <p style="font-size:16px;padding:0 5px 10px 5px;"> {{catCosmetics[1].description}} <br>
                          <span style="font-weight:bold"> মূল্য {{catCosmetics[1].price}} টাকা ।</span>
                          <span v-if="catCosmetics[1].p2" style="font-weight:bold"> মূল্য {{catCosmetics[1].p2}} টাকা
                            ।</span>
                        </p>
                      </v-col>

                    </v-row>

                  </v-card>

                </v-col>
                <v-col lg="12" sm="12" md="12">
                  <v-card class="my-2 pa-1">
                    <v-row>
                      <v-col cols="12" md="12" lg="6" sm="12">
                        <v-img height="180" :src="`https://api7.siliconpin.com/assets/${catCosmetics[2].img}`" aspect-ratio="1.2">
                        </v-img>

                      </v-col>
                      <v-col cols="12" lg="6" sm="12">
                        <h3> {{catCosmetics[2].name}}</h3>
                        <p style="font-size:16px;padding:0 5px 10px 5px;"> {{catCosmetics[2].description}} <br>
                          <span style="font-weight:bold"> মূল্য {{catCosmetics[2].price}} টাকা ।</span>
                          <span v-if="catCosmetics[2].p2" style="font-weight:bold"> মূল্য {{catCosmetics[2].p2}} টাকা
                            ।</span>
                        </p>
                      </v-col>

                    </v-row>

                  </v-card>

                </v-col>



              </v-row>




            </v-col>


            <v-col lg="12" sm="12" md="12">
            </v-col>

          </v-row>

        </v-col>

      </v-row>

    </div>










        </v-carousel-item>
    <!-- //////////////////////////////////////////////// -->








  </v-carousel>
</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>