<template>
    <el-popover
        placement="bottom"
        width="226"
        trigger="hover">
        <div class="config-pack">
            <div class="title-pack">表头配置</div>
            <div class="col-list-pack">
                <draggable v-model="userColLost" v-bind="dragOptions" @change="orderChange" @start="drag = true" @end="drag = false" handle=".drag-pack">
                    <transition-group type="transition" :name="!drag ? 'flip-list' : null">
                        <div v-for="(item, index) in userColLost" :key="item.value" class="col-item">
                            <div class="drag-pack">
                                <svg-icon icon-class="list"></svg-icon>
                            </div>
                            <div class="name-pack" :class="index === 0 ? 'no-drop' : ''" @click="toggleStateClick(item, index)">
                                <div>{{item.label}}</div>
                                <div v-if="item.checked === true">
                                    <i class="el-icon-check"></i>
                                </div>
                            </div>
                        </div>
                    </transition-group>
                </draggable>
            </div>
        </div>
        <el-button size="mini" icon="el-icon-setting" slot="reference"></el-button>
    </el-popover>
</template>

<script>
    import draggable from 'vuedraggable'
    export default {
        name: 'TableColumnConfig',
        components: {
            draggable
        },
        props: {
            // 所有备选列
            colList: {
                type: Array,
                required: true
            }
        },
        data () {
            return {
                username: '',
                userColLost: [],
                drag: false
            }
        },
        computed: {
            dragOptions () {
                return {
                    animation: 200,
                    group: 'description',
                    disabled: false,
                    ghostClass: 'ghost'
                };
            }
        },
        methods: {
            // 列状态 点击事件
            toggleStateClick (data, index) {
                if (index !== 0) {
                    data.checked = !data.checked
                    this.emitColData()
                    this.updateLocalStorage()
                }
            },
            // 列顺序 变化事件
            orderChange (evt) {
                this.emitColData()
                this.updateLocalStorage()
            },
            // 更新LocalStorage中的数据
            updateLocalStorage () {
                // 再把组织好的页面数据合到主分支上
                let allStorage = _.cloneDeep(JSON.parse(window.localStorage.getItem('Admin-ColList')))
                allStorage[this.username] = {[this.$route.path]: _.cloneDeep(this.userColLost)}
                window.localStorage.setItem('Admin-ColList', JSON.stringify(allStorage))
            },
            // 返回数据
            emitColData () {
                let list = [];
                this.userColLost.map(item => {
                    if (item.checked === true) {
                        list.push(_.cloneDeep(item))
                    }
                })
                this.$emit('change', list)
            }
        },
        mounted () {
            // 1. 先从缓存中获取用户名
            this.username = window.sessionStorage.getItem('Admin-Username')
            // 2. 如果缓存中没有对应数据，就设置每列都是选中状态
            let localColList = window.localStorage.getItem('Admin-ColList')
            if (localColList === null || JSON.parse(localColList)[this.username] === undefined || JSON.parse(localColList)[this.username][this.$route.path] === undefined) {
                let list = [];
                this.colList.map(item => {
                    list.push(Object.assign({checked: true}, item))
                })
                this.userColLost = _.cloneDeep(list)
                // 3. localStorage没有Admin-ColList信息（这个电脑没有登录过任何用户）
                if (window.localStorage.getItem('Admin-ColList') === null) {
                    window.localStorage.setItem('Admin-ColList', JSON.stringify({
                        [this.username]: {
                            [this.$route.path]: list
                        }
                    }))
                }
                // 4. Admin-ColList中没有此用户信息（这个电脑没有登录过此用户）
                if (JSON.parse(window.localStorage.getItem('Admin-ColList'))[this.username] === undefined) {
                    let userStorage = {
                        [this.username]: {
                            [this.$route.path]: list
                        }
                    }
                    let afterStorage = Object.assign(userStorage, JSON.parse(window.localStorage.getItem('Admin-ColList')))
                    window.localStorage.setItem('Admin-ColList', JSON.stringify(afterStorage))
                }
                // 5. Admin-ColList中此用户没有此页面信息（此用户没有打开过此页面）
                if (JSON.parse(window.localStorage.getItem('Admin-ColList'))[this.username][this.$route.path] === undefined) {
                    let pathStorage = Object.assign({[this.$route.path]: list}, JSON.parse(window.localStorage.getItem('Admin-ColList'))[this.username])
                    // 再把组织好的页面数据合到主分支上
                    let allStorage = _.cloneDeep(JSON.parse(window.localStorage.getItem('Admin-ColList')))
                    allStorage[this.username] = pathStorage
                    window.localStorage.setItem('Admin-ColList', JSON.stringify(allStorage))
                }
            } else {
                // 如果缓存中已经保存了此用户此页面每列的状态就从缓存中取出来赋值给userColLost
                this.userColLost = _.cloneDeep(JSON.parse(localColList)[this.username][this.$route.path])
                this.emitColData()
            }
        }
    }
</script>

<style lang="scss" scoped>
    /deep/ .el-popover {
        padding: 0!important;
    }
    /deep/ .el-button--mini {
        padding: 3px 6px;
        margin-left: 10px;
        border: 0px solid #fff;
        position: relative;
        top: 2px;
        .el-icon-setting {
            font-size: 21px;
        }
    }
    .config-pack {
        width: 226px;
        height: auto;
        .title-pack {
            font-weight: bold;
            width: 100%;
            margin-bottom: 5px;
            height: 40px;
            line-height: 40px;
            font-size: 16px;
            text-align: center;
            border-bottom: 1px solid #dedede;
        }
        .col-list-pack {
            padding: 0;
            .col-item {
                padding: 0 10px 0 5px;
                height: 35px;
                display: -webkit-flex; /* Safari */
                display: flex;
                justify-content: space-between;
                align-items: center;
                cursor: pointer;
                font-size: 14px;
                .drag-pack {
                    width: 35px;
                }
                .name-pack {
                    width: 210px;
                    height: 100%;
                    display: -webkit-flex; /* Safari */
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }
                &:hover {
                    background: #f5f5f5;
                }
            }
        }
    }
    .flip-list-move {
        transition: transform 0.5s;
    }
    .no-move {
        transition: transform 0s;
    }
    .ghost {
        opacity: 0.5;
        background: #c8ebfb;
    }
    .no-drop {
        cursor: no-drop;
    }
</style>
