<template>
    <!-- 可拖拽表格 -->
    <su-table-check
        ref="table"
        :data="data"
        :class="tableClass"
        v-bind="$attrs"
        v-on="$listeners"
    >
        <slot></slot>
        <el-table-column label="" width="50" v-if="moveIcon">
            <template>
                <div class="move">
                    <i class="el-icon-rank" style="font-size: 25px;"></i>
                </div>
            </template>
        </el-table-column>
    </su-table-check>
</template>

<script>
import seTableCheck from '../su-table-check/index.vue';
import Sortable from "sortablejs";

export default {
    name: "veDragTable",
    components: {
        seTableCheck
    },
    data() {
        return {
            renderClass: "id" + parseInt(Number(Math.random() * 10000000000)),
        };
    },
    props: {
        data: {
            type: Array,
            default: [],
            selected: false
        },
        allScroll: {
            type: Boolean,
            default: false,
        },
        moveIcon: {
            type: Boolean,
            default: true,
        },
    },
    watch: {},
    computed: {
        isAllScroll() {
            return this.allScroll || !this.moveIcon;
        },
        tableClass() {
            let map = {};
            map[this.renderClass] = true;
            map['all-scroll'] = this.isAllScroll;
            return map
        },
    },
    mounted() {
        const table = document.querySelector(
            "." + this.renderClass + " .el-table__body-wrapper tbody"
        );
        const self = this;
        Sortable.create(table, {
            animation: 200,
            delay: 20, sort: true,  // sorting inside list
            handle: self.isAllScroll ? "" : ".move",
            onEnd({newIndex, oldIndex}) {
                self.$emit("sortChange", {
                    resolve() {
                        return;
                    },
                    reject() {
                        self.changeRow(oldIndex, newIndex);
                    },
                    rowData: self.data[oldIndex],
                    newIndex: newIndex,
                    oldIndex: oldIndex
                });
                self.changeRow(newIndex, oldIndex);
            }
        });
    },
    methods: {
        changeRow(newIndex, oldIndex) {
            //换位子
            const targetRow = this.data.splice(oldIndex, 1)[0];
            this.data.splice(newIndex, 0, targetRow);
        },
        async setSelectionData(selection) {
            let table = await this.getRef('table');
            table.setSelectionData(selection);
        },
        async  getSelectionData() {
            let table = await this.getRef('table');
            return table.getSelectionData();
        },
        async clearSelection() {
            let table = await this.getRef('table');
            table.clearSelection();
        }
    }
};
</script>

<style lang="less" scoped>
.move {
    cursor: all-scroll;
}

.all-scroll {
    /deep/ .el-table__row {
        cursor: all-scroll;
    }
}
</style>
