<style>
  .TD_NewContract {
    min-height: 650px;
    background: url(../assets/img/bodyBg.png);
    padding-top: 10px;
    font: normal 13px 'Microsoft Yahei';
    color: #555;
  }

  .TD_NewContract .container-fluid {
    padding: 0 20px;
  }

  .TD_NewContract .block {
    border: 1px solid #cdcdcd;
    background: #f9f9f9;
    position: relative;
    margin-bottom: 20px;
  }

  .TD_NewContract .mtop15 {
    margin-top: 15px;
  }

  .TD_NewContract .blockTitle {
    border-bottom: 1px solid #cdcdcd;
    background-color: #efefef;
  }

  .TD_NewContract .blockTitle span.icon {
    border-right: 1px solid #CDCDCD;
    position: absolute;
    left: 10px;
    height: 40px;
    padding-right: 10px;
    padding-top: 8px;
  }

  .TD_NewContract .blockTitle h2 {
    font-size: 15px;
    min-height: 40px;
    margin: 0;
    font-family: 'Microsoft Yahei';
    color: #5b5b5b;
    padding-right: 15px;
    padding-left: 48px;
    line-height: 40px;
  }

  .TD_NewContract .blockTitle h2 span {
    position: absolute;
    right: 10px;
    top: 0;
  }

  .TD_NewContract .contract {
    background: #f9f9f9;
    margin-bottom: 20px;
    margin-top: 20px;
  }

  .TD_NewContract .title {
    font-size: 18px;
    margin-top: 10px;
    color: #555;
    height: 100px;
    position: relative;
    padding-left: 30px !important;
    padding-right: 30px !important;
    padding-bottom: 40px !important;
  }

  .TD_NewContract .title p {
    margin: 0;
    font-size: 12px;
  }

  .TD_NewContract .contractNo {
    font-weight: bold;
    margin-right: 5px;
  }

  .TD_NewContract .title h1 {
    font-size: 24px;
    text-align: left;
  }

  .TD_NewContract .title p span {
    font-style: normal;
    font-size: 14px;
    color: #0088cc;
  }

  .TD_NewContract .menu {
    overflow: hidden;
    background: #efefef;
    position: relative;
    width: 100%;
  }

  .TD_NewContract .contract .menu>ul {
    border-bottom: 0px none;
    margin-bottom: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .TD_NewContract .contract .menu>ul>li {
    margin-bottom: -1px;
    float: left;
    list-style: none;
    line-height: 20px;
    border-radius: 0px;
    border-right: 1px solid #DDD;
    border-top: 1px solid #DDD;
    margin: 0px;
    outline: none medium;
    padding: 9px 10px 8px;
    border-bottom: 1px solid #DDD;
    color: #999;
    font-weight: bold;
    cursor: pointer;
    font-size: 13px;
  }

  .TD_NewContract .contract .menu>ul>li.active {
    background: #f9f9f9;
    color: #444;
    border-bottom-color: #f9f9f9;
  }

  .TD-introduction,
  .TD-basic,
  .TD-break,
  .TD-duty,
  .TD-other,
  .TD-convention {
    margin: 20px 30px 30px 30px;
    font-size: 13px;
    display: none;
  }

  .TD-introduction p,
  .TD-basic p,
  .TD-break p,
  .TD-duty p,
  .TD-other p {
    margin: 5px 0 0 0;
    line-height: 27px;
  }

  .TD-introduction p span,
  .TD-basic p span,
  .TD-break p span,
  .TD-duty p span,
  .TD-other p span {
    border-bottom: #cbcbcb 1px solid;
    padding: 0 5px;
    color: #0088cc;
    margin: 0 5px;
  }

  .TD-introduction h2,
  .TD-basic h2,
  .TD-break h2,
  .TD-duty h2,
  .TD-other h2 {
    font-size: 16px;
  }

  .TD_NewContract h1,
  .TD_NewContract h2,
  .TD_NewContract h3 {
    line-height: 40px !important;
  }

  .TD_NewContract .checkedNav {
    display: block !important;
  }

  .TD_NewContract .SignTable {
    max-width: 100%;
    background-color: transparent;
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: 0px;
    table-layout: fixed;
    font-size: 13px;
    line-height: 25px;
  }

  .TD_NewContract .signDiv {
    width: 120px;
    height: 120px;
    position: absolute;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    left: 65px;
    top: 0px;
    z-Index: 100;
  }

  .TD_NewContract .esealDiv {
    width: 120px;
    height: 120px;
    position: absolute;
    left: 0;
    top: 0px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-Index: 100;
  }

  .TD_NewContract .eseal {
    padding: 20px 30px 30px 30px;
    background-color: #fff;
    display: none;
  }

  .TD_NewContract .SignTable>tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
  }

  .TD_NewContract .SignTable tr:first-child td {
    position: relative;
    width: 25%;
  }

  .TD_NewContract .SignTable tbody td {
    height: 30px;
  }

  .TD_NewContract .guests,
  .TD_NewContract .routes,
  .TD_NewContract .shoppings,
  .TD_NewContract .attachments,
  .TD_NewContract .activitys {
    font-size: 13px;
    margin: 20px 30px 30px 30px;
    display: none;
  }

  .TD_NewContract .ZTable {
    width: 100%;
    border: none;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
  }

  .TD_NewContract .ZTable>tbody>tr>td {
    word-break: break-word;
    border: solid #ddd 1px;
    padding: 8px;
    line-height: 25px;
  }

  .TD_NewContract .text_center {
    text-align: center;
  }

  .TD_NewContract .page_break_avoid p {
    padding-bottom: 15px;
  }

  .TDteam_Table {
    width: 900px;
    border: none;
    border-collapse: collapse;
    border-spacing: 0;
  }

  .TDteam_Table td {
    border: 1px solid rgb(0, 0, 0);
    word-break: break-all;
    padding: 5px;
  }

  .TCbtn-info {
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #49afcd;
    background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4));
    background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4);
    background-image: -o-linear-gradient(top, #5bc0de, #2f96b4);
    background-image: linear-gradient(to bottom, #5bc0de, #2f96b4);
    background-repeat: repeat-x;
    border-color: #2f96b4 #2f96b4 #1f6377;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2f96b4', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    padding: 10px 19px;
    border: none;
    outline: none;
    cursor: pointer;
  }

  .TCbtn-info:hover {
    color: #ffffff;
    opacity: 0.8;
  }

  /*灰色遮罩层*/
  .TD_NewContract .fade {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99;
  }

  /*弹出层*/
  .TD_NewContract .qrCodeDiv {
    width: 236px;
    height: 275px;
    background-color: #fff;
    text-align: center;
    border: 1px solid #d1d1d1;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -100px;
    margin-top: -118px;
    z-index: 999;
    border-radius: 5px;
  }

  .TD_NewContract .Ec_cha {
    position: absolute;
    cursor: pointer;
    right: -20px;
    top: -25px;
    width: 30px;
    height: 30px;
    background-color: #fff;
    text-align: center;
    border-radius: 50%;
    line-height: 30px;
  }

  .TD_NewContract .Ec_cha:hover {
    color: red;
  }

  .TD_NewContract .TcTravel_Table td {
    border: 1px solid rgb(0, 0, 0);
    word-break: break-all;
    padding: 5px;
    line-height: 2;
  }

  .TD_NewContract .TcTravel_Table {
    width: 100%;
    border: none;
    border-collapse: collapse;
    border-spacing: 0;
  }

  .TD_NewContract .TC_LASTTD div {
    margin-bottom: 10px;
  }

  .Travel_DetailQuan {
    display: inline-block;
    width: 23px;
    height: 23px;
    border: 1px solid #d1d1d1;
    border-radius: 5px;
    text-align: center;
    line-height: 20px;
  }

  .Travel_DetailQuan i {
    font-size: 12px;
    color: gray;
  }

</style>

<template>
  <div class="TD_NewContract" v-loading="pdfLoading">
    <div class="container-fluid">
      <div class="block mtop15">
        <div class="blockTitle">
          <span class="icon"><i class="iconfont icon-wenjian"></i></span>
          <h2>合同详情 &nbsp;&nbsp;<template v-if="dataList.saleName&&dataList.saleName!=''"> 销售人员:{{dataList.saleName}}</template>
            <span>
              <input type="button" class="TCbtn-info" v-if="dataList.status==1" @click="getinvalid()" :value="$t('active.cl_zuofei')" />
              <input type="button" class="TCbtn-info" v-if="dataList.companySignature==''"
                @click="isShowFade=true,GetQrCode()" :value="$t('objFill.v101.Contract.kehuqz')" />
              <input type="button" class="TCbtn-info" :value="$t('objFill.xz')" @click="toContractPDF(dataList.contractNum)" />
            </span>
          </h2>
        </div>
        <div class="contract">
          <div class="title">
            <h1>{{msg.company}}</h1>
            <p class="contractNo">{{$t('objFill.hetongbh')}}：<span>{{dataList.contractNum}}</span></p>
          </div>
          <div class="menu">
            <ul>
              <li :class="{'active':cked==1}" @click="cked=1">{{$t('objFill.v101.Contract.shiyongsm')}}</li>
              <li :class="{'active':cked==2}" @click="cked=2">合同信息</li>
              <li :class="{'active':cked==3}" @click="cked=3">签字盖章</li>
            </ul>
          </div>
          <!-- 使用说明 -->
          <div class="TD-introduction" :class="{'checkedNav':cked==1}">
            <p>
              1.本合同属于旅游者与旅行社之间的委托合同。本合同用于旅游者委托旅行社代办预订或购买机票、火车票、酒店、办理签证、接送服务、导游服务等单项委托服务。
            </p>
            <p>2.本合同委托人为旅游者，受托人为旅行社，旅行社在授权范围内为旅游者提供委托代理服务并收取代理费，旅行社 为了旅游者的利益可以转委托给第三方。</p>
            <p>3.本合同由《相关告知及提示》和《预订项目及要求》共同组成 。《相关告知及提示》 中明示旅游者：因旅行社与航 空公司 、酒店 、车公司等第三方供应商间的合作模式为预定集中采
              购，在获得优惠的同时附带一定的限制条件，故预定后的延退变更需根据供应商的限制条件承担相应的损失 。而《预定项目及要求》是旅游者和旅行社双方对委托项目内容、服务标准和要 求，以及争议解决方式等做出的约定。</p>
            <p>4.旅游者在签订本合同前请仔细阅读本合同各项条款。</p>
            <p>5.本合同法律适用：《合同法》第二十一章“委托合同”的规定。</p>
            <p>6.本合同约定与法律相冲突的，以法律规定为准。</p>
            <p>7.本合同自旅游者和旅行社双方签字盖章之日起生效。</p>
          </div>
          <!-- 合同信息 -->
          <div class="TD-basic" :class="{'checkedNav':cked==2}">
            <br />
            <h2>第一章 相关告知及提示</h2>
            <h3>第一条 ● 机票预定</h3>
            <p>
              1、甲方应将委托预定内容书面形式告知乙方,乙方应按照甲方的要求订位。
            </p>
            <p>2、甲方应提供预定机票所需材料,并保证所提供的材料真实准确,如因甲方提供的材料假等原因造成虚占座位、错误订位等情况由甲方自行承担全部责任。</p>
            <p>3、旅行社代旅游者预定机票,一经按照约定出票即完成合同代理义务。旅游者用身份证到航 空公司指定地点取票，如发生退、改票等情况，旅行社不承担责任，但应协助旅游者与航空公司
              协商解决，由退、改签造成的损失由旅游者承担。</p>
            <p>
              4、机票的签、转、退等事宜须按照航空公司的规定办理 。通过旅行社向航空公司申请的优惠 机票通常附带严格的限制 条件：
            </p>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;a．折扣机票出票后不得退票、不改签。不可变更姓名、证件号码、日期和航班，一般在合同签订后1日内出票。
            </p>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;b．凡是需要交付定金的机票占位， 即便没有出票，取消占位也会发生定金损失。</p>
            <p>
              5、机票 (或电子客票行程单)票面价有可能与票报价不等，旅游者应当与对航空公司的商业运作给予理解。旅游者可 以索取与实际交费数额相等的正式发票。
            </p>
            <p>6、国际机票的航空税不包含在机票报价中，航空公司通常以出票时的汇率为依据确定航空税金额 。如因汇率变化， 航 空税实际价格高于预收价格， 旅游者须补缴差额部分。</p>
            <h3>第二条 ● 酒店预订</h3>
            <p>1、旅游者将预定内容书面形式告知旅行社， 旅行社负责按照旅游者的要求订房。</p>
            <p>2、凡因旅游者原因造成虚占房型、名字错误等， 造成的损失由旅游者承担。</p>
            <p>3、酒店入住、离店、因故提前退房、延住等事宜须按照相应酒店的规定办理 。如提前入住或推迟离店，酒店可能酌情加收一定的费用(具体情况按照相关酒店规定) 。</p>

            <p>{{$t('objFill.v101.Contract.lvyoufbh')}}：</p>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;(1)旅游者投保的人身意外伤害保险费用；</p>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;(2)合同未约定由旅行社支付的费用，包括但不限于行程以外非合同约定活动项目所需的费用、自行安排活动期发生的费用；</p>
            <p>
              &nbsp;&nbsp;&nbsp;&nbsp;(3)行程中发生的旅游者个人费用，包括但不限于交通工具上的非免费餐饮费、行李超重费，住宿期间的洗衣电话、饮料及酒类费，个人娱乐费用，个人伤病医疗费，寻找个人遗失物品的
              费用及报酬，个人原因造成的赔偿费用。
            </p>
            <p>4、履行辅助人，指与旅行社存在合同关系，协助其履行本合同义务，实际提供相关服务的法 人、自然人或者其他组 织。</p>
            <p>5 、酒店通常规定12点以前办理退房手续，下午3点后办理入住手续，少数酒店或特殊假期例 外。</p>
            <p>6 、如旅游者变更预定，须按酒店变更预定的相关规定办理 。另有定金 (或其他)约定的，则需承担定金损失或依约定办理。</p>
            <p>
              7、旅行社代旅游者预订酒店，一般合同签订后1日内旅行社将为旅游者下订单， 并以短信的方 式通知旅游者，酒店一 经预定并由旅行社通知到旅游者即完成合同代理义务
              。因酒店服务质量、退改房等引起的纠纷旅行社不承担责任，但应协 助旅游者与酒店协商解决。
            </p>
            <p>
              8、儿童费用：指凡与同行旅游者一同入住酒店的同一间客房，又不占用床位的十二岁以下的儿童可免收房费，但如占 用一个床位或加床位，须按成人的价格支付费用。
            </p>
            <p>
              9、如因旅游者人数或性别的原因而产生的单间住宿，其费用按整间房费收取。
            </p>
            <h3>第三条 ● 代办签证</h3>
            <p>
              1 、旅行社代办签证收取的费用中包含签证费和旅行社服务费。
            </p>
            <p>
              2 、旅行社根据使(领)馆的规定书面告知旅游者办理签证所须资料，如使(领)馆的要求发生变更，应及时书面通知 旅游者。
            </p>
            <p>
              3 、旅游者应根据通知按期提交相关资料及履行相关手续，并确保各项资料的真实有效 。使(领)馆可能会致电抽查或 要求面谈。
            </p>
            <p>
              4 、旅行社按照使(领)馆的要求告知旅游者提供相应材料并代办签证，乙方只负责形式审验旅游者提供的资料是否齐 全并递交签证国使(领)馆，但对材料的真实性无法核实，不承担责任。
            </p>
            <p>5 、是否发放签证系有关相关机构之行政权或主权，非企业所能控制 。如因旅游者提供的材料 不真实、存在瑕疵或自身 其它原因不能获取签证或由于签证国家当期的政策或其他原因造成拒签，旅行社不承担拒签责任
              。签证费为领事馆收取，不管是否签出签证该费用将无法退还， 由于旅行社已为旅游者提供了代办服务，旅游者支付的旅行社服务费不退。</p>
            <p>6 、境外国家持旅游签证入境时， 需要向移民局官员出示酒店预订单、返程机票等，请旅游者 出境时带好酒店预订单、 往返机票。
            </p>
            <p>
              7 、旅游者委托旅行社代办旅游签证的，旅行社需收取一定数额的出境押金用于旅游者违反旅 游行程时间滞留境外或逾 期回国时，旅游者应当向旅行社承担由此造成损失，包括旅行社信誉或
              被停签的损失，一旦发生滞留境外或逾期回国、不配合旅行社销签的，旅行社将该押金用于赔偿损失，不予退还 。该押金应于旅行社交付旅游者签证前1日内全额交纳 。如未按时交纳该押金，旅
              行社有权停止交付旅游者签证并办理注销，费用不退还；如旅游者按期回国并销签后凭记载有入境记录的护照和登机牌向旅行社领回该押金 。如未收取押金旅游者发生滞留、晚归或不配合销签的，旅行社有权向旅游者追偿
              由此造成的损失。
            </p>
            <p>
              8 、旅游者同意选择下列第
              <template v-if="dataList.carpoolOpinion==1">
                <span style="font-weight:bold;color:red;">A</span>
              </template>
              <template v-if="dataList.carpoolOpinion==2">
                <span style="font-weight:bold;color:red;">B</span>
              </template>
              <template v-if="dataList.carpoolOpinion==3">
                <span style="font-weight:bold;color:red;">C</span>
              </template>
              种方式交付办理签证的材料及领取签证。
            </p>
            <p>
              &nbsp;&nbsp;&nbsp;&nbsp;A、旅游者亲自现场领取。
            </p>
            <p>
              &nbsp;&nbsp;&nbsp;&nbsp;B、旅游者委托第三人现场领取， 第三人应持旅游者本人签字的授权委托书原件。
            </p>
            <p>
              &nbsp;&nbsp;&nbsp;&nbsp;C、旅游者通过中国邮政EMS快递专递形式领取，费用由旅游者承担 。如旅游者采取该方式 领取的，旅行社将签证交 付邮政部门即完成代理义务
              。因快递发生延误、丢失、毁损、灭失等风险，均由旅游者自行承担责任。
            </p>
            <h3>第四条 ● 接送服务</h3>
            <p>1、接送服务仅指提供机场至酒店 (或约定地点)单程或往返的交通，不包含导游和讲解服务。</p>
            <p>2、旅游者如有特殊要求的应书面告知旅行社，如车辆的型号、车况、数量等相关要求及用途,时间。</p>
            <p>3、旅行社为旅游者代订接送服务，旅行社应为旅游者提供具有合法资质的车辆及驾驶员。</p>
            <p>4、在接送服务过程中发生的纠纷，旅行社不承担责任，但应协助旅游者与责任方协商解决。</p>
            <p>5、旅行社将已预订的接机公司的车辆及司机、联系方式告知旅游者即完成代理服务，如发生退、改费用不退还。</p>

            <h3>第五条 ● 旅游意外保险</h3>
            <p>旅行社建议旅游者自愿购买相关旅行意外保险， 旅行社可以代旅游者购买， 费用由旅游者承担 。旅游者应书面通知旅 行社代买保险的险种及保额，保费由旅游者承担。</p>

            <h3>第六条 ● 争议解决方法</h3>
            <p>本合同项下发生的争议，由双方协商解决，或向有管辖权的旅游质检所、消费者协会等有关部门投诉； 协商、投诉解决不成的， 向有管辖权的人民法院起诉。</p>
            <h3>第七条 ● 旅游者 、旅行社双方确认：</h3>
            <p>1、旅游者知悉且同意本合同《相关告知及提示》和《预定项目及要求》 内容 。并确认预定信息无误。</p>
            <p>2、旅行社接受旅游者预定事项。</p>
            <p>3、由于无法与旅游者进行书面往来确认事项， 旅游者同意采用电话或手机短信方式进行确 认。</p>

            <h2>第二章 单项委托/组合地接服务合同</h2>
            <h3>第一条 预定项目及要求</h3>
            <p>委托方(旅游者):<span>{{dataList.clientName}}</span>{{$t('objFill.v101.administrative.deng')}}<span
                v-if="dataList.guestList">{{dataList.guestList.length}}</span>人；</p>
            <p>受托方(旅行社):<span>{{dataList.company}}</span></p>
            <p>根据《合同法》等有关法律法规的规定，委托方 (旅游者) 与受托方 (旅行社) 双方在平等；自愿的 基础上就有关委托代办事宜经协商达成协议如下：</p>

            <h3>一 、旅游者信息 (如有12岁以下儿童或2岁以下婴儿需要标注) ：</h3>
            <p>
              <table class="ZTable">
                <tbody>
                  <tr>
                    <td width="10%">{{$t('active.ad_xuhao')}}</td>
                    <td width="15%">{{$t('system.query_name')}}</td>
                    <td width="10%">{{$t('system.table_sex')}}</td>
                    <td width="10%">证件类型</td>
                    <td width="20%">证件号码</td>
                    <td width="20%">{{$t('objFill.lianxifangshi')}}</td>
                    <td width="15%">{{$t('objFill.v101.Contract.shengtizk')}}</td>
                  </tr>
                  <tr v-for="(item,index) in dataList.guestList" :key="index+10000">
                    <td>{{index+1}}</td>
                    <td>{{item.surName+''+item.name}} {{item.guestType}}</td>
                    <td>{{item.sex==1?$t('pub.man'):$t('pub.woman')}}</td>
                    <td>{{$t('salesModule.Passport')}}</td>
                    <td>{{item.passportNo}}</td>
                    <td>{{item.mobilePhone}}</td>
                    <td>健康</td>
                  </tr>
                  <tr>
                    <td colspan="4">
                      紧急情况联系人姓名：{{dataList.contactsName}}
                    </td>
                    <td colspan="3">
                      联系电话：{{dataList.contactsMobile}}
                    </td>
                  </tr>
                </tbody>
              </table>
            </p>
            <h3>二 、预定项目及要求：</h3>
            <h3>机票预订</h3>
            <p>
              <table class="ZTable">
                <tbody>
                  <tr>
                    <td width="10%">{{$t('active.ad_xuhao')}}</td>
                    <td width="20%">{{$t('system.query_flightNum')}}</td>
                    <td width="20%">{{$t('sm.Date')}}</td>
                    <td width="20%">起止城市</td>
                    <td width="15%">{{$t('objFill.v101.BasicDocuments.col.t1')}}</td>
                    <td width="15%">{{$t('objFill.didaishijian')}}</td>
                  </tr>
                  <tr v-for="(item,index) in dataList.ticketList" :key="index+20000">
                    <td>{{index+1}}</td>
                    <td>{{item.Flight_number}}</td>
                    <td>{{item.FlightDate}}</td>
                    <td>{{item.dName}}-{{item.aName}}</td>
                    <td>{{item.Departure_time}}</td>
                    <td>{{item.Arrival_time}}</td>
                  </tr>
                </tbody>
              </table>
            </p>
            <h3>酒店预订</h3>
            <p>
              <table class="ZTable">
                <tbody>
                  <tr>
                    <td width="40%">{{$t('hotel.table_hotelname')}}</td>
                    <td width="20%">{{$t('advmanager.v_type')}}</td>
                    <td width="20%">{{$t('hotel.hotel_roomType')}}</td>
                    <td width="20%">{{$t('restaurant.res_Number')}}</td>
                  </tr>
                  <tr v-for="(item,index) in dataList.hotelList" :key="index+30000">
                    <td>{{item.Name}}</td>
                    <td>{{item.HotelType}}</td>
                    <td>{{item.RoomType}}</td>
                    <td>{{item.RoomNum}}</td>
                  </tr>
                </tbody>
              </table>
            </p>
            <h3>代办签证</h3>
            <p>{{dataList.visaInfo}}</p>
            <h3>其他单项服务事宜 </h3>
            <p v-html="dataList.travelContent">

            </p>
            <p>
              {{dataList.rbInfo}} 部分旅游资源需提前预订的特殊性，本产品线路在旅行社成团后至出行前29天外取消的，也将产生实际损失，具体损失包括但不限于机票、酒店等，如旅游者需要取消订单，应及时联系旅行社，旅行社除协助旅游者减损并退还未实际发生的损失费用外不再承担其他赔偿责任。
            </p>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;前29 ~ 15日(含)：收取总费用2%</p>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;前14 ~ 7日(含)：收取总费用5%</p>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;前6 ~ 4日(含)：收取总费用10%</p>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;前3 ~ 1日(含)：收取总费用15%</p>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;行程当日：收取总费用20% </p>
            <p>旅行社违约：如按上述比例支付的违约金不足以赔偿旅游者的实际损失，旅行社应当按实际损失对旅游者予以赔偿。 行程前已成团违约金</p>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;前29 ~ 15日(含) ：收取总费用50%</p>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;前14 ~ 7日(含) ：收取总费用60%</p>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;前6 ~ 4日(含) ：收取总费用70%</p>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;前3 ~ 1日(含) ：收取总费用85% </p>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;行程当日：收取总费用90% </p>
            <p>旅游者违约：如按上述约定比例扣除的必要的费用低于实际发生的费用，旅游者按照实际发生的费用支付，但最高额不应当超过旅游费用总额。 </p>
            <p>
              因部分旅游资源需提前预订的特殊性，本产品线路在旅行社成团后至出行前29天外取消的，也将产生实际损失，具体损失包括但不限于机票、酒店等，如旅游者需要取消订单，应及时联系旅行社，旅行社除协助旅游者减损并退还未实际发生的损失费用外不再承担其他赔偿责任。
            </p>
            <p>
              本人已阅读了本合同所有条款，乙方（旅行社）已就合同条款对本人进行了真实、准确、完整的说明，本人已完全了解合同条款的内容及含义，同时本人悉知自身身体适宜此次旅行。请务必携带自身常用药品，如有身体不适必须第一时间告知随团导游或领队，并及时到当地医院做检查，如因个人原因耽误病情，一切后果均由客人自行承担。旅游意外伤害险：若旅行社购买赠送客人，如有出险理赔视为旅
              行社责任风险分摊，保险公司赔偿金额为最终赔付，旅行社不再进行赔偿。 </p>
            <p>签约委托授权书：本人已征得其余全体委托人同意作为本次旅游出行签约代表（全体委托人名单详见游客名单），全体委托人享受本合同约定的权利，履行本合同约定的义务，受托人在旅游合同及其附件上的签字全体委托人均予以认可。
            </p>
            <p>
              健康承诺书：在旅游过程中，如本人未按贵社要求如实告知相关健康情况，本人承担因此而产生的全部后果，并承担给贵社造成损失的赔偿责任。本人自愿放弃不适宜本人身体状况参加的相应景点或相应活动；若因本人坚持参加而所产生的全部后果均由本人自行承担。本人因自身过错，造成的一切其他损失由本人承担。本人作为此次出行的签约代表，已就此承诺告知了全体委托人及其直系亲属并得到他们的同意。
            </p>
            <p>如其他游客不予认可本合同或者本人未取得授权、未告知本合同及相关告知书内容的，由本人承担相应责任。</p>
            <h3>费用计算</h3>
            <p>旅游者委托旅行社提供上述 1 2 3 4 5 共计 <template v-if="dataList.serviceNum=='1'">
                <span style="font-weight:bold:color:red;">壹</span>
              </template>
              <template v-else-if="dataList.serviceNum=='2'">
                <span style="font-weight:bold:color:red;">贰</span>
              </template>
              <template v-else-if="dataList.serviceNum=='3'">
                <span style="font-weight:bold:color:red;">叁</span>
              </template>
              <template v-else-if="dataList.serviceNum=='4'">
                <span style="font-weight:bold:color:red;">肆</span>
              </template>
              <template v-else-if="dataList.serviceNum=='5'">
                <span style="font-weight:bold:color:red;">伍</span>
              </template>（大写）项服务。 </p>
            <h3>{{$t('pub.pubRemark')}}:<font style="color:red">{{dataList.notes}}</font>
            </h3>
            <h3>{{$t('admin.admin_personNumber')}}：<font style="color:blue">{{dataList.clientNumber}}</font> 人</h3>
            <h3>{{$t('fnc.danjia')}}：<font style="color:blue">{{dataList.adultPrice}} </font>{{$t('objFill.v101.FinancialModule.yuanren')</h3>
            <h3>费用总额（小写）人民币 <font style="color:blue">{{dataList.orderPrice}}</font> 元, （大写）人民币 <font style="color:blue">
                {{dataList.bigOrderPrice}}</font>
            </h3>
            <h3>
              {{dataList.clientNumber?dataList.clientNumber:''}}人合计 <font style="color:red">{{dataList.totalMoneyInfo}}
                元</font>
            </h3>
          </div>
          <!-- 签章信息 -->
          <div class="eseal" :class="{'checkedNav':cked==3}">
            <table class="SignTable">
              <tbody>
                <tr>
                  <td>委托方(旅游者)签字：</td>
                  <td>
                    <span>{{dataList.clientName}}</span>

                    <img class="signDiv" style="opacity:0.5;" :src="dataList.companySignature"
                      v-if="dataList.companySignature" alt="">
                  </td>
                  <td>
                    受托方(旅行社)签章：
                  </td>
                  <td>
                    <span>{{dataList.company}}</span>
                    <img v-if="isShowZhang==1" class="esealDiv" :src="dataList.zhangUrl" alt="" />
                  </td>
                </tr>
                <tr>
                  <td>{{$t('objFill.zhengjianhm')}}：</td>
                  <td>{{dataList.clientIdcardnum}}</td>
                  <td>签约代表签字（盖章）：</td>
                  <td>
                    <span>{{dataList.agentName}}</span>
                  </td>
                </tr>
                <tr>
                  <td>住 址：</td>
                  <td>{{dataList.clientAddress}}</td>
                  <td>营业地址：</td>
                  <td>
                    <span>{{dataList.companyAddress}}</span>
                  </td>
                </tr>
                <tr>
                  <td>{{$t('scen.sc_tel')}}：</td>
                  <td>{{dataList.clientCall}}</td>
                  <td>{{$t('scen.sc_tel')}}：</td>
                  <td>{{dataList.companyCall}}</td>
                </tr>
                <tr>
                  <td>传 真：</td>
                  <td>{{dataList.clientFax}}</td>
                  <td>传 真：</td>
                  <td>{{dataList.companyFax}}</td>
                </tr>
                <tr>
                  <td>邮 编：</td>
                  <td>{{dataList.clientPostCode}}</td>
                  <td>邮 编：</td>
                  <td>{{dataList.companyPostCode}}</td>
                </tr>
                <tr>
                  <td>{{$t('objFill.v101.Contract.dianzixx')}}：</td>
                  <td>{{dataList.clientEmail}}</td>
                  <td>{{$t('objFill.v101.Contract.dianzixx')}}：</td>
                  <td>{{dataList.companyEmail}}</td>
                </tr>
                <tr>
                  <td>{{$t('objFill.v101.Contract.qianyueriqi')}}：</td>
                  <td>
                    <span v-if="dataList.payDate">{{dataList.payDate}}</span>
                  </td>
                  <td>{{$t('objFill.v101.Contract.qianyueriqi')}}：</td>
                  <td>
                    <span v-if="dataList.payDate">{{dataList.payDate}}</span>
                  </td>
                </tr>
                <tr>
                  <td>{{$t('objFill.qianyuedd')}}：</td>
                  <td colspan="3">{{dataList.contractPlace}}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <div class="fade" v-show="isShowFade"></div>
    <div class="qrCodeDiv" v-show="isShowFade">
      <div style="margin-top:15px;">{{$t('objFill.v101.Contract.qingsmqz')}}</div>
      <div id="qrcode" style="margin:25px;" ref="qrcode">
        <img class="WeiXinShare" :src="'data:image/png;base64,'+QRCodeStr" />
      </div>
      <i class="iconfont icon-cha Ec_cha" @click="isShowFade=false"></i>
    </div>
  </div>
</template>
<script>
  import moment from 'moment'
  export default {
    data() {
      return {
        CurrentUserInfo: {},
        //选中切换
        cked: 1,
        //查询参数
        msg: {
          TCID: 0,
          orderID: 0,
          guestId: 0,
          Id: 0, //合同主键编号
        },
        //数据源
        dataList: [],
        isShowFade: false,
        QRCodeStr: "",
        pdfLoading: false,

        isShowZhang: 0,
      };
    },
    methods: {
      // 生成二维码
      GetQrCode: function () {
        let urlObj = this.domainManager();
        var guestId = 0;
        if (this.$route.query.guestId) {
          guestId = this.$route.query.guestId;
        }
        let msg = {
          TCID: this.$route.query.TCID,
          orderID: this.$route.query.orderID,
          guestId: guestId,
          Id: this.$route.query.ID,
          pUrl: "clientConfirmRB",
        };
        this.$http({
          headers: {
            'Content-Type': 'application/json'
          },
          method: 'post',
          url: urlObj.DomainUrl + '/api/file/GetQrCodeImage?',
          data: {
            "msg": msg
          }
        }).then(res => {
          if (res.data.resultCode === 1) {
            this.QRCodeStr = res.data.data;
          } else {

          }
        }).catch(err => {})
      },

      // 生成pdf
      toContractPDF: function (title) {
        let urlObj = this.domainManager();
        let msg = {
          TCID: this.$route.query.TCID,
          GuestId: this.msg.guestId,
          orderID: this.$route.query.orderID,
        };
        this.pdfLoading = true;
        this.$http({
          headers: {
            'Content-Type': 'application/json'
          },
          method: 'post',
          url: urlObj.DomainUrl + '/api/file/GetDownLoadContractJapan',
          data: {
            "msg": msg
          }
        }).then(res => {
          this.pdfLoading = false
          if (res.data.resultCode === 1) {
            let sign = title + "V2"
            const a = document.createElement('a');
            a.setAttribute('download', '');
            a.setAttribute('href', urlObj.DomainUrl + '/api/file/DownloadFileForPdfNew?fileName=' + sign +
              '.pdf&&fPath=' + res.data.data);
            a.click();
          } else {
            this.Error(this.$t('objFill.huoqusb'));
          }
        }).catch(err => {

        })
      },
      //获取数据
      getList() {
        this.apipost("travelcontract_post_GetContractInfoService", this.msg, res => {
          if (res.data.resultCode === 1) {
            this.dataList = res.data.data;
            this.isShowZhang = res.data.data.isTravelAgencySignature;
          } else {
            this.Error(res.data.message);
          }
        }, null);
      },
      getDate(date) {
        return moment(date).format("YYYY-MM-DD");
      },
      //加一天返回
      getDayAddOne(day, num) {
        return moment(day).add(num, 'days').format('YYYY-MM-DD')
      },

      //获取大写
      getTotalNum(num) {
        switch (num) {
          case 1:
            return this.$t('objFill.v101.Contract.daxie1');
            break;
          case 2:
            return this.$t('objFill.v101.Contract.daxie2');
            break;
          case 3:
            return this.$t('objFill.v101.Contract.daxie3');
            break;
          case 4:
            return this.$t('objFill.v101.Contract.daxie4');
            break;
          case 5:
            return this.$t('objFill.v101.Contract.daxie5');
            break;
          case 6:
            return this.$t('objFill.v101.Contract.daxie6');
            break;
          case 7:
            return this.$t('objFill.v101.Contract.daxie7');
            break;
          case 8:
            return this.$t('objFill.v101.Contract.daxie8');
            break;
          case 9:
            return this.$t('objFill.v101.Contract.daxie9');
            break;
          case 10:
            return this.$t('objFill.v101.Contract.daxie9');
            break;
        }
      },
      //作废
      getinvalid() {
        this.$confirm(this.$t('objFill.shifouzuofei'), this.$t('tips.tips'), {
          confirmButtonText: this.$t('pub.sureBtn'),
          cancelButtonText: this.$t('pub.cancelBtn'),
          type: 'warning'
        }).then(() => {
          this.dataList.status = 0;
          this.apipost("travelcontract_post_UpdateStatusContractService", this.dataList, res => {
            if (res.data.resultCode === 1) {
              this.Success(res.data.message);
            } else {
              this.Error(res.data.message);
            }
          }, null);
        }).catch(() => {
          this.$message.info(this.$t('objFill.quxiaoshanc'));
        });
      },
    },
    mounted() {
      this.CurrentUserInfo = this.getLocalStorage();
      this.msg.TCID = this.$route.query.TCID;
      this.msg.orderID = this.$route.query.orderID;
      this.msg.guestId = this.$route.query.guestId;
      this.msg.company = this.$route.query.company;
      this.msg.Id = this.$route.query.ID;
      this.msg.companyAddress = this.$route.query.companyAddress
      this.getList();
    }
  };

</script>