<template>
  <div id="pdf_1" v-if="orderMsg&&dataAll">
    <div class="UpgradedVersion-box relative"
    :class="[dataAll.featurePageType==2?'UpgradedVersion-homebj':'UpgradedVersion-homebjHV',
    dataAll.feature.featureType==9?'VerticalBjNew':'']"
    :style="{'width':dataAll.featurePageType==2?'1240px':'1754px',
    'height':dataAll.featurePageType==2?'1754px':'1754px'}">
      <div class="absolute z-index1 column UpgradedVersionBJ" style="left: 0;right: 0; top: 0;bottom: 0;">
        <template v-if="dataAll.featurePageType==2">
          <Header v-if="dataAll.feature.featureType!=9" :TripColor="dataAll&&dataAll.tripColor" :orderMsg="orderMsg"></Header>
          <div class="travelDaysTitlle row-aic" :style="{'background':backgroundColor}">
            <div class="travelDaysTitlle-left">
              <div class="relative">
                <div class="travelDaysTitlle-left-text column-ajc absolute">
                  <div class="travelDaysTitlle-left-textOne">
                    <span></span>
                  </div>
                  <div class="travelDaysTitlle-left-textTwo">
                    <span></span>
                  </div>
                </div>
              </div>
            </div>
            <div class="travelDaysTitlle-right">
              <div class="travelDaysTitlle-right-text row-aic"
                :style="{'font-size': getFontSize(orderMsg.lineteamName+orderMsg.dayNum),'color':textColor}">
                {{ orderMsg.lineteamName }}{{ orderMsg.dayNum }}日游
              </div>
            </div>
          </div>
        </template>
        <div v-if="dataAll.featurePageType==1" class="travelDaysTitlle row-aic" style="min-height: 190px;" :style="{'background': backgroundColor}">
          <div class="travelDaysHVTitlle-left flexS">
            <div class="relative">
              <div class="travelDaysHVTitlle-left-text column-ajc">
                <div class="travelDaysHVTitlle-left-textOne" style="margin-top: 0;width: 126px;height: auto;">
                  <img src="http://imgfile.oytour.com/Static/headerLogoHV.png"/>
                </div>
              </div>
            </div>
          </div>
          <div class="travelDaysHVTitlle-right row">
            <div class="travelDaysHVTitlle-borderL row-aic">
              <div></div>
            </div>
            <div class="travelDaysHVTitlle-right-text column"
              :style="{'font-size': getFontSize(orderMsg.lineName),'color':textColor}">
              <div class="HVTitlle-header0 row nowrap">
                <span>
                  {{orderMsg.lineName}}
                </span>
              </div>
            </div>
          </div>
        </div>

        <!--
        <div class="travelDaysTitlle row-aic">
          <div class="travelDaysTitlle-left">
            <div class="travelDaysTitlle-left-text column-ajc">
              <div class="travelDaysTitlle-left-textOne">
                <span></span>
              </div>
              <div class="travelDaysTitlle-left-textTwo">
                <span></span>
              </div>
            </div>
          </div>
          <div class="travelDaysTitlle-right">
            <div class="travelDaysTitlle-right-text row-aic"
              :style="{'background': dataAll&&dataAll.tripColor,'font-size': getFontSize(orderMsg.lineteamName+orderMsg.dayNum),'color':textColor}">
              {{ orderMsg.lineteamName }}{{ orderMsg.dayNum }}日游
            </div>
          </div>
        </div> -->
        <div :class="[dataAll.featurePageType==1?'travelDaysHVMasterMap2-box':'']">
          <div style="margin: 0 30px;">
            <div class="trip-adviser" style="margin-top: 20px;"
            :class="[dataAll.featurePageType==1?'trip-adviserHV':'']">
              <!-- <h1 class="trip-nav-title">
                <span>{{ vshowL ? "出团通知书：" : "" }}</span>
                {{ orderMsg.lineteamName }}{{ orderMsg.dayNum }}日游
              </h1> -->
              <p>
                尊敬的旅客：<br />感谢您选择我们的旅游服务。为了确保各位旅客有更好的旅游体验，请详细阅读《出团通知书》的各项内容。如有任何问题，请拨打通知书内的本团领队电话或机场服务人员电话。
                在此，预祝您旅途愉快！希望您在本次旅程中留下此生中最美好的回忆！
              </p>
            </div>
            <table class="baseTable trip-v3-base"
            :class="[dataAll.featurePageType==1?'baseTableHV':'']">
              <tbody>
                <tr>
                  <td class="essential-item jianju"
                  :class="[dataAll.featurePageType==1?'essential-itemHV':'']">
                    <p class="pkey">线路</p>
                    <p class="pvalue">{{ orderMsg.lineName }}</p>
                  </td>
                  <td class="essential-item jianju"
                  :class="[dataAll.featurePageType==1?'essential-itemHV':'']">
                    <p class="pkey">出发日期</p>
                    <p class="pvalue">{{ orderMsg.startDate }}</p>
                  </td>
                  <td class="essential-item jianju"
                  :class="[dataAll.featurePageType==1?'essential-itemHV':'']">
                    <p class="pkey">返回日期</p>
                    <p class="pvalue">{{ orderMsg.endDate }}</p>
                  </td>
                  <td class="essential-item jianju_b"
                  :class="[dataAll.featurePageType==1?'essential-itemHV':'']">
                    <p class="pkey">行程天数</p>
                    <p class="pvalue">{{ orderMsg.dayNum }}</p>
                  </td>
                  <td rowspan="2">
                    <div style="width: 160px; height:160px;margin-left:20px;">
                      <img style="width: 160px; height:160px;" :src="'data:image/png;base64,' + WeiXinShareImgSrc"
                        alt="获取微信小程序分享链接" />
                    </div>
                  </td>
                </tr>
                <tr>
                  <td class="essential-item jianju" colspan="2"
                  :class="[dataAll.featurePageType==1?'essential-itemHV':'']">
                    <p class="pkey">系列</p>
                    <p class="pvalue">{{ orderMsg.lineteamName }}</p>
                  </td>
                  <td class="essential-item jianju_b" colspan="2"
                  :class="[dataAll.featurePageType==1?'essential-itemHV':'']">
                    <p class="pkey">团队编号</p>
                    <p class="pvalue">{{ orderMsg.tcnum }}</p>
                  </td>
                </tr>
              </tbody>
            </table>
            <div class="trip-v3-title small-margin" v-if="vshowL">
              <h2>集合地点&amp;联系人</h2>
            </div>
            <table class="baseTable trip-v3-base" v-if="vshowL">
              <tbody>
                <tr>
                  <td class="essential-item jianju"
                  :class="[dataAll.featurePageType==1?'essential-itemHV':'']">
                    <p class="pkey">本团领队</p>
                    <p class="pvalue">
                      {{orderMsg.leaderInfo}}
                    </p>
                  </td>
                  <td class="essential-item jianju"
                  :class="[dataAll.featurePageType==1?'essential-itemHV':'']">
                    <p class="pkey">集合时间</p>
                    <p class="pvalue">
                      {{ orderMsg.gatheringTimeInfo }}
                    </p>
                  </td>
                  <td class="essential-item jianju"
                  :class="[dataAll.featurePageType==1?'essential-itemHV':'']">
                    <p class="pkey">机场服务</p>
                    <p class="pvalue">
                      {{orderMsg.airportServiceInfo}}
                    </p>
                  </td>
                  <td class="essential-item jianju_b"
                  :class="[dataAll.featurePageType==1?'essential-itemHV':'']">
                    <p class="pkey">集合标识</p>
                    <p class="pvalue">
                      {{
                        orderMsg.gatherIdentInfo
                      }}
                    </p>
                  </td>
                </tr>
                <tr>
                  <td class="essential-item jianju" colspan="2"
                  :class="[dataAll.featurePageType==1?'essential-itemHV':'']">
                    <p class="pkey">紧急联系人</p>
                    <p class="pvalue">
                      <span v-if="vshowLLR">
                        {{orderMsg.emergencyContactInfo}}
                      </span>
                    </p>
                  </td>
                  <td class="essential-item jianju_b" colspan="2"
                  :class="[dataAll.featurePageType==1?'essential-itemHV':'']">
                    <p class="pkey">集合地点</p>
                    <p class="pvalue">
                      {{ orderMsg.gatheringAddressInfo}}
                    </p>
                  </td>
                </tr>
              </tbody>
            </table>
            <template v-if='vshowB'>
              <div class="trip-v3-title small-margin">
                参考航班
              </div>
              <div class="hangban-info"
              :class="[dataAll.featurePageType==1?'hangban-infoHV':'']">
                <table border="0" align="center" cellspacing="0" cellpadding="0" class="flight_list"
                  :class="{'guoneiLine':lineId==90}">
                  <thead class="flight_header">
                    <tr>
                      <th width="140">出发时间<span>(当地)</span></th>
                      <th width="160">抵达时间<span>(当地)</span></th>
                      <th width="160">
                        <template v-if="lineId==90">起飞机场/出发城市</template>
                        <template v-else>起飞机场</template>
                      </th>
                      <th width="18" class="gap">&nbsp;</th>
                      <th width="160">
                        <template v-if="lineId==90">抵达机场/到达城市</template>
                        <template v-else>抵达机场</template>
                      </th>
                      <th width="18" class="gap">&nbsp;</th>
                      <th width="140">航空公司</th>
                      <th width="90">航班编号</th>
                      <th width="18" class="gap">&nbsp;</th>
                      <th width="100">经停城市</th>
                    </tr>
                  </thead>
                  <tbody style="padding-top:12px;"
                    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}}
                        <span style="color:green;">{{(flight.flightState==1)?"OK":"暂定"}}</span></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"
                    style="padding-top:12px;">
                    <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":"暂定"}})</td>
                      <td width="18" class="gap">&nbsp;</td>
                      <td width="100">{{flight.stopoverAirPortName}}</td>
                    </tr>
                  </tbody>
                  <tbody>
                    <tr>
                      <td colspan="10" align="center" style="color:#333;font-size:14px;">
                        1.本航班表僅提供參考，正確航班請點選您的出發日期。 2.
                        不同航班，餐食及行程安排皆有所不同，正確行程，請點選您的出發日期。
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </template>
          </div>
        </div>


        <!-- otherJourney-footer -->
        <div v-if="dataAll.featurePageType==2&&dataAll.feature.featureType!=9">
          <div class="otherJourney-introduceFooter absolute z-index1 row-aic" :style="{'background':''}">
            <div class="introduceFooterBJ introduceFooterOne" :style="{'background':dataAll.tripColor}">&nbsp;</div>
            <div class="introduceFooterBJ introduceFootertTwo" :style="{'background':dataAll.tripColor}">&nbsp;</div>
            <div class="introduceFooter-text row-aic">
              <img src="http://imgfile.oytour.com/Static/NewTripFeature/footerLogo.png" />
              <div class="edit_div">{{dataAll.lineShortName}}</div>
            </div>
            <div class="introduceFooterBJ introduceFootertThree" :style="{'background':dataAll.tripColor}">&nbsp;</div>
            <div class="introduceFooterBJ introduceFootertFour" :style="{'background':dataAll.tripColor}">&nbsp;</div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import Header from "./components/header";
  export default {
    components: {
      Header
    },
    props: [
      "dataAll",
      "vshowJ",
      "vshowL",
      "orderMsg",
      "WeiXinShareImgSrc",
      "orderTripdiff",
      "vshowLLR",
      "vshowB",
      "lineId",
      "priceList"
    ],
    data() {
      return {
        backgroundColor: '',
        textColor: '',
        textColorOne: '',
      };
    },

    methods: {
      getFontSize(title) {
        if (!title) return
        let size = 30;
        if (title && title.length > 0 && title.length > 80) {
          var tempSize = Number(80) / Number(title.length);
          tempSize = tempSize * 30;
          size = tempSize.toFixed(1);
        }
        return size + "px";
        // if (title.length + 2 > 60) {
        //   return 929 / 60 + 'px'
        // } else {
        //   return '30px'
        // }
      },
    },
    computed: {},
    watch: {
      dataAll: {
        handler(val, oldVal) {
          if (val && val.tripColor) {
            this.backgroundColor = this.hexToRgb(val.tripColor, 0.2)
            let rgba = this.hexToRgb(val.tripColor, 1)
            rgba = rgba.split(',')
            let rgba0 = rgba[0].split('(')
            let arr = [rgba0[1], rgba[1], rgba[2]]
            if (this.getRgbLevel(arr) > 50) {
              this.textColor = "#333"
            } else {
              this.textColor = "#333"
            }
          }
        },
        deep: true,
        immediate: true
      },
      orderMsg: {
        handler(val, oldVal) {},
        deep: true,
        immediate: true
      },
    },
    mounted() {}
  };

</script>

<style>

</style>
