<template>
  <div class="block-item">
    <div class="one-block">
      <div class="item big row items-center">
        <div class="row no-wrap col-12">
          <div class="col" style="position: relative; top: 0; left: 0">
            <template
              v-if="
                day.details[0].fileType && day.details[0].fileType == '.mp4'
              "
            >
              <video
                ref="myVideo"
                width="100%"
                height="100%"
                :src="day.details[0].videoPath"
                controls="controls"
              ></video>
            </template>
            <template v-else>
              <q-img @click="showPreview(day.details,i)"
                v-if="day.details[0].img"
                :src="day.details[0].img"
                :ratio=" 16/9 "
                fit="cover"
                height="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="right col-4"
            style="border: 1px solid #ccc; border-left: 0"
          >
            <div class="details">
              <div
                v-if="day.details[0].title != ''"
                class="text-h6 text-bold q-pb-sm"
                v-html="day.details[0].title"
                @click.stop="goUrl(day.details[0].url)"
                style="cursor: pointer"
              ></div>
              <div
                class="playInfo"
                v-if="
                  day.details[0].playTimeHour || day.details[0].playTimeMinutes
                "
              >
                <span
                  class="playInfo-item"
                  v-if="day.details[0].ticketName != ''"
                >
                  <!--<i class="iconfont icon-menpiao"></i>-->
                  <!--{{day.details[0].ticketName}}-->
                </span>
                <span
                  class="playInfo-item"
                  v-if="
                    day.details[0].playTimeHour ||
                    day.details[0].playTimeMinutes
                  "
                >
                  <i class="iconfont icon-shijian1"></i>
                  约
                  <span v-if="day.details[0].playTimeHour"
                    >{{ day.details[0].playTimeHour }}小时
                  </span>
                  <span v-if="day.details[0].playTimeMinutes"
                    >{{ day.details[0].playTimeMinutes }}分钟</span
                  >
                </span>
              </div>
              <span v-html="day.details[0].content"></span>
            </div>
          </div>
        </div>
        <div
          class="col-12 item row justify-between no-wrap q-mt-sm"
          style="background: #f6f6f6"
        >
          <div
            class="col row no-wrap"
            style="position: relative; top: 0; left: 0"
          >
            <div class="col-6" style="border: 1px solid #ccc">
              <div class="up" style="height: 260px">
                <template
                  v-if="
                    day.details[1].fileType && day.details[1].fileType == '.mp4'
                  "
                >
                  <video
                    ref="myVideo"
                    width="100%"
                    height="100%"
                    :src="day.details[1].videoPath"
                    controls="controls"
                  ></video>
                </template>
                <template v-else>
                  <q-img @click="showPreview(day.details,i)"
                    v-if="day.details[1].img"
                    :src="day.details[1].img"
                    :ratio=" 16/9 "
                    fit="cover"
                    height="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="down q-ma-lg">
                <div
                  v-if="day.details[1].title != ''"
                  class="text-h6 text-bold q-pb-sm"
                  v-html="day.details[1].title"
                  @click.stop="goUrl(day.details[1].url)"
                  style="cursor: pointer"
                ></div>
                <div
                  class="playInfo"
                  v-if="
                    day.details[1].playTimeHour ||
                    day.details[1].playTimeMinutes
                  "
                >
                  <span
                    class="playInfo-item"
                    v-if="day.details[1].ticketName != ''"
                  >
                  </span>
                  <span
                    class="playInfo-item"
                    v-if="
                      day.details[1].playTimeHour ||
                      day.details[1].playTimeMinutes
                    "
                  >
                    <i class="iconfont icon-shijian1"></i>
                    约
                    <span v-if="day.details[1].playTimeHour"
                      >{{ day.details[1].playTimeHour }}小时
                    </span>
                    <span v-if="day.details[1].playTimeMinutes"
                      >{{ day.details[1].playTimeMinutes }}分钟
                    </span>
                  </span>
                </div>
                <span v-html="day.details[1].content"></span>
              </div>
            </div>
            <div class="col q-ml-sm" style="border: 1px solid #ccc">
              <div class="up" style="height: 260px">
                <template
                  v-if="
                    day.details[2].fileType && day.details[2].fileType == '.mp4'
                  "
                >
                  <video
                    ref="myVideo"
                    width="100%"
                    height="100%"
                    :src="day.details[2].videoPath"
                    controls="controls"
                  ></video>
                </template>
                <template v-else>
                  <q-img @click="showPreview(day.details,i)"
                    v-if="day.details[2].img"
                    :src="day.details[2].img"
                    :ratio=" 16/9 "
                    fit="cover"
                    height="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="down q-ma-lg">
                <div
                  v-if="day.details[2].title != ''"
                  class="text-h6 text-bold q-pb-sm"
                  v-html="day.details[2].title"
                  @click.stop="goUrl(day.details[2].url)"
                  style="cursor: pointer"
                ></div>
                <div
                  class="playInfo"
                  v-if="
                    day.details[2].playTimeHour ||
                    day.details[2].playTimeMinutes
                  "
                >
                  <span
                    class="playInfo-item"
                    v-if="day.details[2].ticketName != ''"
                  >
                  </span>
                  <span
                    class="playInfo-item"
                    v-if="
                      day.details[2].playTimeHour ||
                      day.details[2].playTimeMinutes
                    "
                  >
                    <i class="iconfont icon-shijian1"></i>
                    约
                    <span v-if="day.details[2].playTimeHour"
                      >{{ day.details[2].playTimeHour }}小时
                    </span>
                    <span v-if="day.details[2].playTimeMinutes"
                      >{{ day.details[2].playTimeMinutes }}分钟
                    </span>
                  </span>
                </div>
                <span v-html="day.details[2].content"></span>
              </div>
            </div>
          </div>
          <div class="col-4">
            <div class="q-ml-sm" style="border: 1px solid #ccc">
              <div class="up" style="height: 260px">
                <template
                  v-if="
                    day.details[3].fileType && day.details[3].fileType == '.mp4'
                  "
                >
                  <video
                    ref="myVideo"
                    width="100%"
                    height="100%"
                    :src="day.details[3].videoPath"
                    controls="controls"
                  ></video>
                </template>
                <template v-else>
                  <q-img @click="showPreview(day.details,i)"
                    v-if="day.details[3].img"
                    :src="day.details[3].img"
                    :ratio=" 16/9 "
                    fit="cover"
                    height="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="down q-ma-lg">
                <div
                  v-if="day.details[3].title != ''"
                  class="text-h6 text-bold q-pb-sm"
                  v-html="day.details[3].title"
                  @click.stop="goUrl(day.details[3].url)"
                  style="cursor: pointer"
                ></div>
                <div
                  class="playInfo"
                  v-if="
                    day.details[3].playTimeHour ||
                    day.details[3].playTimeMinutes
                  "
                >
                  <span
                    class="playInfo-item"
                    v-if="day.details[3].ticketName != ''"
                  >
                  </span>
                  <span
                    class="playInfo-item"
                    v-if="
                      day.details[3].playTimeHour ||
                      day.details[3].playTimeMinutes
                    "
                  >
                    <i class="iconfont icon-shijian1"></i>
                    约
                    <span v-if="day.details[3].playTimeHour"
                      >{{ day.details[3].playTimeHour }}小时
                    </span>
                    <span v-if="day.details[3].playTimeMinutes"
                      >{{ day.details[3].playTimeMinutes }}分钟
                    </span>
                  </span>
                </div>
                <span v-html="day.details[3].content"></span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="item flex q-mt-sm q-pa-lg" v-if="day.tips.length > 0">
        <h4>温馨提示</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>本日无酒店安排</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    day: {},
    isDirect: {},
  },
  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>
