<script>
import { computed } from 'vue'

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

    // 获取 header 和 sidebar 的内容, 重置参数状态
    this.dify.params.header = header || '0'
    this.dify.params.sidebar = sidebar || '0'
    this.dify.params.publish = publish || '0'
  },
  watch: {
    '$route.query': {
      handler() {
        // 获取 header 和 sidebar 的内容, 重置参数状态
        const { id, header, sidebar, publish } = this.$route.query
        this.dify.params.header = header || '0'
        this.dify.params.sidebar = sidebar || '0'
        this.dify.params.publish = publish || '0'

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

          this.dify.src = `/app/${id}/workflow?${this.params}`
          this.dify.isVisible = true
        } else {
          this.dify.isVisible = false
        }
      },
      deep: true
    }
  }
}
</script>

<template>
  <div class="container">
    <el-card :body-style="{ padding: 0 }" shadow="hover">
      <iframe v-if="dify.isVisible" ref="dify" :src="dify.src" frameborder="0" style="width: 100%; height: 85vh;" />
      <el-empty v-else />
    </el-card>
  </div>
</template>