<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 {
    margin: 20px 30px 30px 30px;
    font-size: 13px;
  }

  .TD-introduction p {
    margin: 5px 0 0 0;
    line-height: 27px;
  }

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

  .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;
    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>协议详情
                  &nbsp;&nbsp;<template v-if="addMsg.EnterName&&addMsg.EnterName!=''">
                    销售人员:{{addMsg.EnterName}}</template>
                </h2>
              </td>
              <td align="right">
                <el-button type="primary" size="medium" @click="saveData()" :loading="SaveLoading">保存</el-button>
                <template v-if="addMsg.ProtocolId>0">
                  <el-button type="primary" size="medium" @click="saveCompanySign()" :loading="SaveLoading">签章
                  </el-button>
                  <el-button type="primary" size="medium" @click="isShowFade=true;createQrCode()">生成二维码</el-button>
                </template>
              </td>
            </tr>
          </table>
        </div>
        <div v-loading="Loading">
          <div class="contract">
            <div class="title">
              <h1>价格保密协议 </h1>
              <p class="contractNo">协议编号：<span
                  v-if="addMsg.ProtocolId&&addMsg.ProtocolId>0">{{addMsg.ProtocolId}}</span></p>
            </div>
          </div>
          <!-- 使用说明 -->
          <div class="TD-introduction">
            <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;">经甲乙双方商定，在双方建立合同关系基础之上，乙方给予甲方优惠价&nbsp;<el-input v-model="addMsg.DiscountMoney"
                style="width:110px;display:inline-flex;" @keyup.native="checkPrice(addMsg,'DiscountMoney')"></el-input>
              &nbsp;元/人，但双方必须保证，不向外透露具体价格。</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>
        <!-- 签字盖章 -->
        <div class="guests">
          <table class="ZTable">
            <tbody>
              <tr>
                <td>甲方（盖章） ：</td>
                <td style="position:relative;">
                  <font>{{addMsg.GuestName}}</font>
                  <template v-if="addMsg.GuestIsSign==1">
                    <div class="signDiv" :style="{backgroundImage: 'url(' + (addMsg.GuestSignature) + ')'}"></div>
                  </template>
                </td>
                <td>乙方（盖章） :</td>
                <td style="position:relative;">
                  <font>{{TravelAgency_Name}}</font>
                  <template v-if="addMsg.CompanyIsSign==1">
                    <img :src="addMsg.CompanyImage" alt="" style="width:120px;heigth:120px;position:absolute;top:0;" />
                  </template>
                </td>
              </tr>
              <tr>
                <td>签约日期：</td>
                <td>
                  <font>{{addMsg.GuestSignDate}}</font>
                </td>
                <td>签约日期：</td>
                <td>
                  <font>{{addMsg.CompanySignDate}}</font>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="fade" v-show="isShowFade"></div>
    <div class="qrCodeDiv" v-show="isShowFade">
      <div style="margin-top:15px;">请扫码签字</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: "", //录入人员
        },
        TravelAgency_Name: "四川和平国际旅行社有限公司",
        SaveLoading: false,
        isShowFade: false, //是否显示二维码弹窗
        QRCodeStr: "", //二维码base64字符串
        Loading: false,
      };
    },
    filters: {

    },
    methods: {
      GetData() {
        this.Loading = true;
        this.apipost(
          "travelcontract_post_GetDiscountProtocol", 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.GuestName = tempObj.GuestName;
            } else {
              this.Error(res.data.message);
            }
          },
          err => {}
        );
      },
      //保存保密协议
      saveData() {
        this.SaveLoading = true;
        this.apipost(
          "travelcontract_post_SetDiscountProtocol", 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: "clientProtocol",
        };
        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>