<template>
  <div class="travelControlTrip detail-box">
    <div class="trip_cover" v-show="pdfLoading" v-loading="pdfLoading"></div>
    <input type="button" class="travelControlTripBtn" value="下载PDF" @click="toPDF(orderMsg.StartDate + orderMsg.LineteamName+orderMsg.DayNum+'日游')" />
    <div id="pdfNode">
      <div id='pdfDom' style="padding:0 20px;">
        <div id="pdf_1">
          <div class="logo-div">
            <img :src="vshowJ===true? domainManager().ViittoFileUrl+'/Upload/PictureMaterial/Web/headerImg.jpg': domainManager().ViittoFileUrl+'/Upload/PictureMaterial/Web/headerImg2.jpg'">
          </div>
          <div class="website">
            <div class="website-line"></div>
          </div>
          <div class="trip-adviser">
            <h1 class="trip-nav-title">{{orderMsg.LineteamName}}{{orderMsg.DayNum}}日游</h1>
            <p>{{title}}</p>
          </div>
          <div v-if='vshowA' class="module-title">
            <h2>基础信息</h2>
            <div class="short-line"></div>
            <div class="english-title">ESSENTIAL INFORMATION</div>
          </div>
          <table v-if='vshowA' class="essential">
            <tr>
              <td class="essential-item">
                <img src="../assets/img/TravelControlTripIcon1.png" />
                <p class="pkey">线路</p>
                <p class="pvalue">{{orderMsg.LineName}}</p>
              </td>
              <td class="essential-item">
                <img src="../assets/img/TravelControlTripIcon2.png" />
                <p class="pkey">出发日期</p>
                <p class="pvalue">{{orderMsg.StartDate}}</p>
              </td>
              <td class="essential-item">
                <img src="../assets/img/TravelControlTripIcon3.png" />
                <p class="pkey">返回日期</p>
                <p class="pvalue">{{orderMsg.EndDate}}</p>
              </td>
            </tr>
            <tr>
              <td class="essential-item">
                <img src="../assets/img/TravelControlTripIcon4.png" />
                <p class="pkey">系列</p>
                <p class="pvalue">{{orderMsg.LineteamName}}</p>
              </td>
              <td class="essential-item">
                <img src="../assets/img/TravelControlTripIcon5.png" />
                <p class="pkey">行程天数</p>
                <p class="pvalue">{{orderMsg.DayNum}}</p>
              </td>
            </tr>
          </table>

          <div v-if='vshowL' class="module-title">
            <h2>集合地点&联系人</h2>
            <div class="short-line"></div>
            <div class="english-title">Collection place & Contacts</div>
          </div>

          <table v-if='vshowL' class="collection">
            <tr>
              <td>
                <div class="collection-item">
                  <img src="../assets/img/TravelControlTripIcon9.png" />本团领队
                  <span>{{orderMsg.LeaderName}}/{{orderMsg.LeaderMobile}}</span>
                </div>
              </td>
              <td>
                <div class="collection-item">
                  <img src="../assets/img/TravelControlTripIcon10.png" />集合时间
                  <span>{{orderMsg.GatheringTime}}</span>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="collection-item">
                  <img src="../assets/img/TravelControlTripIcon11.png" />机场服务
                  <span v-if="orderMsg.AirportService!=''">{{orderMsg.AirportService}}</span>
                  <span v-else>{{orderMsg.AirportServicePerson}}/{{orderMsg.AirportServicePhone}}</span>
                </div>
              </td>
              <td>
                <div class="collection-item">
                  <img src="../assets/img/TravelControlTripIcon12.png" />集合标识
                  <span>{{orderMsg.BName}}</span>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="collection-item">
                  <img src="../assets/img/TravelControlTripIcon13.png" />紧急联系人
                  <template>
                    <span v-if='vshowLLR'>{{orderMsg.BranchManager}}/{{orderMsg.MobilePhone}}</span>
                    <span v-else>{{orderMsg.SellName}}/{{orderMsg.SellTel}}</span>
                  </template>
                </div>
              </td>
              <td>
                <div class="collection-item">
                  <img src="../assets/img/TravelControlTripIcon14.png" />集合地点
                  <span>{{orderMsg.GatheringAddress}}</span>
                </div>
              </td>
            </tr>
          </table>

          <div v-if='vshowB' class="module-title">
            <h2>航班信息</h2>
            <div class="short-line"></div>
            <div class="english-title">Flight situation</div>
          </div>
          <div v-if='vshowB' class="hangban-info">
            <table border="0" align="center" cellpadding="0" cellspacing="0" class="flight_th">
              <tbody>
                <tr>
                  <td width="140">出发时间<span>(当地)</span></td>
                  <td width="160">抵达时间<span>(当地)</span></td>
                  <td width="206">起飞机场</td>
                  <td width="18" class="gap">&nbsp;</td>
                  <td>抵达机场</td>
                  <td width="18" class="gap">&nbsp;</td>
                  <td width="140">航空公司</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="priceList.length>0&&priceList[0].priceFlight&&priceList[0].priceFlight.length>0">
                <tr v-for="(flight,ftIndex) in priceList[0].priceFlight" :key="ftIndex">
                  <td width="140"><span class="nth-day">{{flight.startDate.substring(5)}}</span>&nbsp;<span class="num">{{flight.departureTime}}</span></td>
                  <td width="160"><span class="nth-day">{{flight.arriveDate.substring(5)}}</span>&nbsp;<span class="num">{{flight.arrivalTime}}</span></td>
                  <td width="206">{{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="140">{{flight.alName}}</td>
                  <td width="90">{{flight.flightNumber}}</td>
                </tr>
              </tbody>
              <tbody v-else>
                <tr>
                  <td>航班信息未确认</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div style="width: 100%;height:20px;"></div>
        </div>
        <div id="pdf_2">
          <div class="nin-box" v-if="showType==2&&vshowC">
            <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&&vshowC">
            <img v-for="(i,index) in feature.featureImgList" :key="index" :src="i.url" style="width:100%;">
          </div>
          <div class="zidingyi" v-if="showType==3&&loadNone==false&&vshowC">
            <div v-html="feature.featureContent"></div>
          </div>
          <div class="template-box" v-if="(showType==4||showType==5)&&loadNone==false&&vshowC">
            <div v-if="vshowC" class="module-title">
              <h2>行程特色</h2>
              <div class="short-line"></div>
              <div class="english-title">Trip characteristics</div>
            </div>
            <div v-html="feature.featureHtml"></div>
          </div>
          <div id="teamacitvy"> </div>
        </div>

        <div v-if='vshowD' class="trip-box">
          <div v-if="vshowK">
            <div class="trip-block pdf_3_block" v-for="(item,i) in tripList" :key="i">
              <div v-if="i==0" class="module-title" id="pdf_3_header">
                <h2>行程安排</h2>
                <div class="short-line"></div>
                <div class="english-title">Scheduling</div>
              </div>
              <oneday v-if="item.details && item.details.length==1" :day='item' :dayNum="item.dayNum" :title="item.title"
                :isDirect="isDirect"></oneday>
              <twoday v-if="item.details && item.details.length==2" :day='item' :dayNum="item.dayNum" :title="item.title"
                :isDirect="isDirect"></twoday>
              <threeday v-if="item.details && item.details.length==3" :day='item' :dayNum="item.dayNum" :title="item.title"
                :isDirect="isDirect"></threeday>
              <fourday v-if="item.details && item.details.length==4" :day='item' :dayNum="item.dayNum" :title="item.title"
                :isDirect="isDirect"></fourday>
              <fiveday v-if="item.details && item.details.length>=5" :day='item' :dayNum="item.dayNum" :title="item.title"
                :isDirect="isDirect"></fiveday>
            </div>
          </div>
          <div v-else>
            <div class="trip-block pdf_3_block" v-for="(item,i) in tripList" :key="i">
              <div v-if="i==0" class="module-title" id="pdf_3_header">
                <h2>行程安排</h2>
                <div class="short-line"></div>
                <div class="english-title">Scheduling</div>
              </div>
              <table class="trip-title">
                <tr>
                  <td class="day">
                    <h3>第<span v-if='item.dayNum<10'>0</span>{{item.dayNum}}天</h3>
                  </td>
                  <td class="desc" v-html="item.title"></td>
                </tr>
              </table>
              <div class="trip_text_details" v-for="(item2,index2) in item.details" :key="index2">
                <h3>
                  {{item2.title}}
                  <span class="playInfo-item" v-if='item2.playTimeHour || item2.playTimeMinutes'>
                    <i class="iconfont icon-shijian1"></i>约
                    <span v-if="item2.playTimeHour">{{item2.playTimeHour}}小时 </span>
                    <span v-if="item2.playTimeMinutes">{{item2.playTimeMinutes}}分钟 </span>
                  </span>
                </h3>
                <div class="trip_text_content" v-html="item2.content"></div>
              </div>
              <div class="trip_text_trips" v-if='item.tips.length>0'>
                <h4>温馨提示</h4>
                <div>
                  <div v-for="(t,k) in item.tips" :key="k" v-html="t.content"></div>
                </div>
              </div>
              <div class="trip_text_restaurant">
                <div class="restaurant">
                  <div>
                    <div class="restaurant-item">
                      <div class="key">
                        <img crossOrigin="Anonymous" src='../assets/img/daily_breakfast.png' />
                      </div>
                      <div class="val">{{item.can.breakfirst}}</div>
                    </div>
                    <div class="restaurant-item">
                      <div class="key">
                        <img crossOrigin="Anonymous" src='../assets/img/daily_lunch.png' />
                      </div>
                      <div class="val">{{item.can.lanuch}}</div>
                    </div>
                    <div class="restaurant-item">
                      <div class="key">
                        <img crossOrigin="Anonymous" src='../assets/img/daily_dinner.png' />
                      </div>
                      <div class="val">{{item.can.dinner}}</div>
                    </div>
                  </div>
                </div>
                <div class="restaurant">
                  <div>
                    <div class="restaurant-item">
                      <div class="key">
                        <img crossOrigin="Anonymous" src='../assets/img/daily_hotel-1.png' />
                      </div>
                      <div class="val" v-if='item.jiu2.length>0'>
                        <span v-for="(t,k) in item.jiu2" :key="k">
                          {{t.name}} /
                        </span>
                        或同級
                      </div>
                      <div class="val" v-else>本日无酒店安排</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div id="pdf_4">
          <div v-if='vshowE' class="module-title">
            <h2>费用</h2>
            <div class="short-line"></div>
            <div class="english-title">Expense</div>
          </div>

          <div v-if='vshowE' class="expense">
            <div class="left">费用包含</div>
            <div class="right">
              <div v-html="feature.feeInclude"></div>
            </div>
            <div class="left" style="margin: 15px 0 15px 0;">费用不包含</div>
            <div class="right">
              <div v-html="feature.feeNonInclude"></div>
            </div>
          </div>

          <div class="expense" v-if='dataList.selfpayingList && dataList.selfpayingList.length>0&&vshowE'>
            <div class="left">自理费用</div>
            <div class="right">
              <table class="expense-table" cellspacing=0 cellpadding=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 v-if='vshowF' class="module-title">
            <h2>购物说明</h2>
            <div class="short-line"></div>
            <div class="english-title">Expense</div>
          </div>
          <div v-if='vshowF' 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&&vshowF">
            <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 style="width: 100%;height:1px;"></div>
        </div>
        <div id="pdf_5">
          <div v-if='vshowG' class="module-title">
            <h2>订单须知</h2>
            <div class="short-line"></div>
            <div class="english-title">Tips</div>
          </div>


          <div class="expense" v-if="feature.importantTip!=''&&vshowG">
            <div class="left">重要提示</div>
            <div class="right">
              <div v-html="feature.importantTip"></div>
            </div>
          </div>
          <div v-if='vshowG' class="expense">
            <div class="left">温馨提示</div>
            <div class="right">
              <div v-html="feature.warmTip"></div>
            </div>
          </div>
          <div style="width: 100%;height:1px;"></div>
        </div>
        <div id="pdf_6">
          <div v-if='vshowH' class="module-title">
            <h2>签证</h2>
            <div class="short-line"></div>
            <div class="english-title">Visa</div>
          </div>
          <div v-if='vshowH' class="expense">
            <div class="left">签证须知</div>
            <div class="right">
              <div v-html="feature.visaRemark"></div>
            </div>
          </div>
          <div v-if='vshowI' class="module-title">
            <h2>同行备注</h2>
            <div class="short-line"></div>
            <div class="english-title">Remark</div>
          </div>
          <div v-if='vshowI' class="expense">
            <div class="left"></div>
            <div class="right">
              <div v-html="feature.b2BRemark"></div>
            </div>
          </div>
          <div v-if='vshowM' class="module-title">
            <h2>旅客信息</h2>
            <div class="short-line"></div>
            <div class="english-title">Passenger information</div>
          </div>
          <table v-if='vshowM' class="Passenger-table" border="0" cellspacing="2" cellpadding="2">
            <tr>
              <td width="16.6%" class="thClass">姓名</td>
              <td width="16.6%" class="thClass">英文姓名</td>
              <td width="16.6%" class="thClass">性别</td>
              <td width="16.6%" class="thClass">护照号</td>
              <td width="16.6%" class="thClass">有效期</td>
              <td width="16.6%" class="thClass">联系电话</td>
            </tr>
            <tr v-for="(item,i) in orderMsg.GuestList" :key="i">
              <td>{{item.Name}}</td>
              <td>{{item.EName}}</td>
              <td>{{item.Sex}}</td>
              <td>{{item.PassportNo}}</td>
              <td>{{item.PassportExpiry}}</td>
              <td>{{item.MobilePhone}}</td>
            </tr>
          </table>
          <div v-if='vshowJ' class="footer-div">
            <img :src="domainManager().ViittoFileUrl+'/Upload/PictureMaterial/Web/TravelControlTripIcon20.png'" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import html2Canvas from 'html2canvas'
  import oneday from './commonPage/oneday'
  import twoday from './commonPage/twoday'
  import threeday from './commonPage/threeday'
  import fourday from './commonPage/fourday'
  import fiveday from './commonPage/fiveday'
  import {
    setTimeout
  } from 'timers';
  export default {
    data() {
      return {
        pdfLoading: true,
        vshowA: this.$route.query.vshowA === undefined ? true : this.$route.query.vshowA === 'true',
        vshowB: this.$route.query.vshowB === undefined ? true : this.$route.query.vshowB === 'true',
        vshowC: this.$route.query.vshowC === undefined ? true : this.$route.query.vshowC === 'true',
        vshowD: this.$route.query.vshowD === undefined ? true : this.$route.query.vshowD === 'true',
        vshowE: this.$route.query.vshowE === undefined ? true : this.$route.query.vshowE === 'true',
        vshowF: this.$route.query.vshowF === undefined ? true : this.$route.query.vshowF === 'true',
        vshowG: this.$route.query.vshowG === undefined ? true : this.$route.query.vshowG === 'true',
        vshowH: this.$route.query.vshowH === undefined ? true : this.$route.query.vshowH === 'true',
        vshowI: this.$route.query.vshowI === undefined ? true : this.$route.query.vshowI === 'true',
        vshowJ: this.$route.query.vshowJ === undefined ? true : this.$route.query.vshowJ === 'true',
        vshowK: this.$route.query.vshowK === undefined ? true : this.$route.query.vshowK === 'true',
        vshowL: this.$route.query.vshowL === undefined ? true : this.$route.query.vshowL === 'true',
        vshowM: this.$route.query.vshowM === undefined ? true : this.$route.query.vshowM === 'true',
        vshowLLR: this.$route.query.vshowLLR === undefined ? true : this.$route.query.vshowLLR === 'true',
        list: [],
        tripList: [],
        priceList: [],
        feature: {},
        dataList: {},
        showType: -1,
        loadNone: false,
        orderMsg: {},
        title: '',
        isDirect: 1, //是否是直采 0:否,1:是
      }
    },
    mounted() {
      this.init()
      this.getOrderMsg()
      setTimeout(() => {
        this.appendParent()
      }, 2000)
    },
    methods: {
      appendParent() {
        var lables = document.querySelectorAll('#pdf_2 .zidingyi img');
        if (lables != null && lables.length > 0) {
          let parent = lables[0].parentElement;
          lables.forEach(function (lable, index) {
            var ele = document.createElement('div')
            ele.className = 'u-box';
            ele.appendChild(lable)
            parent.appendChild(ele)
          });
        }
      },
      // 生成pdf
      toPDF: function (title) {
        this.pdfLoading = true
        let pageData = document.getElementById('pdfNode').innerHTML
        let urlObj = this.domainManager()
        this.$http({
          headers: {
            'Content-Type': 'application/json'
          },
          method: 'post',
          url: urlObj.DomainUrl + '/api/file/GetWebHtmlTwo',
          data: {
            "msg": pageData
          }
        }).then(res => {
          if (res.data.resultCode === 1) {
            setTimeout(() => {
              let sign = title
              const a = document.createElement('a');
              a.setAttribute('download', '');
              a.setAttribute('href', urlObj.DomainUrl + '/api/file/DownloadFileForPdf?fileName=' + sign +
                '.pdf&&fPath=' + res.data.data);
              a.click();
            }, 1000)
          } else {
            this.$message.error('PDF获取失败');
          }
          this.pdfLoading = false
        }).catch(err => {
        })
      },
      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
      },
      getOrderMsg() {
        this.apipost('sellorder_post_GetPDFOrderEntity', {
          ID: this.$route.query.orderId
        }, res => {
          if (res.data.resultCode == 1) {
            this.orderMsg = res.data.data
            this.title = this.orderMsg.StartDate + this.orderMsg.LineteamName + this.orderMsg.DayNum + '日游'
            document.title = this.title
          }
        }, err => {})
      },
      init() {
        this.apipost('b2b_get_GetB2BTravelInfoNoDes', {
          configId: this.$route.query.id,
          cityId: this.$route.query.cityId,
          tcid: this.$route.query.tcid,
          orderId: this.$route.query.orderId,
          isClick:1//不算统计
        }, res => {
          if (res.data.resultCode == 1) {
            let data = (res.data.data);
            this.tripList = res.data.data.dayList

            this.feature = res.data.data.feature
            this.showType = this.feature.featureType;
            this.isDirect = data.isDirect;
            if (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 {
                  x.dayNum = this.DateDiff(data.priceList[0].priceFlight[0].startDate, x.startDate);
                  if (x.departureTime < x.arrivalTime) {
                    x.daodaDay = x.dayNum;
                  } else {
                    x.daodaDay = x.dayNum + 1;
                  }
                }
              })
            }
            this.priceList = data.priceList;
            this.dataList = data;
            this.tripList.forEach((x, j) => {
              let useDinnerTypeBy = ''
              let jin = [],
                jiu = [],
                jiu2 = [],
                jiao = [],
                dadian = [],
                tips = [],
                activy = [],
                can = {
                  breakfirst: '敬请自理',
                  lanuch: '敬请自理',
                  dinner: '敬请自理'
                }
              x.dayArray.forEach((y, index) => {
                if (y.type == 7 && y.childItem.title != '') {
                  let obj = {
                    title: y.childItem.title,
                    content: y.childItem.description,
                    img: y.childItem.imaArray && y.childItem.imaArray.length > 0 ? y.childItem.imaArray[0]
                      .url : '',
                    ticketName: '',
                    playTimeHour: null,
                    playTimeMinutes: null,
                    url: ''
                  }
                  dadian.push(obj)
                } else if (y.type == 1 && y.childItem.subTraffic.length > 0) {
                  let title = ''
                  y.childItem.subTraffic.forEach((z, i) => {
                    title += z.startCityName
                    if (z.arrivalType == 1) {
                      title += '<i class="iconfont icon-feiji"></i>'
                    } else if (z.arrivalType == 2) {
                      title += '<i class="iconfont icon-bus"></i>'
                    } else if (z.arrivalType == 3) {
                      title += '<i class="iconfont icon-icon31"></i>'
                    } else {
                      title += '<i class="iconfont icon-gaotiedongche"></i>'
                    }
                    if (i + 1 == y.childItem.subTraffic.length) {
                      title += z.arrivalCityName
                    }
                  })
                  let obj = {
                    title: title,
                    content: y.childItem.description,
                    img: '',
                    ticketName: '',
                    playTimeHour: null,
                    playTimeMinutes: null,
                    url: ''
                  }
                  jiao.push(obj)
                } else if (y.type == 2 && y.childItem.couponsName != '' && y.childItem.imaArray.length > 0) {
                  let obj = {
                    title: y.childItem.couponsName,
                    content: y.childItem.description,
                    img: y.childItem.imaArray[0].url,
                    ticketName: y.childItem.couponsTicketName,
                    playTimeHour: y.childItem.playTimeHour,
                    playTimeMinutes: y.childItem.playTimeMinutes,
                    scenicJson: y.childItem.scenicJson,
                    url: y.childItem.url
                  }
                  jin.push(obj)
                } else if (y.type == 3 && y.childItem.hotelName != '' && y.childItem.imaArray.length > 0) {
                  let obj = {
                    title: y.childItem.hotelName,
                    content: y.childItem.description,
                    img: y.childItem.imaArray[0].url,
                    ticketName: '',
                    playTimeHour: null,
                    playTimeMinutes: null,
                    url: y.childItem.url
                  }
                  jiu.push(obj)
                } else if (y.type == 4) {
                  if (y.childItem.useDinnerType == "1") {
                    can.breakfirst = y.childItem.dinnerName
                  } else if (y.childItem.useDinnerType == "2") {
                    can.lanuch = y.childItem.dinnerName
                  } else if (y.childItem.useDinnerType == "3") {
                    can.dinner = y.childItem.dinnerName
                  }
                } else if (y.type == 5) {
                  let obj = {
                    title: '自由活动',
                    content: y.childItem.description,
                    img: '',
                    ticketName: '',
                    playTimeHour: null,
                    playTimeMinutes: null,
                    url: ''
                  }
                  activy.push(obj)
                } else if (y.type == 6) {
                  let obj = {
                    title: y.childItem.title,
                    content: y.childItem.description,
                    img: '',
                    ticketName: '',
                    playTimeHour: null,
                    playTimeMinutes: null,
                    url: ''
                  }
                  tips.push(obj)
                }
                if (y.type == 3) {
                  jiu2.push({
                    name: y.childItem.hotelName,
                    url: y.childItem.url
                  });
                  useDinnerTypeBy = y.childItem.useDinnerType
                }
              })
              if (can.breakfirst == '敬请自理' && useDinnerTypeBy.indexOf('1') != -1) {
                can.breakfirst = '酒店内享用早餐'
              } else if (can.breakfirst == '') {
                can.breakfirst = '方便游玩敬请自理'
              }
              if (can.lanuch == '敬请自理' && useDinnerTypeBy.indexOf('2') != -1) {
                can.lanuch = '酒店自助'
              } else if (can.lanuch == '') {
                can.lanuch = '方便游玩敬请自理'
              }
              if (can.dinner == '敬请自理' && useDinnerTypeBy.indexOf('3') != -1) {
                can.dinner = '酒店自助'
              } else if (can.dinner == '') {
                can.dinner = '方便游玩敬请自理'
              }
              x.can = can
              let details = [];
              x.tips = tips
              x.jiu2 = jiu2
              if (jin.length > 0) {
                details = jin
              } else if (jiu.length > 0) {
                details = jiu
              } else if (dadian.length > 0) {
                details = dadian
              } else if (jiao.length > 0) {
                if (j == this.tripList.length - 1) {
                  let obj = {
                    title: '温暖的家',
                    content: '感谢您参加本次行程,期待下次与您相遇',
                    img: ''
                  }
                  details.push(obj)
                } else {
                  details = jiao
                }
              } else if (activy.length > 0) {
                details = activy
              }
              x.title = dadian.length > 0 && dadian[0].title && dadian[0].title != '' ? dadian[0].title : (jiao
                .length > 0 ? jiao[0].title : '集合出发')
              x.details = details
              if (x.details.length == 0) {
                if (j == 0) {
                  let obj = {
                    title: '集合出发',
                    content: '向着远方的目标出发起飞',
                    img: '',
                    ticketName: '',
                    playTimeHour: null,
                    playTimeMinutes: null
                  }
                  details.push(obj)
                } else if (j == this.tripList.length - 1) {
                  let obj = {
                    title: '温暖的家',
                    content: '感谢您参加本次行程,期待下次与您相遇',
                    img: '',
                    ticketName: '',
                    playTimeHour: null,
                    playTimeMinutes: null
                  }
                  details.push(obj)
                }
              } else {
                if (x.title == '集合出发') {
                  x.details.forEach(xc => {
                    if (xc.title !== undefined)
                      x.title = xc.title + '~'
                  })
                  if (x.title == '集合出发') {
                    if (j > 0 && j < tripList.length - 1)
                      x.title = '自由活动'
                  } else {
                    x.title = x.title.substring(0, x.title.length - 1)
                  }
                }
              }
              x.islast = (j + 1) == this.tripList.length
              this.$set(this.tripList, j, x)
            })
          }
          this.$nextTick(function () {
            this.pdfLoading = false;
            let imgs = document.getElementsByTagName('img');
            for (let i = 0; i < imgs.length; i++) {
              document.getElementsByTagName('img')[i].removeAttribute('crossOrigin')
            }
          })
        }, err => {})
      },
    },
    components: {
      oneday,
      twoday,
      threeday,
      fourday,
      fiveday
    },
  }
</script>
<style>
  @import url('../assets/css/tripIndex.css');
  @import url('../assets/css/detail.css');
  @media print {
    html,
    sbody {
      background: none !important;
    }
    .travelControlTrip {
      margin: 0px !important;
      padding: 0px !important;
    }
    .travelControlTripBtn {
      display: none !important;
    }
    .travelControlTripLayer {
      display: none !important;
    }
    #pdfNode {
      margin: 0px !important;
    }
    .trip-block {
      border: none !important;
    }
    @page {
      margin: 6.5mm;
    }
  }
</style>