const { createApp } = Vue;


const treeNode = {
  name: 'tree-node',
  props: {
    node: {
      type: Object,
      default: []
    }
  },
  template: `
    <div class="w-full pb-[4px]">
      <div class="node" @click.stop="toggle(node)">
          <div v-if="node.folderFlag" @click.stop="toggle(node)" :style="{backgroundColor:selectId === node.uuid?'#E4EFFF':''}" class="h-32px flex items-center cursor-pointer rounded-[6px] hover:bg-[#E4EFFF]">
            <i v-if="isExpanded" style="margin-left:4px" class="mr-10px fas fa-caret-down arrow"></i>
            <i v-else style="margin-left:4px" class="mr-10px fas fa-caret-right arrow"></i>
            <svg class="text-[12px] mr-10px" width="1em" height="1em" fill="currentColor" 
                xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1091 1024">
              <path d="M0 932.552719V91.461901Q0 53.489228 27.290422 26.588669 54.190982 0 92.241628 0H412.475241a38.986318 38.986318 0 0 1 29.785547 13.801156l121.715283 143.859513h435.399196q38.050646 0 65.029178 26.588668 27.290422 26.900559 27.290422 64.951206v683.274203q0 38.128619-27.290422 64.951205-26.978532 26.588669-65.029178 26.588669H92.3196q-38.050646 0-65.10715-26.510696Q0 970.525392 0 932.396773z m77.972635 0q0 13.489266 14.346965 13.489266h906.977694q14.346965 0 14.346965-13.567239V249.200543q0-13.567239-14.346965-13.567239H545.808447a38.986318 38.986318 0 0 1-29.785546-13.801156L394.38559 77.972635H92.3196Q77.972635 77.972635 77.972635 91.539874V932.552719z" fill="#333333"></path>
              <path d="M38.986318 420.506422h1013.644259v77.972636H38.986318v-77.972636z" fill="#333333"></path>
              <path d="M0 301.754099a38.986318 38.986318 0 0 1 77.972635 0v315.39931a38.986318 38.986318 0 1 1-77.972635 0V301.754099z" fill="#333333"></path>
            </svg>
            <span class="text-[12px]">{{ node.pageName }}</span>
          </div>
          <div v-else class="children pl-4 rounded-[6px] hover:bg-[#E4EFFF]" @click.stop="selectPage(node)" :style="{backgroundColor:selectId === node.uuid?'#E4EFFF':''}">
            <div class="">
              <div class="h-32px ml-10px flex items-center cursor-pointer">
                <img
                    v-if="node.pageScene === 'web'"
                    src="./assets/img/pagelist-web-page.png"
                    type="icon-yemian" 
                    class="mr-10px"
                  />
                  <img
                    v-else-if="node.pageScene === 'app'"
                    src="./assets/img/pagelist-app-page.png"
                    type="icon-yemian" 
                    class="mr-10px"
                  />
                  <img v-else class="mr-10px" src="./public/assets/preview/page.png" alt="">
                <span class="text-[12px]">{{ node.pageName }}</span>
              </div>
            </div>
          </div>
      </div>
      <ul v-show="isExpanded && node.folderFlag">
        <li v-for="child in node.childrenList" :key="child.id">
          <tree-node :node="child" :selectId="selectId" @node-click="(event) => $emit('node-click', event)"></tree-node>
        </li>
      </ul>
    </div>
  `,
  data() {
    return {
      isExpanded: true
    }
  },
  inject: ['getSelectId'],
  computed: {
    selectId () {
      return this.getSelectId()
    },
  },
  methods: {
    toggle(node) {
      this.isExpanded = !this.isExpanded
      this.$emit('node-click', node)
    },
    selectPage(node){
      this.$emit('node-click', node)
    }
  }
}

