<template>
    <form-option title="菜单管理">
        <template #optionRight>
            <el-button type="primary" icon="el-icon-plus" @click="onAddMenu">新增</el-button>
        </template>
        <el-table
            :data="menus"
            row-key="id"
            style="margin-top: 10px;"
            border
            v-loading="isLoading"
            :tree-props="treeProps">
            <el-table-column prop="name" label="名称" />
            <el-table-column prop="icon" label="图标" align="center" width="60">
                <template slot-scope="scope">
                    <i class="menu-icon" v-if="scope.row.icon" :class="scope.row.icon"></i>
                </template>
            </el-table-column>
            <el-table-column prop="type" label="类型" align="center">
                <template slot-scope="scope">
                    {{ scope.row.type == 0 ? '目录' : (scope.row.type == 1 ? '菜单' : '按钮') }}
                </template>
            </el-table-column>
            <el-table-column prop="open_way" label="打开方式" align="center">
                <template slot-scope="scope">
                    {{ scope.row.open_way == 1 ? '外部打开' : '内部打开' }}
                </template>
            </el-table-column>
            <el-table-column prop="sort" label="排序" align="center" width="80"/>
            <el-table-column prop="url" label="路由" />
            <el-table-column prop="perms" label="授权标识" />
            <el-table-column prop="action" label="操作" align="center" width="170">
                <template slot-scope="scope">
                    <div class="action">
                        <div class="action-item" @click="onAddOne(scope.row)">
                            <i class="el-icon-view blueFont"></i>
                            <el-button type="text" size="small">新增</el-button>
                        </div>
                        <div class="action-item" @click="onEdit(scope.row)">
                            <i class="el-icon-edit blueFont"></i>
                            <el-button type="text" size="small">修改</el-button>
                        </div>
                        <div class="action-item" @click="onRemove(scope.row)">
                            <i class="el-icon-edit blueFont"></i>
                            <el-button type="text" size="small">删除</el-button>
                        </div>
                    </div>
                </template>
            </el-table-column>
        </el-table>

        <menu-edit :show.sync="showMenuEditDialog" :menu="currentMenu" @close="onCloseMenuDialog"></menu-edit>
    </form-option>
</template>

<script>
import FormOption from "@/component/FormOption";
import MenuEdit from './components/MenuEdit.vue';

import { getMenus, removeMenu } from '@/api/menu';

export default {
    components: {
        FormOption,
        MenuEdit,
    },
    data() {
        return {
            menus: [],
            treeProps: {
                children: 'sub_menus',
                hasChildren: 'hasChildren',
            },
            currentMenu: null,
            showMenuEditDialog: false,
            isLoading: false,
        };
    },
    mounted() {
        this.handleQueryData();
    },
    methods: {
        handleQueryData() {
            this.isLoading = true;
            getMenus().then(res => {
                if (res && res.data) {
                    this.menus = res.data || [];
                }
                this.isLoading = false;
            });
        },
        onAddMenu() {
            this.currentMenu = null;
            this.showMenuEditDialog = true;
        },
        onAddOne(row) {
            this.currentMenu = {
                parent_id: row.id,
                parent_name: row.name,
                type: '1',
                open_way: '0',
                icon: '',
                sort: '1',
            };
            this.showMenuEditDialog = true;
        },
        getMenuById(list, target) {
            if (list && target) {
                for (let index = 0; index < list.length; index++) {
                    const item = list[index];
                    if (target == item.id) {
                        return item;
                    }
                    else if (item.sub_menus && item.sub_menus.length > 0) {
                        const res = this.getMenuById(item.sub_menus, target);
                        if (res) {
                            return res;
                        }
                    }
                }
            }
            return null;
        },
        onEdit(row) {
            const parent = this.getMenuById(this.menus, row.parent_id);
            if (parent) {
                row.parent_name = parent.name;
            }
            else {
                row.parent_name = '顶级菜单';
            }
            this.currentMenu = row;
            this.showMenuEditDialog = true;
        },
        onCloseMenuDialog(flag) {
            if (flag == true) {
                this.handleQueryData();
            }
            this.currentMenu = null;
        },
        onRemove(row) {
            this.$confirm(`确定要删除 ${row.name}？`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                removeMenu(row.id).then(result => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.handleQueryData();
                });
            }).catch(() => {
                    
            });
        }
    },
};
</script>

<style lang="scss" scoped>
.menu-icon {
    font-size: 20px;
}
.action {
    display: flex;
    &-item:not(:first-child) {
        margin-left: 10px;
    }
}
</style>