<template>
    <Modal
        :value="true"
        title="网格编辑"
    >
        <div class="table-setting">
            <div class="table-setting__head">
                <span class="table-setting__rd table-setting__col-name">列名</span>
                <span class="table-setting__rd table-setting__hide">是否隐藏</span>
                <span class="table-setting__rd table-setting__width">宽度</span>
            </div>
            <div
                class="table-setting__body"
                ref="tBody"
            >
                <draggable
                    :options="{animation:500}"
                    class="tags"
                    tag="div"
                    v-model="data"
                >
                    <div
                        :key="index"
                        class="table-setting__item"
                        v-for="(item, index) in data"
                    >
                        <span class="table-setting__rd table-setting__col-name">{{item.col_name}}</span>
                        <div class="table-setting__rd table-setting__hide">
                            <Checkbox v-model="item.hide"></Checkbox>
                        </div>
                        <div
                            :class="{'table-setting__hav-scroll': !noScrollbar}"
                            class="table-setting__rd table-setting__width"
                        >
                            <InputNumber
                                :formatter="formatNum"
                                :max="999"
                                :min="0"
                                v-model="item.width"
                            />
                        </div>
                    </div>
                </draggable>
            </div>
        </div>
        <footer slot="footer">
            <div class="table-setting__footer">
                <span>拖拽排序</span>
                <!-- <Button type="primary" @click="refresh">刷新宽度</Button> -->
                <div style="display: flex;">
                    <Button @click="remove">取消</Button>
                    <Button
                        @click="save"
                        type="primary"
                    >确定</Button>
                </div>
            </div>
        </footer>
    </Modal>
</template>
<script>
import { stringify } from 'querystring'
import draggable from 'vuedraggable'
export default {
    name: 'TableSetting',
    components: {
        draggable
    },
    data() {
        return {
            data: [],
            noScrollbar: true
        }
    },
    props: {
        columns: Array,
        guid: String,
        version: Number
    },

    mounted() {
        let cacheKey = this.guid + '-' + this.$empGuid
        let data = localStorage.getItem(cacheKey)
        if (data) {
            data = JSON.parse(data)
            if(Array.isArray(data)) {
                this.data = data
            } else {
                this.data = data.columns
            }
        } else {
            data = this.columns
                .filter(item => {
                    return this.handleColName(item)
                })
                .map(item => {
                    return {
                        col_name: item.title,
                        hide: false,
                        width: item.width,
                        field: item.field
                    }
                })
            
            this.data = data
        }
        this.$nextTick(() => {
            this.noScrollbar = this.judgeScrollbar()
        })
    },

    methods: {
        formatNum(value) {
            if (value > 999) return 999
            return `${Math.abs(value)}`
        },
        handleColName(c) {
            if (c.field === '__selection') {
                return false
            } else if (c.field === '__custome') {
                return false
            } else {
                return true
            }
        },

        // 判断是否有滚动条
        judgeScrollbar() {
            let dom = this.$refs.tBody
            return dom.offsetHeight === dom.scrollHeight
        },

        refresh() {
            console.log(this.columns)
        },

        save() {
            const cacheKey = this.guid + '-' + this.$empGuid
            const data = {
                version: this.version,
                columns: this.data
            }

            localStorage.setItem(cacheKey, JSON.stringify(data))

            this.onOkCb && this.onOkCb()
            this.remove()
        },

        remove() {
            setTimeout(() => {
                this.destroy()
            }, 300)
        },
        destroy() {
            this.$destroy()
            document.body.removeChild(this.$el)
        }
    }
}
</script>
<style lang="less" scoped>
.table-setting {
    width: 488px;
    border: 1px solid #ccc;
    border-radius: 2px;

    .table-setting__head {
        display: flex;
        background-color: #f8f8f9;
        min-height: 34px;
        line-height: 34px;
    }

    &__body {
        height: 300px;
        overflow: auto;
    }

    &__col-name {
        width: 266px;
    }

    &__hide {
        width: 100px;
    }

    &__width {
        width: 120px;
    }

    &__width:last-child {
        border-right: none;
    }

    &__rd {
        border-bottom: 1px solid #ccc;
        border-right: 1px solid #ccc;
        padding: 4px;
        display: flex;
        align-items: center;
    }

    &__item {
        display: flex;
    }

    .table-setting__hav-scroll {
        width: 103px;
    }

    &__footer {
        display: flex;
        justify-content: space-between;
    }
}
</style>
