<style>
  .section-tour {
    margin-bottom: 30px;
    padding: 30px 30px 0;
    border: 1px solid #e5e5e5;
    background-color: #fff;
  }

  .wl-section-block {
    width: 100%;
  }

  .todayTitle {
    font-size: 23px;
    color: #666;
    font-weight: bold;
  }

  .tour-detail-timeline {
    padding: 15px 0;
  }

  .tour-detail-timeline .detail-card {
    position: relative;
    min-height: 100px;
    padding: 16px 0 16px 90px;
    line-height: 1.8;
  }

  .tour-detail-timeline .detail-card::before {
    position: absolute;
    top: 0;
    left: 35px;
    content: "";
    width: 2px;
    height: 100%;
    background-color: #eee;
    z-index: 1;
  }

  .tour-detail-timeline .detail-card .day-num {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 70px;
    height: 70px;
    padding-top: 16px;
    text-align: center;
    color: #fff;
    font-size: 18px;
    line-height: 1.2;
    background-color: #00afff;
    -webkit-border-radius: 50%;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 50%;
    -moz-background-clip: padding;
    border-radius: 50%;
    background-clip: padding-box;
  }

  .tour-detail-timeline .detail-inner {
    display: flex;
  }

  .detail-inner .detail-left {
    width: calc(100% - 320px);
  }

  .detail-inner .detail-right {
    width: 320px;
    padding-left: 20px;
  }

  @media only screen and (max-width: 900px) {
    .detail-inner .detail-left {
      width: 100%;
      order: 2;
    }
  }

  @media only screen and (max-width: 900px) {
    .detail-inner .detail-right {
      margin-bottom: 15px;
      width: 100%;
      order: 1;
      padding: 0;
    }
  }

  .detail_title {
    line-height: 1.6;
    margin-bottom: 15px;
    font-weight: 700;
    font-size: 18px;
  }

  .detail_content6 {
    padding: 20px;
    background-color: #f8f8f8;
    border-radius: 8px;
    background-clip: padding-box;
    overflow: hidden;
    font-size: 16px;
    color: #666;

  }

  .collapse-toggle6 {
    position: relative;
    width: 100%;
    cursor: pointer;
    text-align: center;
  }

  .collapse-toggle6 i {
    font-weight: bold;
    color: black;
  }

  .toggle_down:before {
    content: "";
    width: 100%;
    position: absolute;
    top: -100px;
    left: 0;
    z-index: 2;
    height: 100px;
    background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0), #fff);
    background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0), #fff);
    background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0), #fff);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff);
  }

  .intro-list {
    position: relative;
    padding-bottom: 10px;
    font-size: 16px;
  }

  .intro-list ul li {
    list-style-type: none;
  }

  .intro-list i {
    position: absolute;
    left: 0;
    color: #666;
    font-size: 24px;
    top: -10px;
  }

  .Style6_meal {
    font-size: 13px;
    padding-left: 0;
    display: inline-block;
    vertical-align: top;
    margin-right: 5px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-clip: padding-box;
    border: 1px solid #d2d2d2;
    text-align: center;
    line-height: 23px;
    color: #9e9e9e;
    font-weight: 400;
  }

  .same-class {
    display: inline-block;
    vertical-align: middle;
    color: #999;
  }

  .custom-caption {
    text-align: center;
    padding: 12px;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
  }

  .style6_val {
    margin-left: 40px;
  }

  @media only screen and (max-width: 900px) {
    .detail-card .detail-inner {
      flex-direction: column;
    }
  }

  .isHiden6 {
    height: 180px;
    overflow: hidden;
  }

