<style>
  .confirmOrder {
    width: 950px;
  }

  .travelControlTrip .hangban-info tr td,
  .travelControlTrip .hangban-info tr th {
    padding-left: 0 !important;
  }

  .travelControlTrip .WeiXinShare {
    width: 118px;
    position: relative;
    top: 55px;
  }

  .travelControlTrip .el-dropdown {
    height: 30px;
    line-height: 30px;
    background-color: #E95252;
    color: #fff;
    font-size: 12px;
    width: 80px;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 20px;
  }

  .travelControlDropDown .el-dropdown-menu__item {
    width: 156px;
  }

  .guoneiLine tbody td {
    font-size: 17px;
  }

</style>

<template>
  <div class="travelControlTrip detail-box">
    <div class="trip_cover" v-show="pdfLoading" v-loading="pdfLoading"></div>
    <el-row style="margin-bottom:20px;">
      <el-col :span="14">
        <el-dropdown trigger="click">
          <span class="el-dropdown-link">{{$t('Operation.Op_tripDownLoad')}}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown" class="travelControlDropDown">
            <el-dropdown-item style="display:none;"
              @click.native="toPDF_2023(orderMsg.startDate + orderMsg.lineteamName+orderMsg.dayNum+'日游')">
              {{$t('objFill.v101.enersbpdf')}}
            </el-dropdown-item>
            <el-dropdown-item @click.native="toPDF_V2(orderMsg.startDate + orderMsg.lineteamName+orderMsg.dayNum+'日游')">
              {{$t('objFill.v101.xiazdnbbpdf')}}
            </el-dropdown-item>
            <el-dropdown-item @click.native="gernalFeature(0)">
              {{$t('objFill.v101.xiazsjibworo')}}
            </el-dropdown-item>
            <el-dropdown-item @click.native="gernalFeature(1)">
              {{$t('objFill.v101.xiazdnbworo')}}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <!-- <input type="button" style="width: auto !important;" class="travelControlTripBtn" :value="$t('objFill.v101.xiazdnbbpdf')"
          @click="toPDF_V2(orderMsg.startDate + orderMsg.lineteamName+orderMsg.dayNum+'日游')" />
        <input type="button" style="width: auto !important;" class="travelControlTripBtn" value="下载手机版WORD"
          @click="gernalFeature(0)" />
        <input type="button" style="width: auto !important;" class="travelControlTripBtn" value="下载电脑版WORD"
          @click="gernalFeature(1)" /> -->
        <input type="button" :value="$t('objFill.v101.xinbanxingc')" class="travelControlTripBtn" @click="goUrlView()" style="display:none;" />
        <el-checkbox v-model="isShowTime">{{$t('objFill.v101.xianshixcriq')}}</el-checkbox>
        <a class="travelControlTripBtn" v-if="priceList.length>0&& priceList[0].wordPath!=''" style="display:inline-block;text-decoration:none;
          width:135px;text-align:center;line-height:30px;font-size:13px;position:relative;top:2px;"
          :href="domainManager().ViittoFileUrl+priceList[0].wordPath">{{$t('Operation.Op_downLoadword')}}</a>
        <!--&&isopOperation HK 注释 可以让销售修改基本信息-->
        <input type="button" v-if="orderId>0" class="travelControlTripBtn" :value="$t('objFill.xiugaixinxi')" @click="editMsgShow=true" />
      </el-col>
      <el-col :span="10">
        <span style="font-size:14px">{{$t('objFill.v101.xingcbucsmi')}}:</span>
        <el-select filterable size="small" v-model="Typevalue" :placeholder="$t('pub.pleaseSel')">
          <el-option :label="$t('objFill.v101.xingcbcsms')[0]" :value="-1"></el-option>
          <el-option :label="$t('objFill.v101.xingcbcsms')[1]" :value="-2"></el-option>
          <el-option :label="$t('objFill.v101.xingcbcsms')[2]" :value="-3"></el-option>
          <el-option :label="$t('objFill.v101.xingcbcsms')[3]" :value="-4"></el-option>
          <el-option :label="$t('objFill.v101.xingcbcsms')[4]" :value="-5"></el-option>
          <el-option :label="$t('objFill.v101.xingcbcsms')[5]" :value="-6"></el-option>
          <el-option :label="$t('objFill.v101.xingcbcsms')[6]" :value="-7"></el-option>
          <el-option v-for="item in titleList" :key="item.subCode" :label="item.title" :value="item.id">
          </el-option>
        </el-select>
        <input type="button"
          style="width: auto !important;background: rgb(0, 198, 255);border:1px solid rgb(0, 198, 255);outline:none"
          class="travelControlTripBtn" :value="$t('.yulan')" @click="yuLan" />
        <input type="button" style="width: auto !important;outline:none" class="travelControlTripBtn" :value="$t('objFill.xz')"
          @click="DownloadJuanmSaid" />
      </el-col>
    </el-row>

    <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">{{vshowL?$t('Operation.Op_teamNotice')+":":""}}{{orderMsg.lineteamName}}{{orderMsg.dayNum}}{{$t('objFill.v101.LeaveGroupDownload.riyou')}}</h1>
            <p v-if="!vshowL">{{title}}</p>
            <p v-if="vshowL">{{$t('objFill.v101.LeaveGroupDownload.zhunjdlk')}}:<br />{{$t('objFill.v101.LeaveGroupDownload.ganxnxzwmdlyfw')}}
              {{$t('objFill.v101.LeaveGroupDownload.zaiciyznltyk')}}</p>
          </div>
          <div v-if='vshowA' class="module-title">
            <h2>{{$t('fnc.jcxinxi')}}</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">{{$t('advmanager.v_line')}}</p>
                <p class="pvalue">{{orderMsg.lineName}}</p>
              </td>
              <td class="essential-item">
                <img src="../assets/img/TravelControlTripIcon2.png" />
                <p class="pkey">{{$t('hotel.hotel_StarDate')}}</p>
                <p class="pvalue">{{orderMsg.startDate}}</p>
              </td>
              <td class="essential-item">
                <img src="../assets/img/TravelControlTripIcon3.png" />
                <p class="pkey">{{$t('sm.fanhuiDate')}}</p>
                <p class="pvalue">{{orderMsg.endDate}}</p>
              </td>
              <td rowspan="2">
                <img class="WeiXinShare" :src="'data:image/png;base64,'+WeiXinShareImgSrc" />
              </td>
            </tr>
            <tr>
              <td class="essential-item">
                <img src="../assets/img/TravelControlTripIcon4.png" />
                <p class="pkey">{{$t('advmanager.v_xilie')}}</p>
                <p class="pvalue">{{orderMsg.lineteamName}}</p>
              </td>
              <td class="essential-item">
                <img src="../assets/img/TravelControlTripIcon5.png" />
                <p class="pkey">{{$t('visa.v_xcdays')}}</p>
                <p class="pvalue">{{orderMsg.dayNum}}</p>
              </td>
              <td class="essential-item" v-if="vshowTCNUM">
                <img src="../assets/img/TravelControlTripIcon6.png" />
                <p class="pkey">{{$t('scen.sc_temID')}}</p>
                <p class="pvalue">{{orderMsg.tcnum}}</p>
              </td>
            </tr>
          </table>
          <div v-if='vshowL' class="module-title">
            <h2>{{$t('objFill.v101.lianxrjihdi')}}</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 clearfix">
                  <div><img src="../assets/img/TravelControlTripIcon9.png" />{{$t('objFill.v101.LeaveGroupDownload.bentuanlind')}}</div>
                  <span>{{orderTripdiff!=null? orderTripdiff.leaderInfo :
                    orderMsg.leaderName+(orderMsg.leaderMobile!=null?"/"+orderMsg.leaderMobile:"")}}</span>
                </div>
              </td>
              <td>
                <div class="collection-item clearfix">
                  <div><img src="../assets/img/TravelControlTripIcon10.png" />{{$t('objFill.v101.LeaveGroupDownload.jiheshij')}}</div>
                  <span>{{orderTripdiff!=null? orderTripdiff.gatheringTime :
                    orderMsg.gatheringTime}}</span>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="collection-item clearfix">
                  <div><img src="../assets/img/TravelControlTripIcon11.png" />{{$t('op.AirSupplier')}}</div>
                  <span>
                    <template v-if="orderMsg&&orderMsg.airportServicePerson&&orderMsg.airportServicePerson!=''">
                      {{orderMsg.airportServicePerson}}
                    </template>
                  </span>
                </div>
              </td>
              <td>
                <div class="collection-item clearfix">
                  <div><img src="../assets/img/TravelControlTripIcon12.png" />{{$t('op.JHbiaoshi')}}</div>
                  <span>{{orderTripdiff!=null? orderTripdiff.gatherIdent :
                    orderMsg.bName}}</span>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="collection-item clearfix">
                  <div><img src="../assets/img/TravelControlTripIcon13.png" />{{$t('objFill.jingjilxr')}}</div>
                  <template>
                    <span v-if='vshowLLR'>
                      <template v-if="orderTripdiff!=null&&orderTripdiff.emergencyContact!=''">
                        {{orderTripdiff.emergencyContact}}
                      </template>
                      <template v-else-if="orderMsg.branchManager!=''&&orderMsg.mobilePhone!=''">
                        {{orderMsg.branchManager+"/"+orderMsg.mobilePhone}}
                      </template>
                    </span>
                  </template>
                </div>
              </td>
              <td>
                <div class="collection-item clearfix">
                  <div><img src="../assets/img/TravelControlTripIcon14.png" />{{$t('salesModule.JHDD')}}</div>
                  <span>{{orderTripdiff!=null? orderTripdiff.gatheringAddress :
                    orderMsg.gatheringAddress}}</span>
                </div>
              </td>
            </tr>
          </table>
          <div v-if='vshowB' class="module-title">
            <h2>{{$t('salesModule.FlighInfo')}}</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"
              :class="{'guoneiLine':lineId==90}">
              <tbody>
                <tr>
                  <td width="140">{{$t('Airticket.Air_StartTime')}}<span>({{$t('objFill.v101.LeaveGroupDownload.dangdi')}})</span></td>
                  <td width="160">{{$t('objFill.didaishijian')}}<span>({{$t('objFill.v101.LeaveGroupDownload.dangdi')}})</span></td>
                  <td width="160">
                    <template v-if="lineId==90">{{$t('objFill.v101.LeaveGroupDownload.qifeijccfcs')}}</template>
                    <template v-else>{{$t('system.query_flightAir')}}</template>
                  </td>
                  <td width="18" class="gap">&nbsp;</td>
                  <td width="160">
                    <template v-if="lineId==90">{{$t('objFill.v101.LeaveGroupDownload.didaijcddcs')}}</template>
                    <template v-else>{{$t('objFill.v101.LeaveGroupDownload.didajic')}}</template>
                  </td>
                  <td width="18" class="gap">&nbsp;</td>
                  <td width="140">{{$t('system.query_airCompanyName')}}</td>
                  <td width="90">{{$t('objFill.v101.LeaveGroupDownload.hanbanbh')}}</td>
                  <td width="18" class="gap">&nbsp;</td>
                  <td width="100">{{$t('objFill.v101.BasicDocuments.col.t2')}}</td>
                </tr>
              </tbody>
            </table>
            <div class="_hangban_line"></div>
            <table border="0" align="center" cellspacing="0" cellpadding="0" class="flight_list">
              <tbody
                v-if="orderTripdiff&&orderTripdiff.travelOrderFlightList&& orderTripdiff.travelOrderFlightList.length>0">
                <tr v-for="(flight,ftIndex) in orderTripdiff.travelOrderFlightList" :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="160">{{flight.departureAirPortName}}<span class="citycode"></span></td>
                  <td width="18" class="gap">&nbsp;</td>
                  <td width="160">{{flight.arrivalAirPortName}}<span class="citycode"></span></td>
                  <td width="18" class="gap">&nbsp;</td>
                  <td width="140">{{flight.alName}}</td>
                  <td width="110">{{flight.flightNumber}}({{(flight.flightState==1)?"OK":$t('visa.v_zanding')}})</td>
                  <td width="18" class="gap">&nbsp;</td>
                  <td width="100">{{flight.stopoverAirPortName}}</td>
                </tr>
              </tbody>
              <tbody v-else-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="160">{{flight.departureAirPortName}}<span class="citycode"></span></td>
                  <td width="18" class="gap">&nbsp;</td>
                  <td width="160">{{flight.arrivalAirPortName}}<span class="citycode"></span></td>
                  <td width="18" class="gap">&nbsp;</td>
                  <td width="140">{{flight.alName}}</td>
                  <td width="110">{{flight.flightNumber}}({{(flight.flightState==1)?"OK":$t('visa.v_zanding')}})</td>
                  <td width="18" class="gap">&nbsp;</td>
                  <td width="100">{{flight.stopoverAirPortName}}</td>
                </tr>
              </tbody>
              <tbody v-else>
                <tr>
                  <td>{{$t('objFill.v101.hangbxxiwqr')}}</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)&&loadNone==false&&vshowC">
            <div v-if="vshowC" class="module-title">
              <h2>{{$t('salesModule.TripSpecial')}}</h2>
              <div class="short-line"></div>
              <div class="english-title">Trip characteristics</div>
            </div>
            <div v-html="feature.featureHtml" id="gernalCanvas"></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>{{$t('salesModule.TripAP')}}</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" :showTime="isShowTime"></oneday>
              <twoday v-if="item.details && item.details.length==2" :day='item' :dayNum="item.dayNum"
                :title="item.title" :isDirect="isDirect" :showTime="isShowTime"></twoday>
              <threeday v-if="item.details && item.details.length==3" :day='item' :dayNum="item.dayNum"
                :title="item.title" :isDirect="isDirect" :showTime="isShowTime"></threeday>
              <fourday v-if="item.details && item.details.length==4" :day='item' :dayNum="item.dayNum"
                :title="item.title" :isDirect="isDirect" :showTime="isShowTime"></fourday>
              <fiveday v-if="item.details && item.details.length>=5" :day='item' :dayNum="item.dayNum"
                :title="item.title" :isDirect="isDirect" :showTime="isShowTime"></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>{{$t('salesModule.TripAP')}}</h2>
                <div class="short-line"></div>
                <div class="english-title">Scheduling</div>
              </div>
              <table class="trip-title">
                <tr>
                  <td class="day">
                    <h3>{{$t('tips.di')}}<span v-if='item.dayNum<10'>0</span>{{item.dayNum}}{{$t('hotel.hotel_day')}}</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>{{$t('objFill.v101.traveltrip.yue')}}
                    <span v-if="item2.playTimeHour">{{item2.playTimeHour}}{{$t('objFill.xiaoshi')}} </span>
                    <span v-if="item2.playTimeMinutes">{{item2.playTimeMinutes}}{{$t('objFill.fenzhong')}} </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>{{$t('Operation.Op_Warmprompt')}}</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>
                        {{$t('objFill.v101.LeaveGroupDownload.huotongji')}}
                      </div>
                      <div class="val" v-else>{{$t('objFill.v101.traveltrip.benriwjd')}}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div id="pdf_4">
          <div v-if='vshowE' class="module-title">
            <h2>{{$t('objFill.feiyong')}}</h2>
            <div class="short-line"></div>
            <div class="english-title">Expense</div>
          </div>
          <div v-if='vshowE' class="expense">
            <div class="left">{{$t('sm.feiyongbaohan')}}</div>
            <div class="right">
              <div v-html="feature.feeInclude"></div>
            </div>
            <div class="left" style="margin: 15px 0 15px 0;">{{$t('objFill.feiyongbubaohan')}}</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">{{$t('objFill.v101.LeaveGroupDownload.zilifeiyong')}}</div>
            <div class="right">
              <table class="expense-table" cellspacing=0 cellpadding=0>
                <thead>
                  <th>{{$t('system.table_city')}}</th>
                  <th>{{$t('active.cl_huodong')}}</th>
                  <th>{{$t('objFill.v101.LeaveGroupDownload.chankaojg')}}</th>
                  <th>{{$t('fnc.shuoming')}}</th>
                </thead>
                <tbody>
                  <tr v-for="(item,i) in dataList.selfpayingList" :key="i">
                    <td>{{item.cityName}}</td>
                    <td>{{item.itemName}}</td>
                    <td>{{$t('objFill.v101.traveltrip.yue')}}{{item.estimatedCost}}</td>
                    <td>{{item.explain}}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div v-if='vshowF' class="module-title">
            <h2>{{$t('salesModule.ShoppDetail')}}</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">{{$t('objFill.v101.LeaveGroupDownload.gouwuanpai')}}</div>
            <div class="right">
              <table class="expense-table autowidth" cellspacing=0 cellpadding=0>
                <thead>
                  <th>{{$t('system.table_city')}}</th>
                  <th>{{$t('objFill.v101.LeaveGroupDownload.gouwudmc')}}</th>
                  <th>{{$t('objFill.v101.LeaveGroupDownload.yujitlsj')}}</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>{{$t('salesModule.OrderKnow')}}</h2>
            <div class="short-line"></div>
            <div class="english-title">Tips</div>
          </div>
          <div class="expense" v-if="feature.importantTip!=''&&vshowG">
            <div class="left">{{$t('sm.zhongyaotips')}}</div>
            <div class="right">
              <div v-html="feature.importantTip"></div>
            </div>
          </div>
          <div v-if='vshowG' class="expense">
            <div class="left">{{$t('Operation.Op_Warmprompt')}}</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>{{$t('active.cl_qianzheng')}}</h2>
            <div class="short-line"></div>
            <div class="english-title">Visa</div>
          </div>
          <div v-if='vshowH' class="expense">
            <div class="left">{{$t('objFill.v101.LeaveGroupDownload.qianzhnegxz')}}</div>
            <div class="right">
              <div v-html="feature.visaRemark"></div>
            </div>
          </div>
          <div v-if='vshowI' class="module-title">
            <h2>{{$t('salesModule.THBZ')}}</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>{{$t('salesModule.TravelInfo')}}</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">{{$t('system.query_name')}}</td>
              <td width="16.6%" class="thClass">{{$t('sm.EnName')}}</td>
              <td width="16.6%" class="thClass">{{$t('system.table_sex')}}</td>
              <td width="16.6%" class="thClass">{{$t('system.table_Passport')}}</td>
              <td width="16.6%" class="thClass">{{$t('objFill.youxiaoqi')}}</td>
              <td width="16.6%" class="thClass">{{$t('restaurant.res_ContactNumber')}}</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>
    <el-dialog :title="$t('objFill.xiugaixinxi')" custom-class="confirmOrder" :visible.sync="editMsgShow" center>
      <el-form :model="editForm" label-width="100px">
        <p class="edit_form_box_tit">{{$t('objFill.v101.lianxrjihdi')}}</p>
        <div class="edit_form_box">
          <div>
            <el-form-item :label="$t('objFill.v101.LeaveGroupDownload.bentuanlind')">
              <el-input v-model="editForm.leaderInfo"></el-input>
            </el-form-item>
            <el-form-item :label="$t('op.AirSupplier')">
              <el-input v-model="editForm.airportService"></el-input>
            </el-form-item>
            <el-form-item :label="$t('objFill.jingjilxr')">
              <el-input v-model="editForm.emergencyContact"></el-input>
            </el-form-item>
          </div>
          <div>
            <el-form-item :label="$t('sm.jiheshijian')">
              <el-input v-model="editForm.gatheringTime"></el-input>
            </el-form-item>
            <el-form-item :label="$t('op.JHbiaoshi')">
              <el-input v-model="editForm.gatherIdent"></el-input>
            </el-form-item>
            <el-form-item :label="$t('salesModule.JHDD')">
              <el-input v-model="editForm.gatheringAddress"></el-input>
            </el-form-item>
          </div>
        </div>
        <p class="edit_form_box_tit">{{$t('salesModule.FlighInfo')}}</p>
        <div class="TravelFlightList">
          <el-form label-width="0">
            <table class="TFTable">
              <tr>
                <th>{{$t('system.query_airCompanyName')}}</th>
                <th>{{$t('visa.v_hangban')}}</th>
                <th>{{$t('objFill.v101.qifeijcshij')}}</th>
                <th>{{$t('objFill.v101.daodajcshij')}}</th>
                <th>{{$t('hotel.hotel_StarDate')}}</th>
                <th>{{$t('objFill.v101.daodariqi')}}</th>
                <th>{{$t('system.table_operation')}}</th>
              </tr>
              <tr v-for="(priceFlight,index) in editForm.travelOrderFlightList" :key="priceFlight.code">
                <td>
                  <el-select class="w120" :placeholder="$t('pub.pleaseSel')" filterable v-model="priceFlight.airLineID"
                    @change="airLineSelectChange(priceFlight.airLineID,priceFlight,1)">
                    <el-option :label="$t('pub.unlimitedSel')" :value="defaultSelectValue"></el-option>
                    <el-option v-for="item in airLineList" :label="item.AlName" :value="item.AirLineId"
                      :key="item.AirLineId"></el-option>
                  </el-select>
                </td>
                <td>
                  <el-select class="w120" :placeholder="$t('pub.pleaseSel')" filterable v-model="priceFlight.flightID"
                    @change="flightSelectChange(priceFlight.flightID,priceFlight)">
                    <el-option :label="$t('pub.unlimitedSel')" :value="defaultSelectValue"></el-option>
                    <el-option v-for="item in priceFlight.airportNameList" :label="item.Flight_number" :value="item.ID"
                      :key="item.ID"></el-option>
                  </el-select>
                </td>
                <td>{{priceFlight.departureAirPortName}} <template
                    v-if="priceFlight.departureTime&& priceFlight.departureTime!=''">({{priceFlight.departureTime}})</template>
                </td>
                <td>
                  {{priceFlight.arrivalAirPortName}}<template
                    v-if="priceFlight.arrivalTime && priceFlight.arrivalTime!=''">({{priceFlight.arrivalTime}})</template>
                </td>
                <td>
                  <el-date-picker class="w110" :clearable="false" v-model="priceFlight.startDate" type="date"
                    value-format="yyyy-MM-dd"></el-date-picker>
                </td>
                <td>
                  <el-date-picker class="w110" :clearable="false" v-model="priceFlight.arriveDate" type="date"
                    value-format="yyyy-MM-dd"></el-date-picker>
                </td>
                <td>
                  <el-tooltip class="item" effect="dark" :content="$t('system.table_delete')" placement="top-start">
                    <el-button type="danger" icon="el-icon-delete" @click="removePriceFlight(index,priceFlight,1)"
                      circle></el-button>
                  </el-tooltip>
                  <el-tooltip class="item" v-if="index!=0" style="margin-left:0" effect="dark" :content="$t('sm.shangyi')"
                    placement="top-start">
                    <el-button type="danger" icon="iconfont icon-shangyi" @click="MoveItem(priceFlight,index,0)" circle>
                    </el-button>
                  </el-tooltip>
                  <el-tooltip class="item" v-if="index!=editForm.travelOrderFlightList.length-1" style="margin-left:0"
                    effect="dark" :content="$t('sm.xiayi')" placement="top-start">
                    <el-button type="danger" icon="iconfont icon-xiayi1" @click="MoveItem(priceFlight,index,1)" circle>
                    </el-button>
                  </el-tooltip>
                </td>
              </tr>
            </table>
          </el-form>
          <div class="TFAddFlight" @click="addFlight()">
            <i class="iconfont icon-img_haha"></i>{{$t('fnc.tianjia')}}
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <button class="normalBtn" type="primary" @click="submitForm()">{{$t('pub.saveBtn')}}</button> &nbsp;
        <button class="hollowFixedBtn" @click="editMsgShow = false">{{$t('pub.cancelBtn')}}</button>
        <button class="normalBtn" type="primary" @click="backForm()">{{$t('objFill.v101.huanyuan')}}</button> &nbsp;
      </div>
    </el-dialog>
  </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';
  import {
    types
  } from 'util';
  export default {
    data() {
      return {
        isShowTime: true,
        CurrentUserInfo: {}, //当前用户信息
        Typevalue: -1,
        titleList: [],
        listMsg: {
          pageSize: 1000,
          pageIndex: 1,
        },
        //微信分享图片
        WeiXinShareImgSrc: "",
        //下拉框默认值
        defaultSelectValue: 0,
        //航空公司下拉
        airLineList: [],
        //orderId和是否op操作控制按钮显示
        orderId: 0,
        isopOperation: '',
        editForm: {

        },
        //团源基础数据
        SourceData: {
          orderId: 0,
          leaderInfo: '',
          gatheringTime: '',
          airportService: '',
          gatherIdent: '',
          emergencyContact: '',
          gatheringAddress: '',
          flightInfoJson: '',
          travelOrderFlightList: []
        },
        editMsgShow: false,
        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',
        vshowTCNUM: this.$route.query.vshowTCNUM === undefined ? false : this.$route.query.vshowTCNUM === 'true',
        vshowO: this.$route.query.vshowO === undefined ? true : this.$route.query.vshowO === 'true',
        list: [],
        tripList: [],
        priceList: [],
        feature: {},
        dataList: {},
        showType: -1,
        loadNone: false,
        orderMsg: {},
        //订单不同数据
        orderTripdiff: {},
        title: '',
        isDirect: 1, //是否是直采 0:否,1:是
        isClick: this.$route.query.isClick === undefined ? 0 : 1, //不算统计
        lineId: 0
      }
    },
    mounted() {
      this.CurrentUserInfo = this.getLocalStorage();;
      this.orderId = this.$route.query.orderId;
      this.isopOperation = this.$route.query.isopOperation;
      this.getWxCode();
      this.init();
      this.initAirlines()
      setTimeout(() => {
        this.appendParent()
      }, 2000)
      this.getDataList();
    },
    methods: {
      DownloadJuanmSaid() {
        let title = this.$t('objFill.v101.xingcbucsmi')+':';
        if (this.Typevalue == -1) {
          title += this.$t('objFill.v101.xingcbcsms')[0]
        }
        if (this.Typevalue == -2) {
          title += this.$t('objFill.v101.xingcbcsms')[1]
        }
        if (this.Typevalue == -3) {
          title += this.$t('objFill.v101.xingcbcsms')[2]
        }
        if (this.Typevalue == -4) {
          title += this.$t('objFill.v101.xingcbcsms')[3]
        }
        if (this.Typevalue == -5) {
          title += this.$t('objFill.v101.xingcbcsms')[4]
        }
        if (this.Typevalue == -6) {
          title += this.$t('objFill.v101.xingcbcsms')[5]
        }
        if (this.Typevalue == -7) {
          title += this.$t('objFill.v101.xingcbcsms')[6]
        }

        if (this.Typevalue > 0) {
          this.titleList.forEach(item => {
            if (item.id == this.Typevalue) {
              title += item.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/DownLoadJuanSaid',
          data: {
            "msg": {
              id: this.Typevalue
            }
          }
        }).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(this.$t('objFill.huoqusb'));
          }
          this.pdfLoading = false
        }).catch(err => {

        })
      },
      yuLan() {
        if (this.Typevalue == -1) {
          window.open("http://www.oytour.com/#/FoodImg2");
        } else if (this.Typevalue == -2) {
          window.open("http://www.oytour.com/#/Fire");
        } else if (this.Typevalue == -3) {
          window.open("http://www.oytour.com/#/FoodImg");
        } else if (this.Typevalue == -4) {
          window.open("http://www.oytour.com/#/FoodImg4");
        } else if (this.Typevalue == -5) {
          window.open("http://www.oytour.com/#/Juanski");
        } else if (this.Typevalue == -6) {
          window.open("http://www.oytour.com/#/Laowo");
        } else if (this.Typevalue == -7) {
          window.open("http://www.oytour.com/#/JapanHotel");
        } else {
          window.open("http://www.oytour.com/#/JuanDetails?id=" + this.Typevalue);
        }
      },
      // 获取标题
      getDataList() {
        // this.apiJavaPost('/api/rssarticle/getArticleList', this.listMsg, res => {
        //   if (res.data.resultCode == 1) {
        //     let data = res.data.data.pageData.list;
        //     this.titleList = data;
        //   } else {
        //     this.Error(res.data.message);
        //   }
        // }, null)
      },
      //获取微信二维码
      getWxCode: function () {
        this.apipost('survey_post_GetSurveyWeiXinShare', {
          TCID: this.$route.query.tcid
        }, res => {
          if (res.data.resultCode == 1) {
            this.WeiXinShareImgSrc = res.data.data;
          }
        }, err => {})
      },
      gernalFeature(isPc) {
        this.pdfLoading = true;
        let tcid = this.$route.query.tcid;
        let UploadUrl = this.domainManager().UploadUrl
        let _this = this
        if (this.showType >= 4) { //  判断是否为行程特色
          _this.ToWord_V2(_this.orderMsg.startDate + _this.orderMsg.lineteamName + _this.orderMsg.dayNum +
            this.$t('objFill.v101.LeaveGroupDownload.riyou'), isPc)
        } else {
          this.ToWord_V2(this.orderMsg.startDate + this.orderMsg.lineteamName + this.orderMsg.dayNum + this.$t('objFill.v101.LeaveGroupDownload.riyou'), isPc)
        }
      },
      //保存基础数据
      submitForm: function () {
        this.editForm.travelOrderFlightList.forEach(x => {
          x.airportNameList = [];
        });
        this.editForm.FlightInfoJson = JSON.stringify(this.editForm.travelOrderFlightList);
        this.editForm.travelOrderFlightList = [];
        this.apipost('sellorder_post_SetOrderTripDiff',
          this.editForm,
          res => {
            if (res.data.resultCode == 1) {
              this.Success(res.data.message);
              this.editMsgShow = false;
              this.init();
            } else {
              this.Error(res.data.message);
            }
          },
          err => {}
        )
      },
      //还原表单
      backForm() {
        var oldData = JSON.parse(JSON.stringify(this.SourceData));
        this.editForm.orderId = this.$route.query.orderId;
        this.editForm.leaderInfo = oldData.leaderInfo;
        this.editForm.gatheringTime = oldData.gatheringTime;
        this.editForm.airportService = oldData.airportService;
        this.editForm.gatherIdent = oldData.gatherIdent;
        this.editForm.emergencyContact = oldData.emergencyContact;
        this.editForm.gatheringAddress = oldData.gatheringAddress;
        this.editForm.flightInfoJson = "";
        this.editForm.travelOrderFlightList = [];
        this.editForm.travelOrderFlightList = oldData.travelOrderFlightList;
        this.editForm.travelOrderFlightList.forEach((item) => {
          this.airLineSelectChange(item.airLineID, item);
        });
      },
      removePriceFlight: function (index, item, type) {
        var that = this
        that.Confirm(this.$t('sm.shanchuhangbbnhf'), function () {
          if (index > -1) {
            that.editForm.travelOrderFlightList.splice(index, 1)
          }
        });
      },
      airLineSelectChange: function (airLineId, item, type) {
        item.airLineID = airLineId
        this.airLineList.forEach(x => {
          if (x.AirLineId == airLineId) {
            item.alName = x.AlName
          }
        });
        if (type == 1) {
          item.flightID = 0;
          item.flightNumber = "";
          item.departureAirPortName = "";
          item.departureTime = "";
          item.arrivalAirPortName = "";
          item.arrivalTime = "";
        }
        let msg = {
          airlineID: airLineId
        }
        this.apipost(
          'flight_post_GetAirportNameList',
          msg,
          res => {
            if (res.data.resultCode == 1) {
              item.airportNameList = res.data.data;
            }
          },
          err => {}
        )
        this.$forceUpdate();
      },
      flightSelectChange(flightId, item) {
        item.airportNameList.forEach(x => {
          if (x.ID == flightId) {
            item.flightNumber = x.Flight_number.split('/')[0];
            item.departureAirPortName = x.dName;
            item.departureTime = x.DepartureTime;
            item.arrivalAirPortName = x.aName;
            item.arrivalTime = x.ArrivalTime;
          }
        });
      },
      //初始化航空公司下拉
      initAirlines: function () {
        this.apipost(
          'airline_post_GetList', {},
          res => {
            if (res.data.resultCode == 1) {
              this.airLineList = res.data.data
            }
          },
          err => {}
        )
      },
      addFlight: function () {
        let obj = {
          airLineID: 0,
          flightID: 0,
          alName: '',
          flightNumber: '',
          startDate: '',
          departureTime: '',
          departureAirPortName: '',
          arrivalTime: '',
          arrivalAirPortName: '',
          stopoverAirPortName: '',
          flightState: 0,
          arriveDate: '',
          airportNameList: [],
        }
        this.editForm.travelOrderFlightList.push(obj)
      },
      setDate: function (j) {
        let stDate = "";
        if (this.priceList && this.priceList.length > 0) {
          stDate = this.priceList[0].startDate;
        }
        if (j === 0) {
          return stDate
        } else {
          if (stDate) {
            let d = new Date(stDate)
            d = d.getTime(d);
            let add = d + ((24 * 60 * 60 * 1000) * j)
            let date = new Date(add); //时间戳为10位需*1000,时间戳为13位的话不需乘1000
            let Y = date.getFullYear() + '-';
            let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
            let D = date.getDate() < 10 ? ('0' + date.getDate()) + ' ' : date.getDate() + ' ';
            return Y + M + D;
          } else {
            return "";
          }
        }
      },
      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_V3: function (title) {
        this.pdfLoading = true
        let urlObj = this.domainManager();
        let msg = {
          configId: this.$route.query.configId,
          cityId: this.$route.query.cityId,
          tcid: this.$route.query.tcid,
          orderId: this.$route.query.orderId,
          unionfid: this.$route.query.unionfid,
          FileName: title,
          //是否显示基础信息
          isShowBase: this.vshowA ? 1 : 0,
          //是否显示航班
          isShowFlight: this.vshowB ? 1 : 0,
          //是否显示行程特色
          isShowFeature: this.vshowC ? 1 : 0,
          //自费、费用包含、费用不含
          isShowFee: this.vshowE ? 1 : 0,
          //购物说明,购物安排
          isShowShop: this.vshowF ? 1 : 0,
          //重要提示、温馨提示 [订单须知]
          isShowTip: this.vshowG ? 1 : 0,
          //是否显示同行备注
          isShowB2B: this.vshowI ? 1 : 0,
          //是否显示行程
          isShowTrip: this.vshowD ? 1 : 0,
          //是否显示标题
          isShowTitle: this.vshowL ? 1 : 0,
          //是否显示旅客名单
          isShowGuest: this.vshowM ? 1 : 0,
          //是否显示紧急联系人
          isShowMan: this.vshowLLR ? 1 : 0,
          //是否显示团号
          isShowTCNUM: this.vshowTCNUM ? 1 : 0,
          //是否显示行程图片
          isShowTripImage: this.vshowK ? 1 : 0,
          //是否显示签证信息
          isShowVisa: this.vshowH ? 1 : 0,
          //是否显示视频图片
          isShowVideoImg: this.vshowO ? 1 : 0,
          //isPc是否PC下载
          isPc: 2,
          //模板参数
          templateId: this.showType,
          //用户Id
          UId: this.getLocalStorage().EmployeeId
        };
        this.$http({
          headers: {
            'Content-Type': 'application/json'
          },
          method: 'post',
          url: urlObj.DomainUrl + '/api/file/GetWebHtmlTwo_V3',
          data: {
            "msg": msg
          }
        }).then(res => {
          if (res.data.resultCode === 1) {
            let sign = title + "V3"
            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();
          } else {
            this.$message.Error(this.$t('objFill.huoqusb'));
          }
          this.pdfLoading = false
        }).catch(err => {

        })
      },
      // 生成pdf
      toPDF_V2: function (title) {
        this.pdfLoading = true
        let pageData = document.getElementById('pdfNode').innerHTML
        let urlObj = this.domainManager();
        let msg = {
          configId: this.$route.query.configId,
          cityId: this.$route.query.cityId,
          tcid: this.$route.query.tcid,
          orderId: this.$route.query.orderId,
          unionfid: this.$route.query.unionfid,
          FileName: title,
          //是否显示基础信息
          isShowBase: this.vshowA ? 1 : 0,
          //是否显示航班
          isShowFlight: this.vshowB ? 1 : 0,
          //是否显示行程特色
          isShowFeature: this.vshowC ? 1 : 0,
          //自费、费用包含、费用不含
          isShowFee: this.vshowE ? 1 : 0,
          //购物说明,购物安排
          isShowShop: this.vshowF ? 1 : 0,
          //重要提示、温馨提示 [订单须知]
          isShowTip: this.vshowG ? 1 : 0,
          //是否显示同行备注
          isShowB2B: this.vshowI ? 1 : 0,
          //是否显示行程
          isShowTrip: this.vshowD ? 1 : 0,
          //是否显示标题
          isShowTitle: this.vshowL ? 1 : 0,
          //是否显示旅客名单
          isShowGuest: this.vshowM ? 1 : 0,
          //是否显示紧急联系人
          isShowMan: this.vshowLLR ? 1 : 0,
          //是否显示团号
          isShowTCNUM: this.vshowTCNUM ? 1 : 0,
          //是否显示行程图片
          isShowTripImage: this.vshowK ? 1 : 0,
          //是否显示签证信息
          isShowVisa: this.vshowH ? 1 : 0,
          //是否显示视频图片
          isShowVideoImg: this.vshowO ? 1 : 0,
          //isPc是否PC下载
          isPc: 2,
          //模板参数
          templateId: this.showType,
          //用户Id
          UId: this.getLocalStorage().EmployeeId
        };
        this.$http({
          headers: {
            'Content-Type': 'application/json'
          },
          method: 'post',
          url: urlObj.DomainUrl + '/api/file/GetWebHtmlTwo_V2',
          data: {
            "msg": msg
          }
        }).then(res => {
          if (res.data.resultCode === 1) {
            let sign = title + "V2"
            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();
          } else {
            this.$message.Error(this.$t('objFill.huoqusb'));
          }
          this.pdfLoading = false
        }).catch(err => {

        })
      },
      // 生成pdf
      toPDF_2023: function (title) {
        this.pdfLoading = true
        let pageData = document.getElementById('pdfNode').innerHTML
        let urlObj = this.domainManager();
        let msg = {
          configId: this.$route.query.configId,
          cityId: this.$route.query.cityId,
          tcid: this.$route.query.tcid,
          orderId: this.$route.query.orderId,
          unionfid: this.$route.query.unionfid,
          FileName: title,
          //是否显示基础信息
          isShowBase: this.vshowA ? 1 : 0,
          //是否显示航班
          isShowFlight: this.vshowB ? 1 : 0,
          //是否显示行程特色
          isShowFeature: this.vshowC ? 1 : 0,
          //自费、费用包含、费用不含
          isShowFee: this.vshowE ? 1 : 0,
          //购物说明,购物安排
          isShowShop: this.vshowF ? 1 : 0,
          //重要提示、温馨提示 [订单须知]
          isShowTip: this.vshowG ? 1 : 0,
          //是否显示同行备注
          isShowB2B: this.vshowI ? 1 : 0,
          //是否显示行程
          isShowTrip: this.vshowD ? 1 : 0,
          //是否显示标题
          isShowTitle: this.vshowL ? 1 : 0,
          //是否显示旅客名单
          isShowGuest: this.vshowM ? 1 : 0,
          //是否显示紧急联系人
          isShowMan: this.vshowLLR ? 1 : 0,
          //是否显示团号
          isShowTCNUM: this.vshowTCNUM ? 1 : 0,
          //是否显示行程图片
          isShowTripImage: this.vshowK ? 1 : 0,
          //是否显示签证信息
          isShowVisa: this.vshowH ? 1 : 0,
          //是否显示视频图片
          isShowVideoImg: this.vshowO ? 1 : 0,
          //isPc是否PC下载
          isPc: 2,
          //模板参数
          templateId: this.showType,
          //用户Id
          UId: this.getLocalStorage().EmployeeId
        };
        this.$http({
          headers: {
            'Content-Type': 'application/json'
          },
          method: 'post',
          url: urlObj.DomainUrl + '/api/file/DownLoadPdf2023',
          data: {
            "msg": msg
          }
        }).then(res => {
          if (res.data.resultCode === 1) {
            let sign = title + "V2"
            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();
          } else {
            this.$message.Error(this.$t('objFill.huoqusb'));
          }
          this.pdfLoading = false
        }).catch(err => {

        })
      },
      ToWord: function (title, isPc) {
        let msg = {
          configId: this.$route.query.configId,
          cityId: this.$route.query.cityId,
          tcid: this.$route.query.tcid,
          orderId: this.$route.query.orderId,
          unionfid: this.$route.query.unionfid,
          FileName: title,
          //是否显示基础信息
          isShowBase: this.vshowA ? 1 : 0,
          //是否显示航班
          isShowFlight: this.vshowB ? 1 : 0,
          //是否显示行程特色
          isShowFeature: this.vshowC ? 1 : 0,
          //自费、费用包含、费用不含
          isShowFee: this.vshowE ? 1 : 0,
          //购物说明,购物安排
          isShowShop: this.vshowF ? 1 : 0,
          //重要提示、温馨提示 [订单须知]
          isShowTip: this.vshowG ? 1 : 0,
          //是否显示同行备注
          isShowB2B: this.vshowI ? 1 : 0,
          //是否显示行程
          isShowTrip: this.vshowD ? 1 : 0,
          //是否显示标题
          isShowTitle: this.vshowL ? 1 : 0,
          //是否显示旅客名单
          isShowGuest: this.vshowM ? 1 : 0,
          //是否显示紧急联系人
          isShowMan: this.vshowLLR ? 1 : 0,
          //是否显示团号
          isShowTCNUM: this.vshowTCNUM ? 1 : 0,
          //是否显示行程图片
          isShowTripImage: this.vshowK ? 1 : 0,
          //是否显示签证信息
          isShowVisa: this.vshowH ? 1 : 0,
          //是否显示视频图片
          isShowVideoImg: this.vshowO ? 1 : 0,
          //isPc是否PC下载
          isPc: isPc,
          //模板参数
          templateId: this.showType,
          //用户Id
          UId: this.getLocalStorage().EmployeeId
        };
        this.GetLocalFile("DownLoadTripWord", msg, title + ".doc", res => {
          this.pdfLoading = false
        });

      },
      ToWord_V2: function (title, isPc) {
        let msg = {
          configId: this.$route.query.configId,
          cityId: this.$route.query.cityId,
          tcid: this.$route.query.tcid,
          orderId: this.$route.query.orderId,
          unionfid: this.$route.query.unionfid,
          FileName: title,
          //是否显示基础信息
          isShowBase: this.vshowA ? 1 : 0,
          //是否显示航班
          isShowFlight: this.vshowB ? 1 : 0,
          //是否显示行程特色
          isShowFeature: this.vshowC ? 1 : 0,
          //自费、费用包含、费用不含
          isShowFee: this.vshowE ? 1 : 0,
          //购物说明,购物安排
          isShowShop: this.vshowF ? 1 : 0,
          //重要提示、温馨提示 [订单须知]
          isShowTip: this.vshowG ? 1 : 0,
          //是否显示同行备注
          isShowB2B: this.vshowI ? 1 : 0,
          //是否显示行程
          isShowTrip: this.vshowD ? 1 : 0,
          //是否显示标题
          isShowTitle: this.vshowL ? 1 : 0,
          //是否显示旅客名单
          isShowGuest: this.vshowM ? 1 : 0,
          //是否显示紧急联系人
          isShowMan: this.vshowLLR ? 1 : 0,
          //是否显示团号
          isShowTCNUM: this.vshowTCNUM ? 1 : 0,
          //是否显示行程图片
          isShowTripImage: this.vshowK ? 1 : 0,
          //是否显示签证信息
          isShowVisa: this.vshowH ? 1 : 0,
          //是否显示视频图片
          isShowVideoImg: this.vshowO ? 1 : 0,
          //isPc是否PC下载
          isPc: isPc,
          //模板参数
          templateId: this.showType,
          //用户Id
          UId: this.getLocalStorage().EmployeeId
        };
        let urlObj = this.domainManager();
        this.$http({
          headers: {
            'Content-Type': 'application/json'
          },
          method: 'post',
          url: urlObj.DomainUrl + '/api/file/GetToWord_V2',
          data: {
            "msg": msg
          }
        }).then(res => {
          if (res.data.resultCode === 1) {
            let sign = title + "V2"
            const a = document.createElement('a');
            a.setAttribute('download', '');
            a.setAttribute('href', urlObj.DomainUrl + '/api/file/DownloadFileForPdf?fileName=' + sign +
              '.doc&&fPath=' + res.data.data);
            a.click();
          } else {
            this.Error(this.$t('objFill.wordhqsb'));
          }
          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
      },
      init() {
        var unionfid = 0;
        if (this.$route.query.unionfid) {
          unionfid = this.$route.query.unionfid;
        }
        this.apipost('b2b_get_GetB2BTravelInfoNoDes', {
          configId: this.$route.query.configId,
          cityId: this.$route.query.cityId,
          tcid: this.$route.query.tcid,
          orderId: this.$route.query.orderId,
          isClick: this.isClick, //不算统计
          unionfid: unionfid,
        }, res => {
          if (res.data.resultCode == 1) {
            let data = (res.data.data);
            this.orderTripdiff = data.orderTripdiff;
            this.lineId = data.lineId;
            this.orderMsg = data.orderMsg;
            if (this.orderTripdiff && this.orderTripdiff.flightInfoJson) {
              this.orderTripdiff.travelOrderFlightList = JSON.parse(this.orderTripdiff.flightInfoJson);
              if (this.orderMsg.outNotice == 1) {
                if (this.orderTripdiff.travelOrderFlightList != null && this.orderTripdiff.travelOrderFlightList
                  .length > 0) {
                  this.orderTripdiff.travelOrderFlightList.forEach(subItem => {
                    subItem.flightState = 1;
                  });
                }
              }
            }

            //HK新加
            this.SourceData.Id = 0;
            if (this.$route.query.orderId > 0) {
              this.SourceData.orderId = this.$route.query.orderId;
              var str = "";
              if (this.orderMsg.leaderName) {
                str = this.orderMsg.leaderName;
              }
              if (this.orderMsg.leaderMobile) {
                str += "/" + this.orderMsg.leaderMobile;
              }
              this.SourceData.leaderInfo = str;
              this.SourceData.gatheringTime = this.orderMsg.gatheringTime;
              this.SourceData.airportService = this.orderMsg.airportServicePerson + "/" + this.orderMsg
                .airportServicePhone;
              this.SourceData.gatherIdent = this.orderMsg.bName;
              this.SourceData.emergencyContact = this.orderMsg.sellName + "/" + this.orderMsg.sellTel;
              this.SourceData.gatheringAddress = this.orderMsg.gatheringAddress;
              if (data.priceList != null && data.priceList.length > 0) {
                var array = JSON.parse(JSON.stringify(data.priceList[0].priceFlight));
                this.SourceData.travelOrderFlightList = [];
                array.forEach(fItem => {
                  this.SourceData.travelOrderFlightList.push({
                    airLineID: fItem.airLineID,
                    flightID: fItem.flightID,
                    alName: fItem.alName,
                    flightNumber: fItem.flightNumber,
                    startDate: fItem.startDate,
                    departureTime: fItem.departureTime,
                    departureAirPortName: fItem.departureAirPortName,
                    arrivalTime: fItem.arrivalTime,
                    arrivalAirPortName: fItem.arrivalAirPortName,
                    stopoverAirPortName: fItem.stopoverAirPortName,
                    flightState: fItem.flightState,
                    arriveDate: fItem.arriveDate,
                    airportNameList: [],
                  });
                });

              }
              if (this.orderTripdiff) {
                this.editForm = JSON.parse(JSON.stringify(this.orderTripdiff));
                if (this.orderTripdiff.flightInfoJson) {
                  this.editForm.travelOrderFlightList = JSON.parse(this.orderTripdiff.flightInfoJson);
                }
              } else {
                this.editForm = JSON.parse(JSON.stringify(this.SourceData));
              }
              this.editForm.travelOrderFlightList.forEach(fItem => {
                fItem.airportNameList = [];
                this.airLineSelectChange(fItem.airLineID, fItem);
              });
            }

            this.title = this.orderMsg.startDate + this.orderMsg.lineteamName + this.orderMsg.dayNum + this.$t('objFill.v101..LeaveGroupDownload.riyou')
            document.title = this.title;
            //初始化行程
            this.initTrip(res, data);
          }
          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 => {})
      },
      //初始化行程
      initTrip(res, data) {
        this.tripList = res.data.data.dayList;
        this.feature = res.data.data.feature
        this.showType = this.feature.featureType;
        this.isDirect = res.data.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,
                videoPath: y.childItem.imaArray[0].videoPath,
                fileType: y.childItem.imaArray[0].fileType,
                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,
                newTitle: y.childItem.newHotelName,
                status: y.childItem.status,
                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,
                newTitle: y.childItem.newHotelName,
                status: y.childItem.status,
              });
              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 (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)
          x.dateTime = this.setDate(j);
        })
      },
      //上移下移(IsUp:0上移,1下移)
      MoveItem(item, subIndex, IsUp) {
        var currentItem = this.editForm.travelOrderFlightList[subIndex];
        //上移
        if (IsUp == 0) {
          if (subIndex > 0) {
            var upItem = this.editForm.travelOrderFlightList[subIndex - 1];
            this.$set(this.editForm.travelOrderFlightList, subIndex - 1, currentItem);
            this.$set(this.editForm.travelOrderFlightList, subIndex, upItem);
            this.$forceUpdate();
          }
        } else {
          //下移
          if (subIndex != this.editForm.travelOrderFlightList.length - 1) {
            var downItem = this.editForm.travelOrderFlightList[subIndex + 1];
            this.$set(this.editForm.travelOrderFlightList, subIndex + 1, currentItem);
            this.$set(this.editForm.travelOrderFlightList, subIndex, downItem);
            this.$forceUpdate();
          }
        }
      },
      //跳转至预览
      goUrlView() {
        let routeData = this.$router.resolve({
          name: 'newConfimationOrder',
          query: {
            configId: this.$route.query.configId,
            cityId: this.$route.query.cityId,
            tcid: this.$route.query.tcid,
            orderId: this.$route.query.orderId,
            isClick: 1, //不计算点击
            vshowA: this.vshowA,
            vshowB: this.vshowB,
            vshowC: this.vshowC,
            vshowD: this.vshowD,
            vshowE: this.vshowE,
            vshowF: this.vshowF,
            vshowG: this.vshowG,
            vshowH: this.vshowH,
            vshowI: this.vshowI,
            vshowJ: this.vshowJ,
            vshowK: this.vshowK,
            vshowL: this.vshowL,
            vshowM: this.vshowM,
            vshowLLR: this.vshowLLR,
            vshowTCNUM: this.vshowTCNUM,
            vshowO: this.vshowO,
          }
        });
        window.open(routeData.href, "_blank");
      }
    },
    components: {
      oneday,
      twoday,
      threeday,
      fourday,
      fiveday,
    },
  }

