<template>
  <div>
    <template>
      <span
        v-if="ConfirmationDetails.OperationState === -1 || ConfirmationDetails.OperationState === 2"
        class="confirmationOrderNormalBtn"
        @click="SetOrderConfirmation()"
      >申请</span>
      <!--       v-if="ConfirmationDetails.OperationState === 1" -->
      <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">
              <!-- <input v-if='!isPrint' class="wp100" v-model="list.CustomerName" type="text">
              <span  v-if='isPrint'>{{list.CustomerName}}</span>-->
              <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>
                <!-- && !isSave -->
                <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;">
              <!-- <img
                :src="'data:image/jpeg;base64,'+list.ImagePath"
                style="position: absolute; left: 10px; top: 10px;"
              > -->
              时间：{{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>
					<!-- && !isSave -->
					<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>
  </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.printShow = false
    //			setTimeout(() => {
    //				this.getPdf(title,() => {
    //					this.printShow = true
    //				})
    //			}, 0)
    //		},
    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+parseInt(Math.random()*1000)
                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>