</style>
<template>
  <div class="Style6_main">
    <section class="section-tour wl-section-block">
      <div class="todayTitle">每日行程</div>
      <div class="tour-detail-timeline">
        <div class="detail-card" v-for="(item,index) in trips" :key="index">
          <div class="day-num">
            Day<br>{{item.dayNum}}
          </div>
          <div class="detail-inner">
            <div class="detail-left">
              <div class="detail_title">
                {{item.title}}
              </div>
              <div class="detail_content6" :class="{'isHiden6':item.isShow&&item.MyContent.length>100}">
                <div v-for="(childItem,chiIndex) in item.details" :key="chiIndex">
                  【{{childItem.title}}】{{childItem.content}}
                </div>
              </div>
              <div class="collapse-toggle6" v-if="!item.isShow&&item.MyContent.length>100">
                <i class="iconfont iconarrow-top" @click="getSideShow(item)"></i>
              </div>
              <div class="collapse-toggle6 toggle_down" v-else-if="item.isShow&&item.MyContent.length>100">
                <i class="iconfont iconarrowdown" @click="getBtmShow(item)"></i>
              </div>
              <div class="intro-list">
                <i class="iconfont iconcanju"></i>
                <ul>
                  <li>
                    <span class="Style6_meal">早</span>{{item.can.breakfirst}}
                  </li>
                  <li>
                    <span class="Style6_meal">中</span>{{item.can.lanuch}}
                  </li>
                  <li>
                    <span class="Style6_meal">晚</span>{{item.can.dinner}}
                  </li>
                </ul>
              </div>
              <div class="intro-list">
                <i class="iconfont iconhotel"></i>
                <div class="style6_val" v-if='item.jiu2.length>0'>
                  <label class="detail_meal" v-for="(t,k) in item.jiu2" :key="k">
                    {{k==item.jiu2.length-1?t.name:t.name+' / '}}
                  </label>
                  {{getHotelSuffix(item)}}
                </div>
                <div class="style6_val" v-else>本日无酒店安排</div>
              </div>
            </div>
            <div class="detail-right">
              <q-carousel v-model="item.slide" color="white" arrows height="300px">
                <q-carousel-slide :img-src="x.img" v-for="(x, i) in item.details" :name="i" :key="i">
                  <div class="absolute-bottom custom-caption">
                    <div class="q-headline">{{x.title}}</div>
                  </div>
                </q-carousel-slide>
              </q-carousel>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
  export default {
    props: ['tripList', 'isDirect'],
    data() {
      return {
        trips: [],
        slide: 0,
        TripConfig: {},
      };
    },
    created() {},
    mounted() {
      this.init();
    },
    methods: {
      getSideShow(item) {
        item.isShow = true;
        this.$forceUpdate();
      },
      getBtmShow(item) {
        item.isShow = false;
        this.$forceUpdate();
      },

      init() {
        this.tripList.forEach((x, j) => {
          let useDinnerTypeBy = ''
          let jin = [],
            jiu = [],
            jiu2 = [],
            jiao = [],
            dadian = [],
            tips = [],
            activy = [],
            can = {
              breakfirst: '敬请自理',
              lanuch: '敬请自理',
              dinner: '敬请自理'
            }
          x.dayArray.forEach((y, index) => {
            if (y.type == 7 && y.childItem.title != '') {
              let obj = {
                title: y.childItem.title,
                content: y.childItem.description,
                img: y.childItem.imaArray && y.childItem.imaArray.length > 0 ? y.childItem.imaArray[0].url :
                  '',
                ticketName: '',
                playTimeHour: null,
                playTimeMinutes: null,
                url: ''
              }
              dadian.push(obj)
            } else if (y.type == 1 && y.childItem.subTraffic.length > 0) {
              let title = ''
              y.childItem.subTraffic.forEach((z, i) => {
                title += z.startCityName
                if (z.arrivalType == 1) {
                  title += '<i class="iconfont icon-feiji"></i>'
                } else if (z.arrivalType == 2) {
                  title += '<i class="iconfont icon-bus"></i>'
                } else if (z.arrivalType == 3) {
                  title += '<i class="iconfont icon-icon31"></i>'
                } else {
                  title += '<i class="iconfont icon-gaotiedongche"></i>'
                }
                if (i + 1 == y.childItem.subTraffic.length) {
                  title += z.arrivalCityName
                }
              })
              let obj = {
                title: title,
                content: y.childItem.description,
                img: '',
                ticketName: '',
                playTimeHour: null,
                playTimeMinutes: null,
                url: ''
              }
              jiao.push(obj)
            } else if (y.type == 2 && y.childItem.imaArray.length > 0) {
              let obj = {
                title: y.childItem.couponsName,
                content: y.childItem.description,
                img: y.childItem.imaArray[0].url,
                ticketName: y.childItem.couponsTicketName,
                playTimeHour: y.childItem.playTimeHour,
                playTimeMinutes: y.childItem.playTimeMinutes,
                url: y.childItem.url,
                scenicJson: y.childItem.scenicJson,
                videoPath: y.childItem.imaArray[0].videoPath,
                fileType: y.childItem.imaArray[0].fileType,
              }
              jin.push(obj)
            } else if (y.type == 3 && y.childItem.hotelName != '' && y.childItem.imaArray.length > 0) {
              let obj = {
                title: y.childItem.hotelName,
                content: y.childItem.description,
                img: y.childItem.imaArray[0].url,
                ticketName: '',
                playTimeHour: null,
                playTimeMinutes: null,
                url: y.childItem.url
              }
              jiu.push(obj)
            } else if (y.type == 4) {
              if (y.childItem.useDinnerType == "1") {
                can.breakfirst = y.childItem.dinnerName
              } else if (y.childItem.useDinnerType == "2") {
                can.lanuch = y.childItem.dinnerName
              } else if (y.childItem.useDinnerType == "3") {
                can.dinner = y.childItem.dinnerName
              }
            } else if (y.type == 5) {
              let obj = {
                title: '自由活动',
                content: y.childItem.description,
                img: '',
                ticketName: '',
                playTimeHour: null,
                playTimeMinutes: null,
                url: ''
              }
              activy.push(obj)
            } else if (y.type == 6) {
              let obj = {
                title: y.childItem.title,
                content: y.childItem.description,
                img: '',
                ticketName: '',
                playTimeHour: null,
                playTimeMinutes: null,
                url: ''
              }
              tips.push(obj)
            }
            if (y.type == 3) {
              jiu2.push({
                name: y.childItem.hotelName,
                url: y.childItem.url
              });
              useDinnerTypeBy = y.childItem.useDinnerType
            }
          })
          if (can.breakfirst == '敬请自理' &&  useDinnerTypeBy && useDinnerTypeBy.indexOf('1') != -1) {
            can.breakfirst = '酒店内享用早餐'
          } else if (can.breakfirst == '') {
            can.breakfirst = '方便游玩敬请自理'
          }
          if (can.lanuch == '敬请自理' &&  useDinnerTypeBy  && useDinnerTypeBy.indexOf('2') != -1) {
            can.lanuch = '酒店自助'
          } else if (can.lanuch == '') {
            can.lanuch = '方便游玩敬请自理'
          }
          if (can.dinner == '敬请自理' &&  useDinnerTypeBy  && useDinnerTypeBy.indexOf('3') != -1) {
            can.dinner = '酒店自助'
          } else if (can.dinner == '') {
            can.dinner = '方便游玩敬请自理'
          }
          x.can = can
          let details = [];
          x.tips = tips
          x.jiu2 = jiu2
          if (jin.length > 0) {
            details = jin
          } else if (jiu.length > 0) {
            details = jiu
          } else if (dadian.length > 0) {
            details = dadian
          } else if (jiao.length > 0) {
            if (j == this.tripList.length - 1) {
              let obj = {
                title: '温暖的家',
                content: '感谢您参加本次行程，期待下次与您相遇',
                img: ''
              }
              details.push(obj)
            } else {
              details = jiao
            }
          } else if (activy.length > 0) {
            details = activy
          }
          x.title = dadian.length > 0 && dadian[0].title && dadian[0].title != '' ? dadian[0].title : (jiao.length >
            0 ? jiao[0].title : '集合出发')
          x.details = details

          if (x.details.length == 0) {
            if (j == 0) {
              let obj = {
                title: '集合出发',
                content: '向着远方的目标出发起飞',
                img: '',
                ticketName: '',
                playTimeHour: null,
                playTimeMinutes: null
              }
              details.push(obj)
            } else if (j == this.tripList.length - 1) {
              let obj = {
                title: '温暖的家',
                content: '感谢您参加本次行程，期待下次与您相遇',
                img: '',
                ticketName: '',
                playTimeHour: null,
                playTimeMinutes: null
              }
              details.push(obj)
            }
          } else {
            if (x.title == '集合出发') {
              x.details.forEach(xc => {
                if (xc.title !== undefined)
                  x.title = xc.title + '~'
              })
              if (x.title == '集合出发') {
                if (j > 0 && j < tripList.length - 1)
                  x.title = '自由活动'
              } else {
                x.title = x.title.substring(0, x.title.length - 1)
              }
            }
          }
          x.islast = (j + 1) == this.tripList.length;
          x.slide = 0;
          this.$set(this.tripList, j, x)
          x.dateTime = this.setDate(j);
          x.myIndex = 1;

          if (localStorage.baseifo) {
            this.TripConfig = JSON.parse(window.localStorage.getItem('baseifo'));
          }
          if(this.TripConfig){
            if(this.TripConfig.TripConfig.TripDayIsOpen==1){
              x.isShow=false
            }else{
              x.isShow = true;
            }
          }
        })
        this.tripList.forEach(x=>{
          let str=''
          x.details.forEach(y=>{
            str+= y.content
          })
          x.MyContent = str;
        })
        this.trips = JSON.parse(JSON.stringify(this.tripList));
      },
      setDate: function (j) {
        if (j === 0) {
          return this.clickDate
        } else {
          let d = new Date(this.clickDate)
          d = d.getTime(d);
          let add = d + ((24 * 60 * 60 * 1000) * j)
          let date = new Date(add); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
          let Y = date.getFullYear() + '-';
          let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
          let D = date.getDate() < 10 ? ('0' + date.getDate()) + ' ' : date.getDate() + ' ';
          return Y + M + D;
        }
      },
      getHotelSuffix(item) {
        let suffix = "";
        if (item.jiu2.length > 1) {
          if (this.isDirect === 1) {
            suffix = "或同級"
          }
        } else {
          if (item.jiu2.length == 1 && item.jiu2[0].name != '温馨的家') {
            if (this.isDirect === 1) {
              suffix = "【保证入住】"
            }
          }
        }
        return suffix;
      },

    },
    computed:{
      getHeight(){
        // if (localStorage.baseifo) {
        //   this.TripConfig = JSON.parse(window.localStorage.getItem('baseifo'));
        // }
        // return function (item) {
        //   if(this.TripConfig){
        //     if(this.TripConfig.TripConfig.TripDayIsOpen==1){
        //       item.isShow=false
        //     }else{
        //       item.isShow=true
        //     }
        //   }
        //    return item
        // }
      }
    }
  };

</script>
