<template>
    <div class="eta-menu-config-wrap">
        <div class="menu-top">
            <el-button type="primary" @click="handleModifyMenu('add',{})">添加菜单</el-button>
            <el-input placeholder="请输入菜单名称" prefix-icon="el-icon-search" clearable
                v-model="Keyword" @input="getMenuData"></el-input>
        </div>
        <div class="menu-table">
            <el-table border
                :data="tableData"
                row-key="MenuId"
                :tree-props="{children:'Children'}"
            >
                <el-table-column v-for="column in tableColumns" :key="column.key"
                    header-align="center"
                    :align="column.key==='Name'?'':'center'"
                    :prop="column.key"
                    :label="column.label">
                    <template slot-scope="{row}">
                        <!-- 菜单名称 -->
                        <div class="menu-name" v-if="column.key==='Name'">
                            <span>{{row[column.key]}}</span>
                        </div>
                        <!-- 图标 -->
                        <div class="menu-icon" v-else-if="column.key==='IconPath'">
                            <img :src="row[column.key]" v-if="row[column.key]" style="width:24px;height:24px;">
                            <span v-else>-</span>
                        </div>
                        <!-- 状态 -->
                        <div class="menu-status" v-else-if="column.key==='Hidden'">
                            <span>{{row[column.key]===0?'显示':'隐藏'}}</span>
                        </div>
                        <div v-else>
                            <span>{{row[column.key]}}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="操作">
                    <template slot-scope="{row}">
                        <el-button type="text" @click="handleModifyMenu('addNext',row)">添加子项</el-button>
                        <el-button type="text" @click="handleModifyMenu('edit',row)">编辑</el-button>
                        <el-button type="text" style="color:#FF0000;" @click="deleteMenu(row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <ModifyMenuDialog 
            :isShowMenuDialog="isShowMenuDialog"
            :formData="formData"
            :etaMenu="tableData"
            :openType="openType"
            @add="(params)=>{modifyMenu(params,'addMenu')}"
            @edit="(params)=>{modifyMenu(params,'editMenu')}"
            @close="()=>{formData = {};isShowMenuDialog = false;}"
        />
    </div>
</template>

<script>
import {menuConfigInterface} from '@/api/modules/etaMenuApi';
import ModifyMenuDialog from './components/ModifyMenuDialog.vue';
export default {
    data() {
        return {
            Keyword: '',
            tableColumns: [{
                    label: '菜单名称',
                    key: 'Name',
                }, {
                    label: '图标',
                    key: 'IconPath',
                }, {
                    label: '状态',
                    key: 'Hidden',
                }, {
                    label: '创建时间',
                    key: 'CreateTime',
                }],
            tableData: [{}],
            formData: {},
            openType:'add',
            isShowMenuDialog: false,
        };
    },
    methods: {
        getMenuData() {
            menuConfigInterface.getMenuList({
                Keyword: this.Keyword
            }).then(res => {
                if (res.Ret !== 200)
                    return;
                this.tableData = res.Data.List || [];
                this.tableData.forEach(d=>{
                    this.formatData(d,0)
                })
            });
        },
        //给data加上层级
        formatData(data,level){
            data.treeLevel = level
            if(data.Children && data.Children.length){
                data.Children = data.Children.map(i=>{
                    return this.formatData(i,level+1)
                })
            }
            return data
        },
        handleModifyMenu(type, data) {
            if (type === 'addNext') {
                this.formData.ParentId = data.MenuId;
                this.formData.treeLevel = data.treeLevel+1
            }
            else if (type === 'edit') {
                this.formData = data;
            }
            else {
                this.formData = {treeLevel:0};
            }
            this.openType = type
            this.isShowMenuDialog = true;
        },
        deleteMenu(data){
            const hintTextMap = {
                0:'菜单及子项',
                1:'按钮',
                2:'字段'
            }
            this.$confirm(`删除后不可恢复，确认删除该${hintTextMap[data.MenuType]}吗？`,'提示',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(()=>{
                menuConfigInterface.removeMenu({MenuId:data.MenuId}).then(res=>{
                    if(res.Ret!==200) return 
                    this.$message.success('删除成功')
                    this.getMenuData()
                })
            }).catch(()=>{})
            
        },
        modifyMenu(params,type){
            let InterfaceParams = {}
            if(params.MenuType===0){
                const {ParentId,MenuType,Name,IconPath,Sort,Path,Component,Hidden} = params
                InterfaceParams = {
                    ParentId:ParentId===-1?0:ParentId,
                    MenuType,
                    Name,
                    IconPath,
                    Sort:Number(Sort),
                    Path,
                    Component,
                    Hidden
                }
            }else{
                const {ParentId,MenuType,Name,Sort,Hidden,ButtonCode} = params
                InterfaceParams = {
                    ParentId:ParentId===-1?0:ParentId,
                    MenuType,
                    Name,
                    Sort:Number(Sort),
                    Hidden,
                    ButtonCode
                }
            }
            if(type==='editMenu'){
                InterfaceParams = {...{MenuId:params.MenuId},...InterfaceParams}
            }
            menuConfigInterface[type](InterfaceParams).then(res=>{
                    if(res.Ret!==200) return 
                    this.$message.success(`${type==='addMenu'?'添加':'编辑'}成功`)
                    this.getMenuData()
                    this.isShowMenuDialog = false
                })
        },
        editMenu(params){}
    },
    mounted() {
        this.getMenuData();
    },
    components: { ModifyMenuDialog }
};
</script>

<style scoped lang="scss">
.eta-menu-config-wrap{
    .menu-top{
        padding:20px;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        .el-input{
            width:260px;
        }
    }
    .menu-table{
        margin-top: 20px;
        padding:20px;
        background-color: #fff;
        .menu-name{
            display: inline-block;
        }
    }
}
</style>
