<template>
    <div class="block-item">
        <q-carousel
          swipeable
          animated
          v-model="slide"
          infinite
          :autoplay="autoplay"
          transition-prev="slide-right"
          transition-next="slide-left"
          ref="carousel">
                <template v-for="(x, i) in day.details">
                    <q-carousel-slide :name="i" class="column no-wrap">
                        <div class="bg-white row">
                            <template
                            v-if="x.fileType && x.fileType == '.mp4'">
                            <video
                                ref="myVideo"
                                width="100%"
                                height="246px"
                                :src="x.videoPath"
                                controls="controls"
                            ></video>
                            </template>
                            <template v-else>
                            <q-img @click="showPreview(day.details,i)"
                                v-if="x.img"
                                :src="x.img"
                                :ratio=" 16/9 "
                                style="width: 100%"
                            >
                                <template v-slot:error>
                                <div
                                    class="absolute-full flex flex-center bg-blue-1 text-dark"
                                >
                                    图片加载失败
                                </div>
                                </template>
                            </q-img>
                            <q-img @click="showPreview(day.details,i)"
                                v-else
                                src="../../../assets/img/nll.jpg"
                                :ratio=" 16/9 "
                                fit="cover"
                                height="100%"
                            ></q-img>
                            </template>
                        </div>
                        <div class="one-block q-px-md q-py-lg">
                            <div class="item big row">
                              <div class="row no-wrap">
                              <div class="right col">
                                <div class="details">
                                  <div
                                    v-if="x.title != ''"
                                    class="text-h6 text-bold q-pb-sm"
                                    v-html="x.title"
                                    style="cursor: pointer"
                                  ></div>
                                  <div
                                    class="playInfo"
                                    v-if="
                                      x.playTimeHour || x.playTimeMinutes
                                    "
                                  >
                                    <span
                                      class="playInfo-item"
                                      v-if="x.ticketName != ''"
                                    >
                                    </span>
                                    <span
                                      class="playInfo-item"
                                      v-if="
                                        x.playTimeHour ||
                                        x.playTimeMinutes
                                      "
                                    >
                                      <i class="iconfont icon-shijian1"></i>
                                      约
                                      <span v-if="x.playTimeHour"
                                        >{{ x.playTimeHour }}小时
                                      </span>
                                      <span v-if="x.playTimeMinutes"
                                        >{{ x.playTimeMinutes }}分钟</span
                                      >
                                    </span>
                                  </div>
                                  <span v-html="x.content"></span>
                                </div>
                                </div>
                                </div>
                            </div>
                        </div>
                    </q-carousel-slide>
                </template>
                <template v-slot:control>
                  <template v-if="day.details.length>1">
                    <q-carousel-control
                    position="top-right"
                    :offset="[10,188]"
                    class="q-gutter-xs"
                  >
                    <q-btn
                      push round dense color="primary" text-color="while" icon="arrow_left"
                      @click="$refs.carousel.previous()"
                    />
                    <q-btn
                      push round dense color="primary" text-color="while" icon="arrow_right"
                      @click="$refs.carousel.next()"
                    />
                  </q-carousel-control>
                  </template>
                </template>
            </q-carousel>
    </div>
  </template>
  <script>
  export default {
    props: {
      day: {},
      isDirect: {},
    },
    data() {
        return {
            slide: 0,
            autoplay: 0,
        }
    },
    mounted() {},
    methods: {
      showPreview(imgs, index = 0) {
        let timgs = [];
        imgs.forEach((x) => {
          timgs.push(x.img);
        });
        this.$viewerApi({
          options: {
            initialViewIndex: index,
          },
          images: timgs,
        });
      },
      getHotelSuffix() {
        let suffix = "";
        if (this.day.jiu2.length > 1) {
          if (this.isDirect === 1) {
            suffix = "或同級";
          }
        } else {
          if (
            this.day.jiu2.length == 1 &&
            this.day.jiu2[0].name != "温馨的家" &&
            this.day.jiu2[0].name != "机场附近酒店"
          ) {
            if (this.day.jiu2[0].status == 1) {
              suffix = "【保证入住】";
            } else {
              if (this.isDirect === 1) {
                suffix = "或同級";
              }
            }
          }
        }
        return suffix;
      },
      goUrl(url) {
        if (url != null && url.length > 0) {
          window.open(url, "_blank");
        }
      },
    },
  };
  </script>
  <style scoped>
    .q-carousel{
      height: auto !important;
    }
    .q-carousel__slide{
        padding: 0 !important;
    }
    .q-img__image{
        border-style: none !important;
    }
  </style>
  