<template>
	<div class="eContainer">
    <div style="float:right;position:relative;z-index:99;display:inline-block;">
      <el-button @click="print" style="margin-right:1em;" type="primary">打印</el-button>
    </div>
		<el-tabs type="card" v-model="tabName">
			<el-tab-pane  :label="`ISO ${formatData.mxType} 报文要素`" :name="`isoformat`" style="overflow:auto">
            <div class="printEm" :ref="`formatDiv`" style="line-height:1.5em">
                <table class="ejs_view_table">
                  <colgroup>
                    <col style="width:50%"/>
                    <col style="width:50%"/>
                  </colgroup>
                  <tr class="ejs_view_head"><td :colspan="2">Message Head Information</td></tr>
                  <tr :key="index" v-for="(tagDesp,index) in formatData.tagDespList" :class="{'ejs_view_head':tagDesp.tag == '#BODY#'}">
                    <td :colspan="tagDesp.tag == '#BODY#'?2:1" >
                      <p :style="{'marginLeft':tagDesp.lvl+'em'}" v-html="tagDesp.tag == '#BODY#'?'Message Body':tagDesp.desp"></p>
                      </td>
                    <td v-if="tagDesp.value != '#BODY#'"> 
                        <p v-html='tagDesp.value == "[Object]" ?" ":tagDesp.value || " "'>
                        </p>
                      </td>
                  </tr>
                </table>
            </div>
      </el-tab-pane>
      <el-tab-pane :label="`ISO ${formatData.mxType} 原报`" :name="`isosource`" style="overflow:auto">
          <div :ref="`sourceDiv`" style="line-height:1.5em">
              <pre >{{formatData.message}}</pre>
          </div>
      </el-tab-pane>
      <el-tab-pane :label="`MT ${item.mt} 格式化文本`" :name="`mtformat`" style="overflow:auto">
				<div :ref="`formatDiv`" class="printEm" style="line-height:1.5em;font-family:Courier New;color:black;">
          <h3 v-if="item.validateMessage" style="color:red" v-html="item.validateMessage"> </h3>
					<table class="ejs_view_table" style="font-family:Courier New;color:black;">
						<!-- <el-divider>
							<b>Message Header</b>
						</el-divider> -->
            <el-row v-if="item.sndtime">
							<!-- <h2 style="text-align:center">{{formatData.mtdesp}}</h2> -->
							<!-- <br/> -->
							<el-col :offset="0" :span="5" class="mtFontSize0">Sent</el-col>
							<el-col :span="2" style="padding-left:1em" class="mtFontSize0">
								<b>:ID:</b>
							</el-col>
							<el-col :span="17" class="mtFontSize">
								<b v-html="formatContent(item.sndtime)"></b>
							</el-col>
						</el-row>
            <el-row v-if="item.rcvtime">
							<!-- <h2 style="text-align:center">{{formatData.mtdesp}}</h2> -->
							<!-- <br/> -->
							<el-col :offset="0" :span="5" class="mtFontSize0">Received</el-col>
							<el-col :span="2" style="padding-left:1em" class="mtFontSize0">
								<b>:OD:</b>
							</el-col>
							<el-col :span="17" class="mtFontSize">
								<b v-html="formatContent(item.rcvtime)"></b>
							</el-col>
						</el-row>
						<el-row>
							<!-- <h2 style="text-align:center">{{formatData.mtdesp}}</h2> -->
							<!-- <br/> -->
							<el-col :offset="0" :span="5" v-if="item.dir === '>'" class="mtFontSize0">Correspondents BIC / TID</el-col>
							<el-col :offset="0" :span="5" v-else class="mtFontSize0">Own Bic / TID</el-col>
							<el-col :span="2" v-if="item.dir === '>'" style="padding-left:1em" class="mtFontSize0">
								<b>:IO:</b>
							</el-col>
              <el-col :span="2" v-else style="padding-left:1em" class="mtFontSize0">
								<b>:II:</b>
							</el-col>
							<el-col :span="17" class="mtFontSize">
								<b v-html="formatContent(item.rcvbic)"></b>
							</el-col>
						</el-row>
						<el-row>
							<el-col :offset="0" :span="5" v-if="item.dir === '>'" class="mtFontSize0">Own Bic / TID</el-col>
							<el-col :offset="0" :span="5" v-else class="mtFontSize0">Correspondents BIC / TID</el-col>
							<el-col :span="2" v-if="item.dir === '>'" style="padding-left:1em" class="mtFontSize0">
								<b>:II:</b>
							</el-col>
              <el-col :span="2" v-else style="padding-left:1em" class="mtFontSize0">
								<b>:IO:</b>
							</el-col>
							<el-col :span="17" class="mtFontSize">
								<b v-html="formatContent(item.sndbic)"></b>
							</el-col>
						</el-row>
						<el-row>
							<el-col :offset="0" :span="5" class="mtFontSize0">SWIFT Message Prority</el-col>
							<el-col :span="2" style="padding-left:1em" class="mtFontSize0">
								<b>:MP:</b>
							</el-col>
							<el-col :span="17" class="mtFontSize">
								<b>{{item.lvl}} </b>
							</el-col>
						</el-row>
						<el-row>
							<el-col :offset="0" :span="5" class="mtFontSize0">SWIFT Message Type</el-col>
							<el-col :span="2" style="padding-left:1em" class="mtFontSize0">
								<b>:MT:</b>
							</el-col>
							<el-col :span="17" class="mtFontSize">
								<b>{{item.mt+" "+item.mtdesp}} </b>
							</el-col>
						</el-row>
            <el-row v-if="item.block3_108">
							<!-- <h2 style="text-align:center">{{formatData.mtdesp}}</h2> -->
							<!-- <br/> -->
							<el-col :offset="0" :span="5" class="mtFontSize0">Optional Message User Reference</el-col>
							<el-col :span="2" style="padding-left:1em" class="mtFontSize0">
								<b>:108:</b>
							</el-col>
							<el-col :span="17" class="mtFontSize">
								<b v-html="item.block3_108"></b>
							</el-col>
						</el-row>
            <el-row v-if="item.block3_111">
							<!-- <h2 style="text-align:center">{{formatData.mtdesp}}</h2> -->
							<!-- <br/> -->
							<el-col :offset="0" :span="5" class="mtFontSize0">Service Type Identifier</el-col>
							<el-col :span="2" style="padding-left:1em" class="mtFontSize0">
								<b>:111:</b>
							</el-col>
							<el-col :span="17" class="mtFontSize">
								<b v-html="item.block3_111"></b>
							</el-col>
						</el-row>
            <el-row v-if="item.block3_121">
							<!-- <h2 style="text-align:center">{{formatData.mtdesp}}</h2> -->
							<!-- <br/> -->
							<el-col :offset="0" :span="5" class="mtFontSize0">Unique End-to-End Transaction Reference</el-col>
							<el-col :span="2" style="padding-left:1em" class="mtFontSize0">
								<b>:121:</b>
							</el-col>
							<el-col :span="17" class="mtFontSize">
								<b v-html="item.block3_121"></b>
							</el-col>
						</el-row>
						<!-- <el-divider>
							<b>Message Body</b>
						</el-divider> -->

						<el-row :key="index" v-for="(tagDesp,index) in item.tagDespList">
							<el-col :span="5">
								<span style="word-break: break-word;" class="mtFontSize0" v-html="tagDesp.desp"></span>
							</el-col>
							<el-col :span="2" style="padding-left:1em" class="mtFontSize0">
								<b>:{{tagDesp.tag}}:</b>
							</el-col>
							<el-col :class="{fulltag:isFullTag(tagDesp)}" :span="17" class="mtFontSize">
								<!-- 用空格占一下高度-->
								<div>
									<b v-html="formatContent(tagDesp.value || ' ')"></b>
								</div>
							</el-col>
						</el-row>

						<el-row v-if="item.acktxt != null">
                <el-col :offset="0" :span="5" class="mtFontSize0">Trailer</el-col>
                <el-col :span="2" style="padding-left:1em" class="mtFontSize0">
                  <b>-</b>
                </el-col>
                <el-col :span="17" class="mtFontSize">

                </el-col>
						</el-row>
						<el-row v-if="item.acktxt != null">
              <!-- <p style="font-size:18px;"><b>ACK</b></p> -->
							<el-col class="mtFontSize">
								<b v-html="item.acktxt"></b>
							</el-col>
						</el-row>
					</table>
          <br/>
          <div id="swtExpFooter">
            <p>printed by {{getPrintUser()}} on {{printTime}}</p>
          </div>
				</div>
			</el-tab-pane>
			<el-tab-pane :label="`MT ${item.mt} 原报`" :name="`mtsource`" style="overflow:auto">
				<div class="sourceDiv" :ref="`sourceDiv`" style="line-height:1.5em;font-family:Courier New;color:black;">
					<p v-for="(line,index) in item.message.split(/\r?\n/g)" :key="index">
            <b>{{line}}</b>
          </p>
				</div>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>
