import Dialog from "../../../BaseDialog/index";
import { generatePagination } from "../../Element/Pagination";

let _DialogObject

const openAllNodeList = async (that) => {
  let total = 0
  let page = 1
  let pageSize = 20
  let currentData = []

  if (_DialogObject && !_DialogObject.isDestroy) {
    _DialogObject.close()
    _DialogObject = null
  }

  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
  }

  _DialogObject = await new Dialog(that.viewer._container, {
    title: '', left: '17%', top: '100px'
  })
  await _DialogObject.init()
  let dataArrayFilter = [...that.geojson.features]
  total = dataArrayFilter.length
  currentData = dataArrayFilter.slice(pageSize * (page - 1), pageSize * page)

  let trsElm = createTableContent()

  let box = document.createElement('div')
  box.style.height = '100%'
  let searchElm = '<div class="search-box" style="display: flex;margin-bottom: 10px;"><input class="input" type="text" placeholder="输入关键字搜索" style="width: 180px; margin-right: 10px;"><button class="btn search">搜索</button><button type="button" style="position: absolute;right:20px;" class="el-button el-button--primary is-plain export"><span>导出</span></button></div>'
  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: calc(100% - 100px);">'
  let headerElm = '<div class="el-table__header-wrapper"><table cellspacing="0" cellpadding="0" border="0" class="el-table__header" style="width: 1213px;">'
  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: 1186px;">'
  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>'
  //empty
  let emptyElm = '<div class="el-table__empty-block" style="height: 100%;"><span class="el-table__empty-text">暂无数据</span></div>'

  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>' + emptyElm + '</div>'
  talbeElm = talbeElm + headerElm + bodyElm + '</div>'


  box.innerHTML = searchElm + talbeElm + '<div class="pagination"></div>'
  let emptyNode = box.getElementsByClassName('el-table__empty-block')[0]
  if (currentData.length == 0) {
    emptyNode.style.display = 'flex'
  }
  else {
    emptyNode.style.display = 'none'
  }
  // this.viewer._container.appendChild(box)
  _DialogObject.contentAppChild(box)
  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.content.style.overflow = 'hidden'
  _DialogObject._element.foot.style.display = 'none'

  bodyWrapper.style.height = `calc(100% - ${headerWrapper.offsetHeight}px)`
  let paginationElm = box.getElementsByClassName('pagination')[0]
  generatePagination(paginationElm, total, pageSize, page, (pageIndex) => {
    page = pageIndex
    currentData = dataArrayFilter.slice(pageSize * (page - 1), pageSize * page)
    let trsElm = createTableContent()
    box.getElementsByTagName('tbody')[0].innerHTML = trsElm
    if (currentData.length == 0) {
      emptyNode.style.display = 'flex'
    }
    else {
      emptyNode.style.display = 'none'
    }
  });
  const search = () => {
    let input = box.getElementsByClassName('search-box')[0].getElementsByTagName('input')[0]
    let array = []
    for (let i = 0; i < that.geojson.features.length; i++) {
      for (let key in that.geojson.features[i].properties) {
        let str = that.geojson.features[i].properties[key] + ''
        if (str.indexOf(input.value) != -1) {
          array.push(that.geojson.features[i])
          break
        }
      }
    }
    dataArrayFilter = array
    total = dataArrayFilter.length
    currentData = dataArrayFilter.slice(pageSize * (page - 1), pageSize * page)
    if (currentData.length == 0) {
      emptyNode.style.display = 'flex'
    }
    else {
      emptyNode.style.display = 'none'
    }
    let trsElm = createTableContent()
    box.getElementsByTagName('tbody')[0].innerHTML = trsElm
    generatePagination(paginationElm, total, pageSize, page, (pageIndex) => {
      page = pageIndex
      currentData = dataArrayFilter.slice(pageSize * (page - 1), pageSize * page)
      let trsElm = createTableContent()
      box.getElementsByTagName('tbody')[0].innerHTML = trsElm
      if (currentData.length == 0) {
        emptyNode.style.display = 'flex'
      }
      else {
        emptyNode.style.display = 'none'
      }
    });
  }
  box.getElementsByClassName('search')[0].addEventListener('click', () => {
    pageSize = 20
    page = 1
    search()
  })
  box.getElementsByClassName('export')[0].addEventListener('click', () => {
    let data = []
    for (let i = 0; i < that.geojson.features.length; i++) {
      data.push({ ...that.geojson.features[i].properties, 'positions': JSON.stringify(that.geojson.features[i].geometry.positions) })
    }
    that.exportExcel(data)
  })
}

export { openAllNodeList }