</script>
<style>
  @import url('../assets/css/tripIndex.css');
  @import url('../assets/css/detail.css');

  .edit_form_box {
    display: flex;
    justify-content: space-around;
  }

  .edit_form_box_tit {
    color: #000000;
    text-align: left;
    margin-top: 0;
    border-left: 2px solid #e95252;
    padding-left: 25px;
  }

  .TravelFlightList {
    width: 100%;
    background-color: #fff;
  }

  .TravelFlightList table {
    width: 100%;
  }

  .TFflightName {
    padding: 3px 5px;
    display: inline-block;
    background-color: #ff9c00;
    color: #fff;
    border-radius: 4px;
    margin-left: 10px;
  }

  .TFTable .el-button.is-circle {
    padding: 5px;
  }

  .TFTable .el-form-item {
    margin: 10px;
  }

  .TFTable i {
    font-size: 14px;
  }

  .TFTable .el-input--prefix .el-input__inner {
    padding-right: 0;
  }

  .TFAddFlight {
    width: 100%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    color: #333;
    margin-top: 5px;
    background-color: #f1f1f1;
    font-size: 12px;
    border: 1px dashed #dcdcdc;
    cursor: pointer;
  }

  .w110 {
    width: 110px !important;
  }

  .w120 {
    width: 120px !important;
  }

  .normalBtn {
    color: #fff;
    padding: 0 15px;
    height: 30px;
    background: #E95252;
    border: 1px solid #E95252;
    cursor: pointer;
    border-radius: 15px;
    margin-left: 10px;
  }

  .hollowFixedBtn {
    background: #fff;
    color: #E95252;
    padding: 0 15px;
    height: 30px;
    border: 1px solid #E95252;
    cursor: pointer;
    border-radius: 15px;
    margin-left: 10px;
  }

  @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>