/* eslint-disable no-undef */
// import Sortable from 'sortablejs'

export class XbTableClass {
  public table: XbTable = reactive({
    ref: undefined,
    pk: 'id',
    data: [],
    remark: null,
    loading: false,
    selection: [],
    column: [],
    page: {
      size: 20,
      current: 1,
      total: 0,
    },
    filter: {},
    dragSortLimitField: 'pid',
    acceptQuery: true,
    showComSearch: false,
    dblClickNotEditColumn: [undefined],
    expandAll: false,
    extend: {},
    pageSizes: [10, 20, 50, 100],
    moveRow: {},
    replaceRowBefore: {},
    replaceRow: {},
    replaceRowAfter: {},
    border: false,
    stripe: false,
    layout: {
      shrink: false,
    },
    expandRowKeys: [],
    headerCellStyle: {
      backgroundColor: '#FAFAFB',
      color: '#535353',
      fontWeight: 500,
      height: '64px',
    },
  })

  public action

  constructor(table: XbTable, action?: { [key: string]: any }) {
    this.table = Object.assign(this.table, table)
    this.action = action
  }

  onTableAction = (event: string, data: anyObj) => {
    if (!this.action || !this.action[event]) {
      console.error(`No thing ${event}!`)
      return
    }
    this.action[event](data)
  }

  /**
   * 初始化表格拖动排序
   */
  dragSort = () => {
    if (!this.table.ref) {
      console.warn(
        'Failed to initialize drag sort because table ref is not defined. Please assign table ref when onMounted',
      )
      return
    }

    // const _el = this.table.ref
    //   .getRef()
    //   .$el.querySelector('.el-table__body-wrapper .el-table__body tbody')
    // Sortable.create(el, {
    //     animation: 200,
    //     handle: '.table-row-sort',
    //     ghostClass: 'xb-table-row',
    //     onStart: (evt: Sortable.SortableEvent) => {
    //         // this.table.column[buttonsKey].buttons?.forEach((item) => {
    //         //     item.disabledTip = true
    //         // })
    //     },
    //     onEnd: (evt: Sortable.SortableEvent) => {
    //         if (!this.table.data) return
    //         const { oldIndex, newIndex } = evt
    //         // 移动的行
    //         this.table.moveRow = this.table.data?.[oldIndex]
    //         // 移动目的的行
    //         if (newIndex === 0) {
    //             // 首行置顶
    //             this.table.replaceRow = {}
    //             this.table.replaceRowAfter = this.table.data[0]
    //         } else if (oldIndex < newIndex) {
    //             // 往后移动
    //             this.table.replaceRow = this.table.data?.[newIndex]
    //             this.table.replaceRowAfter = this.table.data?.[newIndex + 1]
    //         } else {
    //             // 往前移动
    //             this.table.replaceRow = this.table.data?.[newIndex - 1]
    //             this.table.replaceRowAfter = this.table.data?.[newIndex]
    //         }

    //         this.table.onRowMove && this.table.onRowMove()
    //     },
    // })
  }

  _foldAll = (arr: any[], state: boolean) => {
    for (const i in arr) {
      const d = arr[i]
      this.table.ref!.getRef()?.toggleRowExpansion(d, state)
      if (d.children && d.children.length > 0) {
        this._foldAll(d.children, state)
      }
    }
  }
  /**
   * 树表折叠所有行
   */
  foldAll = () => {
    this._foldAll(this.table.data!, false)
  }
}
