<template>
  <div class="q-mt-md">
    <div v-for="(x, i) in d" :key="i">
      <q-timeline color="secondary" layout="dense">
        <q-timeline-entry heading class="small-heading">
          <span class="text-subtitle1 text-grey-9 text-weight-bold"
            >{{$t('v103.scheduledTripDetails.calendarhtml.d1')}} {{ x.dayNum }} {{$t('v103.scheduledTripDetails.calendarhtml.d11')}}</span
          >
          <span class="text-subtitle1 text-grey-9 text-weight-bold q-ml-lg">{{
            x.title
          }}</span>
        </q-timeline-entry>
        <template v-for="(y, yi) in x.dayArray">
          <q-timeline-entry
            :title="y.title"
            :subtitle="y.subtitle"
            :icon="y.icon"
            :key="yi"
            v-if="y.type == 1"
          >
            <div
              class="bg-white rounded-borders q-pa-md diy-content"
              v-html="y.childItem.description"
            ></div>
          </q-timeline-entry>
          <q-timeline-entry
            :subtitle="$t('v103.scheduledTripDetails.list.d1')"
            icon="iconfont iconjingdian"
            color="info"
            :key="yi"
            v-if="y.type == 2"
          >
            <template v-slot:title>
              <div class="row">
                <span class="q-mr-md">{{
                  `${$t('v103.scheduledTripDetails.list.d2')}${y.childItem.couponsName}`
                }}</span>
                <div
                  class="row items-center rounded-borders"
                  style="overflow: hidden"
                >
                  <div
                    class="bg-dark text-white"
                    style="padding: 0 4px; font-size: 12px"
                  >
                    {{$t('v103.scheduledTripDetails.list.d3')}}
                  </div>
                  <div
                    class="text-dark"
                    style="padding: 0 4px; font-size: 12px; background: #f0bd86"
                  >
                    <span v-if="y.childItem.playTimeHour > 0"
                      >{{ y.childItem.playTimeHour }} {{$t('v103.scheduledTripDetails.list.d4')}}</span
                    >
                    <span v-if="y.childItem.playTimeMinutes > 0">
                      {{ y.childItem.playTimeMinutes }} {{$t('v103.scheduledTripDetails.list.d5')}}</span
                    >
                  </div>
                </div>
              </div>
            </template>
            <div class="bg-white rounded-borders q-pa-md diy-content">
              <span v-html="y.childItem.description"></span>
              <div
                v-if="y.childItem.imaArray.length > 0"
                class="rounded-borders overflow-hidden row q-mt-md"
              >
                <template v-for="(z, zi) in y.childItem.imaArray">
                  <q-parallax
                    style="height: 20vmin; width: 100%"
                    :speed="0.5"
                    v-if="y.childItem.imaArray.length == 1"
                    :key="zi"

                    @click="showPreview(y.childItem.imaArray,zi)"
                  >
                    <template v-slot:media>
                      <img :src="z.url"  />
                    </template>
                  </q-parallax>
                  <q-responsive
                    :ratio="16 / 9"
                    class="col"
                    :class="{ 'q-ml-sm': zi > 0 }"
                    :key="zi"
                    v-if="zi < 3 && y.childItem.imaArray.length > 1"
                  >
                    <q-img
                      :src="z.url"
                      :ratio="16 / 9"
                      spinner-color="grey"
                      spinner-size="20px"
                      @click="showImageHandler(y.childItem.imaArray)"
                    />
                  </q-responsive>
                </template>
              </div>
            </div>
          </q-timeline-entry>
          <q-timeline-entry
            :subtitle="`${y.childItem.timeStr} ${y.childItem.dinnerTypeName}`"
            :title="y.childItem.dinnerName"
            icon="iconfont iconcanpinhui-xican"
            color="accent"
            :key="yi"
            v-if="y.type == 4"
          >
            <div class="bg-white rounded-borders q-pa-md diy-content">
              <span v-html="y.childItem.description"></span>
              <div
                v-if="y.childItem.imaArray.length > 0"
                class="rounded-borders overflow-hidden row q-mt-md"
              >
                <template v-for="(z, zi) in y.childItem.imaArray">
                  <q-parallax
                    style="height: 20vmin; width: 100%"
                    :speed="0.5"
                    v-if="y.childItem.imaArray.length == 1"
                    :key="zi"
                  >
                    <template v-slot:media>
                      <img :src="z.url" />
                    </template>
                  </q-parallax>
                  <q-responsive
                    :ratio="16 / 9"
                    class="col"
                    :class="{ 'q-ml-sm': zi > 0 }"
                    :key="zi"
                    v-if="zi < 3 && y.childItem.imaArray.length > 1"
                  >
                    <q-img
                      :src="z.url"
                      :ratio="16 / 9"
                      spinner-color="grey"
                      spinner-size="20px"
                    />
                  </q-responsive>
                </template>
              </div>
            </div>
          </q-timeline-entry>
          <q-timeline-entry
            :title="$t('v103.scheduledTripDetails.day.d4')"
            :subtitle="$t('v103.scheduledTripDetails.list.d6')"
            icon="iconfont iconhuodong"
            :key="yi"
            color="grey"
            v-if="y.type == 5"
          >
            <div class="bg-white rounded-borders q-pa-md diy-content">
              <span v-html="y.childItem.description"></span>
              <div
                v-if="y.childItem.imaArray.length > 0"
                class="rounded-borders overflow-hidden row q-mt-md"
              >
                <template v-for="(z, zi) in y.childItem.imaArray">
                  <q-parallax
                    style="height: 20vmin; width: 100%"
                    :speed="0.5"
                    v-if="y.childItem.imaArray.length == 1"
                    :key="zi"
                  >
                    <template v-slot:media>
                      <img :src="z.url" />
                    </template>
                  </q-parallax>
                  <q-responsive
                    :ratio="16 / 9"
                    class="col"
                    :class="{ 'q-ml-sm': zi > 0 }"
                    :key="zi"
                    v-if="zi < 3 && y.childItem.imaArray.length > 1"
                  >
                    <q-img
                      :src="z.url"
                      :ratio="16 / 9"
                      spinner-color="grey"
                      spinner-size="20px"
                    />
                  </q-responsive>
                </template>
              </div>
            </div>
          </q-timeline-entry>
          <q-timeline-entry
            :subtitle="$t('v103.scheduledTripDetails.list.d7')"
            icon="iconfont iconjiudian"
            color="dark"
            :key="yi"
            v-if="y.type == 3"
          >
            <template v-slot:title>
              <div class="row items-center">
                <span class="q-mr-md">
                  <span>{{$t('v103.scheduledTripDetails.list.d8')}}</span>
                  <span class="q-ml-sm">
                    {{ y.childItem.hotelName }}
                    <q-badge transparent align="middle" color="orange">
                      {{ y.childItem.starStr }}
                    </q-badge>
                  </span>
                </span>
                <div class="col"></div>
                <div class="f12 text-weight-light">
                  <q-chip
                    color="green"
                    square
                    text-color="grey-2"
                    dense
                    :label="$t('v103.scheduledTripDetails.day.d5')"
                    v-if="y.childItem.useDinnerType.indexOf('1') != -1"
                  />
                  <q-chip
                    color="primary"
                    square
                    text-color="grey-2"
                    dense
                    :label="$t('v103.scheduledTripDetails.day.d6')"
                    v-if="y.childItem.useDinnerType.indexOf('3') != -1"
                  />
                  <q-chip
                    color="dark"
                    square
                    text-color="grey-2"
                    dense
                    :label="$t('v103.scheduledTripDetails.day.d7')"
                    v-if="y.childItem.isSameLevel == 0"
                  />
                  <q-chip
                    color="dark"
                    square
                    text-color="grey-2"
                    dense
                    :label="$t('v103.scheduledTripDetails.day.d8')"
                  >
                    <q-tooltip class="bg-dark"
                      >{{$t('v103.scheduledTripDetails.list.d9')}}</q-tooltip
                    >
                  </q-chip>
                </div>
              </div>
            </template>
            <div class="bg-white rounded-borders q-pa-md diy-content">
              <span v-html="y.childItem.description"></span>
              <div
                v-if="y.childItem.imaArray.length > 0"
                class="rounded-borders overflow-hidden row q-mt-md"
              >
                <template v-for="(z, zi) in y.childItem.imaArray">
                  <q-parallax
                    style="height: 20vmin; width: 100%"
                    :speed="0.5"
                    v-if="y.childItem.imaArray.length == 1"
                    :key="zi"
                  >
                    <template v-slot:media>
                      <img :src="z.url" />
                    </template>
                  </q-parallax>
                  <q-responsive
                    :ratio="16 / 9"
                    class="col"
                    :class="{ 'q-ml-sm': zi > 0 }"
                    :key="zi"
                    v-if="zi < 3 && y.childItem.imaArray.length > 1"
                  >
                    <q-img
                      :src="z.url"
                      :ratio="16 / 9"
                      spinner-color="grey"
                      spinner-size="20px"
                    />
                  </q-responsive>
                </template>
              </div>
            </div>
          </q-timeline-entry>
          <q-timeline-entry
            :title="$t('v103.scheduledTripDetails.list.d10')"
            :subtitle="$t('v103.scheduledTripDetails.list.d11')"
            icon="iconfont icontishi"
            :key="yi"
            color="warning"
            v-if="y.type == 6"
          >
            <div class="bg-orange-1 rounded-borders q-pa-md diy-content">
              <span v-html="y.childItem.description"></span>
            </div>
          </q-timeline-entry>
        </template>

        <!-- <q-timeline-entry
        title="Event Title"
        subtitle="February 22, 1986"
        avatar="https://cdn.quasar.dev/img/avatar2.jpg"
      >
        <div>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
      </q-timeline-entry>
      <q-timeline-entry
        title="Event Title"
        subtitle="February 22, 1986"
        color="orange"
        icon="done_all"
      >
        <div>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
      </q-timeline-entry> -->
      </q-timeline>
    </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 { reactive, toRefs, defineComponent,ref,watch, getCurrentInstance  } from 'vue';
