<template>
    <div class="block-item">
        <div class="one-block">
          <div>
            <table class="trip-title">
              <tr>
                <td class="day">
                  <h3>
                    第
                    <span v-if="dayNum<10">0</span>
                    {{dayNum}}天
                  </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', 'height': (295-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!=""'>
                                            <!--<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>
                                    <div v-html="day.details[0].content" class="pp"></div>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
            <table class="day_table">
                <tr>
                    <td>
                        <div>
                            <div class="fourday_bottom" v-for="(item,i) in day.details" v-if="i>0" :key="i" :style="i===2?'margin: 0 5px;':''">
                                <div class="item">
                                        <div class="upFour">
                                            <!-- <img  :style="{'top':item.scenicJson.y+'px'}" :src="$commonUtils.replaceHttps(item.img)+'?x-oss-process=image/resize,w_663,image/crop,g_west,w_663'" /> -->
                                          <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>
                                            <img v-if="item.img!=''&& item.scenicJson" :style="{'top':item.scenicJson.y+'px'}" :src='compressImg(item.img, "filt", 663, "")' />
                                            <img  v-else :src='compressImg(item.img, "filt", 663, "")' />
                                          </template>
                                        </div>
                                        <div class="down">
                                          <h4 v-html="item.title" @click.stop="goUrl(item.url)" style="cursor: pointer" ></h4>
                                            <div class="playInfo">
                                            <span class="playInfo-item" v-if='item.ticketName!=""'>
                                                <!--<i class="iconfont icon-menpiao"></i>-->
                                                <!--{{item.ticketName}}-->
                                            </span>
                                            <span class="playInfo-item" v-if='item.playTimeHour || item.playTimeMinutes'>
                                                <i class="iconfont icon-shijian1"></i>
                                                    约
                                                <span v-if="item.playTimeHour">{{item.playTimeHour}}小时 </span>
                                                <span v-if="item.playTimeMinutes">{{item.playTimeMinutes}}分钟</span>
                                            </span>
                                        </div>
                                            <div v-html="item.content" style="height:150px;overflow:hidden;" class="pp"></div>
                                        </div>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
          </div>
            <div class="item day_tips" v-if='day.tips.length>0'>
                <h4>温馨提示</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>本日无酒店安排</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>