<template>
  <div>
    <template>
      <span v-if="ConfirmationDetails.OperationState === -1 || ConfirmationDetails.OperationState === 2"
        class="confirmationOrderNormalBtn" @click="SetOrderConfirmation()">申请</span>
      <span v-if="ConfirmationDetails.OperationState === 1" class="confirmationOrderNormalBtn"
        @click="toPDF('旅游行程确认件')">下载PDF</span>
      <span class="confirmationOrderNormalBtn confirmationOrderNormalBtn2"
        v-if="ConfirmationDetails.OperationState === 2" @click="outerVisible = true">修改账户</span>
    </template>
    <div style="width: 800px; margin: 10px auto 0;" id="pdfDom">
      <div v-if="ConfirmationDetails.ConfirmationContent" v-html="ConfirmationDetails.ConfirmationContent"></div>
      <div class="confirmationOrder" v-else>
        <p class="f22 center" style="margin: 20px 0 0 0;">{{list.CompanyTitle}}</p>
        <p class="f22 center">旅游行程确认件</p>
        <p class="f14" style="text-indent: 36px;">
          经甲乙双方友好协商，现甲方委托乙方承办甲方所组旅游团队/散客的游览事宜，达成如下协议，烦请仔细审核，核实无误后烦请签字盖章回传确认件（本确认件现为业务合同，传真件具有同等法律效力）。</p>
        <table class="confirmationOrderTable" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="20" rowspan="3">甲方</td>
            <td width="170" rowspan="3">委托社名称及许可证号</td>
            <td width="160" rowspan="3">
              <span class="__input" :contenteditable="true">{{list.CustomerName}}</span>
            </td>
            <td width="80" rowspan="3">经办人</td>
            <td width="80" rowspan="3">
              <span class="__input" :contenteditable="true">{{list.Contact}}</span>
            </td>
            <td width="60">电话</td>
            <td width="110">
              <span class="__input" :contenteditable="true">{{list.ContactNumber}}</span>
            </td>
          </tr>
          <tr>
            <td>传真</td>
            <td>
              <span class="__input" :contenteditable="true">{{cz}}</span>
            </td>
          </tr>
          <tr>
            <td>邮箱</td>
            <td>
              <span class="__input" :contenteditable="true">{{yx}}</span>
            </td>
          </tr>
          <tr>
            <td rowspan="3">乙方</td>
            <td rowspan="3">受托社名称及许可证号</td>
            <td rowspan="3">{{list.CompanyTitle}}</td>
            <td rowspan="3">经办人</td>
            <td rowspan="3">
              <span class="__input" :contenteditable="true">{{list.EmName}}</span>
            </td>
            <td>电话</td>
            <td>
              <span class="__input" :contenteditable="true">{{list.EmMobile}}</span>
            </td>
          </tr>
          <tr>
            <td>传真</td>
            <td>
              <span class="__input" :contenteditable="true">{{cz1}}</span>
            </td>
          </tr>
          <tr>
            <td>邮箱</td>
            <td>
              <span class="__input" :contenteditable="true">{{yx1}}</span>
            </td>
          </tr>
          <tr>
            <td colspan="3">旅游线路：{{list.LineName}}</td>
            <td colspan="4">团号：{{list.TCNUM}}</td>
          </tr>
          <tr>
            <td colspan="7">时间：{{list.StartDate}}-{{list.EndDate}}&nbsp;&nbsp;&nbsp;{{list.DayNum}}天{{list.NightNum}}晚
            </td>
          </tr>
          <tr>
            <td colspan="3">出境地：{{list.StartCity}}</td>
            <td colspan="4">入境地：{{list.ReturnCity}}</td>
          </tr>
          <tr>
            <td colspan="3">
              参团人数：
              <span class="__input">{{list.GuestNum}}</span>
              大：
              <span class="__input">{{list.ManNum}}</span>
              小:
              <span class="__input">{{list.ChildNum}}</span>
            </td>
            <td colspan="4">
              客户姓名：
              <span class="__input">{{list.ClientName}}</span>
            </td>
          </tr>
          <tr>
            <td colspan="2">费用包含：</td>
            <td colspan="5">
              <span class="__input" :contenteditable="true">{{list.CostInclude}}</span>
            </td>
          </tr>
          <tr>
            <td colspan="2">行程：</td>
            <td colspan="5">在不影响行程标准的情况下，具体行程安排以出团通知为准。</td>
          </tr>
          <tr>
            <td colspan="3">
              结算价格：
              <span class="__input">{{list.SettlePrice}}</span>
              <br>合计：
              <span class="__input">{{list.PreferPrice}}</span>
            </td>
            <td colspan="4">
              结算方式：
              <span class="__input" :contenteditable="true">{{list.PayType}}</span>
            </td>
          </tr>
          <tr>
            <td colspan="3">
              预付款金额:
              <span class="__input" :contenteditable="true">{{list.PrepaidMoney}}</span>
            </td>
            <td colspan="4">
              <div style="float: left; margin-bottom:30px;">支付时间：</div>
              <div>确认件双方签字栏生效时间后三个工作日完成预付款的支付。（预付款包含：机位舱位预定费、签证/签注费、公证费等）</div>
            </td>
          </tr>
          <tr>
            <td colspan="3">
              尾款金额:
              <span class="__input" :contenteditable="true">{{list.RetainageMoney}}</span>
            </td>
            <td colspan="4">
              <div style="float: left; margin-bottom: 30px;">支付时间：</div>
              <div>出团前七个工作日完成尾款支付。（甲方未及时付清尾款，造成乙方无法接待，甲方已付订金不予退回及所产生的后果由甲方承担）</div>
            </td>
          </tr>
          <tr>
            <td colspan="7" :id="isSave ? 'selectBox' : ''">
              <p>
                <span>甲方同意本订单所有费用在出发前支付到乙方指定账户:</span>
                <el-select v-if="printShow===true" class="wp40 accountList" v-model="accountNum" @change="accountChange"
                  placeholder="请选择">
                  <el-option v-for="(item,index) in accountList" :key="index" :label="item.BankSubName" :value="index">
                  </el-option>
                </el-select>
              </p>
              <p class="fnormal">
                户名:
                <span class="__input" :contenteditable="true">{{accountInfo.BankName}}</span>
              </p>
              <p class="fnormal">
                开户行名称:
                <span class="__input" :contenteditable="true">{{accountInfo.BankSubName}}</span>
              </p>
              <p class="fnormal">
                帐号:
                <span class="__input" :contenteditable="true">{{accountInfo.BankNum}}</span>
              </p>
            </td>
          </tr>
          <tr>
            <td colspan="3">提交资料内容：</td>
            <td colspan="4">提交资料时间：{{list.SendVisaTime}}</td>
          </tr>
          <tr height="120">
            <td colspan="2" align="center">
              甲方
              <br>确认章并签字：
            </td>
            <td valign="bottom">时间：</td>
            <td colspan="2" align="center">
              乙方
              <br>确认章并签字：
            </td>
            <td valign="bottom" colspan="2" style="position: relative;">
              时间：{{list.Date}}
            </td>
          </tr>
          <tr>
            <td colspan="7">
              <p>备注：以上确认件需完成双方确认章和签字视为生效！</p>
              <p style="text-indent: 43px;">如因同行未按照约定时间结清费用导致的任何问题有由同行全权负责！</p>
              <p style="text-indent: 43px;">如在此期间有任何纠纷，处理依据均参照《旅游合同》或《旅游法》相关规定执行！</p>
              <p style="text-indent: 43px;">
                本公司行程中赠送一份意外险，我司默认为贵司征得旅客同意，且认可保险金额及范围，并授权乙方购买该保险，如旅客认为该赠送意外险，保险范围不够全面，可另自行购买其它险种的保险。</p>
            </td>
          </tr>
        </table>
      </div>
    </div>
    <el-dialog custom-class="w450" title="修改账户" :visible.sync="outerVisible" center :before-close="closeChangeMachie">
      <p style="margin-bottom: 10px;">
        <span>账户:</span>
        <el-select class="wp40 accountList" v-model="accountNum" @change="accountChange()" placeholder="请选择">
          <el-option v-for="(item,index) in accountList" :key="index" :label="item.BankSubName" :value="index">
          </el-option>
        </el-select>
      </p>
      <p class="fnormal" style="margin-bottom: 10px;">
        户名:
        <span class="__input" :contenteditable="true">{{accountInfo.BankName}}</span>
      </p>
      <p class="fnormal" style="margin-bottom: 10px;">
        开户行名称:
        <span class="__input" :contenteditable="true">{{accountInfo.BankSubName}}</span>
      </p>
      <p class="fnormal" style="margin-bottom: 10px;">
        帐号:
        <span class="__input" :contenteditable="true">{{accountInfo.BankNum}}</span>
      </p>
      <div slot="footer" class="dialog-footer">
        <button class="hollowFixedBtn" @click="outerVisible=false">取消</button>
        <button class="normalBtn" @click="outerVisible = false">确定</button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        cz: "",
        cz1: "",
        yx: "",
        yx1: "",
        isPrint: false,
        printShow: true,
        list: {},
        bank: {},
        accountNum: 0,
        accountList: [],
        accountInfo: {
          BankName: "111",
          BankSubName: "222",
          BankNum: "333"
        },
        ConfirmationDetails: {},
        BankSubName: "",
        isSave: false,
        outerVisible: false,
      };
    },
    mounted() {
      this.apipost(
        "sellorder_get_GetConfirmationInfoForFinance", {
          OrderId: this.$route.query.id
        },
        res => {
          if (res.data.resultCode === 1) {
            this.accountList = res.data.data;
            this.accountChange(0);
            // 获取确认函状态等信息
            this.getConfifmationDetails();
          } else {
            this.$message.error("账户信息获取失败");
          }
        },
        err => {}
      );
      this.apipost(
        "sellorder_get_GetOrderConfirmationInfo", {
          OrderId: this.$route.query.id
        },
        res => {
          if (res.data.resultCode == 1) {
            this.list = res.data.data;
          } else {
            this.$message.error(res.data.message);
          }
        },
        err => {}
      );
      this.apipost(
        "OnlinePay_post_GetPayConfigList", {
          OrderId: this.$route.query.id
        },
        res => {
          this.bank = res.data.data;
        },
        err => {}
      );
    },
    methods: {
      setHtml: function () {
        let dom = document.getElementById("selectBox")
        if (!dom) return
        let str = `<p>
									<span>甲方同意本订单所有费用在出发前支付到乙方指定账户:</span>
									<!-- && !isSave -->
								</p>
								<p class="fnormal">
									户名:
									<span class="__input" :contenteditable="true">${
                    this.accountInfo.BankName
                  }</span>
								</p>
								<p class="fnormal">
									开户行名称:
									<span class="__input" :contenteditable="true">${
                    this.accountInfo.BankSubName
                  }</span>
								</p>
								<p class="fnormal">
									帐号:
									<span class="__input" :contenteditable="true">${this.accountInfo.BankNum}</span>
								</p>`;
        document.getElementById("selectBox").innerHTML = str;
      },
      getConfifmationDetails: function () {
        this.apipost(
          "sellorder_post_GetOrderConfirmationDetails", {
            orderId: this.$route.query.id
          },
          res => {
            if (res.data.resultCode === 1) {
              let data = res.data.data;
              data.ConfirmationContent = data.ConfirmationContent ?
                JSON.parse(data.ConfirmationContent) :
                null;
              this.accountNum = data.BankIndexNum;
              this.ConfirmationDetails = data;
              this.accountChange();

              setTimeout(() => {

                if (data.OperationState === 1 || data.OperationState === 0 || this.$route.query.isShen) {
                  let ele = document.getElementsByClassName('__input')
                  for (var i = 0; i < ele.length; i++) {
                    ele[i].contentEditable = false
                  }
                }
                if (data.OperationState !== -1) {
                  this.setHtml();
                }
              }, 1000);
            } else {
              this.$message.error(res.data.message);
            }
          },
          null
        );
      },
      // 保存确认函
      SetOrderConfirmation: function () {
        this.isSave = true;
        this.printShow = false
        setTimeout(() => {
          let msg = {
            ID: this.ConfirmationDetails.ID,
            OrderId: this.$route.query.id,
            ConfirmationContent: JSON.stringify(
              document.getElementById("pdfDom").innerHTML
            ),
            OperationState: 0,
            BankIndexNum: this.accountNum
          };
          this.apipost(
            "sellorder_post_SetOrderConfirmation",
            msg,
            res => {
              if (res.data.resultCode == 1) {
                this.getConfifmationDetails();
              } else {
                this.$message.error(res.data.message);
              }
            },
            null
          );
        }, 500);
      },
      toPDF: function (title) {
        this.isPrint = true;
        this.$forceUpdate();
        setTimeout(() => {
          let pageData = document.getElementById("pdfDom").innerHTML;
          let urlObj = this.domainManager();
          this.$http({
              headers: {
                "Content-Type": "application/json"
              },
              method: "post",
              url: urlObj.DomainUrl + "/api/file/GetWebHtmlTwo",
              data: {
                msg: pageData,
                sign: "new_file"
              }
            })
            .then(res => {
              if (res.data.resultCode === 1) {
                setTimeout(() => {
                  let sign = title;
                  const a = document.createElement("a");
                  a.setAttribute("download", "");
                  a.setAttribute(
                    "href",
                    urlObj.DomainUrl +
                    "/api/file/DownloadFileForPdf?fileName=" +
                    sign +
                    ".pdf&&fPath=" +
                    res.data.data
                  );
                  a.click();
                  this.isPrint = false;
                }, 1000);
              } else {
                this.$message.error("PDF获取失败");
              }
              this.pdfLoading = false;
            })
            .catch(err => {

            });
        }, 500);
      },
      accountChange: function () {
        this.accountInfo.BankName = this.accountList[this.accountNum].BankName;
        this.accountInfo.BankSubName = this.BankSubName = this.accountList[
          this.accountNum
        ].BankSubName;
        this.accountInfo.BankNum = this.accountList[this.accountNum].BankNum;
        this.setHtml()
      },
      MaxMe(o) {
        if (window.navigator.userAgent.indexOf("Firefox") > -1) {
          o.style.height = o.scrollTop + o.scrollHeight + "px";
        } else {
          if (o.scrollTop > 0)
            o.style.height = o.scrollTop + o.scrollHeight + "px";
        }
      },
      closeChangeMachie(done) {
        //弹出框关闭初始化弹框内表单
        done();
      },
    }
  };

