<script>
import { DIFY_URL } from '@/config/base-url'
export default {
  name: 'workflow',
  props: {
    thirdAppId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isLoading: true,
      worker: {
        instance: void 0
      },
      messageChannel: {
        instance: void 0
      },
      agent: {
        // 默认不展示 header 和 sidebar
        params: {
          sidebar: '0',
          header: '0',
          publish: '0'
        },
        isVisible: false,
        // agent 的 workflow 地址格式 http://localhost:3000/agent/app/235427ea-803b-482b-bdff-dd717801ca76/workflow
        //  app 是展示所有的内容
        src: `${DIFY_URL}/app/235427ea-803b-482b-bdff-dd717801ca76/workflow`
      }
    }
  },
  computed: {
    params() {
      const _params = []
      Object.keys(this.agent.params).forEach(key => {
        _params.push(`${key}=${this.agent.params[key]}`)
      })
      return _params.join('&')
    }
  },
  // http://192.168.3.229:3000/apps
  created() {
    // 检测是否存在 workflow id ， 如果不存在则不展示内容
    const { header, sidebar, publish } = this.$route.query
    const { thirdAppId } = this.$route.params
    if (thirdAppId) {
      this.agent.src = `${DIFY_URL}/app/${thirdAppId}/workflow?${this.params}`
      this.agent.isVisible = true
    }

    // 获取 header 和 sidebar 的内容, 重置参数状态
    this.agent.params.header = header || '0'
    this.agent.params.sidebar = sidebar || '0'
    this.agent.params.publish = publish || '0'

    if (this.thirdAppId) {
      this.agent.src = `${DIFY_URL}/app/${this.thirdAppId}/workflow?${
        this.params
      }`
      this.agent.isVisible = true
    }

    //   启用 web worker 和 dify 进行通信
    this.worker.instance = new Worker('/js/message-channel.js')
    this.messageChannel.instance = new MessageChannel()

    // 递交 messageChannel port2的所有权
    this.worker.instance.postMessage('init-worker', [
      this.messageChannel.instance.port2
    ])
  },
  destroyed() {
    //  组件销毁时清除 web worker 和 messageChannel
    this.worker.instance.terminate()
    this.worker.instance = void 0
    this.messageChannel.instance.port1.close()
    this.messageChannel.instance = void 0
  },
  watch: {
    '$route.query': {
      handler() {
        // 获取 header 和 sidebar 的内容, 重置参数状态
        const { thirdAppId } = this.$route.params
        const { header, sidebar, publish } = this.$route.query
        this.agent.params.header = header || '0'
        this.agent.params.sidebar = sidebar || '0'
        this.agent.params.publish = publish || '0'

        // 当路由参数 id 变化时，更新 dify 的 src
        if (thirdAppId) {
          console.log(`current params:`, this.agent.params)

          this.agent.src = `${DIFY_URL}/app/${thirdAppId}/workflow?${
            this.params
          }`
          this.agent.isVisible = true
        } else {
          this.agent.isVisible = false
        }
      },
      deep: true
    }
  },
  methods: {
    handleAgentLoad() {
      // 把 messageChannel port1 的所有权传递给 iframe
      this.$refs.agent.contentWindow.postMessage('init-iframe', '*', [
        this.messageChannel.instance.port1
      ])
      // 隐藏 loading
      this.isLoading = false
    }
  },
  mounted() {}
}
</script>

<template>
  <div class="render-container" v-loading="isLoading">
    <iframe
      @load="handleAgentLoad"
      ref="agent"
      :src="agent.src"
      frameborder="0"
      style="width: 100%; height: 100%;border-radius: 50px"
    />
  </div>
</template>
