import Sortable from 'sortablejs'

// 表格行列排序
export const useSortable = (props, emits, options, callback) => {
    let sortRow: any = null
    let sortColumn: any = null
    const rowDrop = () => {
        const tbody = document.querySelector('.ep-table__body tbody')
        sortRow = Sortable.create(tbody, {
            animation: 150,
            handle: '.handle',
            onEnd ({ newIndex, oldIndex }: { newIndex: number, oldIndex: number }) {
                const currentRow = props.list.splice(oldIndex, 1)[0]
                props.list.splice(newIndex, 0, currentRow)
                emits('dropEnd', { oldIndex, newIndex, currentRow, list: props.list })
            }
        })
    }
    
    const columnDrop = () => {
        const wrapperTr = document.querySelector('.ep-table__header-wrapper tr')
        sortColumn = Sortable.create(wrapperTr, {
            animation: 150,
            handle: '.handleColumn',
            preventOnFilter: false,
            // eslint-disable-next-line complexity
            onEnd ({ newIndex, oldIndex }: { newIndex: number, oldIndex: number }) {
                if (newIndex === oldIndex) return
                let _oldIndex = oldIndex
                let _newIndex = newIndex
                if (options.value.multiple || options.value.chooseOne) { // 单选多选不同时存在
                    // if (newIndex === 0) {
                    //     updateKeys.value = Math.random()
                    //     nextTick(() => {
                    //         createColumnSort()
                    //     })
                    // }
                    _oldIndex -= 1
                    _newIndex -= 1
                }
                if (options.value.index) {
                    _oldIndex -= 1
                    _newIndex -= 1
                }
                if (options.value.expand) {
                    _oldIndex -= 1
                    _newIndex -= 1
                }
                if (options.value.isDrop) {
                    _oldIndex -= 1
                    _newIndex -= 1
                }
                if (_oldIndex < 0 || _newIndex < 0) return
                callback({ oldIndex: _oldIndex, newIndex: _newIndex })
            }
        })
    }

    const createRowSort = () => {
        if (sortRow) {
            sortRow.destroy()
            sortRow = null
        }
        if (options.value.isDrop) { // 行
            rowDrop()
        }
    }
    const createColumnSort = () => {
        if (sortColumn) {
            sortColumn.destroy()
            sortColumn = null
        }
        if (options.value.isColumnDrop) { // 列
            columnDrop()
        }
    }
    const destroySort = () => {
        if (sortRow) {
            sortRow.destroy()
            sortRow = null
        }
        if (sortColumn) {
            sortColumn.destroy()
            sortColumn = null
        }
    }

    return {
        createColumnSort,
        createRowSort,
        destroySort
    }
}