 <style lang="less" scoped>
.modal-body-content {
    height: 300px;
    overflow: auto;
}
.table {
    width: 100%;
    th,
    td {
        padding: 4px;
        text-align: center;
    }
}
</style>

<template>
    <div>
        <Icon type="md-cog" @click="modalshow=true" size="20" />
        <Modal v-model="modalshow" title="自定义表头(可拖动)" @on-ok="ok">
            <div class="modal-body-content">
                <table class="table">
                    <thead>
                        <tr>
                            <th></th>
                            <th>序号</th>
                            <th>表头名称</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr
                            v-for="(column,index) in scopeColumns"
                            :key="index"
                            @mouseover="setCurrent(column)"
                        >
                            <td class="column-checkbox">
                                <Checkbox v-model="column.show"></Checkbox>
                            </td>
                            <td class="column-index">{{index + 1}}</td>
                            <td class="column-title">{{ column.title}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </Modal>
    </div>
</template>
<script>
import { tools } from 'hq-tools';
export default {
    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(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>
