<style>
    @import url("../assets/css/swiper.min.css");
    .tripMobileContent {
        height: 100vh;
        position: relative;
        overflow: hidden;
    }

    .tripMobileContent .tripInnerContent {
        background-color: #00a4a8;
        padding: 12px;
        overflow: hidden;
        height: 100%;
        box-sizing: border-box;
    }

    .tripMobileContent .swiper-container {
        width: 100%;
        height: 100%;
    }

    .tripMobileContent .swiper-container-scrollbar .swiper-slide {
        height: auto;
    }

    .tripMobileContent .tripInnerContent .swiper-container .swiper-slide {
        background-color: #fff;
    }

    .tripMobileContent .tripViewMap {
        height: 300px;
        left: 0;
        top: 0;
        width: 100%;
        overflow: hidden;
    }

    .tripMobileContent .tripInnerContent .tripCityList .tripDay {
        padding: 10px 0 10px 65px;
        box-sizing: border-box;
        position: relative;
        border-bottom: 1px #dcdee0 solid;
        min-height: 60px;
    }

    .tripInnerContent .tripCityList .tripDay .leftDay {
        position: absolute;
        left: 0;
        width: 65px;
        text-align: center;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        -moz-transform: translateY(-50%);
    }

    .tripMobileContent .TripdayIndex {
        color: #00a4a8;
        font-size: 20px;
        font-weight: 700;
    }

    .tripInnerContent .tripCityList .tripDay .TripCitys {
        font-size: 18px;
        line-height: 24px;
        min-height: 40px;
        width: 100%;
        color: #455661;
        border-left: 1px #dcdee0 solid;
        padding: 10px 0 10px 15px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .tripMobileContent .cityLists {
        display: inline-block;
        font-size: 18px;
        line-height: 24px;
        color: #455661;
    }

    .tripMobileContent .TripCitys i {
        color: #00a4a8;
        margin: 0 10px;
        font-size: 18px;
    }

    .tripMobileContent .TripInner {
        margin: 15px;
        color: #869096;
        font-size: 14px;
    }

    .tripMobileContent .TripHeader {
        font-weight: 700;
        font-size: 26px;
        overflow: hidden;
        color: #00a4a8;
    }

    .TripArticleCont {
        font-size: 16px;
        line-height: 160%;
        min-height: 30px;
    }

    .TripArticleCont p {
        margin: 16px 0;
    }

    .tripMobileContent .col-md-12 {
        width: 100%;
    }

    .tripMobileContent .arrangeSubHeader {
        position: relative;
        font-weight: 500;
        font-size: 16px;
        line-height: 20px;
        margin: 25px 0 15px;
    }

    .arrangeSubHeader .subTitle {
        display: inline-block;
        background: #fff;
        padding-right: 10px;
        position: relative;
        z-index: 2;
        color: #4f5a60;
    }

    .arrangeSubHeader:after {
        display: block;
        position: absolute;
        border-bottom: 1px #dbe0e4 solid;
        width: 100%;
        z-index: 0;
        bottom: 1px;
        top: 10px;
        content: " ";
    }

    .arrangeSubContainer {
        border: 1px solid #dbe0e4;
        border-radius: 5px;
        margin: 8px 0;
        min-height: 40px;
    }

    .dayIndex {
        color: #00a4a8;
        margin-right: 10px;
    }

    .arrangeSubContainer .subHeader {
        background-color: #eff1f2;
        height: 34px;
        font-size: 14px;
        border-bottom: #dbe0e4 dotted 1px;
        padding: 0 10px;
        line-height: 34px;
    }

    .arrangeSubContainer .subContent {
        padding: 5px 8px;
    }

    .arrangeSubContainer .flightName {
        font-size: 14px;
        color: #4f5a60;
        margin: 5px 0;
        font-weight: 700;
    }

    .TripfromTo {
        position: relative;
        overflow: hidden;
        height: 70px;
    }

    .TripFrom {
        float: left;
        width: 50%;
        box-sizing: border-box;
        padding-right: 50px;
        color: #4f5a60;
    }

    .TfromName {
        font-size: 14px;
        margin: 5px 0;
    }

    .TripMiddle {
        position: absolute;
        text-align: center;
        width: 100%;
        top: -3px;
    }

    .TripMiddle i {
        font-size: 24px;
        color: #4f5a60;
    }

    .TripTo {
        float: left;
        width: 50%;
        box-sizing: border-box;
        padding-left: 50px;
        color: #4f5a60;
    }

    .TripHotel {
        background-color: #fff;
        display: flex;
        height: 34px;
        font-size: 14px;
        border-bottom: #dbe0e4 dotted 1px;
        padding: 0 10px;
        line-height: 34px;
    }

    .TripCity {
        color: #455661;
        font-size: 14px;
        font-weight: 700;
        margin-right: 10px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .stayHotel {
        position: relative;
        overflow: hidden;
        margin: 5px 0;
    }

    .hotelLeft {
        float: left;
        color: #00b2b4;
        font-size: 20px;
        width: 10%;
        box-sizing: border-box;
        padding-left: 3px;
    }

    .hotelRight {
        margin-top: 4px;
        float: left;
        width: 90%;
        box-sizing: border-box;
    }

    .slideHeader {
        color: #00a4a8;
        font-weight: 700;
        font-size: 26px;
        overflow: hidden;
        font-family: "PingFangR";
    }

    .slideHeader .dayNum {
        font-size: 40px;
        font-weight: 400;
        line-height: 40px;
        position: absolute;
        left: 0;
        top: 0;
    }

    .slideHeader .dayNumRight {
        font-size: 16px;
        font-weight: 400;
        color: #4f5a61;
        margin-left: 90px;
    }

    .tripComInner {
        margin: 15px;
        color: #869096;
        font-size: 14px;
    }

    .tripArticleCont {
        min-height: 30px;
        margin-bottom: 20px;
        font-size: 16px;
        line-height: 160%;
    }

    .tripArticleCont p {
        margin: 16px 0;
    }

    .tripSlideHeader {
        position: relative;
        color: #00a4a8;
    }

    .tripSlideHeader .tripSubTitle {
        display: inline-block;
        background: #fff;
        padding-right: 10px;
        position: relative;
        z-index: 2;
    }

    .tripSlideHeader:after {
        content: " ";
        display: block;
        position: absolute;
        border-bottom: 1px #00b2b4 solid;
        width: 100%;
        top: 10px;
        z-index: 0;
    }

    .tripMobileViewAgendaList {
        margin-top: 30px;
        background: url(../assets/img/newtrip/agendaBorder.png) 40px top repeat-y;
        background-size: 2px auto;
    }

    .tripMobileViewAgendaList .agendaBox {
        background: #fff;
        position: relative;
        margin-bottom: 60px;
    }

    .tripMobileViewAgendaList .tripIndexNum {
        font-size: 18px;
        line-height: 40px;
        text-align: center;
        width: 40px;
        border-radius: 40px;
        position: absolute;
        top: -20px;
        left: 20px;
        z-index: 9;
        background: #00a4a8;
        color: #fff;
    }

    .tripCoverWrap {
        text-align: right;
        height: 150px;
        color: #fff;
        position: relative;
        background-size: cover !important;
    }

    .tripMobileViewAgendaList .tripTxtCont {
        padding: 10px 20px;
        box-shadow: rgba(0, 0, 0, 0.1) 0 1px 1px 0;
        border: 1px solid #dcdedf;
        white-space: pre-wrap;
        border-top: 0;
    }

    .tripAgendaPoi {
        color: #00a4a8;
        font-size: 22px;
        margin-top: 10px;
    }

    .tripComtitle {
        font-size: 22px;
        line-height: 24px;
        max-height: 48px;
        overflow: hidden;
        font-weight: 700;
        padding: 0 12px;
    }

    .tripDetailBox {
        display: block;
        color: #626262;
        font-size: 14px;
    }

    .tripAgendaPoi .tour {
        font-size: 22px;
    }

    .Divtriangle {
        position: absolute;
        left: 26px;
        bottom: -16px;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 15px solid #dcdedf;
    }

    .Divtriangle span {
        display: block;
        width: 0;
        height: 0;
        border-left: 28px solid transparent;
        border-right: 28px solid transparent;
        border-top: 28px solid #fff;
        position: absolute;
        left: -28px;
        top: -29px;
    }

    .tripAgendaTransitBox {
        overflow: hidden;
        margin: 60px 0;
    }

    .tripAgendaTransitBox .transitIcon {
        float: left;
        margin: 5px 0 0 60px;
        font-size: 16px;
    }

    .tripAgendaTransitBox .transitIcon i {
        font-size: 20px;
    }

    .tripAgendaTransitBox .transitInfoTxt {
        line-height: 34px;
        position: relative;
        top: 3px;
        margin-left: 10px;
    }

    .tripMobileViewAgendaList .hotelCur {
        background: #3d4756;
        color: #fff;
    }

    .tripAgendaPoiHotel {
        color: #3d4756;
        font-size: 22px;
        margin-top: 10px;
    }

    .tripAgendaPoiHotel i {
        font-size: 22px;
    }

    .tripAgendaPoiHotel .title {
        font-size: 22px;
        line-height: 24px;
        max-height: 48px;
        overflow: hidden;
        font-weight: 700;
        padding: 0 12px;
    }

    .tripMobileContent .tripDetailBox .detailSection {
        border-top: 1px #eee solid;
        border-bottom: 1px #eee solid;
        padding: 10px 0;
        margin-top: 20px;
    }

    .tripMobileContent .tripDetailBox .item {
        margin: 8px 0;
    }

    .tripMobileContent .tripDetailBox .label {
        display: inline-block;
        width: 22%;
        color: #959595;
        vertical-align: top;
        padding-right: 15px;
        text-align: right;
    }

    .tripMobileContent .tripDetailBox .text {
        display: -webkit-inline-box;
        width: 72%;
        vertical-align: top;
        text-align: justify;
        text-justify: newspaper;
        word-break: break-all;
    }

    .TripsubSection {
        margin: 20px 0;
    }

    .TripdetailSection {
        padding: 10px 0;
    }

    .tripMobileContent .agendaBox .TripshowMore {
        color: #00b2b4;
        margin: 10px auto;
        padding: 4px 2px;
        border-radius: 2px;
        border: 1px solid #00b2b4;
        width: 100px;
        text-align: center;
        font-size: 12px;
        cursor: pointer;
    }

    .swiperFixedBtn {
        position: fixed;
        bottom: -40px;
        right: -40px;
        width: 120px;
        height: 120px;
        z-index: 199;
        border-radius: 220px 0 0;
        background-color: #00a4a8;
    }

    .TripctrlBtn {
        position: absolute;
        font-size: 28px;
        color: #fff;
        right: 26px;
        bottom: 30px;
        text-align: center;
        line-height: 85px;
        width: 80px;
        height: 80px;
        border-radius: 220px 0 0;
    }

    .tripMenuWrap {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 181;
        font-size: 14px;
        text-align: center;
    }

    .tripMenuWrap .greyBg {
        width: 100%;
        height: 100%;
        cursor: pointer;
        background: rgba(0, 0, 0, 0.5);
    }

    .tripMenuWrap .tripMenu {
        position: absolute;
        bottom: 12px;
        left: 12px;
        right: 12px;
        padding: 20px 20px 60px;
        background: #fff;
        border-radius: 5px;
        overflow: auto;
        max-height: calc(100vh - 40px);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .tripMenuWrap .btnPageHeader {
        margin: 10px 0;
        font-size: 18px;
    }

    .tripHalf {
        float: left;
        width: 48%;
        margin-right: 10px;
        -webkit-box-sizing: border-box;
    }

    .tripHalf:nth-child(2n) {
        margin-right: 0;
    }

    .tripMenuWrap .btnPage {
        border: 1px solid #b6bdc1;
        border-radius: 5px;
        height: 50px;
        margin: 5px 0;
        cursor: pointer;
    }

    .TripmenuTitle {
        line-height: 50px;
        margin-left: 3px;
    }

    .alterClear {
        display: table;
        content: " ";
        clear: both;
    }

    .tripMenuWrap .btnDayHeader {
        position: relative;
        text-align: center;
        line-height: 20px;
        height: 20px;
        margin: 10px 0;
    }

    .tripMenuWrap .btnDayHeader:before {
        display: block;
        position: absolute;
        width: 100%;
        left: 0;
        border-top: 1px #dbe0e3 solid;
        z-index: 0;
        top: 10px;
        content: " ";
    }

    .tripMenuWrap .btnDayHeader span {
        display: inline-block;
        background: #fff;
        position: relative;
        z-index: 2;
        padding: 0 20px;
    }

    .tripMenuWrap .btnDayList {
        clear: both;
        overflow: hidden;
    }

    .tripMenuWrap .btnDay {
        border: 1px solid #b6bdc1;
        border-radius: 5px;
        height: 50px;
        line-height: 50px;
        min-width: 50px;
        float: left;
        margin: 5px;
        cursor: pointer;
    }

    .tripCityList .tripDay .TripCitys i:last-child {
        display: none;
    }

    .slideHeader .dateEleSpace {
        height: 16px;
    }

    .slideHeader .dayNumRight i:last-child {
        display: none;
    }

    .tripMobileViewAgendaList .agendaBox .hideAgendaDetails {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        margin-bottom: 20px;
        -webkit-box-orient: vertical;
    }

    .swiper-container {
        width: 100%;
        height: 100%;
    }

    .swiper-slide {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
    .notFoundPage{
        position:fixed;
        width:100%;
        height:100%;
        top:0;
        z-index:999;
        background-color: #fff;
        text-align: center;
        line-height: 100px;
    }
</style>

<template>
    <div class="tripMobileContent">
        <div class="tripInnerContent">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="tripViewMap">
                            <tripMap :locationArray="travelLngLat" :type="showType" ref="tripMap" v-if="showMapType==2"></tripMap>
                            <tripBaiDuMap :locationArray="travelLngLat" :type="showType" ref="tripMap" v-if="showMapType==1"></tripBaiDuMap>
                        </div>
                        <div class="tripCityList">
                            <div class="tripDay" v-for="(item,index) in dataList.dayList" :key="index">
                                <div class="leftDay">
                                    <div class="TripdayIndex">D{{index+1}}</div>
                                </div>
                                <div class="TripCitys">
                                    <template v-for="suItem in item.dayArray">
                                        <template v-if="suItem.type==1" v-for="(childItem,childIndex) in suItem.childItem.subTraffic">
                                            <template v-if="childIndex==0">
                                                <span class="cityLists">{{childItem.startCityName}}</span>
                                                <i class="iconfont icon-daoda"></i>
                                                <span class="cityLists">{{childItem.arrivalCityName}}</span>
                                                <i class="iconfont icon-daoda icon"></i>
                                            </template>
                                            <template v-else>
                                                <span class="cityLists">{{childItem.arrivalCityName}}</span>
                                                <i class="iconfont icon-daoda icon"></i>
                                            </template>
                                        </template>
                                    </template>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="TripInner">
                            <div class="TripHeader">关于这次旅行</div>
                            <div class="TripArticleCont">
                                <p>旅游并不一定是舟车劳顿的代名词</p>
                                <p>为了是挣脱都会丛林中污浊的空气</p>
                                <p>还是杂乱的交通</p>
                                <p>或者是拥挤的人群</p>
                                <p>寻求一丝自我的空间</p>
                                <p>您的梦想即将实现</p>
                                <p>就让我们为您实现一次精彩的旅行</p>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="TripInner">
                            <div class="TripHeader">行程安排</div>
                            <div class="col-md-12">
                                <div class="arrangeSubHeader">
                                    <span class="subTitle">交通方案</span>
                                </div>
                            </div>
                            <div class="col-md-12" v-if="dataList.currentPriceInfo&&dataList.currentPriceInfo.priceFlight&&dataList.currentPriceInfo.priceFlight.length>0">
                                <template v-for="(item,index) in dataList.currentPriceInfo.priceFlight">
                                    <div class="arrangeSubContainer" :key="index">
                                        <div class="subHeader">
                                            <span class="dayIndex">{{item.startDate}}</span>
                                        </div>
                                        <div class="subContent">
                                            <div class="flightName transit">{{item.flightNumber}}</div>
                                            <div class="TripfromTo">
                                                <div class="TripFrom">
                                                    <div class="TfromName">{{item.departureAirPortName}}</div>
                                                    <div style="font-size:10px;">
                                                        出发时间 {{item.departureTime}}
                                                    </div>
                                                </div>
                                                <div class="TripMiddle">
                                                    <i class="iconfont icon-daoda"></i>
                                                </div>
                                                <div class="TripTo">
                                                    <div class="TfromName">{{item.arrivalAirPortName}}</div>
                                                    <div style="font-size:10px;">
                                                        到达时间 {{item.arrivalTime}}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </div>
                            <div class="col-md-12">
                                <div class="arrangeSubHeader">
                                    <span class="subTitle">酒店安排</span>
                                </div>
                                <template v-for="(item,index) in dataList.dayList">
                                    <div class="col-md-12">
                                        <div class="arrangeSubContainer">
                                            <div class="TripHotel">
                                                <span class="dayIndex">D{{item.dayNum}}</span>
                                                <div class="TripCity">
                                                    <span>
                                                        <template v-for="(subItem,subIndex) in getHotelArray(item.dayArray)" v-if="subIndex==0">
                                                            {{subItem.childItem.cityName}}
                                                        </template>
                                                    </span>
                                                </div>
                                            </div>
                                            <div class="subContent">
                                                <template v-for="(subItem,subIndex) in item.dayArray" v-if="subItem.type==3">
                                                    <div class="stayHotel">
                                                        <span class="hotelLeft">
                                                            <i class="iconfont icon-bed"></i>
                                                        </span>
                                                        <span class="hotelRight">
                                                            <template v-if="subItem.childItem.newHotelName!=''">{{subItem.childItem.newHotelName}}</template>
                                                            <template v-else>{{subItem.childItem.hotelName}}</template>
                                                        </span>
                                                    </div>
                                                </template>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </div>
                        </div>
                    </div>
                    <!-- 行程开始 -->
                    <div class="swiper-slide" v-for="(item,index) in dataList.dayList" :key="index" :id="'dayList'+(index+1)">
                        <div class="tripComInner">
                            <div class="slideHeader" style="position:relative;">
                                <div class="dayNum">D{{index+1}}</div>
                                <div class="dateEleSpace"></div>
                                <div class="dayNumRight">
                                    <template v-for="suItem in item.dayArray">
                                        <template v-if="suItem.type==1" v-for="(childItem,childIndex) in suItem.childItem.subTraffic">
                                            <template v-if="childIndex==0">
                                                <span class="city">{{childItem.startCityName}}</span>
                                                <i class="iconfont icon-daoda icon"></i>
                                                <span class="city">{{childItem.arrivalCityName}}</span>
                                                <i class="iconfont icon-daoda icon"></i>
                                            </template>
                                            <template v-else>
                                                <span class="city">{{childItem.arrivalCityName}}</span>
                                                <i class="iconfont icon-daoda icon"></i>
                                            </template>
                                        </template>
                                    </template>
                                </div>
                            </div>
                            <div class="tripArticleCont">
                                <p>今日推荐：</p>
                                <template v-for="(subItem,subIndex) in item.dayArray" v-if="subItem.type==7">
                                    <p :key="subIndex">{{subItem.childItem.title}}</p>
                                </template>
                            </div>
                            <div class="tripArticleCont" v-if="dataList.warmTipList[index].description!=''">
                                <p>温馨提示：</p>
                                <div v-html="dataList.warmTipList[index].description"></div>
                            </div>
                            <div class="tripSection">
                                <div class="tripSlideHeader">
                                    <span class="tripSubTitle">D{{index+1}} 日程安排</span>
                                </div>
                                <div class="tripMobileViewAgendaList">
                                    <template v-for="subItem in item.dayArray">
                                        <template v-if="subItem.type==2">
                                            <div class="agendaBox">
                                                <div class="tripIndexNum">{{index+1}}</div>
                                                <div class="tripCoverWrap" :style="`background: url(${subItem.childItem.imaArray[0].url}) center`">
                                                </div>
                                                <div class="tripTxtCont">
                                                    <div class="tripAgendaPoi">
                                                        <i class="iconfont icon-jingdianjingguan tour"></i>
                                                        <span class="tripComtitle">{{subItem.childItem.couponsName}}</span>
                                                    </div>
                                                    <div class="tripDetailBox">
                                                        <div style="border-top:0;margin:20px 0;" v-html='subItem.childItem.descriptionText'></div>
                                                    </div>
                                                    <div class="Divtriangle">
                                                        <span></span>
                                                    </div>
                                                    <div class="detailSection" style="margin-top:0;" v-if="subItem.childItem.playTimeHour||subItem.childItem.playTimeMinutes">
                                                        <div class="item">
                                                            <span class="label">建议游玩时间</span>&nbsp;&nbsp;<span class="text">约<template v-if="subItem.childItem.playTimeHour">{{subItem.childItem.playTimeHour}}小时</template><template v-if="subItem.childItem.playTimeMinutes">{{subItem.childItem.playTimeMinutes}}分钟</template>
                                                            </span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <template v-if="subItem.childItem.trafficType==1">
                                                <div class="tripAgendaTransitBox">
                                                    <div class="transitIcon">
                                                        <i class="iconfont icon-feiji2"></i>飞机
                                                    </div>
                                                </div>
                                            </template>
                                            <template v-if="subItem.childItem.trafficType==2">
                                                <div class="tripAgendaTransitBox">
                                                    <div class="transitIcon">
                                                        <i class="iconfont icon-icon-" style="font-size:25px;"></i>专车
                                                    </div>
                                                </div>
                                            </template>
                                            <template v-if="subItem.childItem.trafficType==3">
                                                <div class="tripAgendaTransitBox">
                                                    <div class="btnTransit" @click="getSubWay(subItem.childItem.trafficImage)">
                                                        <i class="iconfont icon-subway" style="margin-right:10px;font-size:18px;"></i>查看交通详情
                                                    </div>
                                                    <div class="transitIcon" style="margin-left:0;">
                                                        <span>地铁</span>
                                                    </div>
                                                </div>
                                            </template>
                                            <template v-if="subItem.childItem.trafficType==4">
                                                <div class="tripAgendaTransitBox">
                                                    <div class="transitIcon">
                                                        <i class="iconfont icon-walking"></i>
                                                        {{subItem.childItem.trafficContent}}
                                                    </div>
                                                </div>
                                            </template>
                                        </template>
                                        <template v-if="subItem.type==3">
                                            <div class="agendaBox">
                                                <div class="tripIndexNum tos-icon hotelCur  ">
                                                    <i class="iconfont icon-moono"></i>
                                                </div>
                                                <div class="tripCoverWrap" v-if="subItem.childItem.imaArray.length>0" :style="`background: url(${subItem.childItem.imaArray[0].url}) center`">
                                                </div>
                                                <div class="tripTxtCont">
                                                    <div class="tripAgendaPoiHotel">
                                                        <i class="iconfont icon-bed bed"></i>
                                                        <span class="title">
                                                            <template v-if="subItem.childItem.newHotelName">{{subItem.childItem.newHotelName}}</template>
                                                            <template v-else>{{subItem.childItem.hotelName}}</template>
                                                        </span>
                                                    </div>
                                                    <div class="tripDetailBox">
                                                        <div class="detailSection" v-if="subItem.childItem.isShow">
                                                            <div class="item">
                                                                <span class="label">酒店星级</span>
                                                                <span class="text">
                                                                    <el-rate v-model="subItem.childItem.star" disabled></el-rate>
                                                                </span>
                                                            </div>
                                                            <div class="item" v-if="getService(subItem.childItem.facilityServices)!=''">
                                                                <span class="label">设施服务</span>
                                                                <span class="text">{{getService(subItem.childItem.facilityServices)}}</span>
                                                            </div>
                                                        </div>
                                                        <div class="TripsubSection" :class="{'hideAgendaDetails':!subItem.childItem.isShow}" v-if="subItem.childItem.hotelNewDescriptionText"
                                                            v-html="subItem.childItem.hotelNewDescriptionText"></div>
                                                        <div class="TripdetailSection" v-if="subItem.childItem.isShow">
                                                            <div class="item" v-if="subItem.childItem.hotelAddress!=''">
                                                                <span class="label">地址</span>
                                                                <span class="text">{{subItem.childItem.hotelAddress}}</span>
                                                            </div>
                                                            <div class="item" v-if="subItem.childItem.url!=''">
                                                                <span class="label">网址</span>
                                                                <span class="text">{{subItem.childItem.url}}</span>
                                                            </div>
                                                        </div>
                                                        <div class="TripshowMore" @click="getShowMore(subItem.childItem)">{{subItem.childItem.isShow==true?'点我收起':'点我展开详情'}}</div>
                                                    </div>
                                                    <div class="Divtriangle">
                                                        <span></span>
                                                    </div>
                                                </div>
                                            </div>
                                        </template>
                                    </template>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="notFoundPage" v-if="showDiv">
            未找到指定页面
        </div>
        <div class="tripMenuWrap" v-if="showDialog">
            <div class="greyBg"></div>
            <div class="tripMenu">
                <div class="btnPageHeader">选择查看的页面</div>
                <div style="padding:0 5px;width:100%" class="alterClear">
                    <div style="margin:0 -5px;">
                        <div class="tripHalf">
                            <div class="btnPage" @click="getSwiper(0)">
                                <i class="iconfont icon-huozhuduanchaxunxianlu"></i>
                                <span class="TripmenuTitle">行程线路</span>
                            </div>
                        </div>
                        <div class="tripHalf">
                            <div class="btnPage" @click="getSwiper(1)">
                                <i class="iconfont icon-message"></i>
                                <span class="TripmenuTitle">关于这次旅行</span>
                            </div>
                        </div>
                        <div class="tripHalf">
                            <div class="btnPage" @click="getSwiper(2)">
                                <i class="iconfont icon-order_icon"></i>
                                <span class="TripmenuTitle">行程安排</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="btnDayHeader">
                    <span>日程安排</span>
                </div>
                <div class="btnDayList">
                    <div class="btnDay" v-for="(item,index) in dataList.dayList" @click="goDaySwiper(index,'dayList'+(index+1))" :key="index">D{{index+1}}</div>
                </div>
            </div>
        </div>
        <div class="swiperFixedBtn" @click="showMenu()">
            <i class="iconfont iconmore1 TripctrlBtn" v-if="!showDialog"></i>
            <i class="iconfont iconcha TripctrlBtn" v-else></i>
        </div>
    </div>
</template>
<script>
    import Swiper from "swiper";
    import tripMap from '../components/common/tripMap.vue'
    import tripBaiDuMap from '../components/common/tripBaiduMap.vue'
    export default {
        data() {
            return {
                showDialog: false,
                //请求参数
                msg: {
                    ID: 0,
                    tcid: 0,
                    isDes:0,
                    NewId:'',
                    pType: 1,//类型 1 来源B2C
                    newConfigId: 0,//列表里的configId
                },
                showMapType:0,
                dataList: {},
                FlightList: [],
                isShow: false,
                StartData: "",
                swiperV: '',
                showType: 1, //显示类型(1-所有的，2-每天的)
                travelLngLat: [],
                showDiv:false,
                title:' '
            };
        },
        created() {},
        components: {
            tripMap,
            tripBaiDuMap
        },
        meta() {
            return {
                title:this.title
            };
        },
        computed: {},
        mounted() {
            this.isInChina()
            this.msg.ID = this.$route.query.ID;
            this.msg.tcid = this.$route.query.tcid;
            this.msg.newConfigId = this.$route.query.ConfigId;
            //判断为pc端
            if(this.$q.platform.is.desktop){
                this.$router.push({
                    path: 'newTrip',
                    query: {
                        ID: decodeURIComponent(this.msg.ID),
                        tcid: decodeURIComponent(this.msg.tcid),
                        newConfigId: decodeURIComponent(this.msg.newConfigId)
                    }
                });
            }
            //获取浏览器NewId
            var NewId = this.$route.query.NewId;
            if(NewId){
                this.msg.isDes=1;
                this.msg.NewId=NewId;
            }
            this.getTrip();

            //加载滑动
        },
        methods: {
            isInChina() {
                let that=this
                var url = '//graph.facebook.com/feed?callback=h';
                var xhr = new XMLHttpRequest();
                var called = false;
                xhr.open('GET', url);
                xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        called = true;
                        that.countryCb(false);
                    }
                };
                xhr.send();
                // timeout 1s, this facebook API is very fast.
                setTimeout(function() {
                    if (!called) {
                        xhr.abort();
                        that.countryCb(true);
                    }
                }, 1000);
            },
            countryCb(r){
                this.showMapType = r? 1:2
            },
            showMenu() {
                this.showDialog = !this.showDialog;
            },
            //加载数据
            getTrip() {
                this.$q.loading.show()
                this.apipost(
                    "b2b_get_GetB2BTravelInfoV1",
                    this.msg,
                    res => {
                        this.$q.loading.hide()
                        if (res.data.resultCode == 1) {
                            this.dataList = res.data.data;
                            if (
                                res.data.data.currentPriceInfo &&
                                res.data.data.currentPriceInfo.priceFlight
                            ) {
                                this.FlightList = res.data.data.currentPriceInfo.priceFlight;
                            }
                            if (
                                res.data.data.currentPriceInfo &&
                                res.data.data.currentPriceInfo.startDate
                            ) {
                                this.StartData = res.data.data.currentPriceInfo.startDate;
                            }
                            this.title=res.data.data.title
                            this.isShow = true;
                            this.getAllPoint();
                            //装载景点酒店图片以供预览
                            this.dataList.dayList.forEach(x => {
                                x.dayArray.forEach(y => {
                                    if (y.type == 2 || y.type == 3) {
                                        y.childItem.isShow = false;
                                    }
                                });
                            });
                            this.$nextTick(() => {
                                this.getScroll();
                            })
                        } else {
                            this.showDiv=true;
                            this.Error(res.data.message);
                        }
                    },
                    null
                );
            },
            getScroll() {
                this.swiperV = new Swiper('.swiper-container', {
                    direction: 'vertical',
                    initialSlide: 0,
                    noSwiping: true
                });
                var startScroll, touchStart, touchCurrent;
                this.swiperV.slides.on('touchstart', function (e) {
                    startScroll = this.scrollTop;
                    touchStart = e.targetTouches[0].pageY;
                }, true);
                this.swiperV.slides.on('touchmove', function (e) {
                    touchCurrent = e.targetTouches[0].pageY;
                    var touchesDiff = touchCurrent - touchStart;
                    var slide = this;
                    var onlyScrolling =
                        (slide.scrollHeight > slide.offsetHeight) &&
                        (
                            (touchesDiff < 0 && startScroll === 0) ||
                            (touchesDiff > 0 && startScroll === (slide.scrollHeight - slide.offsetHeight)) ||
                            (startScroll > 0 && startScroll < (slide.scrollHeight - slide.offsetHeight))
                        );
                    if (onlyScrolling) {
                        e.stopPropagation();
                    }
                }, true);
            },
            getHotelArray(hotelArray) {
                var newArray = [];
                if (hotelArray != null && hotelArray.length > 0) {
                    hotelArray.forEach(item => {
                        if (item.type == 3) {
                            newArray.push(item);
                        }
                    });
                }
                return newArray;
            },
            //隐藏显示
            getShowMore(item) {
                item.isShow = !item.isShow;
                this.$forceUpdate();
            },
            //遍历设施服务
            getService(item) {
                let Obj = JSON.parse(item);
                let str = "";
                Obj[0].checked.forEach(ckItem => {
                    Obj[0].list.forEach(x => {
                        if (ckItem == x.ID) {
                            str += x.Content + "  ";
                        }
                    });
                });
                return str;
            },
            //点击选中
            getSwiper(index) {
                var index = index; // index为指定将要切换到的slide的索引
                this.swiperV.slideTo(index, 100, false);
                this.swiperV.slides[index].scrollTop=0;
                this.showDialog = false;
            },
            goDaySwiper(index,id) {
                var index = index + 3; // index为指定将要切换到的slide的索引
                this.swiperV.slideTo(index, 100, false);
                this.swiperV.slides[index].scrollTop=0;
                this.showDialog = false;
            },
            //加载所有坐标点
            getAllPoint() {
                let Arr = [];
                if (this.dataList && this.dataList.dayList && this.dataList.dayList.length > 0) {
                    this.dataList.dayList.forEach(x => {
                        x.dayArray.forEach(y => {
                            if (y.type == 1) {
                                y.childItem.subTraffic.forEach(z => {
                                    let obj1 = {
                                        lat: z.startCityPoint[1],
                                        lng: z.startCityPoint[0],
                                        name: z.startCityName,
                                        type: 1,
                                        isFly: 0,
                                        trafficType: 0,
                                    }
                                    let obj2 = {
                                        lat: z.arrivalCityPoint[1],
                                        lng: z.arrivalCityPoint[0],
                                        name: z.arrivalCityName,
                                        type: 1,
                                        isFly: 0,
                                        trafficType: 0,
                                    }
                                    Arr.push(obj1);
                                    Arr.push(obj2);
                                })
                            }
                        })
                    });
                    this.travelLngLat = Arr;
                    this.showType = 1;
                }
            }
        }
    };
</script>