<template>
  <div class="q-mt-md">
    <template v-for="(x, i) in d">
      <q-timeline color="secondary" layout="dense" :key="i">
        <q-timeline-entry heading class="small-heading">
          <span class="text-subtitle1 text-grey-9 text-weight-bold"
            >第 {{ x.dayNum }} 天</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">
          {{ y.title }}
          <q-timeline-entry
            :title="y.title"
            :subtitle="y.subtitle"
            :icon="y.icon"
            :key="yi"
            v-if="y.type == 1"
          >
            <div v-if="y.childItem.description"
              class="bg-white rounded-borders q-pa-md diy-content"
              v-html="y.childItem.description"
            ></div>
          </q-timeline-entry>
          <q-timeline-entry
            subtitle="景點/場館"
            icon="iconfont iconjingdian"
            color="info"
            :key="yi"
            v-if="y.type == 2"
          >
            <template v-slot:title>
              <div class="row">
                <span class="q-mr-md">{{
                  `遊玩${y.childItem.couponsName}`
                }}</span>
                <div
                  class="row items-center rounded-borders"
                  style="overflow: hidden"
                  v-if="y.childItem.playTimeHour > 0 || y.childItem.playTimeMinutes > 0"
                >
                  <div
                    class="bg-dark text-white"
                    style="padding: 0 4px; font-size: 12px"
                  >
                    推薦遊玩
                  </div>
                  <div
                    class="text-dark"
                    style="padding: 0 4px; font-size: 12px; background: #f0bd86"
                  >
                    <span v-if="y.childItem.playTimeHour > 0"
                      >{{ y.childItem.playTimeHour }} 小時</span
                    >
                    <span v-if="y.childItem.playTimeMinutes > 0">
                      {{ y.childItem.playTimeMinutes }} 分鐘</span
                    >
                  </div>
                </div>
              </div>
            </template>
            <div class="bg-white rounded-borders q-pa-md diy-content">
              <span v-if="y.childItem.description" 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="showPreview(y.childItem.imaArray,zi)"
                    />
                  </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-if="y.childItem.description" 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="自由活動"
            subtitle="放鬆休息，細細品味身邊的風景"
            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-if="y.childItem.description" 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-img :key="zi"
                    v-if="y.childItem.imaArray.length == 1"
                      :src="z.url"
                      :ratio="16 / 9"
                      spinner-color="grey"
                      spinner-size="20px"
                    />
                  <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="住宿"
            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>入住</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="含早餐"
                    v-if="y.childItem.useDinnerType.indexOf('1') != -1"
                  />
                  <q-chip
                    color="primary"
                    square
                    text-color="grey-2"
                    dense
                    label="含晚餐"
                    v-if="y.childItem.useDinnerType.indexOf('3') != -1"
                  />
                  <q-chip
                    color="dark"
                    square
                    text-color="grey-2"
                    dense
                    label="保證入住"
                    v-if="y.childItem.isSameLevel == 0"
                  />
                  <q-chip
                    color="dark"
                    square
                    text-color="grey-2"
                    dense
                    label="或同級別酒店"
                    v-else
                  >
                    <q-tooltip class="bg-dark"
                      >我們會儘量保證入住行程所示酒店，不排除突發的意外情況造成無法入住，我們將會為您安排同級別的酒店，請您放心選購</q-tooltip
                    >
                  </q-chip>
                </div>
              </div>
            </template>
            <div class="bg-white rounded-borders q-pa-md diy-content">
              <span v-if="y.childItem.description" 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="溫馨提示"
            subtitle="感謝您的耐心閱讀，"
            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-if="y.childItem.description" 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>
    </template>
  </div>
</template>

<script>
export default {
  props: ["days"],
  data() {
    return {
      d: [],
    };
  },
  created() {
    this.d = this.days;
    this.formatDay();
    this.$forceUpdate();
  },
  methods: {
    formatDay() {
      if (this.d.length > 0) {
        this.d.forEach((x) => {
          x.dayArray.forEach((y) => {
            if (y.type == 7) {
              x.title = y.childItem.title;
            } else if (y.type == 1) {
              y.subtitle =
                y.childItem.subTraffic.length>0&&y.childItem.subTraffic[0].startTime +
                " - " +
                y.childItem.subTraffic[y.childItem.subTraffic.length - 1]
                  .endTime;
              y.title = this.formatTraffice(y.childItem.subTraffic);
              y.icon = "iconfont iconjiaotong";
            } else if (y.type == 4) {
              let t = ["早餐", "午餐", "晚餐"];
              const arr = y.childItem.useDinnerType.split(',')
              let titleArr = []
              arr.forEach(item => {
                titleArr.push(t[item - 1])
              })
              y.childItem.dinnerTypeName = titleArr.join(',')
            }
          });
        });
      }
    },
    formatTraffice(tras) {
      let txt = "從" + (tras.length>0?tras[0].startCityName:'');
      tras.forEach((z, i) => {
        if (i > 0 && txt!='') {
          txt += "；再";
        }
        if (z.arrivalType == 1) {
          txt += "搭乘航班";
        } else if (z.arrivalType == 2) {
          txt += "乘坐豪華巴士";
        } else if (z.arrivalType == 3) {
          txt += "乘坐豪華郵輪";
        } else {
          txt += "乘坐高鐵";
        }
        txt += " 到達" + z.arrivalCityName;
      });
      return txt;
    },
    showPreview(imgs, index = 0) {
      let timgs = [];
      imgs.forEach((x) => {
        timgs.push(x.url);
      });
      this.$viewerApi({
        options: {
          initialViewIndex: index,
        },
        images: timgs,
      });
    },
  },
};
</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>