</script>

<style>
  @import "../assets/css/cssReset.css";

  .confirmationOrder {
    line-height: 18px;
  }

  .confirmationOrderNormalBtn {
    color: #fff;
    float: right;
    width: 60px;
    font-size: 14px;
    box-sizing: content-box;
    top: 10px;
    text-align: center;
    line-height: 30px;
    padding: 0 10px;
    display: block;
    height: 30px;
    background: #e95252;
    border: 1px solid #e95252;
    cursor: pointer;
    border-radius: 15px;
    position: absolute;
    left: 70%;
    margin-left: -30px;
  }

  .confirmationOrderNormalBtn2 {
    left: 78%;
  }

  .confirmationOrder {
    width: 800px;
    font-weight: bold;
    margin: auto;
    font-family: "宋体";
    letter-spacing: 1px;
  }

  .confirmationOrder>p {
    line-height: 26px;
  }

  .confirmationOrder .center {
    text-align: center;
  }

  .confirmationOrder .fnormal {
    font-weight: normal !important;
  }

  .confirmationOrder .f22 {
    font-size: 22px;
  }

  .confirmationOrder .f20 {
    font-size: 20px;
  }

  .confirmationOrder .f18 {
    font-size: 18px;
  }

  .confirmationOrder .f16 {
    font-size: 16px;
  }

  .confirmationOrder .f14 {
    font-size: 14px;
  }

  .confirmationOrder .w40 {
    width: 40px !important;
  }

  .confirmationOrder .wp40 {
    width: 40%;
  }

  .confirmationOrder .wp80 {
    width: 80%;
  }

  .confirmationOrder .wp100 {
    width: 100%;
  }

  .confirmationOrderTable {
    width: 800px;
    border: 1px solid #000;
  }

  .confirmationOrderTable tr td {
    background: #fff;
    font-size: 14px;
    padding: 3px 10px;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
  }

  .confirmationOrderTable tr:last-child td {
    border-bottom: none;
  }

  .confirmationOrderTable tr td:last-child {
    border-right: none;
  }

  .confirmationOrder input {
    display: inline-block;
    border: none;
    outline: none;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    font-family: "宋体";
    letter-spacing: 1px;
  }

  .accountList input {
    border-bottom: 1px solid #dcdfe6;
  }

  .__input {
    display: inline-block;
    min-width: 60px;
  }

</style>