<style>
  * {
    margin: 0;
    padding: 0;
  }

  .dic_content {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  .dic_content {
    width: 100%;
    margin: auto;
    background-color: #fff;
  }

  .dic_content .contractLeft {
    width: 150px;
    display: block;
    border: 0;
    float: left;
    position: fixed;
  }

  .dic_content .contractRight {
    width: 100%;
    height: 100%;
    display: block;
    background-color: #fff;
    z-index: 99;
  }

  .dic_contenttable th {
    padding: 8px 0;
  }

  .dic_contenttable td {
    padding: 8px 0;
  }

  .dic_content h1,
  .dic_content h2,
  .dic_content p {
    margin: 0 auto;
    padding: 0 10px;
  }

  .dic_content .decoration {
    text-decoration: underline;
  }

  .dic_content .leftP {
    text-align: left;
    display: inline-block;
  }

  .dic_content .Contract_Depart {
    margin: 30px 0;
  }

  .dic_content .item_content {
    width: 100%;
    height: auto;
  }

  .dic_content .item_content .title {
    width: 100%;
    text-align: center;
    margin-top: 20px;
  }

  .dic_content .item_content>label {
    width: 100%;
    text-align: left;
    font-weight: bold;
    background-color: #F2F2F2;
    margin: 30px 0;
    padding: 8px 0;
    text-indent: 20px;
    display: inline-block;
    font-size: 16px;
  }

  .dic_content .item_content>span {
    font-size: 1.5rem;
    line-height: 26px;
    margin-left: 10px;
  }

  .dic_content .item_content .content_table {
    border: 1px solid #d1d1d1;
    margin-top: 10px;
    width: 100%;
    text-align: center;
    font-size: 1.8rem
  }

  .dic_content .item_content .content_table th {
    background-color: #F2F2F2;
  }

  .dic_content .item_content .content_table th,
  .dic_content .item_content .content_table td {
    border: 1px solid #808080;
    text-align: center;
    padding: 10px;
  }

  .dic_content .item_content font {
    color: blue;
    padding: 0 10px;
    font-size: 1.5rem
  }

  .dic_content .content_table font {
    min-width: 0;
  }

  .dic_content .float_div {
    position: fixed;
    bottom: 0;
    line-height: 50px;
    background-color: #F2F2F2;
    width: 1190px;
    padding-left: 10px;
    height: 50px;
    display: block;
    vertical-align: middle;
    text-align: match-parent;
  }

  .dic_content .leftSign {
    float: left;
    width: 50%;
    margin: 70px 0;
    height: auto;
    line-height: 45px;
  }

  .dic_content .rightSign {
    float: right;
    width: 49%;
    height: auto;
    margin: 70px 0;
    line-height: 45px;
  }

  .dic_content .leftSign span {
    display: inline-block;
    width: 170px;
    text-align: right;
  }

  .dic_content .rightSign span {
    display: inline-block;
    width: 170px;
    text-align: right;
  }

  .dic_content .addressCommon {
    display: inline-block;
    width: 300px;
    display: inline-block;
    vertical-align: top;
    text-align: left;
  }

  .dic_content .shouquanNum {
    font-weight: bold;
  }

  .dic_content .zhangTitle {
    height: 90px;
    font-size: 16px;
    font-weight: bold;
    line-height: 90px !important;
    text-align: center;
  }

  .dic_content .toTopDistance {
    margin-top: 15px;
  }

  .dic_content .travelDan td {
    border: none !important;
    text-align: left;
    text-indent: 20px;
    padding: 10px 0;
  }

  .dic_content .travelDan {
    padding: 50px 0;
  }

  .dic_content .zhangOne {
    position: absolute;
    width: 200px;
    top: -83px;
    left: 160px;
  }

  .dic_content .zhangTwo {
    position: absolute;
    width: 200px;
    top: -60px;
    left: 80px;
  }

  .dic_content .comonTb td {
    padding: 15px 0;
  }

  .dic_content .remindInfo {
    position: absolute;
    top: 42%;
    left: 35%;
    font-size: 60px;
    color: #FF7F7F;
    letter-spacing: 20px;
  }

  .dic_content .signName {
    position: relative;
    top: 10px;
    width: 140px;
  }

  .dic_content .LRTB td:nth-child(odd) {
    text-align: right;
    padding: 10px;
    height: 50px;
    border: 1px solid #d1d1d1;
  }

  .dic_content .LRTB td:nth-child(even) {
    text-align: left;
    padding: 10px;
    height: 50px;
    border: 1px solid #d1d1d1;
  }

  .dic_content .shouquanNum {
    margin: 30px 0 !important;
    font-weight: bold;
  }

  .TopFixed {
    z-index: 100;
  }

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

  .isShowSign {
    z-index: 999;
  }

  .CisHideen {
    overflow: hidden;
  }

  .CliConfirmBtn {
    color: #fff;
    height: 60px;
    width: 150px;
    font-size: 27px;
    background: #E95252;
    border: 1px solid #E95252;
    border-radius: 15px;
  }

  .ClientTravelTable td {
    border: 1px solid #d1d1d1;
  }

  .dic_content .TipsDiv {
    background: #fff;
    width: 75%;
    margin: 0 auto;
    border-radius: 0.7rem;
    padding: 2rem 0;
    margin-top: 20rem;
  }

  .dic_content .TipsDiv .readSpan {
    display: inline-block;
    background-color: #24ade5;
    border-radius: 5px;
    height: 3.4rem;
    width: 18rem;
    color: #fff;
    font-size: 2rem;
    margin-top: 1rem;
  }

  .dic_content .TipsDiv li {
    list-style: none;
  }

  .dic_content .TipTc {
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(0, 0, 0, 0.5);
    top: 0;
    left: 0;
    z-index: 1000;
  }

  .dic_content .signSpan {
    position: fixed;
    bottom: 0;
    width: 100%;
    left: 0;
    background: #fff;
    border-top: 1px solid #ccc;
    z-index: 1000;
  }

  .dic_content .signSpan .sign {
    width: 75%;
    margin: 0 auto;

    padding: 1rem 0 0 0;
    text-align: center;
    cursor: pointer;

  }

  .dic_content .signSpan .sign .sp1 {
    display: inline-block;
    width: 25px;
    height: 25px;
    background-image: url('../assets/img/dzht/bg1.png');
    background-size: 132px;
    background-position: 52px 29px;
  }

  .dic_content li {
    list-style: none;
  }

  .dic_content .navHidden {
    width: 100%;
    overflow: hidden;
    height: 5rem;
  }

  .dic_content .navHidden .wrap {
    width: 100%;
    height: 6rem;
    overflow-x: scroll;
    overflow-y: hidden;
  }

  .dic_content .navHidden .Navul {
    width: 113rem;
    padding: 0;
    display: flex;
    height: 5rem;
    line-height: 5rem;
    margin: 0;
    border-bottom: 1px solid #ccc;
  }

  .dic_content .navHidden .Navul li {
    display: inline-block;
    margin-left: 1rem;
    box-sizing: border-box;
    cursor: pointer;
    font-size: 2rem;
    cursor: pointer;
  }

  .dic_content .SignbgDiv {
    position: relative;
    width: 100%;
    padding-bottom: 10rem;
    padding-top: 10rem;
  }

  .dic_content .SignbgDiv .signContent {
    overflow: hidden;
    position: relative;
    height: 100%;
  }

  .dic_content .SignbgDiv .signContent .sysm {}

  .navHidden .ActiveLi {
    border-bottom: 2px solid #24ade5;
  }

  .dic_content .guestUl li {
    padding: 10px 6px;
    box-sizing: border-box;
    border-bottom: 1px solid #ddd;
    font-size: 1.8rem;
  }

  .dic_content .guestUl li:nth-child(even) {
    background: #f5f5f5;
  }

  .dic_content .NavFixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 200;
    background: #fff;
  }

  .dic_content .gzqzUl li {
    border-bottom: 1px solid #ddd;
    padding: 14px;
    position: relative;
    box-sizing: border-box;
  }

  .dic_content .gzqzUl li .signImg {
    position: absolute;
    right: 15%;
    z-index: 200;
  }

  .dic_content .gzqzUl li .el-col:nth-child(2) {
    text-align: right;
  }

  .dic_content .gzqzUl .bgli {
    background: #eee;
    width: 100%;
    padding: 0 !important;
    height: 20px;
  }

  .dic_content .SignbgDiv p {
    font-size: 1.8rem;
  }

  .dic_content .gzqzUl li {
    font-size: 1.8rem;
  }

  .dic_content .TcTravel_Table {
    width: 100%;
    border: none;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 1.8rem;
  }

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

  .Travel_clientQuan {
    display: inline-block;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid #d1d1d1;
    border-radius: 5px;
    text-align: center;
    line-height: 1.5rem;
  }

  .Travel_clientQuan i {
    font-size: 1rem;
    color: gray;
  }

