<template>
  <div class="block-item">
    <div class="two-block">
      <div class="item big">
        <div class="left">
          <img crossOrigin="Anonymous" :src='day.details[0].img+"?x-oss-process=image/resize,w_663"' />
        </div>
        <div class="right">
          <div class="details">
            <h3 v-html="day.details[0].title"></h3>
            <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>
                {{$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"></span>
          </div>
        </div>
      </div>
      <el-row :gutter="4">
        <el-col :span="8">
          <div class="item hor-box">
            <div class="Th_remark">
              <h3 v-html="day.details[1].title"></h3>
              <div class="playInfo">
                <span class="playInfo-item" v-if='day.details[1].ticketName!=""'>
                  <i class="iconfont icon-menpiao"></i>
                  {{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>
              <span v-html="day.details[1].content"></span>
            </div>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="item hor-box">
            <div class="image">
              <img crossOrigin="Anonymous"
                :src="day.details[1].img+'?x-oss-process=image/resize,w_663,image/crop,g_west,w_663,h_244'" />
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="4">
        <el-col :span="16">
          <div class="item hor-box">
            <div class="image">
              <img crossOrigin="Anonymous"
                :src="day.details[2].img+'?x-oss-process=image/resize,w_663,image/crop,g_west,w_663,h_244'" />
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="item hor-box">
            <div class="Th_remark">
              <h3 v-html="day.details[2].title"></h3>
              <div class="playInfo">
                <span class="playInfo-item" v-if='day.details[2].ticketName!=""'>
                  <i class="iconfont icon-menpiao"></i>
                  {{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>
              <span v-html="day.details[2].content"></span>
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="item flex" v-if='day.tips.length>0'>
        <h4>{{$t('Operation.Op_Warmprompt')}}</h4>
        <div class="remark">
          <span v-for="(t,k) in day.tips" :key="k" v-html="t.content"></span>
        </div>
      </div>
      <div class="restaurant">
        <el-row :gutter="30">
          <el-col :span="8" class="restaurant-item">
            <div class="key">
              <img crossOrigin="Anonymous" src='../../../assets/img/daily_breakfast.png' />
            </div>
            <div class="val">{{day.can.breakfirst}}</div>
          </el-col>
          <el-col :span="8" class="restaurant-item">
            <div class="key">
              <img crossOrigin="Anonymous" src='../../../assets/img/daily_lunch.png' />
            </div>
            <div class="val">{{day.can.lanuch}}</div>
          </el-col>
          <el-col :span="8" class="restaurant-item">
            <div class="key">
              <img crossOrigin="Anonymous" src='../../../assets/img/daily_dinner.png' />
            </div>
            <div class="val">{{day.can.dinner}}</div>
          </el-col>
        </el-row>
      </div>
      <div class="restaurant">
        <el-row :gutter="30">
          <el-col :span="24" class="restaurant-item">
            <div class="key">
              <img crossOrigin="Anonymous" 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" :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()}}
            </div>
            <div class="val" v-else>{{$t('objFill.v101.traveltrip.benriwjd')}}</div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      day: {},
      isDirect: {},
      title: {},
      dayNum: {}
    },
    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>