<template>
	<div v-loading="loading" class="tracking-iframe">
		<template v-if="iframeUrl">
			<iframe :src="iframeUrl" frameborder="0"></iframe>
		</template>
	</div>
</template>

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

		data() {
			return {
				loading: false,
				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) {
						this.loading = true;
						const res = await this.$API.auth.gldMaster.getToken();
						this.loading = false;
						this.params.local_token = res.token;
						this.params.tenantId = res.tenantId;
						this.iframeUrl = res.host + this.iframeParams();
					}
				} catch (error) {
					this.loading = false;
					this.params.local_token = null;
					this.params.tenantId = null;
					this.iframeUrl = null;
				}
			}
		}
	}
</script>

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

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