<style scoped>
  @import url('../../../assets/trip/block/index.css');
</style>
<template>
  <div class="block-item">
    <div class="two-block">
      <div class="column">
        <template v-for="(item, index) in day.details">
          <div
            v-if="index < 1"
            class="item"
            :key="item.dayNum"
            :class="{
              col: index == 0,
              'row no-wrap': index == 0,
              'q-ml-sm': index == 1,
            }"
            style="background: #f6f6f6"
          >
            <div
              class="up"
              :class="{ 'col-8': day.details.length > 1 && index == 0 }"
              :style="{ height: index == 1 ? '265px' : '' }"
            >
              <template v-if="item.fileType && item.fileType == '.mp4'">
                <video
                  ref="myVideo"
                  width="100%"
                  height="100%"
                  :src="item.videoPath"
                  controls="controls"
                ></video>
              </template>
              <template v-else>
                <q-img @click="showImageHandler(item.img)"
                  v-if="item.img"
                  :src="item.img"
                  :ratio=" 16/9 "
                  fit="cover"
                  height="100%"
                >
                  <template v-slot:error>
                    <div
                      class="absolute-full flex flex-center bg-blue-1 text-dark"
                    >
                      {{$t('v103.scheduledTripDetails.style.nodata')}}
                    </div>
                  </template>
                </q-img>
                <q-img @click="showImageHandler(item.img)"
                  v-else
                  src="../../../assets/img/nll.jpg"
                  :ratio=" 16/9 "
                  fit="cover"
                  height="100%"
                ></q-img>
              </template>
            </div>
            <div class="row items-end" style="border: 1px solid #ccc; left: 0">
              <div class="q-pb-lg">
                <div class="down q-pa-lg" :class="{ col: index == 0 }">
                  <div
                    v-if="item.title != ''"
                    class="text-h6 text-bold q-pb-sm"
                    v-html="item.title"
                    @click.stop="goUrl(item.url)"
                    style="
                      cursor: pointer;
                      white-space: nowrap;
                      text-overflow: ellipsis;
                      overflow: hidden;
                    "
                  ></div>
                  <div
                    class="playInfo"
                    v-if="item.playTimeHour || item.playTimeMinutes"
                  >
                    <span class="playInfo-item" v-if="item.ticketName != ''">
                    </span>
                    <span
                      class="playInfo-item"
                      v-if="item.playTimeHour || item.playTimeMinutes"
                    >
                      <i class="iconfont icon-shijian1"></i>
                      {{$t('v103.scheduledTripDetails.style.d1')}}
                      <span v-if="item.playTimeHour"
                        >{{ item.playTimeHour }}{{$t('v103.scheduledTripDetails.style.d2')}}
                      </span>
                      <span v-if="item.playTimeMinutes"
                        >{{ item.playTimeMinutes }}{{$t('v103.scheduledTripDetails.style.d3')}}
                      </span>
                    </span>
                  </div>
                  <span v-html="item.content"></span>
                </div>
              </div>
            </div>
          </div>
        </template>
        <template v-for="(item, index) in day.details">
          <div
            v-if="index == 1"
            class="item up q-mt-sm row no-wrap col"
            :key="item.dayNum"
            style="background: #f6f6f6"
          >
            <div class="col q-pa-lg" style="border: 1px solid #ccc; right: 0">
              <div class="down" :class="{ col: index == 0 }">
                <div
                  v-if="item.title != ''"
                  class="text-h6 text-bold q-pb-sm"
                  v-html="item.title"
                  @click.stop="goUrl(item.url)"
                  style="cursor: pointer"
                ></div>
                <div
                  class="playInfo"
                  v-if="item.playTimeHour || item.playTimeMinutes"
                >
                  <span class="playInfo-item" v-if="item.ticketName != ''">
                  </span>
                  <span
                    class="playInfo-item"
                    v-if="item.playTimeHour || item.playTimeMinutes"
                  >
                    <i class="iconfont icon-shijian1"></i>
                    {{$t('v103.scheduledTripDetails.style.d1')}}
                    <span v-if="item.playTimeHour"
                      >{{ item.playTimeHour }}{{$t('v103.scheduledTripDetails.style.d2')}}
                    </span>
                    <span v-if="item.playTimeMinutes"
                      >{{ item.playTimeMinutes }}{{$t('v103.scheduledTripDetails.style.d3')}}
                    </span>
                  </span>
                </div>
                <span v-html="item.content"></span>
              </div>
            </div>
            <div class="col-8">
              <template v-if="item.fileType && item.fileType == '.mp4'">
                <video
                  ref="myVideo"
                  width="100%"
                  height="100%"
                  :src="item.videoPath"
                  controls="controls"
                ></video>
              </template>
              <template v-else>
                <q-img @click="showImageHandler(item.img)"
                  v-if="item.img"
                  :src="item.img"
                  :ratio=" 16/9 "
                  fit="cover"
                  height="100%"
                >
                  <template v-slot:error>
                    <div
                      class="absolute-full flex flex-center bg-blue-1 text-dark"
                    >
                      {{$t('v103.scheduledTripDetails.style.nodata')}}
                    </div>
                  </template>
                </q-img>
                <q-img @click="showImageHandler(item.img)"
                  v-else
                  src="../../../assets/img/nll.jpg"
                  :ratio=" 16/9 "
                  fit="cover"
                  height="100%"
                ></q-img>
              </template>
            </div>
          </div>
        </template>
      </div>

      <div class="item flex q-mt-sm q-pa-lg" v-if="day.tips.length > 0">
        <h4>{{$t('v103.scheduledTripDetails.style.d4')}}</h4>
        <div class="remark">
          <span v-for="(t, k) in day.tips" :key="k" v-html="t.content"></span>
        </div>
      </div>
      <div
        class="restaurant"
        :class="{
          'row justify-between wrap': $q.platform.is.desktop,
          column: $q.platform.is.mobile,
        }"
      >
        <div class="restaurant-item">
          <div class="key">
            <img src="../../../assets/img/daily_breakfast.png" />
          </div>
          <div class="val">{{ day.can.breakfirst }}</div>
        </div>
        <div class="restaurant-item">
          <div class="key">
            <img src="../../../assets/img/daily_lunch.png" />
          </div>
          <div class="val">{{ day.can.lanuch }}</div>
        </div>
        <div class="restaurant-item">
          <div class="key">
            <img src="../../../assets/img/daily_dinner.png" />
          </div>
          <div class="val">{{ day.can.dinner }}</div>
        </div>
      </div>
      <div class="restaurant">
        <div class="restaurant-item col-24 row">
          <div class="key">
            <img src="../../../assets/img/daily_hotel-1.png" />
          </div>
          <div class="val" v-if="day.jiu2.length > 0">
            <span
              v-for="(t, k) in day.jiu2"
              @click.stop="goUrl(t.url)"
              style="cursor: pointer"
              :key="k"
            >
              {{ k == day.jiu2.length - 1 ? t.name : t.name + " / " }}
            </span>
            {{ getHotelSuffix() }}
          </div>
          <div class="val" v-else>{{$t('v103.scheduledTripDetails.style.d5')}}</div>
        </div>
      </div>
    </div>
  </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.scheduledTripDetails.style.d6');
          }
        } else {
          if (
            props.day.jiu2.length == 1 &&
            props.day.jiu2[0].name != t('v103.scheduledTripDetails.style.d7') &&
            props.day.jiu2[0].name != t('v103.scheduledTripDetails.style.d8')
          ) {
            if (props.day.jiu2[0].status == 1) {
              suffix = t('v103.scheduledTripDetails.style.d9');
            } else {
              if (props.isDirect === 1) {
                suffix = t('v103.scheduledTripDetails.style.d10');
              }
            }
          }
        }
        return suffix;
      },
      goUrl(url) {
        if (url != null && url.length > 0) {
            window.open(url, "_blank");
          }
        },
    }
    return {
      ...toRefs(data),
      ...methods,
    }
  }
})
</script>
