var registerRemoteComponents = async (remoteCompList, doc, groupName) => {
  return new Promise((resolve, reject) => {
    // 注册远程组件
    if (groupName) {
      // 非预览页面
      const componentsScripts = doc.getElementById(`${groupName}Scripts`)
      const componentsStyleSheets = doc.getElementById(`${groupName}StyleSheets`)
      if (componentsScripts)
        componentsScripts.remove()
      if (componentsStyleSheets)
        componentsStyleSheets.remove()
    }
    else {
      // 预览页面
      const componentsScripts = doc.getElementById('componentsScripts')
      const componentsStyleSheets = doc.getElementById('componentsStyleSheets')
      if (componentsScripts)
        componentsScripts.remove()
      if (componentsStyleSheets)
        componentsStyleSheets.remove()
    }

    let scriptsStr = '(function(){\n'
    let cssStr = ''
    const plugins = []

    remoteCompList.forEach((compInfo) => {
      const { css, javascript, jsPlugin } = compInfo.files
      if (jsPlugin) {
        plugins.push(...JSON.parse(jsPlugin))
      }
      // 脚本
      scriptsStr += `;(function(){${javascript}})();\n`
      // css
      cssStr += `${css}\n`
    })

    // 判断是否已经存在相同的插件脚本
    const allScripts = doc.getElementsByTagName('script')
    const createPluginScript = function (item) {
      return new Promise((resolve, reject) => {
        const findSame = Array.from(allScripts).find((scriptDom) => {
          const src = scriptDom.getAttribute('src')
          return item.url.includes(src)
        })
        if (findSame) {
          resolve()
          return
        }
        // 创建新脚本
        if (!item.url) {
          resolve()
          return
        }
        if (item.url.includes('core.umd.js') || item.url.includes('NodeResize.js')) {
          resolve()
          return
        }
        const pluginScript = doc.createElement('script')
        pluginScript.onload = () => {
          resolve(true)
        }
        pluginScript.setAttribute('src', item.url)
        doc.body.append(pluginScript)
      })
    }

    async function getPlugins() {
      for (let i = 0; i < plugins.length; i++) {
        await createPluginScript(plugins[i])
      }
    }

    getPlugins().then(() => {
      // 添加组件脚本
      scriptsStr += '\n})()'
      const script = doc.createElement('script')
      script.onload = () => {
        resolve(true)
      }
      script.setAttribute('id', groupName ? `${groupName}Scripts` : 'componentsScripts')
      script.src = URL.createObjectURL(new Blob([scriptsStr]))
      doc.body.append(script)

      // 添加css
      if (cssStr) {
        const styleSheet = doc.createElement('style')
        styleSheet.setAttribute('id', groupName ? `${groupName}StyleSheets` : 'componentsStyleSheets')
        styleSheet.innerText = cssStr
        setTimeout(() => {
          const headEle = doc.getElementsByTagName('head')[0]
          headEle.appendChild(styleSheet)
        }, 500)
      }

    })
  })
}