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

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

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

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

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

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

  .TravelContractView .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;
  }

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

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

  .TravelContractView .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;
  }

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

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

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

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

  .TD-introduction {
    padding-top:20px;
    margin: 20px 30px 30px 30px;
    font-size: 13px;
  }

  .TD-introduction p {
    margin: 5px 0 0 0;
    line-height: 27px;
    /* text-align: center; */
  }

  .TD-introduction p span {
    color: black;
    font-weight: bolder;
  }

  .TD-introduction h2 {
    font-size: 16px;
  }

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

  .TravelContractView .signDiv {
    width: 160px;
    height: 120px;
    position: absolute;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    left: 0;
    top: 0px;
    margin:-3em 24em;
    z-Index: 100;
  }

  .TravelContractView .guests {
    font-size: 13px;
    margin: 20px 30px 30px 30px;
  }

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

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

  .TravelContractView p font {
    border-bottom: #cbcbcb 1px solid;
    padding: 0 5px;
    color: #0088cc;
    margin: 0 5px;
  }

  /*弹出层*/
  .TravelContractView .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;
  }

  .TravelContractView .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;
  }

</style>
<template>
  <div class="TravelContractView">
    <div class="container-fluid">
      <div class="block mtop15">
        <div class="blockTitle">
          <table style="width:100%">
            <tr>
              <td> <span class="icon"><i class="iconfont icon-wenjian"></i></span>
                <h2>{{$t('objFill.v101.xieyixiangq')}}
                  &nbsp;&nbsp;<template v-if="addMsg.EnterName&&addMsg.EnterName!=''">
                    {{$t('objFill.v101.xiaosoureny')}}:{{addMsg.EnterName}}</template>
                </h2>
              </td>
              <td align="right">
                <el-button type="primary" size="medium" @click="saveData()" :loading="SaveLoading" >{{$t('pub.saveBtn')}}</el-button>
                <template v-if="addMsg.ProtocolId>0">

                  <el-button type="primary" size="medium" @click="isShowFade=true;createQrCode()">{{$t('objFill.weishengcewm')}}</el-button>
                </template>
              </td>
            </tr>
          </table>
        </div>
        <div v-loading="Loading">
          <div class="contract">
            <div class="title">
              <h1>老年人/孕妇参团免责 </h1>
              <h1>承诺函</h1>
              <p class="contractNo" style="padding:5px 0px 5px 0px;">承诺函编号：<span
                  v-if="addMsg.ProtocolId&&addMsg.ProtocolId>0">{{addMsg.ProtocolId}}</span></p>
            </div>
          </div>
          <!-- 使用说明 -->
          <div class="TD-introduction">
            <p style="text-indent:2em;">本人自愿报名参加了贵司组织的出境旅游团，对于行程中的注意事项贵社工作人员已如实详尽地向本</p>
           <p>人告知，本人完全理解。鉴于本人已是<span>65岁以上</span>高龄人群或已经<span>怀孕妇女</span>，特向贵社郑重承诺如下：</p>
            <p style="text-indent:2em;">1、本人了解自已的身体状况，并且在此声明自己没有突发性疾病，适合参加此旅游团；本人能够完成</p>
            <p>旅游团全部行程。</p>
            <p style="text-indent:2em;">2、在旅游过程中，相应景点或相应活动禁止高龄/怀孕人群参加的，本人放弃参加的权利；对高龄/</p>
            <p>怀孕人群参加有限制的，本人遵守相关制度，若因本人坚持参加所产生的全部后果均由本人承担。</p>
            <p style="text-indent:2em;">
              3、在旅游过程中，如果本人由于身体不适或其他原因导致本人不能继续完成行程，或需要贵公司协助
            </p>
            <p>提前返回的情况，本人承担全部责任以及发生的全部费用。</p>
            <p style="text-indent:2em;">
              4、如本人没有按贵司要求如实告知相关情况，本人承担因此而产生的全部责任以及发生的全部费用 ，
            </p>
           <p>并承担给旅行社造成的损失赔偿责任。</p>
           <p style="text-indent:2em;">
              5、出境<span>65岁以上</span>高龄老人或<span>怀孕妇女</span>必须本人自行购买境外SOS急救保险。 </p>
            <p style="text-indent:2em;">
              6、对本人有已查明疾病或慢性病，请明确告之旅行社。 </p>
            <p style="text-indent:2em;">
              7、对以上疾病进行治疗后，现是否符合医学正常指标范围。  </p>
            <p style="text-indent:2em;">
              8、本人承诺在出行期间，对前述疾病会随身携带足量常用药品及急救药品。   </p>
            <p style="text-indent:2em;">
              9、本人已就此承诺告知了直系亲属并得到他们的同意。 </p>
            <p style="text-indent:2em;">
              以上承诺内容是本人的真实意思表示。对于本承诺函的各项条款，贵司工作人员已充分告之本人相关
            </p>
            <p>含义，本人已阅读并完全理解各项条款的意思。若发生纠纷，以本承诺函中本人的承诺为准。</p>
            <p style="text-indent:2em;">特此承诺!</p>
            <p style="text-indent:22em;">  <span>承诺人（本人亲笔签名确认）：{{addMsg.GuestName}}</span>  </p>
           <p style="text-indent:18em;position:relative;">
            <template v-if="addMsg.GuestIsSign==1">
                    <div class="signDiv" :style="{backgroundImage: 'url(' + (addMsg.GuestSignature) + ')'}"></div>
                  </template></p>
            <p style="text-indent:38em;" > <span v-if="addMsg.GuestIsSign==1">{{addMsg.GuestSignDateStr}}</span>
              <span v-else>&nbsp;&nbsp;年&nbsp;&nbsp;月&nbsp;&nbsp;日</span>
            </p>

          </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>
  export default {
    data() {
      return {
        //查询参数
        msg: {
          ProtocolId: 0, //协议Id
          TCID: 0, //团期编号
          OrderId: 0, //订单编号
          GuestId: 0, //旅客编号
        },
        addMsg: {
          ProtocolId: 0, //协议Id
          TCID: 0, //团期编号
          OrderId: 0, //订单编号
          GuestId: 0, //旅客编号
          DiscountMoney: 0, //优惠金额
          GuestName: "", //旅客名称
          GuestIsSign: 0, //旅客是否签章
          GuestSignature: "", //旅客签章图片
          GuestSignDate: "", //旅客签字日期
          CompanyIsSign: "", //公司是否盖章
          CompanySignDate: "", //公司盖章日期
          CompanyImage: "", //公司章图片
          EnterName: "", //录入人员
          GuestSignDateStr:"",
        },
        TravelAgency_Name: "四川和平国际旅行社有限公司",
        SaveLoading: false,
        isShowFade: false, //是否显示二维码弹窗
        QRCodeStr: "", //二维码base64字符串
        Loading: false,
      };
    },
    methods: {
      GetData() {
        this.Loading = true;
        this.apipost(
          "travelcontract_post_GetDisclaimerProtocol", this.msg,
          res => {
            this.Loading = false;
            if (res.data.resultCode == 1) {
              var tempObj = res.data.data;
              if (tempObj.ProtocolId > 0) {
                this.addMsg.ProtocolId = tempObj.ProtocolId;
                this.addMsg.TCID = tempObj.TCID;
                this.addMsg.OrderId = tempObj.OrderId;
                this.addMsg.GuestId = tempObj.GuestId;
                this.addMsg.DiscountMoney = tempObj.DiscountMoney;
                this.addMsg.GuestIsSign = tempObj.GuestIsSign;
                this.addMsg.GuestSignature = tempObj.GuestSignature;
                this.addMsg.GuestSignDate = tempObj.GuestSignDate;
                this.addMsg.CompanyIsSign = tempObj.CompanyIsSign;
                this.addMsg.CompanySignDate = tempObj.CompanySignDate;
                this.addMsg.CompanyImage = tempObj.CompanyImage;
                this.addMsg.EnterName = tempObj.EnterName;
                this.addMsg.GuestSignDateStr=tempObj.GuestSignDateStr;
              }
              this.addMsg.GuestName = tempObj.GuestName;
            } else {
              this.Error(res.data.message);
            }
          },
          err => {}
        );
      },
      //保存保密协议
      saveData() {
        this.SaveLoading = true;
        this.apipost(
          "travelcontract_post_SetDisclaimerProtocol", this.addMsg,
          res => {
            this.SaveLoading = false;
            if (res.data.resultCode == 1) {
              this.Success(res.data.message);
              this.addMsg.ProtocolId = res.data.data;
              this.msg.ProtocolId = res.data.data;
              this.GetData();
            } else {
              this.Error(res.data.message);
            }
          },
          err => {}
        );
      },
      //公司盖章
      saveCompanySign() {
        var postMsg = {
          ProtocolId: this.addMsg.ProtocolId,
          CompanyIsSign: 1,
        };
        this.apipost(
          "traveldisProtocol_post_UpdateCompanySignature", postMsg,
          res => {
            if (res.data.resultCode == 1) {
              this.Success(res.data.message);
              this.GetData();
            } else {
              this.Error(res.data.message);
            }
          },
          err => {}
        );
      },
      //生成二维码
      createQrCode() {
        let urlObj = this.domainManager();
        let msg = {
          TCID: this.$route.query.TCID,
          OrderId: this.$route.query.OrderId,
          GuestId: this.$route.query.GuestId,
          ProtocolId: this.$route.query.ProtocolId,
          pUrl: "clientDisclaimerProtocol",
        };
        this.$http({
          headers: {
            'Content-Type': 'application/json'
          },
          method: 'post',
          url: urlObj.DomainUrl + '/api/file/GetQrCodeExtImage?',
          data: {
            "msg": msg
          }
        }).then(res => {
          if (res.data.resultCode === 1) {
            this.QRCodeStr = res.data.data;
          }
        }).catch(err => {})
      }
    },
    created() {
      if (this.$route.query) {
        if (this.$route.query.ProtocolId) {
          this.msg.ProtocolId = this.$route.query.ProtocolId;
          this.addMsg.ProtocolId = this.$route.query.ProtocolId;
        }
        if (this.$route.query.TCID) {
          this.msg.TCID = this.$route.query.TCID;
          this.addMsg.TCID = this.$route.query.TCID;
        }
        if (this.$route.query.OrderId) {
          this.msg.OrderId = this.$route.query.OrderId;
          this.addMsg.OrderId = this.$route.query.OrderId;
        }
        if (this.$route.query.GuestId) {
          this.msg.GuestId = this.$route.query.GuestId;
          this.addMsg.GuestId = this.$route.query.GuestId;
        }
      }
    },
    mounted() {
      this.GetData();
    }
  };

</script>