<template>
 <el-dialog
			ref="dialog"
			v-dialogDrag
			v-if="isShowDisplay"
			:visible.sync="isShowDisplay"
			center class="preview"
			:show-close="false"
			destroy-on-close 
      title="交易快照"
			width="80%"
			:fullscreen="isShowFull"
			@close="handleClose"
      :modal-append-to-body="false"
      :append-to-body="true" 
		>
		<div slot="title" class="preview-title-wrap">
				<div class="preview-title">交易快照</div>
				<div class="btn-wrap">
					<i v-if="!isShowFull" class="el-icon-full-screen icon-sty" style="margin-right: 10px;" @click="fullScreen"></i>
					<i v-else class="el-icon-copy-document icon-sty" style="margin-right: 10px;" @click="noFullScreen"></i>
					<i class="el-icon-close icon-sty" @click="previewVisible = false"></i>
				</div>
			</div>

			<div  style="height: 100%;">
				<iframe :src="srcpth" frameborder="0"  width="100%"></iframe>
			</div> 
      <div class="btn-wrap">
          <c-button size="small" @click="handleClose" type="primary" style="margin-left: 10px">返回</c-button>
        </div>
		</el-dialog>
</template>
    
<script>
import Trnrel from "../model";
import Api from "~/service/Api";
import event from "../event";
import commonFunctions from "~/mixin/commonFunctions.js";
import MtView from "~/components/business/MtView";
import { log } from "util";
import { display } from "~/service/business/file";

export default {
  inject: ["root"],
  name: "displayDialog",
  props: {
		parentsVisiable: {
			type: Boolean,
			default: false
    },
    displayModel: {
      type: Object,
      default: () => {}
    },
	},
  mixins: [event, commonFunctions],
  components: { MtView},
  data() {
    return {
      isShowFull: false,
      isShowDisplay:false,
      srcpth:"",
      trninr:"",
      inifrm:"",
      trn: {},
      flg: [],
      atptxt: "",
      relstaEN: "",
			usgtxt: "",
			textContext:"",
			previewType:"",
      suppress:"",
      formatData:{}
    };
  },
  mounted() {
  },
  created(){
  },
  watch: {
		isShowDisplay(newVal) {
			if (newVal) {
        this.srcpth=location.origin+`/display/${this.inifrm}?inr=${this.trninr}&businessType=TRN`
			}
		}
  },
  methods: {
     fullScreen () {
			this.isShowFull = true
		},
		noFullScreen () {
			this.isShowFull = false
		},
    handleClose(){
        this.isShowDisplay = false
    },
  }
};
</script>
<style scoped lang="less">
.preview /deep/ .el-dialog--center .el-dialog__body {
  width: 100%;
  height: calc(100% - 54px);
}

.preview /deep/ .el-dialog--center .el-dialog__body > div {
  height: 100%;
}
.preview-title-wrap {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.preview-title {
		width: 50%;
		text-align: left;
		color: #fff;
	}
	.btn-wrap {
		width: 50%;
		text-align: right;
		color: #fff;
		.icon-sty {
			font-size: 18px;
			cursor: pointer;
		}
		.icon-sty:hover {
			color: #6653f2;
		}
	}
}

.messageLabel {
	/deep/ .el-form-item__label {
		text-align: left;
		font-weight: bold;
		font-size: 15px;
		color: #1561e0;
		width: auto !important;
	}
}
#business_container {
	.eContainer {
		.c-page-container-div {
			.eibs-tab {
				/deep/ .el-form {
					height: calc(100% - 64px)!important;
				}
			}
		}
	}
}
.eibs-tab {
	/deep/ .el-divider--horizontal {
		margin-top: 10px;
	}
	/deep/ .el-form-item__label {
		text-align: left;
		font-weight: bold;
	}
	/deep/ .el-col {
		.el-divider--horizontal {
			margin-top: 5px;
		}
	}
	/deep/ .el-form {
		overflow: auto!important;
		margin-bottom: 0!important;
		.el-form-item {
			margin-bottom: 10px;
		}
	}
	.btn-wrap {
		padding: 10px 0px;
		display: flex;
		justify-content: center;
		background: #fff;
		box-shadow: var(--box-shadow);
	}
}
.fot{
  position: fixed;
  bottom: 0;
  width: 100%;
  line-height: var(--footer-height);
  color: #fff;
}
</style>