const app = createApp({
  provide () {
    return {
      getSelectId: () => this.pageUuid
    }
  },
  data() {
    return {
      message: 'Hello Vue!',
      treeData: [],
      appVersion: '',
      pageUuid: '',
      pageType:'',
      pageName: '',
      previewSizeOptions: [],
      previewSizeW: 1920,
      previewSizeH: 1080,
      previewSize: '1920x1080',
      cleanup: null,
      currentIndex: 0,
      pageList: [],
      isPreview: false,
      isShowTip: false,
      appName: projectName,
      resizeObserver: null,
      setTimeout1: null,
      isHtml: true,
      url: '',
      childUrl: '',
      iframeMessage: null,
      childIframe: null, // 导航页内嵌子页面添加键盘事件
    }
  },
  watch: {
    pageType:{
      handler(value){
        this.$nextTick(()=>{
          if (!this.appName) return
          this.changePageType(value)
          let iframeDoc = null
          let iframeAppDoc = null
          const iframeKeydownHandler=(e) => {
            this.keyboardEvents(e)
          }
          if (value === 'app') {
            if (iframeDoc) {
              iframeDoc.removeEventListener('keydown', iframeKeydownHandler);
            }
            const iframeId = this.isHtml ? '#iframeApp' : '#vueIframeApp'
            const iframeApp = document.querySelector(iframeId);
            // 聚焦到iframe时，键盘左右切换不生效 
            // iframeApp.addEventListener('load', () => {
            //   iframeAppDoc = iframeApp.contentDocument || iframeApp.contentWindow.document;
            //   iframeAppDoc.addEventListener('keydown', iframeKeydownHandler);
            //   if (!this.isHtml) {
            //     const tag = iframeAppDoc.querySelector('.ai-tag')
            //     tag && (tag.style && (tag.style.visibility = 'hidden') || tag.style.setAtrrbute('visibility','hidden'))
            //   }
            // });
            if (this.resizeObserver) {
              this.resizeObserver.disconnect()
              this.resizeObserver = null
            }
          } else {
            // 监听web类型iframe父元素大小变化
            const element = document.querySelector('.preview-web')
            this.resizeObserver = new ResizeObserver(entries => {
              for (let entry of entries) {
                const { width, height } = entry.contentRect
                if (this.previewSize == 'auto') {
                  this.previewSizeW = parseInt(width)
                  this.previewSizeH = parseInt(height)
                }
                this.changeResolution()
              }
            })
            this.resizeObserver.observe(element)
  
            if (iframeAppDoc) {
              iframeAppDoc.removeEventListener('keydown', iframeKeydownHandler);
            }
            // 聚焦到iframe时，键盘左右切换不生效 
            const iframeWeb = this.isHtml ? document.getElementById('iframe') :  document.getElementById('vueIframeWeb')
            iframeWeb.addEventListener('load', () => {
              iframeDoc = iframeWeb.contentDocument || iframeWeb.contentWindow.document;
              iframeDoc.addEventListener('keydown', iframeKeydownHandler);
            });
          }
        })
      }
    },
    isHtml(value){
      this.$nextTick(()=>{
        if (!this.appName) return
        let iframeDoc = null
        let iframeAppDoc = null
        const iframeKeydownHandler=(e) => {
          this.keyboardEvents(e)
        }
        if (value === 'app') {
          if (iframeDoc) {
            iframeDoc.removeEventListener('keydown', iframeKeydownHandler);
          }
          const iframeId = this.isHtml ? '#iframeApp' : '#vueIframeApp'
          const iframeApp = document.querySelector(iframeId);
          // 聚焦到iframe时，键盘左右切换不生效 
          // iframeApp.addEventListener('load', () => {
          //   iframeAppDoc = iframeApp.contentDocument || iframeApp.contentWindow.document;
          //   iframeAppDoc.addEventListener('keydown', iframeKeydownHandler);
          //   if (!this.isHtml) {
          //     this.$nextTick(() => {
          //       const tag = iframeAppDoc.querySelector('.ai-tag')
          //       tag && (tag.style && (tag.style.visibility = 'hidden') || tag.style.setAtrrbute('visibility','hidden'))
          //     })
          //   }
          // });
          if (this.resizeObserver) {
            this.resizeObserver.disconnect()
            this.resizeObserver = null
          }
        } else {
          // 监听web类型iframe父元素大小变化
          const element = document.querySelector('.preview-web')
          this.resizeObserver = new ResizeObserver(entries => {
            for (let entry of entries) {
              const { width, height } = entry.contentRect
              if (this.previewSize == 'auto') {
                this.previewSizeW = parseInt(width)
                this.previewSizeH = parseInt(height)
              }
              this.changeResolution()
            }
          })
          this.resizeObserver.observe(element)

          if (iframeAppDoc) {
            iframeAppDoc.removeEventListener('keydown', iframeKeydownHandler);
          }
          // 聚焦到iframe时，键盘左右切换不生效 
          const iframeWeb = this.isHtml ? document.getElementById('iframe') :  document.getElementById('vueIframeWeb')
          iframeWeb.addEventListener('load', () => {
            iframeDoc = iframeWeb.contentDocument || iframeWeb.contentWindow.document;
            iframeDoc.addEventListener('keydown', iframeKeydownHandler);
          });
        }
      })
    },
    previewSize(val) {
      const option = this.previewSizeOptions.find(item => item.value === val)
      this.previewSizeW = option.w
      this.previewSizeH= option.h
      this.changeResolution()
    },
    previewSizeW(val) {
      if (!this.appName) return
      this.changeResolution()
    },
    previewSizeH(val) {
      if (!this.appName) return
      this.changeResolution()
    }
  },
  mounted() {
    document.querySelector('#app').style.display = 'block'
    this.getPageList()
    this.communicationFun()
  },
  methods: {
    communicationFun () {
      this.iframeMessage = useEventListener(window, 'message', async (event) => {
        // 处理消息 判断data值是页面id时处理切换页面
        if (event.source != window) {
          const currentPage = this.pageList.find(item => item.pageUuid == event.data)
          this.pageUuid = currentPage.pageUuid
          this.pageName = currentPage.pageName
          this.pageType = currentPage.pageScene
          this.isHtml = currentPage.codeType === 'html'
          this.getAppPageVersion(currentPage)
          this.currentIndex = this.pageList.findIndex(item=>item.pageUuid == this.pageUuid) || 0;
        }
      }, true)
    },
    // 修改页面类型
    changePageType(value) {
      const autoSize = {
        label: "自定义",
        value: "auto",
        w: 375,
        h: 812
      }
      if (value === 'app') {
        this.previewSizeOptions = [autoSize, ...resolutionInfo.app]
        this.previewSizeW = 393
        this.previewSizeH= 852
        this.previewSize = '393x852-16'
      } else {
        let iframe = document.querySelector('.preview-web')
        autoSize.w = parseInt(iframe.clientWidth)
        autoSize.h = parseInt(iframe.clientHeight)
        this.previewSizeOptions = [autoSize, ...resolutionInfo.web]
        this.previewSizeW = autoSize.w
        this.previewSizeH= autoSize.h
        this.previewSize = 'auto'
      }
      this.changeResolution()
    },
    // 找第一个页面
    findFirstPage(treeData) {
      const queue = [...treeData];
      while (queue.length > 0) {
        const item = queue.shift();
        
        // 如果是有效页面，直接返回
        if (item.folderFlag === false && item.uuid) {
          return item;
        }
        
        // 如果是文件夹且有子节点，将子节点加入队列前端（优先处理）
        if (item.folderFlag === true && item.childrenList?.length) {
          queue.unshift(...item.childrenList);
        }
        
        // 如果是空文件夹，自动跳过（继续循环）
      }
      
      return null;
    },
    // 页面列表
    getPageList() {
      this.treeData = filterByHasVersion(treeArr)
      // const currentPage = this.treeData.find(item => item.default) || this.treeData[0]
      const currentPage = this.findFirstPage(this.treeData)
      console.log(this.treeData, this.pageList);
      
      this.pageUuid = currentPage.pageUuid
      this.pageName = currentPage.pageName
      this.pageType = currentPage.pageScene
      this.isHtml = currentPage.codeType === 'html'
      this.$nextTick(()=>{
        this.getAppPageVersion(currentPage)
      })
      collectItems(this.treeData, this.pageList);
      this.currentIndex = this.pageList.findIndex(item=>item.pageUuid == this.pageUuid) || 0;
      this.cleanup = this.createKeyboardNavigation();
    },
    // 获取应用中页面内容
    async getAppPageVersion(info) {
      const isApp = this.pageType == 'app'
      let iframe = this.isHtml ? document.getElementById('iframe') :  document.getElementById('vueIframeWeb')

      if (isApp) {
        iframe = document.getElementById('iframeApp')
      }
      if (info.parentUrl) {
        iframe.src = info.parentUrl
        this.childUrl = info.url
      } else {
        iframe.src = info.url;
      }
    },
    loadHtmlIframe() {
      if (this.childIframe) {
        this.childIframe()
        this.childIframe = null
      }
      const isApp = this.pageType == 'app'
      // let template = handleCode(this.pageHtml, !isApp);
      let iframe = document.getElementById('iframe')
      if (isApp) {
        iframe = document.getElementById('iframeApp')
      }
      const htmlIframe = iframe.contentDocument || iframe.contentWindow.document;
      if (htmlIframe) {
        const navIframe = htmlIframe.getElementById('navigation') || htmlIframe.getElementById('contentFrame')
        this.$nextTick(() => {
          const top = this.checkIframePositionSimple(htmlIframe)
          if (navIframe) {
            if (top) {
              navIframe.style.height = `calc(100vh - ${top}px)`; // 减去导航高度
            }
            // navIframe.srcdoc = handleCode(this.childUrl, !isApp);
            navIframe.src = this.childUrl
            const iframeKeydownHandler=(e) => {
              this.keyboardEvents(e)
            }
            navIframe.addEventListener('load', () => {
              const navIframeDoc = navIframe.contentDocument || navIframe.contentWindow.document;
              this.childIframe = useEventListener(navIframeDoc, 'keydown', iframeKeydownHandler)
            });
          }
          var homeMenu = htmlIframe.querySelector(`[data-uuid="${this.pageUuid}"]`)
          let currentMenu = htmlIframe.querySelector('.active-menu')
          if (homeMenu) {
              currentMenu?.classList.remove('active-menu')
              homeMenu.classList.add('active-menu');
          }
        })
      }
    },
    // 获取子页面位置信息
    checkIframePositionSimple(htmlIframe) {
      const iframe = htmlIframe.getElementById('navigation');
      if (iframe) {
        const iframeRect = iframe.getBoundingClientRect();
        return iframeRect.top
      }
      return
    },
    renderIframe(pageHtml) {
      // const isApp = this.pageType == 'app'
      // let template = handleCode(pageHtml, !isApp);
      // let iframe = document.getElementById('iframe')
      // if (isApp) {
      //   iframe = document.getElementById('iframeApp')
      // }
      // if(isIOSWechat()) {
      //     const parser = new DOMParser();
      //     const doc = parser.parseFromString(template, 'text/html');
      //     const updatedHtmlString = new XMLSerializer().serializeToString(doc);
      //     const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
      //     iframeDocument.write(updatedHtmlString);
      //     return
      // }
      // if(!this.isHtml) {
      //   return
      // }
      // iframe.srcdoc = template
    },
    // 点击目录切换页面
    handleChangePage(node) {
      if (!node.folderFlag) {
        this.pageName = node.pageName
        this.pageType = node.pageScene
        this.$nextTick(()=>{
          this.getAppPageVersion(node)
        })
      }
      this.currentIndex = this.pageList.findIndex(item=>item.pageUuid == node.uuid) || 0;
      this.pageUuid = node.uuid
    },
    changeResolution() {
      if (this.pageType === 'app') {
        const contentApp = document.querySelector('.preview-suitable-content-app')
        // contentApp.style.aspectRatio = Number(this.previewSizeW)/Number(this.previewSizeH)
        const borderDom = document.querySelector('.app-border')
        const scale = Math.min(contentApp.offsetWidth/Number(this.previewSizeW), contentApp.offsetHeight/Number(this.previewSizeH))
        borderDom.style.transform = `scale(${scale})`
      } else {
        if (this.appName) {
          const contentApp = document.querySelector('.page-content')
          let borderDom = this.isHtml ? document.getElementById('iframe') :  document.getElementById('vueIframeWeb')
          const scale = Math.min(contentApp.offsetWidth/Number(this.previewSizeW), contentApp.offsetHeight/Number(this.previewSizeH))
          borderDom.style.transform = `scale(${scale})`
        }
      }
    },
    changeCurrentIndex(num) {
      if (num == -1) {
        if (this.currentIndex > 0) {
          this.currentIndex--
        }
      } else {
        if (this.currentIndex < this.pageList.length - 1) {
          this.currentIndex++
        }
      }
      this.handleChangePage(this.pageList[this.currentIndex])
    },
    // 键盘事件
    keyboardEvents(event) {
      if (event.key === 'ArrowLeft') {
        // 向左键：移动到前一个项目，如果已经是第一个则不处理
        event.preventDefault();
        this.changeCurrentIndex(-1)
      } else if (event.key === 'ArrowRight') {
        // 向右键：移动到下一个项目，如果已经是最后一个则不处理
        event.preventDefault();
        this.changeCurrentIndex(1)
      } else if (event.key === 'Escape') {
        this.isPreview = false
        this.isShowTip = false
        clearTimeout(this.setTimeout1)
        this.setTimeout1 = null
      }
    },
    createKeyboardNavigation() {
      // 处理键盘事件
      const handleKeyDown = (event) => {
        if (this.pageList.length === 0) return;
        this.keyboardEvents(event)
      };
      // 添加事件监听
      window.addEventListener('keydown', handleKeyDown);
    
      // 返回一个移除事件监听的函数
      return () => {
        window.removeEventListener('keydown', handleKeyDown);
      };
    },
    toPreview() {
      this.isPreview = true
      this.isShowTip = true
      this.setTimeout1 = setTimeout(()=>{
        this.isShowTip = false
      }, 5000)
    },
    vueIfameloaded() {
      this.$nextTick(() => {
        const iframeId = this.pageType === 'app' ? '#vueIframeApp' : '#vueIframeWeb'
        const iframeApp = document.querySelector(iframeId);
        // const iframeAppDoc = iframeApp.contentDocument || iframeApp.contentWindow.document;
        // const tag = iframeAppDoc.querySelector('.ai-tag')
        // tag && (tag.style && (tag.style.visibility = 'hidden') || tag.style.setAtrrbute('visibility','hidden'))
      })
    }
  },
  beforeDestroy() {
    this.cleanup()
    if (this.resizeObserver) {
      this.resizeObserver.disconnect()
    }
    if (this.iframeMessage) {
        this.iframeMessage()
        this.iframeMessage = null
    }
    if (this.childIframe) {
      this.childIframe()
      this.childIframe = null
    }
  }
})
app.component('treeNode', treeNode);
app.mount('#app')

// 过滤用户没有生成的页面
function filterByHasVersion(data) {
  // 如果不是数组，直接返回
  if (!Array.isArray(data)) return data;

  // 使用 filter 移除 hasVersion === 1 的对象
  return data.filter(item => {
    if (item.hasVersion === '1') {
      return false; // 移除该对象
    }

    // 递归处理 children
    if (item.children && Array.isArray(item.children)) {
      item.children = filterByHasVersion(item.children);
    }

    return true; // 保留该对象
  });
}

/**
 * 用于遍历嵌套数组中 folderFlag 为 false 的对象
 * @param {Array} items - 要遍历的嵌套数组
 */
function collectItems(nodes, flatItems) {
  nodes.forEach((node) => {
    
    if (node.folderFlag === false) {
      flatItems.push({
        ...node,
      });
    }
    
    if (node.childrenList && node.childrenList.length > 0) {
      collectItems(node.childrenList, flatItems);
    }
  });
}