<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
                                v-if="x.img"
                                :src="x.img"
                                :ratio=" 16/9 "
                                style="width: 100%"
                                @click="showImageHandler(x.img)"
                            >
                                <template v-slot:error>
                                <div
                                    class="absolute-full flex flex-center bg-blue-1 text-dark"
                                >
                                    {{$t('v103.details.style.nodata')}}
                                </div>
                                </template>
                            </q-img>
                            <q-img
                                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>
                                      {{$t('v103.details.style.d1')}}
                                      <span v-if="x.playTimeHour"
                                        >{{ x.playTimeHour }}{{$t('v103.details.style.d2')}}
                                      </span>
                                      <span v-if="x.playTimeMinutes"
                                        >{{ x.playTimeMinutes }}{{$t('v103.details.style.d3')}}</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,168]"
                    class="q-gutter-xs"
                  >
                    <q-btn
                      push round dense color="primary" text-color="while" icon="arrow_left"
                      @click="carousel.previous()"
                    />
                    <q-btn
                      push round dense color="primary" text-color="while" icon="arrow_right"
                      @click="carousel.next()"
                    />
                  </q-carousel-control>
                  </template>
                </template>
            </q-carousel>
    </div>
    <q-dialog class="no-padding" v-model="showImagePriview" persistent>
      <image-preview :current="currentImage" :images="images"></image-preview>
    </q-dialog>
  </template>
  <script lang="ts">
    import ImagePreview from "../../common/ImagePreview.vue";
  import { date,useQuasar } from "quasar";
  import { inject, reactive, toRefs, defineComponent,onMounted,ref,watch, getCurrentInstance  } from 'vue';
  import { useRouter } from 'vue-router'
  import { useI18n } from 'vue-i18n'
  import { DirtionmaryHelper } from 'src/config/dictionary'
  import scheduledTripService from 'src/api/scheduledTrip'
  import { ApiResult } from 'src/@types/enumHelper'
  import message from 'src/utils/message'
  export default defineComponent({
    components: { ImagePreview },
    props: ['day','isDirect'],
    setup(props) {
      const $router = useRouter()
      const { t } = useI18n()
      const $q = useQuasar()
      let {ctx:that, proxy} = getCurrentInstance()
      const data= reactive({
        showImagePriview:false,
        currentImage:'',
        images:[],
        day: props.day,
        isDirect: props.isDirect,
      })
      props.day.details.forEach(x=>{
        if(x.img){
          data.images.push(x.img)
        }
      })
      const methods = {
        showImageHandler(url: string) {
          data.currentImage = url
          data.showImagePriview = true
        },
        
        getHotelSuffix() {
          let suffix = "";
          if (props.day.jiu2.length > 1) {
            if (props.isDirect === 1) {
              suffix = t('v103.details.style.d6');
            }
          } else {
            if (
              props.day.jiu2.length == 1 &&
              props.day.jiu2[0].name != t('v103.details.style.d7') &&
              props.day.jiu2[0].name != t('v103.details.style.d8')
            ) {
              if (props.day.jiu2[0].status == 1) {
                suffix = t('v103.details.style.d9');
              } else {
                if (props.isDirect === 1) {
                  suffix = t('v103.details.style.d10');
                }
              }
            }
          }
          return suffix;
        },
        goUrl(url) {
          if (url != null && url.length > 0) {
              window.open(url, "_blank");
            }
          },
      }
      return {
        ...toRefs(data),
        ...methods,
      }
    }
  })
  </script>
  <style scoped>
    .q-carousel{
      height: auto !important;
    }
    .q-carousel__slide{
        padding: 0 !important;
    }
    .q-img__image{
        border-style: none !important;
    }
  </style>
  