<template>
  <div class="block-item">
    <div class="two-block">
      <div>
        <table class="trip-title">
          <tr>
            <td class="day">
              <h3>
                {{$t('tips.di')}}
                <span v-if="dayNum<10">0</span>
                {{dayNum}}{{$t('hotel.hotel_day')}}
              </h3>
              <p v-if="isshowtime" style="margin: 0;">{{day.dateTime}}</p>
            </td>
            <td class="desc" v-html="title"></td>
          </tr>
        </table>
        <table class="day_table">
          <tr>
            <td>
              <div class="item big">
                <div class="left">
                  <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>
                    <img v-if="day.details[0].img!='' && day.details[0].scenicJson"
                      :style="{'top':day.details[0].scenicJson.y+'px'}"
                      :src='compressImg(day.details[0].img, "filt", 663, "")' />
                    <img v-else :src='compressImg(day.details[0].img, "filt", 663, "")' />
                  </template>
                </div>
                <div class="right">
                  <div class="details">
                    <h4 v-html="day.details[0].title" @click.stop="goUrl(day.details[0].url)" style="cursor: pointer">
                    </h4>
                    <div class="playInfo">
                      <span class="playInfo-item" v-if='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>
                        {{$t('objFill.v101.traveltrip.yue')}}
                        <span v-if="day.details[0].playTimeHour">{{day.details[0].playTimeHour}}{{$t('objFill.xiaoshi')}} </span>
                        <span v-if="day.details[0].playTimeMinutes">{{day.details[0].playTimeMinutes}}{{$t('objFill.fenzhong')}}</span>
                      </span>
                    </div>
                    <span v-html="day.details[0].content" class="pp"></span>
                  </div>
                </div>
              </div>
            </td>
          </tr>
        </table>
        <table class="day_table">
          <tr>
            <td>
              <div class="threeday_2">
                <div>
                  <div class="item hor-box">
                    <div class="details" style="padding: 22px;">
                      <h4 v-html="day.details[1].title" @click.stop="goUrl(day.details[1].url)" style="cursor: pointer">
                      </h4>
                      <div class="playInfo">
                        <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>
                          {{$t('objFill.v101.traveltrip.yue')}}
                          <span v-if="day.details[1].playTimeHour">{{day.details[1].playTimeHour}}{{$t('objFill.xiaoshi')}} </span>
                          <span v-if="day.details[1].playTimeMinutes">{{day.details[1].playTimeMinutes}}{{$t('objFill.fenzhong')}} </span>
                        </span>
                      </div>
                      <div style="height: 150px;line-height: 22px;overflow: hidden;text-overflow:ellipsis;"
                        v-html="day.details[1].content"></div>
                    </div>
                  </div>
                </div>
                <div>
                  <div class="item hor-box">
                    <div class="image">
                      <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>
                        <img v-if="day.details[1].img!='' && day.details[1].scenicJson"
                          :style="{'top':day.details[1].scenicJson.y+'px'}"
                          :src='compressImg(day.details[1].img, "filt", 663, "")' />
                        <img v-else :src='compressImg(day.details[1].img, "filt", 663, "")' />
                      </template>
                    </div>
                  </div>
                </div>
              </div>
            </td>
          </tr>
        </table>
        <table class="day_table">
          <tr>
            <td>
              <div class="threeday_3">
                <div>
                  <div class="item hor-box">
                    <div class="image">
                      <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>
                        <img v-if="day.details[2].img!='' && day.details[2].scenicJson"
                          :style="{'top':day.details[2].scenicJson.y+'px'}"
                          :src='compressImg(day.details[2].img, "filt", 663, "")' />
                        <img v-else :src='compressImg(day.details[2].img, "filt", 663, "")' />
                      </template>
                    </div>
                  </div>
                </div>
                <div>
                  <div class="item hor-box">
                    <div class="details" style="padding: 22px;">
                      <h4 v-html="day.details[2].title" @click.stop="goUrl(day.details[2].url)" style="cursor: pointer">
                      </h4>
                      <div class="playInfo">
                        <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>
                          {{$t('objFill.v101.traveltrip.yue')}}
                          <span v-if="day.details[2].playTimeHour">{{day.details[2].playTimeHour}}{{$t('objFill.xiaoshi')}} </span>
                          <span v-if="day.details[2].playTimeMinutes">{{day.details[2].playTimeMinutes}}{{$t('objFill.fenzhong')}} </span>
                        </span>
                      </div>
                      <div style="height: 131px;line-height: 22px;overflow: hidden;text-overflow:ellipsis;"
                        v-html="day.details[2].content"></div>
                    </div>
                  </div>
                </div>
              </div>
            </td>
          </tr>
        </table>
      </div>
      <div class="item day_tips" v-if='day.tips.length>0'>
        <h4>{{$t('Operation.Op_Warmprompt')}}</h4>
        <div>
          <div v-for="(t,k) in day.tips" :key="k" v-html="t.content"></div>
        </div>
      </div>
      <table>
        <tr class="restaurant">
          <td width="95" valign="middle" class="key">
            <img crossOrigin="Anonymous" src='../../assets/img/daily_breakfast.png' />
          </td>
          <td width="211" valign="middle" class="val">{{day.can.breakfirst}}</td>
          <td width="110" align="center" valign="middle" class="key">
            <img crossOrigin="Anonymous" src='../../assets/img/daily_lunch.png' />
          </td>
          <td width="211" valign="middle" class="val">{{day.can.lanuch}}</td>
          <td width="110" align="center" valign="middle" class="key">
            <img crossOrigin="Anonymous" src='../../assets/img/daily_dinner.png' />
          </td>
          <td valign="middle" class="val">{{day.can.dinner}}</td>
        </tr>
        <tr class="restaurant">
          <td colspan="6" height="15"></td>
        </tr>
        <tr class="restaurant">
          <td valign="top" class="key">
            <img crossOrigin="Anonymous" src='../../assets/img/daily_hotel-1.png' />
          </td>
          <td valign="middle" colspan="5" 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.newTitle!=''&& t.newTitle!=t.name?t.newTitle:t.name) : (t.newTitle!=''&& t.newTitle!=t.name?t.newTitle:t.name)+' / ' }}
            </span>
            {{getHotelSuffix()}}
          </td>
          <td valign="middle" colspan="5" class="val" v-else>{{$t('objFill.v101.traveltrip.benriwjd')}}</td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      day: {},
      isDirect: {},
      title: {},
      dayNum: {},
      showTime: {},
    },
    data() {
      return {
        isshowtime: true,
      }
    },
    watch: {
      showTime: {
        handler: function (v, ov) {
          this.isshowtime = v;
        },
        deep: true,
      },
    },
    methods: {
      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) {
          if (url.indexOf('http://') == -1 || url.indexOf('https://') == -1) {
            url = 'http://' + url;
          }
          window.open(url, "_blank");
        }
      }
    }
  }

</script>