<template>
  <!--圖片 - 6x1圓-->
  <div class="q-mt-md section-block my-bg-grey">
    <q-resize-observer @resize="onResize" />
    <h2 class="block-title">{{plugData.Title}}</h2>
    <q-carousel v-model="slide" transition-prev="slide-right" transition-next="slide-left" swipeable animated
      control-color="primary" navigation padding arrows height="100%"
      class="my-bg-grey text-black shadow-1 rounded-borders no-shadow">
      <template v-for="(x, i) in showImages" v-if="x.length>0">
        <q-carousel-slide :name="i" :key="i" class="column no-wrap">
          <div class="row fit justify-start q-col-gutter no-wrap" :class="{'q-gutter-lg':x.length>1}">
            <div style="flex:1" v-for="(y, yi) in x" :key="yi" v-if="y.ImageUrl!=''">
              <!-- <q-img :img-style="{borderRadius:'50%'}" :ratio="1/1" :src="(y.TripImageUrl&&y.TripImageUrl!=''?y.TripImageUrl: y.ImageUrl)" /> -->
              <q-img :img-style="{borderRadius:'50%'}" :ratio="1/1" :src="y.ImageUrl" />
              <div class="q-mt-md" style="color: #666;text-align: center;font-weight: 400;">
                {{y.TripTitle}}
              </div>
            </div>
          </div>
        </q-carousel-slide>
      </template>
    </q-carousel>
  </div>
</template>
<script>
  //圖片 - 6x1圓
  export default {
    props: ["plugData"],
    data() {
      return {
        slide: 0,
        showImages: []
      };
    },
    methods: {
      onResize(size) {
        this.showImages = [];
        if (size.width >= 800) {
          let temp = [];
          this.plugData.Details.forEach((x, i) => {
            if(x.ImageUrl!=''){
              temp.push(x);
            }
            if ((i > 0 && (i + 1) % 3 == 0) || i == this.plugData.Details.length - 1) {
              this.showImages.push(temp);
              temp = [];
            }
          });
        } else if (size.width >= 560) {
          let temp = [];
          this.plugData.Details.forEach((x, i) => {
            if(x.ImageUrl!=''){
              temp.push(x);
            }
            if ((i > 0 && (i + 1) % 2 == 0) || i == this.plugData.Details.length - 1) {
              this.showImages.push(temp);
              temp = [];
            }
          });
        } else {
          this.plugData.Details.forEach((x, i) => {
            let temp = [];
            if(x.ImageUrl!=''){
              temp.push(x);
            }
            this.showImages.push(temp);
          });
        }
      }
    }
  };
</script>
<style>
  .my-bg-grey {
    background: #f6f6f6;
  }

  .my-bg-grey .block-title {
    font-size: 22px;
    font-weight: 600;
    padding: 0;
    margin: 0;
    line-height: unset;
    text-align: center;
    margin-top: 25px;
  }

</style>
