class DomUtil {
  //dom:"#newsContent"
  constructor(dom) {
    this.dom = dom
    this.regxList = [ '“', '‘', '"', '\'' ]
  }

  $dom(dom, all) {
    return document[all ? 'querySelectorAll' : 'querySelector'](dom || this.dom)
  }

  clearHtml() {
    jqHtml('.gx-mobile #newsContent', { type: 'set', str: '' })
  }

  wrapNumbersInTags(html, regx) {
    const container = document.createElement('div')
    jqHtml(container, { type: 'set', str: html })

    const textNodes = []

    // Function to recursively find all text nodes
    function getTextNodes(node) {
      if (node.nodeType === Node.TEXT_NODE) {
        textNodes.push(node)
      } else {
        node.childNodes.forEach(child => getTextNodes(child))
      }
    }

    getTextNodes(container)

    textNodes.forEach(textNode => {
      this.wrapNumbersInTextNode(textNode, regx)
    })

    return jqHtml(container, { type: 'get' })
  }

  wrapNumbersInTextNode(textNode, regx) {
    // 获取当前的文本内容
    const textContent = textNode.nodeValue
    // 正则表达式匹配所有数字
    let numberPattern

    switch (regx) {
      case 'd':
        numberPattern = /\d+/g
        break
      case '“':
        numberPattern = /“([^”]+)”/g
        break
      case '‘':
        numberPattern = /‘([^’]+)’/g
        break
      case '"':
        numberPattern = /"([^"]+)"/g
        break
      case '\'':
        numberPattern = /'([^']+)'/g
        break
    }

    // 创建 DocumentFragment 来替换文本节点
    const fragment = document.createDocumentFragment()

    // 使用正则表达式分割文本并找到所有数字
    let lastIndex = 0
    let match

    while ((match = numberPattern.exec(textContent)) !== null) {
      // 在找到的数字之前的文本
      const beforeText = textContent.slice(lastIndex, match.index)
      if (beforeText) {
        fragment.appendChild(document.createTextNode(beforeText))
      }

      // 创建包含所需数字的 span 元素
      const span = document.createElement('span')
      span.className = 'special-no-wrap'
      span.textContent = match[0]
      fragment.appendChild(span)

      // 更新 lastIndex 以继续查找剩余文本中的数字
      lastIndex = match.index + match[0].length
    }

    // 添加剩余的文本内容
    const afterText = textContent.slice(lastIndex)
    if (afterText) {
      fragment.appendChild(document.createTextNode(afterText))
    }

    // 用 fragment 替换原来的文本节点
    textNode.parentNode.replaceChild(fragment, textNode)
  }

  handleArticleStr(str, nextCallback, details, netstutas, loadlmageOnlyWifiSwitch) {
    if (!str) return ''
    let padding = getComputedStyle(document.querySelector('.gx-mobile')).paddingLeft
    if (padding) {
      padding = padding.split('px')[0]

      padding = Number(padding).toFixed(3)

      padding = Number(padding)
    }

    const contentWidth = document.querySelector('body').getBoundingClientRect().width - padding * 2
    jqHtml('#newsContent', { type: 'set', str })

    const audioOringin = document.querySelectorAll('#newsContent audio')
    for (let i = 0; i < audioOringin.length; i++) {
      const audioEl = audioOringin[i]
      const audioSourceEl = audioEl.querySelector('source')
      if (audioEl && audioSourceEl) {
        const src = audioEl.getAttribute('src') || audioSourceEl.getAttribute('src')
        if (src) {
          audioEl.outerHTML = `<div class="audio-block_${getRandomNumber().uuid(10)}">${audioEl.outerHTML}</div>`
        }
      }
    }

    const audioDom = document.querySelectorAll('#newsContent [class^="audio-block"]')
    const linkCardDom = document.querySelectorAll('#newsContent .linkcard')
    const swiperDom = document.querySelectorAll(`#newsContent section[data-title='轮播图片']`)
    const swiper2Dom = document.querySelectorAll(`#newsContent section[data-title='图片海报']`)
    const leftOrRight = document.querySelectorAll(`#newsContent section[data-title='左文右图']`)
    const leftOrRight2 = document.querySelectorAll(`#newsContent section[data-title='左图右文']`)
    const authorDom = document.querySelectorAll(`#newsContent section[data-title='作者头像框']`)
    const imgPut = document.querySelectorAll('#newsContent .edit_img_input')
    const imgPut2 = document.querySelectorAll('#newsContent .imageCaption')
    const imgPut3 = document.querySelectorAll('#newsContent .bjh-image-caption')
    const imgPut4 = document.querySelectorAll('#newsContent .rmrb-caption-img2')
    const imgPut5 = document.querySelectorAll('#newsContent .rmrb-caption-img')

    const swiperText = document.querySelectorAll(`#newsContent section[data-title='文字滚动']`)
    const tableDom = document.querySelectorAll(`#newsContent section[data-title='基本表格']`)

    const text1Dom = document.querySelectorAll(`#newsContent section[data-title='文本框1']`)
    const text2Dom = document.querySelectorAll(`#newsContent section[data-title='文本框2']`)
    const text3Dom = document.querySelectorAll(`#newsContent section[data-title='文本框3']`)
    const text4Dom = document.querySelectorAll(`#newsContent section[data-title='文本框4']`)
    const text5Dom = document.querySelectorAll(`#newsContent section[data-title='文本框5']`)

    const imageLightDom = document.querySelectorAll(`#newsContent section[data-title='图片点亮']`)

    const textChangeDom = document.querySelectorAll(`#newsContent section[data-title='文字切换']>div`)
    const textSplit5Dom = document.querySelectorAll(`#newsContent section[data-title='分割线-5']>div`)

    const tableAllDom = document.querySelectorAll(`#newsContent table`)
    // const brDom = []
    const brDom = document.querySelectorAll(`#newsContent p > br`)

    if (swiperDom.length > 0 || swiper2Dom.length > 0) {
      nextCallback(5)
    }

    // 处理所有表格属性
    for (let i = 0; i < tableAllDom.length; i++) {
      if (tableAllDom[i]) {
        tableAllDom[i].setAttribute('width', '')
      }
    }

    // 处理图片点亮
    for (let i = 0; i < imageLightDom.length; i++) {
      const height = contentWidth / (339 / 190)
      imageLightDom[i].style.width = `${contentWidth}px`
      imageLightDom[i].style.height = `${height}px`
      const divEl = imageLightDom[i].querySelector(':first-child > div > div')
      const svgElTwo = imageLightDom[i].querySelector(':first-child > svg')

      if (divEl) {
        divEl.style.width = `${contentWidth}px`
        divEl.style.height = `${height}px`
        divEl.style.maxHeight = `${height}px`
      }

      if (svgElTwo) {
        svgElTwo.style.width = `${contentWidth}px`
        svgElTwo.style.height = `${height}px`
        svgElTwo.style.maxHeight = `${height}px`
      }
    }

    // 处理分割线5
    for (let i = 0; i < textSplit5Dom.length; i++) {
      const imgElList = textSplit5Dom[i].querySelector('img')

      for (let j = 0; j < imgElList.length; j++) {
        imgElList[j].src = imgElList[j].getAttribute('data-src')
          ? imgElList[j].getAttribute('data-src')
          : imgElList[j].getAttribute('src')
        imgElList[j].classList.add('not-preview-image')
        imgElList[j].classList.add('local-image')
      }

      if (textSplit5Dom[i].querySelector('div#sign')) {
        const isDark = document.querySelector('html').getAttribute('dark-mode') === 'true'
        textSplit5Dom[i].querySelector('div#sign').style.background = isDark ? '#1d1d1d' : '#fff'
      }
    }

    // 处理换行的间距
    for (let i = 0; i < brDom.length; i++) {
      if (brDom[i].parentNode) {
        if (brDom[i].parentNode.childNodes && brDom[i].parentNode.childNodes.length === 1) {
          if (brDom[i].parentNode.childNodes[0].tagName === 'BR') {
            brDom[i].parentNode.remove()
          }
        } else if (brDom[i].parentNode && brDom[i].parentNode.childNodes) {
          let isAllBr = 0
          brDom[i].parentNode.childNodes.forEach(el => {
            if (el.tagName === 'BR') {
              isAllBr += 1
            }
          })
          if (isAllBr === brDom[i].parentNode.childNodes.length) brDom[i].parentNode.remove()
        }
      }
    }

    // 处理文字切换
    for (let i = 0; i < textChangeDom.length; i++) {
      textChangeDom[i].style.width = '100%'
    }

    // 处理文本1
    for (let i = 0; i < text1Dom.length; i++) {
      let title = ''
      let bgHex = ''
      let borderColor = ''
      let styleString = ''
      let contentStyle = {}
      const el = document.createElement('div')
      el.classList.add('en-text-1')
      const borderEl = text1Dom[i].querySelector('div#border')
      const titleEl = text1Dom[i].querySelector('p#content')
      if (titleEl) {
        title = jqHtml(titleEl, { type: 'get' })
        const inlineStyles = titleEl.style
        for (let i = 0; i < inlineStyles.length; i++) {
          const property = inlineStyles[i]

          // 你可以选择性地过滤或直接复制所有内联样式
          if (!property.startsWith('padding') && !property.includes('margin') && !property.includes('width') && !property.includes(
            'height') && property !== 'line-height' && property !== 'font-size' && property !== 'font-family') {
            contentStyle[property] = inlineStyles.getPropertyValue(property)
          }
        }
        for (const property in contentStyle) {
          if (contentStyle.hasOwnProperty(property)) {
            styleString += `${property}: ${contentStyle[property]}; `
          }
        }
      }

      if (borderEl) {
        bgHex = borderEl.style.backgroundColor
        borderColor = borderEl.style.borderInlineStartColor
      }
      el.style.borderLeftColor = borderColor
      el.style.backgroundColor = bgHex
      jqHtml(el, {
        type: 'set',
        str: `<svg class="en-text-1-img" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="24" height="15" viewBox="0 0 24 15"><g><g transform="matrix(-1,0,0,-1,48,30)" style="opacity:0.20000000298023224;"><path d="M34,14.999999999999993L24,14.999999999999993L24,23.330379999999998L26.649259999999998,23.330379999999998C26.649259999999998,23.330379999999998,26.5212,25.54,24,26.223100000000002L24,30C24,30,33.615449999999996,28.232,34,20.79888L34,14.999999999999993Z" fill-rule="evenodd" fill="${rgbToRgba(borderColor, 1)}" fill-opacity="1"/></g><g transform="matrix(-1,0,0,-1,20,30)" style="opacity:0.20000000298023224;"><path d="M20,14.999999999999993L10,14.999999999999993L10,23.330379999999998L12.64926,23.330379999999998C12.64926,23.330379999999998,12.5212,25.54,10,26.223100000000002L10,30C10,30,19.61545,28.232,20,20.79888L20,14.999999999999993Z" fill-rule="evenodd" fill="${rgbToRgba(borderColor, 1)}" fill-opacity="1"/></g></g></svg><div class="en-text-1-title" style="${styleString}">${title}</div>`
      })
      text1Dom[i].before(el)
      text1Dom[i].remove()
    }

    // 处理文本2
    for (let i = 0; i < text2Dom.length; i++) {
      let title = ''
      let borderColor = ''
      let styleString = ''
      let contentStyle = {}
      const el = document.createElement('div')
      el.classList.add('en-text-2')
      const borderEl = text2Dom[i].querySelector('div#border')
      const titleEl = text2Dom[i].querySelector('div#content')
      if (titleEl) {
        title = jqHtml(titleEl, { type: 'get' })
        const inlineStyles = titleEl.style
        for (let i = 0; i < inlineStyles.length; i++) {
          const property = inlineStyles[i]

          // 你可以选择性地过滤或直接复制所有内联样式
          if (!property.startsWith('padding') && !property.includes('margin') && !property.includes('width') && !property.includes(
            'height') && property !== 'line-height' && property !== 'font-size' && property !== 'font-family') {
            contentStyle[property] = inlineStyles.getPropertyValue(property)
          }
        }
        for (const property in contentStyle) {
          if (contentStyle.hasOwnProperty(property)) {
            styleString += `${property}: ${contentStyle[property]}; `
          }
        }
      }

      if (borderEl) {
        borderColor = borderEl.style.borderColor
      }
      el.style.borderColor = borderColor
      jqHtml(el, { type: 'set', str: `<div class="en-text-2-title" style="${styleString}">${title}</div>` })
      text2Dom[i].before(el)
      text2Dom[i].remove()
    }

    // 处理文本3
    for (let i = 0; i < text3Dom.length; i++) {
      let title = ''
      let content = ''
      let borderColor = ''
      let styleString = ''
      let titleStyleStr = ''
      let titleStyle = {}
      let contentStyle = {}
      const el = document.createElement('div')
      el.classList.add('en-text-3')
      const borderEl = text3Dom[i].querySelector('div#border')
      const titleEl = text3Dom[i].querySelector('span#title')
      const contentEl = text3Dom[i].querySelector('p#content')
      if (titleEl) {
        title = jqHtml(titleEl, { type: 'get' })
        const inlineStyles = titleEl.style
        for (let i = 0; i < inlineStyles.length; i++) {
          const property = inlineStyles[i]

          // 你可以选择性地过滤或直接复制所有内联样式
          if (!property.startsWith('padding') && !property.includes('margin') && !property.includes('width') && !property.includes(
            'height') && property !== 'line-height' && property !== 'font-size' && property !== 'font-family') {
            titleStyle[property] = inlineStyles.getPropertyValue(property)
          }
        }
        for (const property in titleStyle) {
          if (titleStyle.hasOwnProperty(property)) {
            titleStyleStr += `${property}: ${titleStyle[property]}; `
          }
        }
      }

      if (borderEl) {
        borderColor = borderEl.style.borderColor
      }

      if (contentEl) {
        content = jqHtml(contentEl, { type: 'get' })
        const inlineStyles = contentEl.style
        for (let i = 0; i < inlineStyles.length; i++) {
          const property = inlineStyles[i]

          // 你可以选择性地过滤或直接复制所有内联样式
          if (!property.startsWith('padding') && !property.includes('margin') && !property.includes('width') && !property.includes(
            'height') && property !== 'line-height' && property !== 'font-size' && property !== 'font-family') {
            contentStyle[property] = inlineStyles.getPropertyValue(property)
          }
        }
        for (const property in contentStyle) {
          if (contentStyle.hasOwnProperty(property)) {
            styleString += `${property}: ${contentStyle[property]}; `
          }
        }
      }

      el.style.borderColor = borderColor
      jqHtml(el, {
        type: 'set',
        str: `<div class="en-text-3-title" style="${titleStyleStr}"><i class="en-text-3-point" style="background: ${borderColor}"></i>${title}</div><div class="en-text-3-content" style="${styleString}">${content}</div>`
      })
      text3Dom[i].before(el)
      text3Dom[i].remove()
    }

    // 处理文本4
    for (let i = 0; i < text4Dom.length; i++) {
      let title = ''
      let bgHex = ''
      let styleString = ''
      let contentStyle = {}
      const el = document.createElement('div')
      el.classList.add('en-text-4')
      const borderEl = text4Dom[i].querySelector('div#border')
      const titleEl = text4Dom[i].querySelector('h4#title')
      if (titleEl) {
        title = jqHtml(titleEl, { type: 'get' })
        const inlineStyles = titleEl.style
        for (let i = 0; i < inlineStyles.length; i++) {
          const property = inlineStyles[i]

          // 你可以选择性地过滤或直接复制所有内联样式
          if (!property.startsWith('padding') && !property.includes('margin') && !property.includes('width') && !property.includes(
            'height') && property !== 'line-height' && property !== 'font-size' && property !== 'font-family') {
            contentStyle[property] = inlineStyles.getPropertyValue(property)
          }
        }
        for (const property in contentStyle) {
          if (contentStyle.hasOwnProperty(property)) {
            styleString += `${property}: ${contentStyle[property]}; `
          }
        }
      }

      if (borderEl) {
        bgHex = borderEl.style.backgroundColor
      }
      jqHtml(el, {
        type: 'set',
        str: `<div class="en-text-4-block" style="background-color: ${bgHex}"><div class="en-text-4-title" style="${styleString}">${title}</div><div class="en-text-4-end" style="background: ${bgHex}"></div></div>`
      })
      text4Dom[i].before(el)
      text4Dom[i].remove()
    }

    // 处理文本5
    for (let i = 0; i < text5Dom.length; i++) {
      let title = ''
      let titleBg = ''
      let num = ''
      let numBg = ''
      let numColor = ''
      let styleString = ''
      let contentStyle = {}
      const el = document.createElement('div')
      el.classList.add('en-text-5')
      const borderEl = text5Dom[i].querySelector('div#border')
      const numEl = text5Dom[i].querySelector('div#sign')
      if (numEl) {
        num = numEl.textContent
        numBg = numEl.style.backgroundColor
        numColor = numEl.style.color
      }
      const titleEl = text5Dom[i].querySelector('h4#title')
      if (titleEl) {
        title = jqHtml(titleEl, { type: 'get' })
        const inlineStyles = titleEl.style
        for (let i = 0; i < inlineStyles.length; i++) {
          const property = inlineStyles[i]

          // 你可以选择性地过滤或直接复制所有内联样式
          if (!property.startsWith('padding') && !property.includes('margin') && !property.includes('width') && !property.includes(
            'height') && property !== 'line-height' && property !== 'font-size' && property !== 'font-family') {
            contentStyle[property] = inlineStyles.getPropertyValue(property)
          }
        }
        for (const property in contentStyle) {
          if (contentStyle.hasOwnProperty(property)) {
            styleString += `${property}: ${contentStyle[property]}; `
          }
        }
      }

      if (borderEl) {
        titleBg = borderEl.style.backgroundColor
      }
      jqHtml(el, {
        type: 'set',
        str: `<div class="en-text-5-block"><div class="en-text-5-num " style="color: ${numColor}; background: ${numBg}">${num}</div><div style="${styleString}" class="en-text-5-title">${title}</div></div>`
      })
      text5Dom[i].before(el)
      text5Dom[i].remove()
    }

    // 处理表格
    for (let i = 0; i < tableDom.length; i++) {
      let title = ''
      const el = document.createElement('div')
      el.classList.add('en-table')
      const titleEl = tableDom[i].querySelector('span:first-child')
      if (titleEl) {
        title = titleEl.textContent
      }
      const tableHtml = jqHtml(tableDom[i].querySelector('table'), { type: 'get' })
      const tableStyle = tableDom[i].querySelector('table').getAttribute('style')
      jqHtml(el, {
        type: 'set', str: `<div class="en-table-title ">${title}</div><table style="${tableStyle}">${tableHtml}</table>`
      })
      tableDom[i].before(el)
      tableDom[i].remove()
    }

    const tableEl = document.querySelectorAll('#article table')
    // 处理表格
    for (let i = 0; i < tableEl.length; i++) {
      const el = tableEl[i]
      // 获取当前元素的 width 样式，使用 getComputedStyle 获取计算后的样式
      const computedStyle = window.getComputedStyle(el)
      const currentWidth = computedStyle.width

      let widthValue
      // 判断宽度的单位
      if (currentWidth.endsWith('%')) {
        // 处理百分比，获取父元素的宽度
        const parentWidth = el.parentElement ? el.parentElement.clientWidth : 0
        widthValue = (parseFloat(currentWidth) / 100) * parentWidth // 转换为像素值
      } else {
        // 处理像素值
        widthValue = parseFloat(currentWidth) // 转换为浮点数
      }
      // 判断宽度是否大于指定的 threshold
      if (widthValue > contentWidth) {
        el.style.width = '100%' // 设置宽度为100%
      } else {
        el.style.width = computedStyle.width // 保持原来的宽度
      }
    }

    // 处理轮播字幕
    for (let i = 0; i < swiperText.length; i++) {
      const el = document.createElement('div')
      el.classList.add('en-scroll-text')
      let text = ''
      let imgSrc = ''
      const textEl = swiperText[i].querySelector('tspan')
      const imgEl = swiperText[i].querySelector('img')
      if (textEl) {
        text = textEl.textContent
        // text = 'Trucks wait to load containers at a container terminal in Rizhao。Trucks wait to load containers at a container terminal in Rizhao。Trucks wait to load containers at a container terminal in Rizhao。'
      }

      if (imgEl) {
        imgSrc = imgEl.getAttribute('src') || imgEl.getAttribute('data-src')
      }
      jqHtml(el, {
        type: 'set',
        str: `<div class="scroll-text-left"><img class="not-preview-image local-image" data-src="${imgSrc || './image/scrollText.svg'}" src="${imgSrc || './image/scrollText.svg'}" alt=""></div><div class="swiper-txet">${text}</div>`
      })
      swiperText[i].before(el)
      swiperText[i].remove()
    }

    // 处理图注3
    for (let i = 0; i < imgPut3.length; i++) {
      const el = document.createElement('div')
      el.innerText = imgPut3[i] ? imgPut3[i].textContent || '' : ''
      const align = imgPut3[i].style.textAlign
      if (align) {
        el.style.textAlign = align
      }
      el.classList.add('rmrb-caption-img2')
      imgPut3[i].before(el)
      imgPut3[i].remove()
    }

    // 处理图注4
    for (let i = 0; i < imgPut4.length; i++) {
      const el = document.createElement('div')
      el.innerText = imgPut4[i] ? imgPut4[i].textContent || '' : ''
      const align = imgPut4[i].style.textAlign
      if (align) {
        el.style.textAlign = align
      }
      el.classList.add('rmrb-caption-img2')
      imgPut4[i].before(el)
      imgPut4[i].remove()
    }

    // 处理图注5
    for (let i = 0; i < imgPut5.length; i++) {
      const el = document.createElement('div')
      el.innerText = imgPut5[i] ? imgPut5[i].textContent || '' : ''
      const align = imgPut5[i].style.textAlign
      if (align) {
        el.style.textAlign = align
      }
      el.classList.add('rmrb-caption-img2')
      imgPut5[i].before(el)
      imgPut5[i].remove()
    }

    // 处理图注
    for (let i = 0; i < imgPut.length; i++) {
      const el = document.createElement('div')
      el.innerText = imgPut[i] ? imgPut[i].textContent || '' : ''
      const align = imgPut[i].style.textAlign
      if (align) {
        el.style.textAlign = align
      }
      el.classList.add('rmrb-caption-img')
      imgPut[i].before(el)
      imgPut[i].remove()
    }

    // 处理图注2
    for (let i = 0; i < imgPut2.length; i++) {
      const el = document.createElement('div')
      el.innerText = imgPut2[i] ? imgPut2[i].querySelector('.title')
        ? imgPut2[i].querySelector('.title').textContent || ''
        : '' : ''
      const align = imgPut2[i].style.textAlign
      if (align) {
        el.style.textAlign = align
      }
      el.classList.add('rmrb-caption-img2')
      imgPut2[i].before(el)
      imgPut2[i].remove()
    }

    // 处理左文右图
    for (let i = 0; i < leftOrRight.length; i++) {
      const imageElList = leftOrRight[i].querySelectorAll('img')

      for (let j = 0; j < imageElList.length; j++) {
        imageElList[j].src = imageElList[j].getAttribute('data-src')
          ? imageElList[j].getAttribute('data-src')
          : imageElList[j].getAttribute('src')
        imageElList[j].style.objectFit = 'cover'
        imageElList[j].classList.add('not-preview-image')
        imageElList[j].classList.add('local-image')
      }
    }

    for (let i = 0; i < leftOrRight2.length; i++) {
      const imageElList = leftOrRight2[i].querySelectorAll('img')

      for (let j = 0; j < imageElList.length; j++) {
        imageElList[j].src = imageElList[j].getAttribute('data-src')
          ? imageElList[j].getAttribute('data-src')
          : imageElList[j].getAttribute('src')
        imageElList[j].style.objectFit = 'cover'
        imageElList[j].classList.add('not-preview-image')
        imageElList[j].classList.add('local-image')
      }
    }

    // 处理作者头像框
    for (let i = 0; i < authorDom.length; i++) {
      const imageElList = authorDom[i].querySelectorAll('img')

      for (let j = 0; j < imageElList.length; j++) {
        imageElList[j].src = imageElList[j].getAttribute('data-src')
          ? imageElList[j].getAttribute('data-src')
          : imageElList[j].getAttribute('src')
        imageElList[j].classList.add('not-preview-image')
        imageElList[j].classList.add('local-image')
      }
    }

    // 处理轮播图
    for (let i = 0; i < swiperDom.length; i++) {
      const id = `rmrb-en-swiper_${i + 1}`
      const el = document.createElement('div')
      el.setAttribute('id', `${id}`)
      el.setAttribute('class', `mobile swiper-block`)
      el.style.width = `${contentWidth}px`
      el.style.height = `${contentWidth / 1.3346303501945525}px`
      const srcElList = swiperDom[i].querySelectorAll('g foreignObject svg')
      const alEl = swiperDom[i].querySelector('g animateTransform')

      const isLoop = alEl ? alEl.getAttribute('repeatCount') === 'indefinite' : false
      const time = alEl ? alEl.getAttribute('dur') : 0

      const urlList = []

      if (srcElList) {
        for (let j = 0; j < srcElList.length; j++) {
          const backgroundImage = srcElList[j].style.backgroundImage
          const url = backgroundImage.match(/url\("(.+)"\)/)[1]

          if (j !== 0) {
            urlList.push(url)
          }
        }
      }

      let html = '<div class="swiper-wrapper">'

      urlList.forEach(el => {
        html += `<div class="swiper-slide"><img data-src="${el}" class="not-preview-image local-image" src="${el}" alt=""></div>`
      })

      jqHtml(el, { type: 'set', str: html + `</div><div class="swiper-pagination"></div>` })

      swiperDom[i].before(el)
      swiperDom[i].remove()

      nextCallback(3, {
        id: `#${id}`, isLoop, length: urlList.length, time: parseInt(time)
      })
    }

    // 处理海报轮播图
    for (let i = 0; i < swiper2Dom.length; i++) {
      const id = `rmrb-en-poster-swiper_${i + 1}`
      const el = document.createElement('div')
      el.setAttribute('id', `${id}`)
      el.setAttribute('class', `mobile swiper-block`)
      el.style.width = `${contentWidth}px`
      el.style.height = `${contentWidth / 1.3346303501945525}px`
      const srcElList = swiper2Dom[i].querySelectorAll('g foreignObject svg')
      const alEl = swiper2Dom[i].querySelector('g animateTransform')

      const isLoop = alEl ? alEl.getAttribute('repeatCount') === 'indefinite' : false
      const time = alEl ? alEl.getAttribute('dur') : 0

      const urlList = []

      if (srcElList) {
        for (let j = 0; j < srcElList.length; j++) {
          const backgroundImage = srcElList[j].style.backgroundImage
          const url = backgroundImage.match(/url\("(.+)"\)/)[1]
          if (j !== 0) {
            urlList.push(url)
          }
        }
      }

      let html = '<div class="swiper-wrapper">'

      urlList.forEach(el => {
        html += `<div class="swiper-slide"><img data-src="${el}" class="not-preview-image local-image" src="${el}" alt=""></div>`
      })

      jqHtml(el, { type: 'set', str: html + `</div><div class="swiper-pagination"></div>` })

      swiper2Dom[i].before(el)
      swiper2Dom[i].remove()

      nextCallback(4, {
        id: `#${id}`, isLoop, length: urlList.length, time: parseInt(time)
      })
    }

    // 处理链接卡片
    for (let i = 0; i < linkCardDom.length; i++) {
      const titleEl = linkCardDom[i].querySelector('span.title') || linkCardDom[i].querySelector('span')

      const title = titleEl ? titleEl.textContent : trim(linkCardDom[i].textContent || '')
      const image = linkCardDom[i].querySelector('img')
      const a = linkCardDom[i].querySelector('a') || linkCardDom[i].querySelector('p:last-child')

      let imageUrl = image ? image.getAttribute('src') || image.getAttribute('data-src') : ''

      imageUrl = checkFileType(imageUrl) === '1' ? imageUrl : ''

      const hrefUrl = a
        ? a.getAttribute('href') || a.getAttribute('_href') || a.getAttribute('data-href') || a.textContent
        : ''
      const dataRmrbnativeEl = linkCardDom[i].querySelector('p.link')

      const el = document.createElement('a')
      el.setAttribute('class', imageUrl ? 'preview-link-card-mobile card-image' : 'preview-link-card-mobile')
      el.setAttribute('data-rmrbnative', dataRmrbnativeEl ? dataRmrbnativeEl.getAttribute('data-rmrbnative') : '')
      el.setAttribute('href', hrefUrl)
      el.setAttribute('target', '_blank')

      let linkIcon = `icon_Y_lianjie`

      const isDark = document.querySelector('html').getAttribute('dark-mode') === 'true'

      if (!isDark) {
        linkIcon = `icon_Y_lianjie`
      }
      if (imageUrl) {
        jqHtml(el, {
          type: 'set',
          str: `<div class="left"><img data-src="${imageUrl}" class="not-preview-image local-image" src="${imageUrl}" alt=""></div><div class="right"><div class="preview-link-title "><img class="not-preview-image local-image" data-src="./image/${linkIcon}.svg" src="./image/${linkIcon}.svg" alt="">${title}</div><div class="preview-link"><span>${hrefUrl || ''}</span></div></div>`
        })
      } else {
        jqHtml(el, {
          type: 'set',
          str: `<div class="preview-link-title "><img class="not-preview-image local-image" src="./image/${linkIcon}.svg" data-src="./image/${linkIcon}.svg" alt="">${title}</div><div class="preview-link"><span>${hrefUrl || ''}</span></div>`
        })
      }

      linkCardDom[i].before(el)
      linkCardDom[i].remove()
    }

    // 处理音频
    for (let i = 0; i < audioDom.length; i++) {
      const dataId = `zh_audio_${i}`
      let audioEl
      let coverEl
      let titleEl
      let title = ''
      let cover = ''
      let audioSrc = ''

      audioEl = audioDom[i].querySelector('audio source')
      coverEl = audioDom[i].querySelector('.audioStyleLeftImg')

      if (!audioEl) {
        audioEl = audioDom[i].querySelector('audio')
      }

      titleEl = audioDom[i].querySelector('.audioStyleTitle')
      if (titleEl) {
        title = titleEl.textContent
        // title = '测试库'
      }
      if (audioEl) {
        audioSrc = audioEl.getAttribute('src')
      }

      if (!coverEl) {
        coverEl = audioDom[i].querySelector('img.audioStyleLeftImg')

        if (!coverEl) {
          const imageListEl = audioDom[i].querySelectorAll('img')
          imageListEl.forEach((el, index) => {
            const className = el.getAttribute('class')
            let hasCover = false
            if (className) hasCover = !isNaN(Number(className)) && typeof Number(className) === 'number'
            if (index === 0 && hasCover) coverEl = el
          })
        }
      }

      if (coverEl) {
        cover = coverEl.getAttribute('src') || coverEl.getAttribute('data-src')
      }
      const el = document.createElement('div')
      el.setAttribute('data-id', dataId)
      el.setAttribute('class', cover ? 'preview-audio-player-cover' : 'preview-audio-player')
      let publicImageUrl = './image/audio'
      const pauseIcon = 'audioPause'
      const playIcon = 'audioPlay'

      const isDark = document.querySelector('html').getAttribute('dark-mode') === 'true'

      if (isDark) {
        publicImageUrl = './image/dark'
      }
      const noCoverTitle = `<div class="audio-title "><div class="audio-notice-title">${title}</div></div>`
      if (cover) {
        jqHtml(el, {
          type: 'set',
          str: `<audio src="${audioSrc}" class="audio-block hidden"></audio><div class="left"><img class="not-preview-image local-image" data-src="${cover}" src="" alt=""></div><div class="right"><div class="audio-title" data-cover="cover"><div class="audio-notice-title">${title}</div></div><div class="audio-extra"><div class="audio-time"><span class="audio-current droidSerif">00:00</span><span class="droidSerif audio-current">/</span><span class="audio-durtion droidSerif">00:00</span></div><div class="audio-extral-iocn"><div class="audio-bg"><img data-src="${publicImageUrl}/audioBg.svg" src="${publicImageUrl}/audioBg.svg" alt="" class="not-preview-image local-image" /><img class="audio-play-icon active not-preview-image local-image" data-src="${publicImageUrl}/${pauseIcon}.svg" src="${publicImageUrl}/${pauseIcon}.svg" alt=""><img class="not-preview-image audio-pause-icon local-image" src="${publicImageUrl}/${playIcon}.svg" data-src="${publicImageUrl}/${playIcon}.svg" alt=""></div></div></div></div>`
        })
      } else {
        jqHtml(el, {
          type: 'set',
          str: `<audio src="${audioSrc}" class="audio-block hidden"></audio><div class="left"><img class="audio-play-icon not-preview-image local-image active mobileIcon" data-src="${publicImageUrl}/${pauseIcon}.svg" src="${publicImageUrl}/${pauseIcon}.svg" alt=""><img class="audio-pause-icon not-preview-image local-image mobileIcon" src="${publicImageUrl}/${playIcon}.svg" data-src="${publicImageUrl}/${playIcon}.svg" alt=""></div><div class="right" style="margin-top: ${title
            ? '0'
            : `${11 / 37.5}rem`}">${title
            ? noCoverTitle
            : ''}<div class="audio-progress-block"><div class="audio-progressed"></div></div><div class="audio-time" style="margin-top: ${title
            ? `${4 / 37.5}rem`
            : `${8 / 37.5}rem`}"><span class="audio-current droidSerif">00:00</span><span class="audio-durtion droidSerif">00:00</span></div></div>`
        })
      }

      if (audioSrc) {
        audioDom[i].before(el)
      }

      audioDom[i].remove()
    }

    const imageDom = document.querySelectorAll('#newsContent img')
    // 处理图片
    const effectImage = []
    for (let i = 0; i < imageDom.length; i++) {
      const name = imageDom[i].getAttribute('data-name')
      const classList = imageDom[i].getAttribute('class') || ''
      const src = imageDom[i].getAttribute('src') || imageDom[i].getAttribute('data-src') || ''
      if (/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/.test(src)) {
        nextCallback(1, src)
        const style = imageDom[i].style
        const isInline = style && style.display ? style.display.indexOf('inline') > -1 : false
        if (!classList.includes('not-preview-image') && name !== 'people' && !isInline) {
          effectImage.push(imageDom[i])
        } else if (imageDom[i]) {
          imageDom[i].setAttribute('status', 'loading')
        }
      } else {
        if (imageDom[i] && imageDom[i].classList && imageDom[i].classList.contains('local-image')) {
        } else {
          imageDom[i].remove()
        }
      }
    }
    for (let i = 0; i < effectImage.length; i++) {
      const photoList = details.photoList
      const src = effectImage[i].getAttribute('src') || effectImage[i].getAttribute('data-src') || ''
      const isLink = effectImage[i].parentNode && effectImage[i].parentNode.tagName === 'A' && !!effectImage[i].parentNode.getAttribute(
        'href')
      const networkStatus = [ 2, 3, 4, 5 ]
      const isDark = document.querySelector('html').getAttribute('dark-mode') === 'true'
      const imageSrc = isDark ? './image/placeHoldVlogo.svg' : './image/placeholdLogo.svg'
      const errorSrc = isDark ? './image/errorDark.svg' : './image/error.svg'
      let className = src ? netstutas == 1 || loadlmageOnlyWifiSwitch == '2'
        ? 'preview-image-block loading'
        : networkStatus.includes(Number(netstutas)) ? `preview-image-block loading no-network` : netstutas === 0
          ? 'preview-image-block loading error'
          : 'preview-image-block loading no-network' : 'preview-image-block loading error'
      let linkIocnHtml = ''
      if (isLink) {
        className = className + ' link-image'
        linkIocnHtml = `<div class="preview-image-link-icon"><img class="local-image" src="./image/image_link.svg" alt=""><span>链接</span></div>`
      }
      const parentNode = effectImage[i].parentNode
      const style = getComputedStyle(parentNode)
      const isInline = style.display === 'inline'
      const el = document.createElement(isInline ? 'span' : 'div')
      const findRecord = photoList.find(el => {
        const originSrc = src.split('?')[0]
        return handleMediaSrc(el.picPath) == handleMediaSrc(originSrc)
      })
      const previewSrc = handleImageSrc(src, 1, details.isNewspaper, findRecord)
      let width = effectImage[i].getAttribute('width') || effectImage[i].getAttribute('data-gifffer-width') || ''
      let height = effectImage[i].getAttribute('height') || effectImage[i].getAttribute('data-gifffer-height') || ''
      width = width ? Number(width) : 0
      height = height ? Number(height) : 0

      if (width) width = !isNaN(width) && typeof width === 'number' ? width : 0
      if (height) height = !isNaN(width) && typeof height === 'number' ? height : 0
      if (findRecord) {
        width = findRecord.width || width
        height = findRecord.height || height
      }
      width = width && isNumber(Number(width)) ? isNaN(Number(width)) ? 0 : Number(width) : 0
      height = height && isNumber(Number(height)) ? isNaN(Number(height)) ? 0 : Number(height) : 0

      if (width <= 0) width = 0
      if (height <= 0) height = 0

      const parentNodeWdith = findAncestorWithNonZeroWidth(effectImage[i])
      const parentWidth = parentNodeWdith ? parentNodeWdith.getBoundingClientRect().width : contentWidth
      const overMaxWidth = width > parentWidth
      el.setAttribute('class', className)
      el.setAttribute('status', 'loading')
      height = width && height ? overMaxWidth ? parentWidth * height / width : height : 0
      el.style.height = height ? `${height}px` : ''
      if (!height) el.classList.add('minHeight')
      jqHtml(el, {
        type: 'set',
        str: `<img class="image-player none image-player-${i}" src="" alt="" data-src="${previewSrc}" data-origin-src="${src}" data-image="image"><img class="preview-image-placehold local-image not-preview-image" style="width: ${height > 0 && height < 50 ? '1.6rem' : undefined}" src="${imageSrc}" alt=""><img class="preview-image-error not-preview-image local-image none" src="${errorSrc}" alt=""><span class="no-network-text">点击查看原图</span>${linkIocnHtml}`
      })

      try {
        if (parentNode && parentNode.tagName == 'A') {
          const href = parentNode.getAttribute('href')
          const dataRmrbnative = parentNode.getAttribute('data-rmrbnative')
          el.setAttribute('data-href', href)
          el.setAttribute('data-rmrbnative', dataRmrbnative)

          if (effectImage[i].parentNode.parentNode && effectImage[i].parentNode.parentNode.tagName == 'P') {
            const parentNodeP = effectImage[i].parentNode.parentNode
            if (parentNodeP.childNodes.length === 1) {
              effectImage[i].parentNode.parentNode.before(el)
              effectImage[i].parentNode.parentNode.remove()
            } else {
              effectImage[i].parentNode.before(el)
              effectImage[i].parentNode.remove()
            }
          } else {
            effectImage[i].parentNode.before(el)
            effectImage[i].parentNode.remove()
          }
        } else {
          effectImage[i].before(el)
          effectImage[i].remove()
        }
      } catch (e) {
        effectImage[i].before(el)
        effectImage[i].remove()
      }
    }

    // const previewImageEl = document.querySelectorAll('#newsContent .preview-image-block')
    // for (let i = 0; i < previewImageEl.length; i++) {
    //   const el = previewImageEl[i]
    //   const parentNode = el.parentNode
    //   if (parentNode.firstChild === el) {
    //     el.style.setProperty('margin-top', '0', 'important')
    //   }
    // }

    const videoDom = document.querySelectorAll('#newsContent video')
    const videoOutter = []
    for (let i = 0; i < videoDom.length; i++) {
      const parentNode = videoDom[i].parentNode
      if (parentNode.getAttribute('id') === 'newContent') {
        videoOutter.push(videoDom[i])
      }
    }

    for (let i = 0; i < videoOutter.length; i++) {
      const outterEl = document.createElement('p')
      outterEl.setAttribute('class', 'en-video-outter-content')
      outterEl.append(videoOutter[i].cloneNode())
      videoOutter[i].before(outterEl)
      videoOutter[i].remove()
    }

    const videoDomList = document.querySelectorAll('#newsContent video')
    for (let i = 0; i < videoDomList.length; i++) {
      let width = 0
      let height = 0
      const videoEl = videoDomList[i]
      const videoElId = `origin-video-${i}`
      if (videoEl) {
        videoEl.setAttribute('id', videoElId)
        videoEl.setAttribute('class', 'en-origin-video')
      }
      const src = videoDomList[i].getAttribute('src')
      if (!src) break
      if (videoEl && videoEl.style.display === 'none') break
      if (videoDomList[i].getAttribute('style')) {
        const style = videoDomList[i] ? videoDomList[i].getAttribute('style').split(';') : []
        style.forEach(el => {
          if (el.includes('width') && !el.includes('max')) {
            width = el.includes('width: ') ? el.split('width: ')[1] : el.split('width:')[1]
          } else if (el.includes('height') && !el.includes('max')) {
            height = el.includes('height: ') ? el.split('height: ')[1] : el.split('height:')[1]
          }
        })
      }
      const videoInfoList = details.videoInfo || []

      const findRecord = videoInfoList.find(el => handleMediaSrc(el.videoUrl) === handleMediaSrc(src))
      if (findRecord && (!width || !height)) {
        width = findRecord.resolutionWidth
        height = findRecord.resolutionHeight
      }

      if ((!width || !height)) {
        width = videoEl.getAttribute('data-vwidth') || videoEl.getAttribute('data-width')
        height = videoEl.getAttribute('data-vheight') || videoEl.getAttribute('data-height')
      }

      width = width && isNumber(Number(width)) ? isNaN(Number(width)) ? 0 : Number(width) : 0
      height = height && isNumber(Number(height)) ? isNaN(Number(height)) ? 0 : Number(height) : 0

      if (width <= 0) width = 0
      if (height <= 0) height = 0
      const parentNode = videoDomList[i].parentNode
      const parentWidth = parentNode ? parentNode.getBoundingClientRect().width : contentWidth
      let styleHeight = width === 0 ? 0 : Number(parentWidth) / (width / height)

      if (!styleHeight) styleHeight = 150

      const id = getRandomNumber().uuid(10)
      const poster = videoDomList[i].getAttribute('data-poster') || videoDomList[i].getAttribute('poster') || details.firstFrameImageUri

      const el = document.createElement('div')
      el.setAttribute('class', 'preview-video init')
      jqHtml(el, {
        type: 'set',
        str: `<div id="video-player-${i}" class="video-player video-player-${i}" style="height: ${styleHeight}px" data-height="${height || '0'}" data-width="${width || '0'}" data-id="${id}"></div>`
      })

      const sibling = videoDomList[i].nextElementSibling || videoDomList[i].previousElementSibling
      if (parentNode) {
        let containsText = false
        if (sibling) {
          var childNodes = sibling.childNodes
          for (let a = 0; a < childNodes.length; a++) {
            if (childNodes[a].nodeType === Node.TEXT_NODE && childNodes[a].textContent.trim() !== '') {
              containsText = true
              break
            }
          }
        }
        if (parentNode.getAttribute('id') === 'newsContent' || containsText) {
          videoEl.before(el)
          videoEl.remove()
        } else {
          parentNode.before(el)
          parentNode.remove()
        }
      }
      nextCallback(2, { src, id, poster, originId: videoElId, isNewspaper: details.isNewspaper })
    }

    const aEl = document.querySelectorAll('#newsContent a')
    for (let i = 0; i < aEl.length; i++) {
      const url = aEl[i].getAttribute('href')
      if (aEl[i]) {
        aEl[i].setAttribute('data-href', url || '')
      }
      aEl[i].removeAttribute('href')
      aEl[i].style.textDecoration = 'underline'
    }

    const olstyleEl = document.querySelectorAll('#newsContent [style*="list-style-type: decimal"] li')
    for (let i = 0; i < olstyleEl.length; i++) {
      olstyleEl[i].style.marginLeft = `${21 / 37.5}rem`
    }

    const underLineEl = document.querySelectorAll(
      '#newsContent [style*="text-decoration"], [style*="text-decoration-line"]')
    for (let i = 0; i < underLineEl.length; i++) {
      if (underLineEl[i].style.textDecorationLine === 'underline' || underLineEl[i].style.textDecoration === 'underline') {
        underLineEl[i].style.textUnderlineOffset = '4px'
      }
    }

    const globalLineDom = document.querySelectorAll(`#newsContent .global-line`)
    for (let i = 0; i < globalLineDom.length; i++) {
      const parentEl = globalLineDom[i].parentNode

      let color = parentEl.style.color

      function getParentColor(el) {
        if (el && el.getAttribute('id') === 'newsContent') {
        } else if (el.style.color) {
          color = el.style.color
        } else {
          getParentColor(el.parentNode)
        }
      }

      if (!color) getParentColor(parentEl.parentNode)

      globalLineDom[i].style.backgroundColor = color

      if (parentEl.style.fontWeight > 500 || parentEl.style.fontWeight === 'bold' || parentEl.nodeName === 'STRONG') {
        globalLineDom[i].style.height = `${2 / 37.5}rem`
        globalLineDom[i].style.top = `${-4.5 / 37.5}rem`
      } else {
        globalLineDom[i].style.height = `${1 / 37.5}rem`
      }
    }

    // const lastEle = document.querySelector('#newsContent')
    //   ? document.querySelector('#newsContent').lastElementChild
    //   : null
    //
    // if (lastEle && lastEle.lastChild && lastEle.lastChild.classList && lastEle.lastChild.classList.contains(
    //   'preview-image-block')) {
    //   const el = lastEle.lastChild
    //   el.style.setProperty('margin-bottom', '0', 'important')
    // }
    // if (lastEle && lastEle.style) {
    //   if (lastEle.childNodes && lastEle.childNodes.length === 1) {
    //     if (lastEle.childNodes[0].tagName === 'BR') {
    //       if (lastEle.previousElementSibling) {
    //         lastEle.previousElementSibling.style.setProperty('margin-bottom', '0', 'important')
    //       }
    //     }
    //   } else {
    //     lastEle.style.setProperty('margin-bottom', '0', 'important')
    //   }
    // }

    let html = jqHtml(document.querySelector('#newsContent'), { type: 'get' })
    jqHtml(document.querySelector('#newsContent'), { type: 'set', str: html })
  }
}