<style>
    @import url('../../assets/mall/detail.css');
    ._labelClass{
        width:120px;
        background-color: white;
        text-align: center;
    }
    ._travelLngLatInfo_box{
        background-color: #f3f3f3;
        padding: 20px;
        margin-top: 15px;
    }
    ._travelLngLatInfo_label{
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #ea4335;
        color: white;
        text-align: center;
        line-height: 20px;
    }
    .zanding_flight{
        position: relative;
    }
    .zanding_flight span{
        position: absolute;
        right: -36px;
        top: 10px;
        width: 15px;
        height: 15px;
        background-color: #ef4455;
        color: white;
        cursor: pointer;
        border-radius: 50%;
    }
    .template_box_two>div>div{
        zoom:0.89;
    }
    .TripDownLoadCommon{ height:350px; text-align: center}
    .TripDownLoadCommon> label{cursor: pointer;vertical-align: middle;}
    .TripDownLoadCommon> label input{vertical-align: middle;}
    .TripDownLoadCommon .TripBtn{ color: #fff;  width: 90px; height:30px; background:#E95252; border: 1px solid #E95252; cursor: pointer; border-radius: 15px;}
    .TripDownLoadCommon input[type="checkbox"] + label::before {
            content: "\A0";
            display: inline-block;
            width: 15px;
            height: 15px;
            margin-right: 5px;
            border-radius: 4px;
            background-color: white;
            text-indent: .15em;
            line-height: 15px;
            color: white;
            border: 1px solid #e95252;
        }
        .TripDownLoadCommon input[type="checkbox"]:checked + label::before {
            content: "\2713";
            background-color: #e95252;
        }
        .TripDownLoadCommon input[type="checkbox"]{
            position: absolute;
            clip: rect(0, 0, 0, 0);
        }
        .TripDownLoadCommon input[type="checkbox"]:focus + label::before {
            box-shadow: none;
        }
        .TripDownLoadCommon input[type="checkbox"]:disabled + label::before {
            background-color: gray;
            box-shadow: none;
            color: #555;
        }
        .w450{width: 450px;}
        
</style>

<template>
    <div class="detail-box" v-loading='loadingDataList' id="pdfDom">
        <el-row v-if="loadNone==false">
            <el-col :span="20" :offset="2" class="topic">
                <el-col :span='12'>
                    <el-breadcrumb separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item :to="{ path: '/heel',query:{} }">自由行</el-breadcrumb-item>
                        <!-- <el-breadcrumb-item :to="{ path: '/search',query:{'keywords':'','lineId':dataList.lineName} }">{{dataList.lineName}}</el-breadcrumb-item> -->
                        <el-breadcrumb-item :to="{ path: '/IndependentList',query:{'lineteamId':dataList.lineteamId} }">{{dataList.ltName}}</el-breadcrumb-item>
                        <el-breadcrumb-item>{{dataList.title}}</el-breadcrumb-item>
                    </el-breadcrumb>
                </el-col>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="20" :offset="2">
                <el-col :span='14' class="left-team-box" :gutter="35">
                    <div class="team-top-info">
                        <span class="xilie">{{dataList.ltName}}</span>
                        <span class="code">团队编号：{{dataList.id}}</span>
                    </div>
                    <div class="team-title">
                       {{dataList.title}}
                    </div>
                    <div class="price-box">
                        <div class="huodong" v-if="toDayObj && toDayObj.discountPrice>0">
                            <span>早鸟优惠</span>
                            <span>立减{{toDayObj.discountPrice}}</span>
                        </div>
                        <div>
                            <span class="red">￥</span>
                            <span class="red big">{{toDayObj?(isLogin!==1?toDayObj.b2CPrice:toDayObj.b2BPrice):0}}</span>
                            <span>/人起</span>
                            <span class="tips pointer">
                                起价说明
                            </span> 
                            <!-- <span class="blue split medium pointer">4.9</span>
                            <span class="blue pointer">0条点评</span> -->
                            <span style='margin-left:5px'>{{dataList.offerNumber+99}}人出游</span>
                        </div>
                        <div class="activy" v-if="maxdiscountAmount>0">
                            <span>优惠活动</span>
                            <span class="split tag">可享</span>
                            <span class="split">【同行返佣】最高可返{{maxdiscountAmount}}，赶快报名吧</span>
                        </div>
                    </div>
                    <div class="img-box" v-if="dataList">
                        <el-row :gutter="7">
                            <template v-if="VideoStr">
                                <el-col :span='12'>
                                    <video :src="VideoStr" width="100%" height="259" class="avatar" controls="controls">您的浏览器不支持视频播放</video>
                                </el-col>
                                <el-col :span='12'>
                                    <el-col :span='12'>
                                        <img @click="showImg(imgCover),initialIndex =1" v-if="imgCover&&imgCover[0]" :src="editSrc(imgCover[0].Url)" style="height: 126px;width:100%" />
                                        <img @click="showImg(imgCover)" v-else src="../../assets/img/bg_c2@3x.png" style="height: 126px;width:100%" />
                                        <img @click="showImg(imgCover),initialIndex = 2" v-if="imgCover&&imgCover[1]" :src="editSrc(imgCover[1].Url)" style="height: 126px;width:100%" />
                                        <img @click="showImg(imgCover)" v-else src="../../assets/img/bg_c2@3x.png" style="height: 126px;width:100%;margin-top:3px;" />
                                    </el-col>
                                    <el-col :span='12'>
                                        <img @click="showImg(imgCover),initialIndex = 3" v-if="imgCover&&imgCover[2]" :src="imgCover[2].Url==''?'../../assets/img/bg_c2@3x.png':editSrc(imgCover[2].Url)" style="height: 126px;width:100%" />
                                        <img @click="showImg(imgCover)" v-else src="../../assets/img/bg_c2@3x.png" style="height: 126px;width:100%" />                                    
                                        <div class="last">
                                            <img v-if="imgCover&&imgCover[3]" :src="imgCover[3].Url==''?'../../assets/img/bg_c2@3x.png':editSrc(imgCover[3].Url)" style="height: 126px;width:100%" />
                                            <img v-else src="../../assets/img/bg_c2@3x.png" style="height: 126px;width:100%;margin-top:3px;" />
                                            <div class="tip" @click="showImg(imgCover)">
                                                查看全部图片
                                            </div>
                                        </div>
                                    </el-col>
                                </el-col>
                            </template>
                            <template v-else>
                                <el-col :span='12'>
                                    <img  @click="showImg(imgCover),initialIndex = 0" v-if="imgCover&&imgCover[0]" :src="editSrc(imgCover[0].Url)" style="height: 259px;width:100%" />
                                    <img  @click="showImg(imgCover)" v-else src="../../assets/img/bg_c2@3x.png" style="height: 259px;width:100%" />
                                </el-col>
                                <el-col :span='12'>
                                    <el-col :span='12'>
                                        <img @click="showImg(imgCover),initialIndex =1" v-if="imgCover&&imgCover[1]" :src="editSrc(imgCover[1].Url)" style="height: 126px;width:100%" />
                                        <img @click="showImg(imgCover)" v-else src="../../assets/img/bg_c2@3x.png" style="height: 126px;width:100%" />
                                        <img @click="showImg(imgCover),initialIndex = 2" v-if="imgCover&&imgCover[2]" :src="editSrc(imgCover[2].Url)" style="height: 126px;width:100%" />
                                        <img @click="showImg(imgCover)" v-else src="../../assets/img/bg_c2@3x.png" style="height: 126px;width:100%;margin-top:3px;" />
                                    </el-col>
                                    <el-col :span='12'>
                                        <img @click="showImg(imgCover),initialIndex = 3" v-if="imgCover&&imgCover[3]" :src="imgCover[3].Url==''?'../../assets/img/bg_c2@3x.png':editSrc(imgCover[3].Url)" style="height: 126px;width:100%" />
                                        <img @click="showImg(imgCover)" v-else src="../../assets/img/bg_c2@3x.png" style="height: 126px;width:100%" />
                                        <div class="last">
                                            <img v-if="imgCover&&imgCover[4]" :src="imgCover[4].Url==''?'../../assets/img/bg_c2@3x.png':editSrc(imgCover[4].Url)" style="height: 126px;width:100%" />
                                            <img v-else src="../../assets/img/bg_c2@3x.png" style="height: 126px;width:100%;margin-top:3px;" />
                                            <div class="tip" @click="showImg(imgCover)">
                                                查看全部图片
                                            </div>
                                        </div>
                                    </el-col>
                                </el-col>
                            </template>
                        </el-row>
                    </div>
                    <div class="recome">
                        <p> 
                            <span class="big left">
                            <i class='el-icon-star-on'></i>产品推荐
                            </span>
                            <span class="big right">
                                {{dataList.productRecommend}}
                            </span>
                        </p>
                        <p v-if="priceTags.length>0" style="font-size:14px;padding:4px 0">
                            <span>标签：</span>
                            <span style="color: gray;" v-for="item in priceTags" :key="item.content">{{item.content}} &nbsp;</span>
                        </p>
                        
                    </div>
                </el-col>
                <el-col :span='10' class="right-team-box-col">
                    <div class="right-team-box">
                        <div class="title">
                            <span class="item" :key="index" v-for="(i,index) in calendarTit"  @click="selectMounth(index)" :class="index===indexActive?'avtice':''">
                                <span>{{i.dateStrS}}</span><br/>
                                <span class="price">￥{{isLogin!==1?i.price:i.b2BPrice}}起</span>
                            </span>
                        </div>
                        <calendar v-for="(item,index) in classArray" :key="index" :dateData= "item" :day = "item[0].dateStr" @ChildrenSelect="ListenChildren" v-if="index == selectMonth"/>
                    </div>
                </el-col>
            </el-col>
        </el-row>
        <trade  :priceList='dataList.priceList' :trip='dataList' :numPeople="null" v-if="dataList.priceList && dataList.priceList.length>0"></trade>
        <div ref="nav">
            <el-row>
                <el-col :span="20" :offset="2">
                    <el-col :span="18">
                        <ul class="top-nav" >
                            <li :class="crtnav=='flight'?'active':''" @click="goScroll('flight')">
                                <i class="iconfont icon-Pointer"></i>
                                <span>航班信息</span>
                            </li>
                           <li :class="crtnav=='tese'?'active':''" @click="goScroll('tese')">
                                <i class="iconfont icon-Pointer"></i>
                                <span>行程特色</span>
                            </li>
                            <li :class="crtnav=='teamacitvy'?'active':''"  @click="goScroll('teamacitvy')">
                                <i class="iconfont icon-List"></i>
                                {{dayTrip}}日行程
                            </li>
                            <li :class="crtnav=='feiyong'?'active':''"  @click="goScroll('feiyong')">
                                <i class="iconfont icon-zifeishuoming"></i>
                                费用
                            </li>
                            <li :class="crtnav=='gouwu'?'active':''" @click="goScroll('gouwu')">
                                <i class="iconfont icon-jindiananpai"></i>
                                购物说明
                            </li>
                            <li :class="crtnav=='yuding'?'active':''" @click="goScroll('yuding')">
                                <i class="iconfont icon-zhongyaotishi"></i>
                                预订须知
                            </li>
                            <li :class="crtnav=='qianz'?'active':''" @click="goScroll('qianz')">
                                <i class="iconfont icon-qianzhengshuoming"></i>
                                签证
                            </li>
                            <li :class="crtnav=='tonghang'?'active':''" @click="goScroll('tonghang')">
                                <i class="iconfont icon-hangchenganpai"></i>
                                同行备注
                            </li>
                            <li :class="crtnav=='PDFDownL'?'active':''" @click="crtnav=='PDFDownL',PDFDownLoad('tonghang')">
                                <i class="iconfont icon-hangchenganpai"></i>
                                PDF下载
                            </li>
                        </ul>
                    </el-col>
                    <el-col :span="6">
                        <div class="customer">
                            <div class="phone">
                                <i class="iconfont icon-kefuicon"></i>
                                028-61993600
                            </div>
                            <div class="tip">
                                行程有疑问？懒得填信息？专业客服为您提供咨询服务
                            </div>
                        </div>
                    </el-col>
                </el-col>
            </el-row>
        </div>
        <el-row>
            <el-col :span="20" :offset="2">
                <div class="item-title" id='flight'>
                    <span class="t">航班信息</span>
                    <span>
                        <small class="s"></small>
                    </span>
                    <span>Reference flight</span>
                </div>
                <div class="hangban-info">
                    <table border="0" align="center" cellpadding="0" cellspacing="0" class="flight_th"> 
                        <tbody>
                            <tr>
                                <td width="170">出发时间<span>(当地)</span></td>
                                <td width="170">抵达时间<span>(当地)</span></td>
                                <td width="216">起飞机场</td>
                                <td width="18" class="gap">&nbsp;</td>
                                <td>抵达机场</td>
                                <td width="18" class="gap">&nbsp;</td>
                                <td width="80">航空公司</td>
                                <td width="90">航班编号</td>
                            </tr> 
                        </tbody>
                    </table>
                    <div class="_hangban_line"></div>
                    <table border="0" align="center" cellspacing="0" cellpadding="0" class="flight_list">
                        <tbody v-if="showFlight && FlightList.length>0">
                            <tr v-for="(flight,ftIndex) in sonData.currentPriceInfo.priceFlight" :key="ftIndex">
                                <td width="170"><span class="nth-day">{{flight.startDate.substring(5)}}</span>&nbsp;<span class="num">{{flight.departureTime}}</span></td>
                                <td width="170"><span class="nth-day">{{flight.arriveDate.substring(5)}}</span>&nbsp;<span class="num">{{flight.arrivalTime}}</span></td>
                                <td width="216">{{flight.departureAirPortName}}<span class="citycode"></span></td>
                                <td width="18" class="gap">&nbsp;</td>
                                <td>{{flight.arrivalAirPortName}}<span class="citycode"></span></td>
                                <td width="18" class="gap">&nbsp;</td>
                                <td width="80" >{{flight.alName}}</td>
                                <td width="90" class="zanding_flight">{{flight.flightNumber}} <span v-if="flight.flightState===2" title="暂定">！</span></td>
                            </tr>
                        </tbody>
                        <tbody v-else>
                            <tr>
                                <td>航班信息未确认</td>
                            </tr> 
                        </tbody>
                    </table>
                </div>
                <div class="item-title" id='tese'>
                    <span class="t">行程特色</span>
                    <span>
                        <small class="s"></small>
                    </span>
                    <span>Trip characteristics</span>
                </div>
                <div class="nin-box" v-if="showType==2">
                     <table>
                        <tbody>
                            <tr>
                                <td @click="showImg(feature.featureImgList),initialIndex=index" v-for="(i,index) in feature.featureImgList" :key="index" v-if="index<3" :style="{background:'url(' + i.url + ') no-repeat bottom left/100% auto'}">
                                 &nbsp;
                                </td>                                
                            </tr>
                            <tr>
                                <td @click="showImg(feature.featureImgList),initialIndex=index" v-for="(i,index) in feature.featureImgList" :key="index" v-if="index>2&&index<6" :style="{background:'url(' + i.url + ') no-repeat bottom left/100% auto'}">
                                 &nbsp;
                                </td>  
                            </tr>
                            <tr>
                                <td @click="showImg(feature.featureImgList),initialIndex=index" v-for="(i,index) in feature.featureImgList" :key="index" v-if="index>5&&index<=8" :style="{background:'url(' + i.url + ') no-repeat bottom left/100% auto'}">
                                 &nbsp;
                                </td>  
                            </tr>
                        </tbody>
                     </table>
                </div>
                <div class="slider" v-if="showType==1&&loadNone==false">
                    <!-- <el-carousel :interval="2000" height='400px'  trigger="click" :style="{'background':'#ddd'}">
                        <el-carousel-item v-for="(i,index) in feature.featureImgList" :key="index">
                            <img :src="i.url" />
                        </el-carousel-item>
                    </el-carousel> -->
                    <swiper :imgs='feature.featureImgList'></swiper>
                </div>
                <div class="zidingyi"  v-if="(showType==3 || showType<4)&&loadNone==false">
                    <center v-html="feature.featureContent"></center>
                </div>
                <div class="template-box"  v-if="showType==4&&loadNone==false">
                    <div v-html="feature.featureHtml" style="width:1000px;margin:0 auto;"></div>
                </div>
                <div class="template-box template_box_two"  v-if="showType>4&&loadNone==false">
                    <div v-html="feature.featureHtml" style="width:1000px;margin:0 auto;"></div>
                </div>
                <div id="teamacitvy"> </div>
                <div class="item-title" v-if="dataList.isDirect&&travelLngLat.length>1">
                    <span class="t">行程地图</span>
                    <span>
                        <small class="s"></small>
                    </span>
                    <span>Trip Maps</span>
                </div>
                <!--  -->
                <div class="map-box" v-if="dataList.isDirect&&travelLngLat.length>1">
                    <!-- <bmap :data="travelLngLat"/> -->
                    <GGMap :dataList="travelLngLat"></GGMap>
                    <div class="_travelLngLatInfo_box">
                        <p v-for="item in travelLngLatInfo"><span class="_travelLngLatInfo_label">{{item.lable}}</span>： {{item.text}}</p>
                    </div>
                </div>
                <!-- <div id="map_canvas" style="width:1000px; height:600px;"></div> -->
                <div class="item-title">
                    <span class="t">{{dayTrip}}日行程</span>
                    <span>
                        <small class="s"></small>
                    </span>
                    <span>Scheduling</span>
                </div>
                
                <div v-if='dayList&&dayList.length>0'>
                    <!-- <trip :tripList="dayList"></trip> -->
                    <block :tripList="dayList" :isDirect="isDirect" :clickDate="clickDate"></block>
                </div>
                <div class="item-title" id='feiyong'>
                    <span class="t">费用</span>
                    <span>
                        <small class="s"></small>
                    </span>
                    <span>Expense</span>
                </div>
                <div class="expense">
                    <div class="left">费用包含</div>
                    <div class="right">
                        <div v-html="feature.feeInclude"></div>
                    </div>
                </div>
                <div class="expense">
                    <div class="left">自理费用</div>
                    <div class="right">
                        <div v-html="feature.feeNonInclude"></div>
                        <table class="expense-table" cellspacing=0 cellpadding=0  v-if='dataList.selfpayingList && dataList.selfpayingList.length>0'>
                            <thead>
                                <th>城市</th>
                                <th>活动</th>
                                <th>参考价格</th>
                                <th>说明</th>
                            </thead>
                            <tbody>
                                <tr v-for="(item,i) in dataList.selfpayingList" :key="i">
                                    <td>{{item.cityName}}</td>
                                    <td>{{item.itemName}}</td>
                                    <td>约{{item.estimatedCost}}</td>
                                    <td>{{item.explain}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="item-title" id='gouwu'>
                    <span class="t">购物说明</span>
                    <span>
                        <small class="s"></small>
                    </span>
                    <span>Expense</span>
                </div>
                <div class="expense">
                    <div class="left">
                        <!-- 购物协议 -->
                    </div>
                    <div class="right">
                        <div v-html="feature.shopRemark"></div>
                    </div>
                </div>
                <div class="expense" v-if="dataList.shopList && dataList.shopList.length>0">
                    <div class="left">购物安排</div>
                    <div class="right">
                        <table class="expense-table autowidth" cellspacing=0 cellpadding=0>
                            <thead>
                                <th>城市</th>
                                <th>购物店名称</th>
                                <th>预计停留时间</th>
                            </thead>
                            <tbody>
                                <tr v-for="(item,i) in dataList.shopList" :key="i">
                                    <td>{{item.cityName}}</td>
                                    <td>{{item.shopName}}</td>
                                    <td>{{item.visitTime}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="item-title" id='yuding'>
                    <span class="t">预订须知</span>
                    <span>
                        <small class="s"></small>
                    </span>
                    <span>Tips</span>
                </div>
                <div class="expense" v-if="feature.importantTip!=''">
                    <div class="left">重要提示</div>
                    <div class="right">
                        <div v-html="feature.importantTip"></div>
                    </div>
                </div>
                <div class="expense">
                    <div class="left">温馨提示</div>
                    <div class="right">
                        <div v-html="feature.warmTip"></div>
                    </div>
                </div>
                <div class="item-title" id='qianz'>
                    <span class="t">签证</span>
                    <span>
                        <small class="s"></small>
                    </span>
                    <span>Visa</span>
                </div>
                <div class="expense">
                    <div class="left">签证须知</div>
                    <div class="right">
                        <div v-html="feature.visaRemark"></div>
                    </div>
                </div>
                <div class="item-title" id='tonghang'>
                    <span class="t">同行备注</span>
                    <span>
                        <small class="s"></small>
                    </span>
                    <span>Remark</span>
                </div>
                <div class="expense">
                    <div class="left"></div>
                    <div class="right">
                        <div v-html="feature.b2BRemark"></div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row class="fuben-nav" v-if="changeNav&&loadNone==false" >
            <el-col :span="20" :offset="2">
                <el-col :span="18">
                    <ul class="top-nav" >
                        <li :class="crtnav=='flight'?'active':''" @click="goScroll('flight')">
                            <i class="iconfont icon-Pointer"></i>
                            <span>航班信息</span>
                        </li>
                        <li :class="crtnav=='tese'?'active':''" @click="goScroll('tese')">
                            <i class="iconfont icon-Pointer"></i>
                            <span>行程特色</span>
                        </li>
                        <li :class="crtnav=='teamacitvy'?'active':''"  @click="goScroll('teamacitvy')">
                            <i class="iconfont icon-List"></i>
                            {{dayTrip}}日行程
                        </li>
                        <li :class="crtnav=='feiyong'?'active':''"  @click="goScroll('feiyong')">
                            <i class="iconfont icon-zifeishuoming"></i>
                            费用
                        </li>
                        <li :class="crtnav=='gouwu'?'active':''" @click="goScroll('gouwu')">
                            <i class="iconfont icon-jindiananpai"></i>
                            购物说明
                        </li>
                        <li :class="crtnav=='yuding'?'active':''" @click="goScroll('yuding')">
                            <i class="iconfont icon-zhongyaotishi"></i>
                            预订须知
                        </li>
                        <li :class="crtnav=='qianz'?'active':''" @click="goScroll('qianz')">
                            <i class="iconfont icon-qianzhengshuoming"></i>
                            签证
                        </li>
                        <li :class="crtnav=='tonghang'?'active':''" @click="goScroll('tonghang')">
                            <i class="iconfont icon-hangchenganpai"></i>
                            同行备注
                        </li>
                        <li :class="crtnav=='PDFDownL'?'active':''" @click="crtnav=='PDFDownL',PDFDownLoad('tonghang')">
                            <i class="iconfont icon-hangchenganpai"></i>
                            PDF下载
                        </li>
                        <!-- <li :class="crtnav==7?'active':''">
                            <i class="iconfont icon-feiyongshuoming"></i>
                            点评（99+）
                        </li> -->
                    </ul>
                </el-col>
                <el-col :span="6">
                    <div class="customer">
                        <div class="phone">
                            <i class="iconfont icon-kefuicon"></i>
                            028-61993600
                        </div>
                        <div class="tip">
                            行程有疑问？懒得填信息？专业客服为您提供咨询服务
                        </div>
                    </div>
                </el-col>
            </el-col>
        </el-row>
        <div v-if='picIsShow' class="_show_img_box" @click="picIsShow=false,picObj=[]">
			<div style="position: absolute; width: 800px; height: 600px; left: 50%; top: 50%; margin-left: -400px; margin-top: -300px;">
			    <el-carousel :initial-index=initialIndex height="600px" :interval="5000" trigger="click">
			      <el-carousel-item  v-for="(item,index) in picObj" :key="index">
			         <img :src="item.Url?item.Url:item.url"  style="width: 100%; height: 100%;"/>
			      </el-carousel-item>
			    </el-carousel>
		    </div>
		</div>
        <div style="height:100px;"></div>
        <!-- <el-button class="pdfDom_btn" type="primary" size="small" @click="donwLoad()" v-if="loadNone==false">点击下载</el-button> -->
        <template v-if="sonData">
            <confirmationOrderDownLoad ref="confirmationOrderDownLoad" :sonData="sonData" :TripLayer="TripLayer"/>
        </template>
        <el-dialog custom-class='w450' title="行程下载" :visible.sync="travelControlTripLayerShow" center>
            <div class="TripDownLoadCommon" >
                <table style="width:380px" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <th colspan="2">
                        请选择需要的类容
                        </th>
                    </tr>
                    <tbody>
                        <tr height="36">
                        <td width="50%"><input id="vshowA" v-model="TripLayer.vshowA" type="checkbox" /><label for="vshowA">基础信息</label></td>
                        <td width="50%"><input id="vshowB" v-model="TripLayer.vshowB" type="checkbox" /><label for="vshowB">航班信息</label></td>
                        </tr>
                        <tr height="36">
                        <td><input id="vshowC" v-model="TripLayer.vshowC" type="checkbox" /><label for="vshowC">行程特色</label></td>
                        <td><input id="vshowD" v-model="TripLayer.vshowD" type="checkbox" /><label for="vshowD">行程安排</label></td>
                        </tr>
                        <tr height="36">
                        <td><input id="vshowE" v-model="TripLayer.vshowE" type="checkbox" /><label for="vshowE">费用说明</label></td>
                        <td><input id="vshowF" v-model="TripLayer.vshowF" type="checkbox" /><label for="vshowF">购物说明</label></td>
                        </tr>
                        <tr height="36">
                        <td><input id="vshowG" v-model="TripLayer.vshowG" type="checkbox" /><label for="vshowG">订单须知</label></td>
                        <td><input id="vshowH" v-model="TripLayer.vshowH" type="checkbox" /><label for="vshowH">签证信息</label></td>
                        </tr>
                        <tr height="36">
                        <td><input id="vshowI" v-model="TripLayer.vshowI" type="checkbox" /><label for="vshowI">同行备注</label></td>
                        <td><input id="vshowJ" v-model="TripLayer.vshowJ" type="checkbox" /><label for="vshowJ">印象标识</label></td>
                        </tr>
                        <tr height="36">
                        <td><input id="vshowK" v-model="TripLayer.vshowK" type="checkbox" /><label for="vshowK">景点图片</label></td>
                        </tr>
                    </tbody>
                    <!-- <tbody>
                        <tr height="36">
                        <td width="50%"><input id="vshowA" v-model="TripLayer.vshowA" type="checkbox" /><label for="vshowA">基础信息</label></td>
                        <td width="50%"><input id="vshowL" v-model="TripLayer.vshowL" type="checkbox" /><label for="vshowL">集合地点</label></td>
                        </tr>
                        <tr height="36">
                        <td><input id="vshowK" v-model="TripLayer.vshowK" type="checkbox" /><label for="vshowK">景点图片</label></td>
                        <td><input id="vshowB" v-model="TripLayer.vshowB" type="checkbox" /><label for="vshowB">航班信息</label></td>
                        </tr>
                        <tr height="36">
                        <td><input id="vshowC" v-model="TripLayer.vshowC" type="checkbox" /><label for="vshowC">行程特色</label></td>
                        <td><input id="vshowD" v-model="TripLayer.vshowD" type="checkbox" /><label for="vshowD">行程安排</label></td>
                        </tr>
                        <tr height="36">
                        <td><input id="vshowE" v-model="TripLayer.vshowE" type="checkbox" /><label for="vshowE">费用说明</label></td>
                        <td><input id="vshowF" v-model="TripLayer.vshowF" type="checkbox" /><label for="vshowF">购物说明</label></td>
                        </tr>
                        <tr height="36">
                        <td><input id="vshowG" v-model="TripLayer.vshowG" type="checkbox" /><label for="vshowG">订单须知</label></td>
                        <td><input id="vshowH" v-model="TripLayer.vshowH" type="checkbox" /><label for="vshowH">签证信息</label></td>
                        </tr>
                        <tr height="36">
                        <td><input id="vshowI" v-model="TripLayer.vshowI" type="checkbox" /><label for="vshowI">同行备注</label></td>
                        <td><input id="vshowJ" v-model="TripLayer.vshowJ" type="checkbox" /><label for="vshowJ">印象标识</label></td>
                        </tr>
                        <tr height="36">
                        <td><input id="vshowLLR" v-model="TripLayer.vshowLLR" type="checkbox" /><label for="vshowLLR">紧急联络人</label></td>
                        </tr>
                    </tbody> -->
                    <tr height="66">
                        <td colspan="2" align="center">
                        <input type="button" class="TripBtn" @click="PDFDownLoad();" value="确定" />
                        </td>
                    </tr>
                </table>
            </div>
        </el-dialog>
    </div>
</template>


<script>
import moment from 'moment'
// import bmap from './map.vue'
import calendar from './calendar.vue'
import trip from '../trip/waterfall/index'
import block from '../trip/block/index'
import trade from '../trade/order/index'
import swiper from '../trip/swiper/index'
import GGMap from '../global/GGMap'
import confirmationOrderDownLoad from '../global/confirmationOrderDownLoad'
import bus from '../../plugins/event-bus'
export default {
    components: {
        // bmap,
        GGMap,
        calendar,
        trip,
        block,
        trade,
        swiper,
        confirmationOrderDownLoad
    },
    props:['changeCity'],
    data () {
        return {
           ID:'',
           tcid: '',
           pre:0,
           chosenTime:'',
           crn:2,
           etn:0,
           changeNav:false,
           scrollobj:null,
           picIsShow:false,
           initialIndex:0,
           showType:-1,
           crtnav:'tese',
           dayList:[],
           feature:{},
           priceList:[],
           dataList:{},
           toDayObj:{},
           calendarTit:[],
           classArray:[],
           imgCover:[],
           picObj:[],
           travelLngLat:[],
           selectMonth:0,
           value:'1',
           dayTrip:'',
           input10:'',
           isLogin:1,
           oderInfoShow:false,
           indexActive:0,
           clickDate:'',
           travelControlTripLayerShow: false,
           TripLayer: {
            vshowA :true,
            vshowB :true,
            vshowC :true,
            vshowD :true,
            vshowE :true,
            vshowF :true,
            vshowG :true,
            vshowH :true,
            vshowI :true,
            vshowJ :true,
            vshowK :true,
            vshowL :true,
            vshowM :true,
            vshowLLR :true,
           },
           navs:[
               'flight',
               'tese',
               'teamacitvy',
               'feiyong',
               'gouwu',
               'yuding',
               'qianz',
               'tonghang'
           ],           
           pickerOptions:{
                disabledDate(time) {
                    // return moment(time).format('YYYY-MM-DD')!='2018-10-18' && moment(time).format('YYYY-MM-DD')!='2018-10-28'
                }
            },
            maxdiscountAmount:0,
            loadingDataList:false,
            htmlTitle: '印象之旅',
            loadNone:false,
            site:localStorage.site,
            priceListIndex:0,
            isDirect:1,//是否是直采 0：否，1：是
            abcList: ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','AA','AB','AC','AD','AE','AF','AG'],
            travelLngLatInfo:[],
            VideoStr:'',
            sonData: null,
            showFlight: false,
            FlightList: [],
            city: -1,
            priceTags:[],
        }
    },watch: {  // 监听参数变化
        changeCity: {
            handler: function(val, oldVal) {
                // console.log(val)
                if(val){
                    this.getList()
                }
            },
            deep: true
        },        
    },created(){
        this.ID = decodeURIComponent(this.$route.params.id)
        this.tcid = decodeURIComponent(this.$route.params.tcid)
        this.getList()
        this.isLogin=this.$store.state.isLogin;
        bus.$on('order-chosen', this.orderChosen)
    },
    mounted () {
        this.scrollobj=document.getElementsByClassName('el-scrollbar__wrap')[0];
        this.scrollobj.addEventListener('scroll', this.handleScroll);
        // this.initMap();
    },
    methods: {
        orderChosen: function (date) {
            let day = date.split('-')[0] + '-' + date.split('-')[1]
            this.calendarTit.forEach((x, index)=>{
                if (x.dateStrS === day) {
                    this.selectMonth = index;
                    this.indexActive = index;
                    setTimeout(function(){
                        bus.$emit('order-chosen_calendar', date)
                    },500)
                }
            })
        },
        editSrc: function (src) {
            return src.split('?')[0]
        },
        PDFDownLoad: function (type) {
            if (type) {
                this.travelControlTripLayerShow = true
            } else {
                // let orderMsg = this.sonData;
                let orderMsg = this.sonData.orderMsg;
                this.travelControlTripLayerShow = false
                this.$refs.confirmationOrderDownLoad.toPDF(orderMsg.startDate + orderMsg.lineteamName+orderMsg.dayNum+'日游');
            }
        },
        ToWord: function () {
            this.loadingDataList = true
            let title = this.dataList.currentPriceInfo.startDate + this.dataList.ltName + this.dataList.dayNum + '日游'
            let msg = {
            configId: this.dayList.id,
            cityId: this.city,
            tcid: this.tcid,
            orderId: 0,
            FileName: title,
            //是否显示基础信息
            isShowBase: 1 ,
            //是否显示航班
            isShowFlight: 1,
            //是否显示行程特色
            isShowFeature: 1,
            //自费、费用包含、费用不含
            isShowFee: 1,
            //购物说明，购物安排
            isShowShop: 1,
            //重要提示、温馨提示 [订单须知]
            isShowTip: 1,
            //是否显示同行备注
            isShowB2B: 1,
            //是否显示行程
            isShowTrip: 1,
            //是否显示标题
            isShowTitle: 1,
            //是否显示旅客名单
            isShowGuest: 0,
            //是否显示紧急联系人
            isShowMan: 0,
            //是否显示团号
            isShowTCNUM: 0,
            //是否显示行程图片
            isShowTripImage: 1,
            //是否显示签证信息
            isShowVisa: 1,
            //isPc是否PC下载
            isPc: 1,
            //模板参数
            templateId: this.showType,
            };
            this.GetLocalFile("DownLoadTripWord", msg, title + ".doc", res => {
                this.loadingDataList = false
            });

        },
        donwLoad(){
            this.loadNone = true;
            this.loadingDataList = true;
            let imgs=document.getElementsByTagName('img');
            for(let i=0;i<imgs.length;i++){
                document.getElementsByTagName('img')[i].setAttribute('crossOrigin','Anonymous')
            }
            window.setTimeout(this.getPdf('#pdfDom'),3000);
        },  
        DateDiff(sDate1,  sDate2){    //sDate1和sDate2是2002-12-18格式  
            var  aDate,  oDate1,  oDate2,  iDays  
            aDate  =  sDate1.split("-")  
            oDate1  =  new  Date(aDate[1]  +  '-'  +  aDate[2]  +  '-'  +  aDate[0])    //转换为12-18-2002格式  
            aDate  =  sDate2.split("-")  
            oDate2  =  new  Date(aDate[1]  +  '-'  +  aDate[2]  +  '-'  +  aDate[0])  
            iDays  =  parseInt(Math.abs(oDate1  -  oDate2)  /  1000  /  60  /  60  /24)    //把相差的毫秒数转换为天数  
            return  iDays  
        },
        ListenChildren(word){
            this.clickDate = word
            let data = this.dataList.priceList;
            for ( let i = 0; i < data.length; i++) {
                if (word===data[i].startDate){
                    this.priceListIndex = i; 
                    let msg = {configId:data[i].configIDDes, cityId:this.city, preview:this.pre, tcid:data[i].tcid}
                    bus.$emit('chosen-tripdate', word)
                    this.getData(msg)
                }
            }
        },
        oderInfoShowF(){
            this.oderInfoShow = !this.oderInfoShow
        },
        showImg(obj){
            obj.forEach(x=>{
                x.Url = x.Url.split('?')[0]
            })
            this.picObj= obj
            this.picIsShow= true;
        },
        getList(){
            this.apipost('b2b_get_site',{},res=> {
                let data = res.data.data
                let city = 0
                for(let i = 0 ; i < data.length; i++ ) {
                    if(data[i].companyId == localStorage.site) {
                        city = data[i].cityId
                        this.city = city
                        break
                    }
                }
                let msg = {configId:this.ID,cityId:city,tcid:this.tcid}
                this.getData(msg)
            })
        },
        getData: function (msg) {
            this.loadingDataList=true
            this.apipost('b2b_get_GetB2BFreeInfo',msg,r=>{
                if(r.data.resultCode==1){
                    let data = (r.data.data);
                    this.sonData = data;
                    this.dayList = data.dayList;
                    this.feature = data.feature;
                    this.isDirect = data.isDirect;
                    this.priceTags=data.currentPriceInfo.priceTags;
                    if (data.videoStr) {
                        let path = data.videoStr.indexOf('http') > -1 ? data.videoStr : domainManager().ViittoFileUrl + data.videoStr;
                        this.VideoStr = path;
                    }
                    // console.log(data.priceList[0].priceFlight)
                    // if(data.priceList && data.priceList.length>0){
                    //     data.priceList[0].priceFlight.forEach((x,i)=>{
                    //         if(i==0){
                    //             x.dayNum = 1;
                    //             if(x.departureTime<x.arrivalTime){
                    //                 x.daodaDay = 1;
                    //             }else{
                    //                 x.daodaDay = 2;
                    //             }
                    //         } else {
                    //             console.log(this.DateDiff(data.priceList[0].priceFlight[0].startDate,x.startDate))
                    //             x.dayNum = this.DateDiff(data.priceList[0].priceFlight[0].startDate,x.startDate);
                    //             x.dayNum +=1 
                    //             if(x.departureTime<x.arrivalTime){
                    //                 x.daodaDay = x.dayNum;
                    //             }else{
                    //                 x.daodaDay = x.dayNum+1;
                    //             }
                    //         }
                    //     })
                    // }
                    this.priceList = data.priceList;
                    this.clickDate = data.currentPriceInfo && data.currentPriceInfo.startDate ? data.currentPriceInfo.startDate : '';
                    this.FlightList = data.currentPriceInfo && data.currentPriceInfo.priceFlight ? data.currentPriceInfo.priceFlight : '';
                    this.dataList = data;
                    // console.log("deThree",this.dataList)
                    this.toDayObj = this.priceList && this.priceList.length>0?this.priceList[0]:null;
                    this.imgCover = JSON.parse(this.dataList.imgCover);
                    this.showType = this.feature.featureType;
                    this.dayTrip = this.dataList.dayNum;
                    if(this.dataList.isDirect==1&&this.dataList.travelLngLat.length){
                        this.travelLngLat = [];//this.dataList.travelLngLat;
                        this.dataList.travelLngLat.forEach(x=>{
                            if(x.type!=2){
                                this.travelLngLat.push(x)
                            }
                        })
                        let travelLngLatInfo = [];
                        this.travelLngLat.forEach((x,index)=>{
                            travelLngLatInfo.push(
                                {
                                    lable: this.abcList[index],
                                    text: x.name
                                }
                            )
                        })
                        this.travelLngLatInfo = travelLngLatInfo;
                    }
                    this.creatCalendar(this.priceList);
                    if(data.lineTeamDiscountList && data.lineTeamDiscountList.length>0){
                        data.lineTeamDiscountList.forEach(x=>{
                            this.maxdiscountAmount=x.discountAmount>this.maxdiscountAmount?x.discountAmount:this.maxdiscountAmount
                        })
                    }
                    this.htmlTitle = this.dataList.ltName;
                    this.showFlight = true
                    this.$forceUpdate()
                }else{
                    this.$message.error(r.data.message)
                }
                this.loadingDataList=false
            },null)
        },
        creatCalendar(list){  // 创建日历 
            let dateList = [];
            if(list && list.length>0){
                list.forEach((x,index)=>{
                    if(x.tcState==3){
                        let msg = {
                            dateStr:x.startDate,
                            cDate:x.startDate.replace('-','年').replace('-','月'),
                            price:x.b2CPrice,
                            b2BMemberPrice:x.b2BMemberPrice,
                            b2BPrice:x.b2BPrice,
                            b2CMemberPrice:x.b2CMemberPrice,
                            id:index,
                            dateStrS:x.startDate.substring(0,x.startDate.length-3),
                            tcid: x.tcid,
                            configIDDes: x.configIDDes
                        }
                        dateList.push(msg);
                    }
                    
                });
            }
            let monthArray = [];
    	  	for (var i in dateList) {
    	  		var data = dateList[i];
    	  		var dateDict = {'mounth':data.dateStr.substring(0,data.dateStr.length-3)};	
    	  		monthArray.push(dateDict);
            }
            //数组去重,获取有几个月
            var hash={};
            monthArray = monthArray.reduce(
                function (item,next) {
                    hash[next.mounth]?'' :hash[next.mounth] = true && item.push(next);
                    return item;
                },[]
            )
            //数据分组
    	   let classArray = [];
    	     for (var j in monthArray) {
    	     	var newArray = new Array();
    	    	  	for (var i in dateList) {
	    	    	  var data = dateList[i];
	    	    	  if (data.dateStr.substring(0,data.dateStr.length-3) == monthArray[j].mounth) {
	    	    	  	newArray.push(data)
	    	    	  }
    	     	}
                classArray.push(newArray);
            }
            this.classArray = classArray;
            var hash={};
            dateList = dateList.reduce(
                function (item,next) {
                    hash[next.dateStrS]?'' :hash[next.dateStrS] = true && item.push(next);
                    return item;
                },[]
            )
            this.calendarTit = dateList;
        },
        goScroll(id){
            this.scrollobj.scrollTop=document.getElementById(id).offsetTop+screen.availHeight-350;
        },
        handleScroll(){
            try {
                if(this.scrollobj.scrollTop>this.$refs.nav.offsetTop){
                    this.changeNav=true
                }else{
                    this.changeNav=false
                }
                let current=''
                this.navs.forEach(x=>{
                    let t=document.getElementById(x).offsetTop
                    if(t<=this.scrollobj.scrollTop-200){
                        current=x
                    }
                })
                this.crtnav=current
            } catch (error) {
                
            }
        },
        selectMounth(index){
            this.selectMonth = index;
            this.indexActive = index;
        },
        initMap: function () {
            //所有坐标
            var locations = new Array(
                "31.953313,121.841581","31.15347,121.291706",
                "31.207516,121.412556","31.122909,121.458561",
                "31.118207,121.38715","31.041168,121.426289",
                "30.985262,121.301319","31.057934,121.305834");
            //地图
            var map;
            var marker;
            var poly;

                /* 加载地图 */
            var latlng = new google.maps.LatLng(31.253313, 121.241581);
            var myOptions = {
                zoom: 10,    //缩放级别
                center: latlng,        //坐标
                mapTypeId: google.maps.MapTypeId.ROADMAP    //类型:默认的普通二维图块
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            // console.log(google)
            // 线条设置
            // var polyOptions = {
            //     strokeColor: '#4a90e2',    // 颜色
            //     strokeOpacity: 1.0,    // 透明度
            //     strokeWeight: 2    // 宽度
            // }
            // poly = new google.maps.Polyline(polyOptions);
            // poly.setMap(map);    // 装载
            
            /* 循环标出所有坐标 */
            // for(var i=0; i<locations.length; i++){
            //     var loc = locations[i].split(',');
            //     var path = poly.getPath();    //获取线条的坐标
            //     path.push(new google.maps.LatLng(loc[0], loc[1]));    //为线条添加标记坐标
            //     //生成标记图标
            //     marker = new google.maps.MarkerWithLabel({
            //         position: new google.maps.LatLng(loc[0], loc[1]),
            //         labelContent: `<div>
            //                 <img src="http://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize,m_fixed,h_50,w_50"></img>
            //                 <p>新疆-北京</p>
            //             </div>`, //需要显示的标题的内容
            //         labelAnchor: 0, //当前标题基于marker左上角的偏移
            //         labelStyle:{ //标题的style样式
            //             color: "red",
            //             fontSize: "12px"
            //         },
            //         map: map, 
            //         labelClass:"_labelClass", //支持直接绑定class名，将样式写在css里面
            //         // icon: "http://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize,m_fixed,h_50,w_50"
            //     })
            // }
        }
    }
}
</script>
