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

<script>
import seTable from '../su-table/index.vue';
import Sortable from "sortablejs";
// https://www.itxst.com/sortablejs/neuinffi.html
export default {
    name: "veDragTable",
    components: {
        seTable
    },
    props: {
        data: {
            type: Array,
            default: [],
            selected: false
        },
        allScroll: {
            type: Boolean,
            default: false,
        },
        moveIcon: {
            type: Boolean,
            default: true,
        },
        positionIcon: { // 拖拽图标位置
            type: String,
            default: 'begin',
        },
    },
    computed: {
        tableClass() {
            let map = {};
            map[this.renderClass] = true;
            map['all-scroll'] = this.isAllScroll;
            return map
        },
        isAllScroll(){
            return this.allScroll||!this.moveIcon;
        }
    },
    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);
            }
        });
    },
    data() {
        return {
            renderClass: "id" + parseInt(Number(Math.random() * 10000000000))
        };
    },
    methods: {
        changeRow(newIndex, oldIndex) {
            //换位子
            const targetRow = this.data.splice(oldIndex, 1)[0];
            this.data.splice(newIndex, 0, targetRow);
        }
    }
};
</script>

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

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