<template>
    <el-dialog
        id="MenuEdit"
        :visible.sync="editVisible"
        :show-close="false"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
    >
        <div class="dialog-header flex-between-center pd16">
            <div class="flex-center-vertical ft16">
                <i class="el-icon-menu c-c0c4cc ft16" />
                <span class="c-303 fw-500 line-height24 ml8">系统管理</span>
            </div>
            <button class="bac-lucency hover-color" @click="hanleCancel">
                <i class="el-icon-close c-dcdfe6 ft16" />
            </button>
        </div>
        <div class="plr16 flex-between">
            <div class="left-panel">
                <h3 class="ft14 c-303 line-height20 fw-500 ptb16">首页系统</h3>
                <div class="radius-8 bgc-f7f8fa limit-height">
                    <draggable
                        v-if="headerList && headerList.length"
                        v-model="headerList"
                        force-fallback="true"
                        group="people"
                        animation="1000"
                        @start="onStart"
                        @end="onEnd"
                    >
                        <transition-group tag="div">
                            <div
                                v-for="item in headerList"
                                :key="item.platformId"
                                class="pl16 pr8 ptb8 pointer single-menu flex-between-center"
                            >
                                <div class="flex-center-vertical">
                                    <button class="pd8 bac-lucency hover-color" @click.stop="handleToggle('remove', item)">
                                        <i class="el-icon-remove c-c0c4cc ft16" />
                                    </button>
                                    <span class="ft14 c-606266 line-height20">{{ item.name }}</span>
                                </div>
                            </div>
                        </transition-group>
                    </draggable>
                </div>
            </div>
            <div class="right-panel">
                <h3 class="ft14 c-303 line-height20 fw-500 ptb16">其他系统</h3>
                <div class="radius-8 bgc-f7f8fa limit-height">
                    <div
                        v-for="item in otherList"
                        :key="item.platformId"
                        class="plr16 ptb8 flex-center-vertical pointer single-menu"
                    >
                        <button class="pd8 bac-lucency" @click="handleToggle('add', item)">
                            <i class="el-icon-circle-plus c-1677ff ft16" />
                        </button>
                        <span class="ft14 c-606266 line-height20">{{ item.name }}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex-justify-end pd16">
            <el-button size="small" @click="hanleCancel">取消</el-button>
            <el-button size="small" type="primary" @click="handleReset">重置</el-button>
            <el-button size="small" @click="handleConfirm">确认</el-button>
        </div>
    </el-dialog>
</template>

<script>
import draggable from 'vuedraggable';
import api_user from '@/api/api_user';
import { getStorage } from '@/tool/storage';
export default {
    name: 'MenuEdit',
    components: {
        draggable
    },
    props: {
        editVisible: {
            type: Boolean,
            default: false
        },
        headerMenu: {
            type: Array,
            default: () => []
        },
        otherMenu: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            headerList: [],
            otherList: []
        };
    },
    watch: {
        headerList(val) {
            console.log(val, '----headerList');
        }
    },
    mounted() {
        this.initData();
    },
    methods: {
        initData() {
            const temp = this.deepClone(this.headerMenu);
            temp.shift();
            this.headerList = temp;
            this.otherList = this.deepClone(this.otherMenu);
        },
        hanleCancel() {
            this.$emit('update:editVisible', false);
        },
        handleReset() {
            this.initData();
        },
        onStart() {},
        onEnd() {},
        handleToggle(type, item) {
            if (type === 'remove') {
                this.headerList.splice(this.headerList.findIndex(single => item.platformId === single.platformId), 1);
                this.otherList.unshift(item);
            } else {
                if (this.headerList.length >= 6) {
                    this.$message.error('首页系统栏最多保存6个');
                    return;
                }
                this.otherList.splice(this.otherList.findIndex(single => item.platformId === single.platformId), 1);
                this.headerList.push(item);
            }
        },
        handleConfirm() {
            this.$confirm('确认保存吗', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                const userInfo = getStorage({ name: 'userInfo' }) || {};
                const arr = [this.headerMenu[0], ...this.headerList];
                const smHeaderList = arr.map((item, index) => ({
                    platformId: item.platformId,
                    sort: index
                }));
                const param = {
                    saasId: userInfo.saasId || '',
                    userId: userInfo.id || '',
                    smHeaderList: smHeaderList
                };
                api_user.saveHeaderSort(param).then(() => {
                    this.$message.success('保存成功');
                    this.hanleCancel();
                    this.$emit('handleUpdateHeaderMenu');
                }).catch(() => {});
            }).catch(() => {
                this.$message.info('已取消');
            });
        }
    }
};
</script>

<style lang="less" scoped>
#MenuEdit {
    .dialog-header {
        border-bottom: 1px solid #ebeef5;
    }
    .left-panel, .right-panel {
        width: 320px;
        .single-menu {
            &:hover {
                background: #ebeef5;
            }
        }
        ::-webkit-scrollbar {
            width: 4px;
            max-height: 160px;
        }
        ::-webkit-scrollbar-thumb {
            /*滚动条里面小方块*/
            width: 4px;
            max-height: 160px;
            background: #EBEEF5;
            border-radius: 2px;
        }
        ::-webkit-scrollbar-track {
            /*滚动条里面轨道*/
            border-radius: 0;
            background-color: transparent;
        }
    }
    .limit-height {
        height: 572px;
        overflow-y: auto;
    }
    .limit-bg {
        background-color: #f7f8fa;
    }
    .hover-color {
        &:hover {
            i {
                color: #1677ff;
            }
        }
    }
}
</style>
