<template>
  <div class="data-manage-container">
    <v-card class="iframe-card" elevation="2">
      <iframe
        ref="iframe"
        class="n8n-chat-iframe"
        :src="webhookUrl"
        frameborder="0"
        allowfullscreen
        referrerpolicy="no-referrer-when-downgrade"
        @load="handleIframeLoad"
      ></iframe>
      <div v-if="loading" class="loading-overlay">
        <v-progress-circular indeterminate color="primary" size="64"></v-progress-circular>
        <div class="mt-4 text--secondary">正在加载...</div>
      </div>
    </v-card>
  </div>
</template>

<script>
export default {
  name: 'dataManage',
  data () {
    return {
      webhookUrl: 'https://n8n.citupro.com/',
      loading: true
    }
  },
  methods: {
    handleIframeLoad () {
      // iframe 加载完成
      this.loading = false
    }
  }
}
</script>

<style lang="scss" scoped>
.data-manage-container {
  height: 100%;
  width: 100%;
  padding: 6px;
  background: #f0f2f5;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.iframe-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #ffffff;
  border-radius: 4px;
  position: relative;
}

.n8n-chat-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  z-index: 10;
}

// 如果 iframe 内容可以访问，可以通过以下方式注入样式
// 注意：这需要同源或 n8n Chat 支持样式注入
::v-deep iframe {
  // 调整 iframe 的显示效果
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  &::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
    cursor: pointer;

    &:hover {
      background: rgba(0, 0, 0, 0.25);
    }
  }
}
</style>
