import Dialog from "../../../BaseDialog/index";
import cy_tabs from "../../Element/cy_html_tabs";

let _DialogObject

const openNodeListById = async (that, id) => {
  if (_DialogObject && !_DialogObject.isDestroy) {
    _DialogObject.close()
    _DialogObject = null
  }
  let currentData = []
  const createTableContent = () => {
    let trsElm = ''
    for (let i = 0; i < currentData.length; i++) {
      let trElm = '<tr class="el-table__row">'
      let tdElm = ''
      if ('fid' in currentData[i].properties) {
        tdElm = `<td rowspan="1" colspan="1" class="el-table_1_column_${i}   el-table__cell"><div class="cell">${currentData[i].properties.fid}</div></td>`
      }
      for (let key in currentData[i].properties) {
        if (key !== 'id' && key !== 'ID' && key !== 'fid') {
          tdElm = tdElm + `<td rowspan="1" colspan="1" class="el-table_1_column_${i}   el-table__cell"><div class="cell">${currentData[i].properties[key]}</div></td>`
        }
      }
      trElm = trElm + tdElm + '</tr>'
      trsElm = trsElm + trElm
    }
    return trsElm
  }
  let flag = false
  for (let i = 0; i < that.geojson.features.length; i++) {
    if (that.geojson.features[i].properties.id && that.geojson.features[i].properties.id == id) {
      currentData = [that.geojson.features[i]]
      flag = true
      break
    }
  }
  if (!flag) {
    window.ELEMENT && window.ELEMENT.Message({
      message: '数据不存在！',
      type: 'warning',
      duration: 1500
    });
    return
  }
  _DialogObject = await new Dialog(that.viewer._container, {
    title: id, left: '17%', top: '100px'
  })
  await _DialogObject.init()
  let trsElm = createTableContent(that)

  let box = document.createElement('div')
  box.style.height = '100%'
  let talbeElm = '<div class="el-table el-table--fit el-table--border el-table--scrollable-x el-table--scrollable-y el-table--enable-row-hover el-table--enable-row-transition" style="width: 100%; height: 100%;">'
  let headerElm = '<div class="el-table__header-wrapper"><table cellspacing="0" cellpadding="0" border="0" class="el-table__header" style="width: 930px;">'
  let hcolgroupElm = '<colgroup>'
  let theadElm = '<thead class="has-gutter"><tr>'
  let bodyElm = '<div class="el-table__body-wrapper is-scrolling-none" style="height: 620px;"><table cellspacing="0" cellpadding="0" border="0" class="el-table__body" style="width: 913px;">'
  let bcolgroupElm = '<colgroup>'

  let i = 1
  // thead
  if ('fid' in that.geojson.features[0].properties) {
    hcolgroupElm = hcolgroupElm + `<col name="el-table_1_column_${i}" width="150">`
    bcolgroupElm = bcolgroupElm + `<col name="el-table_1_column_${i}" width="150">`
    theadElm = theadElm + `<th colspan="1" rowspan="1" class="el-table_1_column_${i}     is-leaf el-table__cell"><div class="cell">fid</div></th>`
    i++
  }
  for (let key in that.geojson.features[0].properties) {
    if (key !== 'id' && key !== 'ID' && key !== 'fid') {
      hcolgroupElm = hcolgroupElm + `<col name="el-table_1_column_${i}" width="150">`
      bcolgroupElm = bcolgroupElm + `<col name="el-table_1_column_${i}" width="150">`
      theadElm = theadElm + `<th colspan="1" rowspan="1" class="el-table_1_column_${i}     is-leaf el-table__cell"><div class="cell">${key}</div></th>`
      i++
    }
  }
  //tbody
  let tbodyElm = '<tbody>'
  tbodyElm = tbodyElm + trsElm + '</tbody>'
  hcolgroupElm = hcolgroupElm + '<col name="gutter" width="17"></colgroup>'
  bcolgroupElm = bcolgroupElm + '</colgroup>'
  theadElm = theadElm + '</tr></thead>'
  headerElm = headerElm + hcolgroupElm + theadElm + '</table></div>'
  bodyElm = bodyElm + bcolgroupElm + tbodyElm + '</table></div>'
  talbeElm = talbeElm + headerElm + bodyElm + '</div>'

  let tabsElm = `
    <DIV-cy-tabs id="shp-list-id-tabs">
    <DIV-cy-tab-pane label="属性列表">
      ${talbeElm + '<div class="pagination"></div>'}
    </DIV-cy-tab-pane>
  `
  if (currentData[0].content && currentData[0].content.richTextContent) {
    let tabPaneElm = `
      <DIV-cy-tab-pane class="editor-content-view" label="富文本信息">
      ${currentData[0].content.richTextContent}
      </DIV-cy-tab-pane>
    `
    tabsElm = tabsElm + tabPaneElm
  }
  if (currentData[0].content && currentData[0].content.link && currentData[0].content.link.content && currentData[0].content.link.content.length > 0) {
    for (let i = 0; i < currentData[0].content.link.content.length; i++) {
      let url = currentData[0].content.link.content[i].url
      let tabPaneElm = `
      <DIV-cy-tab-pane class="editor-content-view" label="${currentData[0].content.link.content[i].name}">
      <iframe src="${url}"></iframe>
      </DIV-cy-tab-pane>
    `
      tabsElm = tabsElm + tabPaneElm
    }
  }
  tabsElm = tabsElm + '</DIV-cy-tabs>'
  box.innerHTML = tabsElm
  // that.viewer._container.appendChild(box)
  _DialogObject.contentAppChild(box)
  new cy_tabs('shp-list-id-tabs')
  let tabsNode = box.getElementsByClassName('DIV-cy-tabs')[0]
  tabsNode.style.height = '100%'
  tabsNode.style.display = 'flex'
  tabsNode.style.flexDirection = 'column';
  tabsNode.getElementsByClassName('DIV-cy-tab-content')[0].style.flex = '1'
  let tabContentPane = tabsNode.getElementsByClassName('DIV-cy-tab-content-pane')
  for (let i = 0; i < tabContentPane.length; i++) {
    tabContentPane[i].style.height = '100%'
  }
  let headerWrapper = box.getElementsByClassName('el-table__header-wrapper')[0]
  let bodyWrapper = box.getElementsByClassName('el-table__body-wrapper')[0]
  bodyWrapper.addEventListener('scroll', function (e) {
    headerWrapper.scrollLeft = e.target.scrollLeft
  });
  _DialogObject._element.title.style.height = '40px'
  _DialogObject._element.body.style.width = '65%'
  _DialogObject._element.body.style.height = '80%'
  _DialogObject._element.content.style.height = 'calc(100% - 40px)'
  _DialogObject._element.foot.style.display = 'none'

  bodyWrapper.style.height = `calc(100% - ${headerWrapper.offsetHeight}px)`
}

export { openNodeListById }