<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>
            </h3>
            <p>甲方：<font>{{addMsg.GuestName}}</font>
            </p>
            <p>乙方：<font>{{TravelAgency_Name}}</font>
            </p>
            <p style="text-indent:2em;">甲乙双方在遵循平等、自愿、协商一致、诚实信用的原则下，就双方旅游产品价格保密成如下协议：</p>
            <p>1、价格保密</p>
            <p style="text-indent:2em;">经甲乙双方商定，在双方建立合同关系基础之上，乙方给予甲方优惠价<font>{{addMsg.DiscountMoney}}</font>
              元/人，但双方必须保证，不向外透露具体价格。</p>
            <p>2、双方的权利和义务
            </p>
            <p style="text-indent:2em;">
              甲乙双方所签订的价格，双方必须严加保密，不向第三方提供。
            </p>
            <p>
              3、违约责任
            </p>
            <p style="text-indent:2em;">
              对于因双方泄露价格而引起的不必要纠纷，所有造成的损失由产生方全部承担。
            </p>
            <p>
              4、协议的效力和变更
            </p>
            <p style="text-indent:2em;">
              本协议自双方签字或盖章后生效。
            </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">{{$t('objFill.v101.Contract.chujsgz')}}：</el-col>
                  <el-col :span="12">
                    <template v-if="addMsg.CompanyIsSign==1">
                      <img class="signImg" :src="addMsg.CompanyImage" 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.CompanySignDate}}</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: 'clientProtocol'
          }
        })
      },
      ChangeTab(num) {
        this.ActiveTab = num;
      },
      //获取数据
      getList() {
        this.apipost("travelcontract_post_GetDiscountProtocol", 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>