<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>{{$t('v103.scheduledTripDetails.style.d5')}}</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>
  import { date,useQuasar } from "quasar";
  import { inject, provide, reactive, toRefs, defineComponent,onMounted,ref,watch, getCurrentInstance  } from 'vue';
  import { useRouter } from 'vue-router'
  import { useI18n } from 'vue-i18n'
  import { DirtionmaryHelper } from 'src/config/dictionary'
  import scheduledTripService from 'src/api/scheduledTrip'
  import { ApiResult } from 'src/@types/enumHelper'
  import message from 'src/utils/message'
  export default defineComponent({
    props: ['tripList', 'isDirect'],
    setup(props) {
      const $router = useRouter()
      const { t } = useI18n()
      const $q = useQuasar()
      let {ctx:that, proxy} = getCurrentInstance()
      const data= reactive({
        trips: [],
        slide: 0,
        TripConfig: {},
        tripList: props.tripList,
        isDirect: props.isDirect,
        clickDate: '',
      })
      const methods = {
        getSideShow(item) {
          item.isShow = true;
          that.$forceUpdate();
        },
        getBtmShow(item) {
          item.isShow = false;
          that.$forceUpdate();
        },

        init() {
          data.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 == data.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 == data.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) == data.tripList.length;
            x.slide = 0;
            data.tripList[j] =  x
            // this.$set(this.tripList, j, x)
            x.dateTime = methods.setDate(j);
            x.myIndex = 1;

            if (localStorage.baseifo) {
              data.TripConfig = JSON.parse(localStorage.getItem('baseifo'));
            }
            if(data.TripConfig){
              if(data.TripConfig.TripConfig.TripDayIsOpen==1){
                x.isShow=false
              }else{
                x.isShow = true;
              }
            }
          })
          data.tripList.forEach(x=>{
            let str=''
            x.details.forEach(y=>{
              str+= y.content
            })
            x.MyContent = str;
          })
          data.trips = JSON.parse(JSON.stringify(data.tripList));
        },
        setDate (j) {
          if (j === 0) {
            return data.clickDate
          } else {
            let d = new Date(data.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 (data.isDirect === 1) {
              suffix = "或同級"
            }
          } else {
            if (item.jiu2.length == 1 && item.jiu2[0].name != '温馨的家') {
              if (data.isDirect === 1) {
                suffix = "【保证入住】"
              }
            }
          }
          return suffix;
        },

      }
      methods.init();
      return {
      ...toRefs(data),
      ...methods,
    }
    }
  })
</script>
