<template>
	<div class="tracking-iframe-container">
		<el-skeleton :loading="!iframeUrl" animated :rows="5">
			<template #default>
				<div class="adapt-iframe">
					<iframe :src="iframeUrl" frameborder="0"></iframe>
				</div>
			</template>
		</el-skeleton>
	</div>
</template>

<script>
	export default {
		props: {
			processInstanceId: { type: String, default: "" }
		},

		data() {
			return {
				params: {
          			showContents: "showActivityList,showFlow", // 处理历史: showActivityList,流程图
					source: "jsf",
					tenantId: null, // 租户Id
					local_token: null
				},

				iframeUrl: null
			}
		},

		methods: {
			iframeParams() {
				let params = `/portal-products/pmpp/flow-component/process-instance-view/index.html?processInstanceId=${this.processInstanceId}`;
				for (const key in this.params) {
					params += `&${key}=${this.params[key]}`;
				}
				return params;
			},

			async getToken() {
				try {
					if (!this.params.local_token || !this.params.tenantId) {
						const res = await this.$API.auth.gldMaster.getToken();
						this.params.local_token = res.token;
						this.params.tenantId = res.tenantId;
						this.iframeUrl = res.host + this.iframeParams();
					}
				} catch (error) {
					this.params.local_token = null;
					this.params.tenantId = null;
					this.iframeUrl = null;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.tracking-iframe-container {
  width: 100%;
  height: calc(
    100vh - 2 * var(--el-dialog-margin-top) - 4 *
      var(--el-dialog-padding-primary) - 60px
  );

  .adapt-iframe {
    height: calc(100% + 220px);

    iframe {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
}
</style>