<script>
import moment from "moment";
import Api from "~/service/Api";
// import html2pdf from "html2pdf.js";
export default {
  props: ["formatData"],
  data() {
    return {
      tabName: "isoformat",
      printTime: ""
    };
  },
  methods: {
    base64ToBlob(code) {
      code = code.replace(/[\n\r]/g, "");
      const raw = window.atob(code);
      const rawLength = raw.length;
      const uInt8Array = new Uint8Array(rawLength);
      for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
      }
      return new Blob([uInt8Array], { type: "application/pdf" });
    },
    async print() {
      let res = null;
      if (this.tabName === "isoformat") {
        res = await Api.post(`/public/quesel/getPdf`, {
          format: "iso",
          formatData: this.formatData.tagDespList
        });
      } else if (this.tabName === "isosource") {
        res = await Api.post(`/public/quesel/getPdf`, {
          format: "isosource",
          data: this.formatData.message
        });
      } else if (this.tabName === "mtformat") {
        res = await Api.post(
          `/public/quesel/showSwiftPdf`,
          this.formatData.swfMessageObject
        );
      } else if (this.tabName === "mtsource") {
        res = await Api.post(`/public/quesel/showPureSwiftPdf`, {
          mtdesp: this.formatData.swfMessageObject.mtdesp,
          message: this.formatData.swfMessageObject.message
        });
      }
      if (res != null && res.respCode === SUCCESS) {
        let blob = this.base64ToBlob(res.data.data);
        const fileURL = URL.createObjectURL(blob);
        let iframe = document.createElement("iframe");
        iframe.id = this.tabName;
        iframe.src = fileURL;
        iframe.type = "application/pdf";
        iframe.style.display = "inline-block";
        iframe.style.width = "1px";
        iframe.style.height = "1px";
        iframe.style.position = "absolute";
        iframe.style.top = "-100px";
        iframe.onload = function() {
          iframe.contentWindow.print();
        };
        document.body.appendChild(iframe);
      } else {
        this.$notify.warning({
          title: "提示",
          message: "打印调起失败！"
        });
      }
    },
    formatContent(content) {
      return "<p>" + (content || " ").replace(/\r?\n/g, "</p><p>") + "</p>";
    },
    getPrintUser() {
      return window.sessionStorage.userName;
    },
    isFullTag(tagDesp) {
      return false;
    }
  },
  computed: {
    noPrint() {
      return (
        this.$store.state.Status.mode === "display" &&
        this.$route.query.noPrint == "Y"
      );
    },
    item() {
      return this.formatData.swfMessageObject;
    }
  }
};
</script>
<style lang="less">
@media print {
  div.printEm {
    display: inline-block;
    width: 100%;
    font-family: "Times New Roman", Arial, sans-serif;
    line-height: 1.5em !important;
    color: black;
  }

  div.sourceDiv {
    line-height: 1.5em !important;
  }

  .ejs_view_table {
    font-family: "Times New Roman", Arial, sans-serif;
  }

  .fulltag {
    width: 100% !important;
  }

  .mtFontSize {
    font-size: 13px !important;
  }
  .mtFontSize0 {
    font-size: 12px !important;
  }
  b p {
    margin-top: 0px;
    margin-bottom: 0.5px !important;
  }
}
b p {
  margin-top: 0px;
  margin-bottom: 0.5px !important;
}
td p {
  margin-top: 0px;
  margin-bottom: 0px !important;
}
#swtExpHeader {
  display: none;
  justify-content: space-between;
  top: 0;
  left: 0;
  width: 100% !important;
}
#swtExpFooter {
  display: none;
  justify-content: space-between;
  bottom: 0;
  left: 0;
  width: 100% !important;
  line-height: 1em !important;
  font-size: 0.8em;
}
#swtExpPageNumber:before {
  content: counter(page);
}
#swtExpPageCount:before {
  content: counter(pages);
}
.mtFontSize {
  font-size: 16px;
}
.mtFontSize0 {
  font-size: 14px;
  word-break: break-word;
}
.fulltag {
}
.ejs_view_table {
  width: 80%;
  table-layout: fixed;
  margin-left: 10%;
  font-family: "Times New Roman", Arial, sans-serif; //默认给它有边线的新罗马体
}
.ejs_view_table td {
  border: 1px solid #555 !important;
  word-break: break-all;
  padding: 0.1rem 1rem;
}
.ejs_view_head {
  font-size: 1.2em;
  font-weight: bolder;
  background-color: #ddd;
  font-family: "Times New Roman", Arial, sans-serif;
}
</style>