<template>
	<sc-dialog class="sc-approve-iframe" v-model="visible" fullscreen :modal="false" @closed="$emit('closed')">
		
	    <user-dept v-if="dialog" ref="userDept" @closed="hideUserdept"></user-dept>

        <template v-if="!dialog && host">
			<iframe :src="host + iframeParams" frameborder="0"></iframe>
		</template>
	</sc-dialog>
</template>

<script>
    import userDept from "./userDept";

	export default {
		emits: ["success", "closed"],
        components: {
            userDept
        },

		data() {
			return {
				visible: false,
				dialog: false,

				mode: "",
				host: "",
                dataContext: {
                    startorOrgName: null
                },
				params: {
					variables: "%5B%5D", // []
					source: "jsf",
					themeColor: "%23D70C18", // 主题色: #D70C18
					formId: "", // 业务注册流程时会有对应code标识
					// startUserId: "", // 发起流程用户Id: 5600144
					mgtGroupId: "", // 发起流程业务对应组织Id
					tenantId: "", // 租户Id
					token: ""
				}
			}
		},

		computed: {
			iframeParams() {
				let params = "/portal-products/pmpp/flow-component/process-start-up/index.html?";
				for (const key in this.params) {
					if (key == "token") params += `&local_token=${this.params[key]}`;
					else params += `&${key}=${this.params[key]}`;
				}
				return params;
			}
		},

		mounted() {
			window.addEventListener("message", ({ origin, data: { code, data } }) => {
				if (this.host && origin.includes(this.host)) {
					if (code == "processStartUp.cancel") this.visible = false; // 取消
					if (code == "processStartUp.confirm") { // 确定
						this.visible = false;
						this.$emit("success", data, this.dataContext);
					}
				}
			});
		},
		
		methods: {
			// 显示
			open(mode = "purchase") {
				this.mode = mode;
				this.visible = true;
				return this;
			},

			setData() {
				Promise.all([                    
                    this.$API.auth.gldMaster.getUserDeptList({ phone: this.$TOOL.data.get("USER_INFO").phone }),
					this.$API.auth.gldMaster.getToken(),
					this.$API.auth.gldMaster.getFormId({ busType: this.mode }).catch(() => this.params.formId)
				]).then(([dept, res, formId]) => {
                    if (dept.length == 1) this.dataContext.startorOrgName = dept[0].name;
                    else {
                        this.dialog = true;
                        this.$nextTick(() => this.$refs.userDept.open(dept));
                    }

					this.host = res.host;
					
					this.params.formId = formId;
					for (const key in this.params) {
						if (res[key]) this.params[key] = res[key];
					}
				}).catch(() => {
					this.visible = false;
                    this.dataContext.startorOrgName = null;
					this.host = "";
				});
			},

            hideUserdept(e) {
                this.dialog = false;
                
                if (e) this.dataContext.startorOrgName = e;
                else {
					this.visible = false;
                    this.dataContext.startorOrgName = null;
                }
            }
		}
	}
</script>

<style lang="scss" scoped>
.sc-approve-iframe:deep(.el-dialog) {
  padding: 0;
  background: transparent;

  > .el-dialog__header,
  > .el-dialog__footer {
    display: none;
  }

  > .el-dialog__body {
    height: 100%;
    padding: 0;

    .sc-dialog__body {
      height: 100%;

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