<template>
    <div :id="'items'+nodeIndex" style="margin-top: 10px;">
        <el-table
                :data="items"
                row-key="idIndex"
                :ref="`nodeItemTable${nodeIndex}`"
                class="custom-sortable-row"
                border>
            <el-table-column type="index" align="center" label="序号" width="80"/>
            <el-table-column prop="enforce_class" show-overflow-tooltip label="检查类型">
                <template slot-scope="scope">
                            <span v-if="scope.row.handbook">
                                {{ scope.row.handbook.enforce_class }}
                            </span>
                    <span v-else></span>
                </template>
            </el-table-column>
            <el-table-column prop="enforce_item" show-overflow-tooltip label="检查项">
                <template slot-scope="scope">
                            <span v-if="scope.row.handbook">
                                {{ scope.row.handbook.fullName }}
                            </span>
                    <span v-else></span>
                </template>
            </el-table-column>
            <el-table-column prop="enforce_method" label="检查流程及方法" show-overflow-tooltip>
                <template slot-scope="scope">
                            <span v-if="scope.row.handbook">
                                {{ scope.row.handbook.enforce_method }}
                            </span>
                    <span v-else></span>
                </template>
            </el-table-column>
            <el-table-column prop="action" label="操作" align="center" width="270">
                <template slot-scope="scope">
                    <el-button type="text" icon="el-icon-edit"
                               @click="handleEditItem(nodeIndex, scope.$index)">
                        编辑
                    </el-button>

                    <el-button type="text" icon="el-icon-delete"
                               @click="handleDeleteItem(nodeIndex, scope.$index)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import Sortable from 'sortablejs'

export default {
    name: "NodeItemsTable",
    props: {
        nodeIndex: {
            type: Number
        },
        items: {
            type: Array
        }
    },
    data() {
        return {
            itemsTmp: []
        }
    },
    mounted() {
        this.itemDrop();
    },
    methods: {
        itemDrop() {
            // const _this = this
            // //行拖拽
            // const id = '#items' + this.nodeIndex;
            // const tbody = document.querySelector(id + ' .el-table__body-wrapper tbody')
            // Sortable.create(tbody, {
            //     onEnd({newIndex, oldIndex}) {
            //         // const currRow = _this.items.splice(oldIndex, 1)[0]
            //         // _this.items.splice(newIndex, 0, currRow)
            //         _this.swap(newIndex, oldIndex)
            //     }
            // })
            const table = `nodeItemTable${this.nodeIndex}`;
            const el = this.$refs[table].$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0];
            const vm = this;
            Sortable.create(el, {
                ghostClass: 'custom-sortable',
                forceFallback: true,
                setData: function(dataTransfer) {
                    dataTransfer.setData('Text', '')
                },
                onEnd: evt => {
                    // const targetRow = vm.nodes.splice(evt.oldIndex, 1)[0];
                    // vm.nodes.splice(evt.newIndex, 0, targetRow);
                    vm.swap(evt.oldIndex, evt.newIndex);
                }
            })
        },
        swap(itemIndex1, itemIndex2) {
            this.$emit("swapItems", this.nodeIndex, itemIndex1, itemIndex2)
        },
        handleEditItem(nodeIndex, itemIndex) {
            this.$emit('handleEditItem', nodeIndex, itemIndex);
        },
        handleDeleteItem(nodeIndex, itemIndex, row) {
            this.$emit('handleDeleteItem', nodeIndex, itemIndex);
        },

    }
}
</script>