</style>

<template>
  <div class="dic_content" :class="dialogVisible?'CisHideen':''">
    <!-- 签字 -->
    <div class="signSpan" v-if="addMsg.GuestSignature==''">
      <div @click="goUrl" class="sign">
        <p><span style="font-size:3rem" class="iconfont icon-qianming"></span></p>
        <span style="font-size:2rem">{{$t('objFill.v101.qianzhi')}}</span>
      </div>
    </div>
    <div class="signSpan" v-if="addMsg.GuestSignature!=''">
      <div @click="goUrl" class="sign">
        <p><span style="font-size:3rem" class="iconfont icon-qianming"></span></p>
        <span style="font-size:2rem">{{$t('objFill.v101.chongqian')}}</span>
      </div>
    </div>
    <!-- 头部 -->
    <div class="NavFixed">
      <p style="background:#24ade5;text-align:center;color:#fff;padding:6px 0;font-size:3rem">{{$t('fnc.chakan')}}</p>
      <div class="navHidden">
        <div class="wrap">
          <ul class="Navul">
            <li :class="ActiveTab==1?'ActiveLi':''" @click="ChangeTab(1)">免责承诺函</li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 页面布局 -->
    <div style="position: relative;background:#fff;">
      <div class="SignbgDiv">
        <div class="signContent" style="padding-top:10px;">
          <!-- 合同信息 -->
          <div style="padding:0 14px;box-sizing: border-box;" v-show="ActiveTab==1" class="item_content">
            <h3>
              <p class="zhangTitle">老年人/孕妇参团免责</p>
              <p class="zhangTitle">承诺函</p>
            </h3>
            <p style="text-indent:2em;">本人自愿报名参加了贵司组织的出境旅游团，对于行程中的注意事项贵社工作人员已如实详尽地向本</p>
           <p>人告知，本人完全理解。鉴于本人已是<span style=" color: black;font-weight: bolder;">65岁以上</span>高龄人群或已经<span style=" color: black;font-weight: bolder;">怀孕妇女</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 style=" color: black;font-weight: bolder;">65岁以上</span>高龄老人或<span style=" color: black;font-weight: bolder;">怀孕妇女</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>
          </div>
          <!-- 盖章签字 -->
          <div class="item_content">
            <ul class="gzqzUl">
              <li>
                <el-row>
                  <el-col :span="12"> 承诺人（盖章） ：{{addMsg.GuestName}}</el-col>
                  <el-col :span="12">
                    <template v-if="addMsg.GuestIsSign==1">
                      <img style="width:140px;height:auto;" class="signImg" :src="addMsg.GuestSignature"
                        v-if="addMsg.GuestSignature!=''" alt="" />
                    </template>
                  </el-col>
                </el-row>
              </li>
              <li>
                <el-row>
                  <el-col :span="12">{{$t('objFill.v101.Contract.qianyueriqi')}}：</el-col>
                  <el-col :span="12">{{addMsg.GuestSignDate}}</el-col>
                </el-row>
              </li>
              <li>
                <el-row>
                  <el-col :span="12">&nbsp;</el-col>
                  <el-col :span="12">
                    &nbsp;
                  </el-col>
                </el-row>
              </li>
              <li>
                <el-row>
                  <el-col :span="12">&nbsp;</el-col>
                  <el-col :span="12">&nbsp;</el-col>
                </el-row>
              </li>
              <li>
                <el-row>
                  <el-col :span="12">&nbsp;</el-col>
                  <el-col :span="12">
                    &nbsp;
                  </el-col>
                </el-row>
              </li>
              <li>
                <el-row>
                  <el-col :span="12">&nbsp;</el-col>
                  <el-col :span="12">&nbsp;</el-col>
                </el-row>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        ActiveTab: 1,
        //查询参数
        msg: {
          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: "", //录入人员
        },
        TravelAgency_Name: "四川和平国际旅行社有限公司",
        dialogVisible: false,
      };
    },
    created() {

    },
    methods: {
      goUrl() {
        this.$router.push({
          name: "SignName",
          query: {
            TCID: this.msg.TCID,
            orderID: this.msg.OrderId,
            guestId: this.msg.GuestId,
            ProtocolId: this.addMsg.ProtocolId,
            TypeStr: 'clientDisclaimerProtocol'
          }
        })
      },
      ChangeTab(num) {
        this.ActiveTab = num;
      },
      //获取数据
      getList() {
        this.apipost("travelcontract_post_GetDisclaimerProtocol", this.msg, res => {
          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.GuestName = tempObj.GuestName;
              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;
            }
          } else {
            this.Error(res.data.message);
          }
        }, null);
      },

    },
    mounted() {
      this.msg.TCID = this.$route.query.TCID;
      this.msg.OrderId = this.$route.query.OrderId;
      this.msg.GuestId = this.$route.query.GuestId;
      this.msg.ProtocolId = this.$route.query.ProtocolId;
      this.getList();
    }
  };

</script>