 <style lang="less" scoped>
.column {
    display: flex;
    flex-wrap: nowrap;
    //cursor: move;
    padding: 8px;
    &.thead {
        font-weight: bold;
        background: white;
    }
    &.tbody:hover {
        // box-shadow: 2px 1px 4px 4px #eee;
        // margin-bottom: 2px;
        // border-radius: 2px;
    }
    div {
        text-align: center;
    }
    &-checkbox {
        width: 50px;
    }
    &-index {
        width: 50px;
        white-space: nowrap;
    }
    &-title {
        flex-grow: 1;
    }
    &-operation {
        width: 100px;
        .icon-btn {
            margin: 2px;
            //cursor: pointer;
            &:hover {
                border-radius: 1px;
                border: 1px outset #eee;
            }
            &:active {
                border: 1px inset #eee;
            }
            &.to-top {
                transform: rotate(90deg);
            }
            &.upper {
                transform: rotate(-90deg);
            }
            &.lower {
                transform: rotate(90deg);
            }
            &.to-bottom {
                transform: rotate(-90deg);
            }
        }
    }
}
.sortable-drag {
    opacity: 1 !important;
    border: 1px solid gray;
    border-radius: 2px;
}
</style>

<template>
    <div>
        <Icon type="md-cog" @click="modalshow=true" size="20" />
        <Modal v-model="modalshow" title="自定义表头(可拖动)" @on-ok="ok">
            <div class="column thead">
                <div class="column-checkbox">

                </div>
                <div class="column-index">序号</div>
                <div class="column-title">表头名称</div>
            </div>
            <div class="column tbody" v-for="(column,index) in scopeColumns" :key="index" @mouseover="setCurrent(column)">
                <div class="column-checkbox">
                    <Checkbox v-model="column.show"></Checkbox>
                </div>
                <div class="column-index">
                    {{index + 1}}
                </div>
                <div class="column-title">{{ column.title}}</div>
            </div>
            <!-- <Draggable v-model="scopeColumns">

                <transition-group>
                    
                </transition-group>
            </Draggable> -->
        </Modal>
    </div>
</template>
<script>
import Draggable from "vuedraggable";
export default {
    components: {
        Draggable
    },
    data() {
        return {
            modalshow: false,
            scopeColumns: [],
            current: null
        };
    },
    props: {
        //列定义
        columns: {
            type: Array,
            default: () => {
                return [];
            }
        }
    },
    mounted() {
        this.setScopeColumns();
    },
    watch: {
        modalshow() {
            if (!this.modalshow) {
                this.setScopeColumns();
            }
        },
        columns() {
            this.setScopeColumns();
        }
    },
    methods: {
        setCurrent(column) {
            this.current = column;
        },
        isCurrent(column) {
            if (this.current === column) {
                return true;
            } else {
                return false;
            }
        },
        ok() {
            let sortObj = {};
            let index = 0;
            for (let column of this.scopeColumns) {
                sortObj[column.title] = {
                    show: column.show,
                    sortIndex: index
                };
                index++;
            }
            this.$emit("setSortObj", sortObj);
        },
        setScopeColumns() {
            this.scopeColumns = [];
            for (let column of this.columns) {
                if (!column.fixed) {
                    this.scopeColumns.push(this.$tools.clone(column));
                }
            }
        },
        upper(column) {
            let index = this.columns.indexOf(column);
            if (index > 0) {
                let temp = this.columns[index - 1];
                this.$set(this.columns, index - 1, column);
                this.$set(this.columns, index, temp);
            }
        }
    }
};
</script>