import { useI18n } from 'vue-i18n'
export default defineComponent({
  components: { ImagePreview },
  props: ['days'],
  setup(props) {
    const { t } = useI18n()
    const $q = useQuasar()
    let {ctx:that, proxy} = getCurrentInstance()
    
    const data= reactive({
      currentImage:'',
      showImagePriview:　false,
      d: props.days,
      TitleT: []
    })
    data.TitleT = [t('v103.scheduledTripDetails.calendarhtml.d2'), t('v103.scheduledTripDetails.calendarhtml.d3'), t('v103.scheduledTripDetails.calendarhtml.d4')]
    watch(() => props.days,(n,o) => {
        data.d = n;
      },{deep: true}
    )
    data.d = props.days
    const methods = {
      formatDay() {
        if (data.d.length > 0) {
          data.d.forEach((x) => {
            x.dayArray&&x.dayArray.forEach((y) => {
              if (y.type == 7) {
                x.title = y.childItem.title;
              } else if (y.type == 1&&y.childItem.subTraffic[0]&&y.childItem.subTraffic[0].startTime) {
                y.subtitle =
                  y.childItem.subTraffic[0].startTime +
                  " - " +
                  y.childItem.subTraffic[y.childItem.subTraffic.length - 1]
                    .endTime;
                y.title = methods.formatTraffice(y.childItem.subTraffic);
                y.icon = "iconfont iconjiaotong";
              } else if (y.type == 4) {
                y.childItem.dinnerTypeName = data.TitleT[parseInt(y.childItem.useDinnerType) - 1];
                
              }
            });
          });
        }
      },
      formatTraffice(tras) {
        let txt = t('v103.scheduledTripDetails.traffice.d1') + tras[0].startCityName;
        tras.forEach((z, i) => {
          if (i > 0) {
            txt = t('v103.scheduledTripDetails.traffice.d2');
          }
          if (z.arrivalType == 1) {
            txt += t('v103.scheduledTripDetails.traffice.d3');
          } else if (z.arrivalType == 2) {
            txt += t('v103.scheduledTripDetails.traffice.d4');
          } else if (z.arrivalType == 3) {
            txt += t('v103.scheduledTripDetails.traffice.d5');
          } else {
            txt += t('v103.scheduledTripDetails.traffice.d6');
          }
          txt += ` ${t('v103.scheduledTripDetails.traffice.d7')}` + z.arrivalCityName;
        });
        return txt;
      },
      showImageHandler(url: string) {
        data.currentImage = url
        data.showImagePriview = true
      },
 
    }
    methods.formatDay();
    return {
      ...toRefs(data),
      ...methods
    }
  }
})
</script>

<style>
.small-heading h3 {
  padding: 10px 0;
}
.hide-sub .q-timeline__subtitle {
  display: none;
}
.diy-content img {
  border-radius: 6px;
  max-width: 100%;
  height: auto;
}
</style>
