<script setup>
import { ref, reactive } from 'vue'
import {menuConfigInterface} from '@/api/modules/etaMenuApi';
import { Search } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import ModifyMenuDialog from './components/ModifyMenuDialog.vue'

let tableData = ref([])
let Keyword = ref('')

function getMenuData(){
    menuConfigInterface.getMenuList({
        Keyword:Keyword.value
    }).then(res => {
        if (res.Ret !== 200)
            return;
        tableData.value = res.Data.List || [];
        tableData.value.forEach(d=>{
            formatData(d,0)
        })
    });
}
getMenuData()

function formatData(data,level){
    data.treeLevel = level
    if(data.Children && data.Children.length){
        data.Children = data.Children.map(i=>{
            return formatData(i,level+1)
        })
    }
    return data
}

const tableColumns = [
    {label: '菜单名称',key: 'Name'}, {label: '图标',key: 'IconPath'}, 
    {label: '状态',key: 'Hidden'}, {label: '创建时间',key: 'CreateTime'}
]
let formData = ref({})
let openType = ref('add')
let isShowMenuDialog = ref(false)
function handleModifyMenu(type,data){
    if (type === 'addNext') {
        formData.value.ParentId = data.MenuId;
        formData.value.treeLevel = data.treeLevel+1
    }
    else if (type === 'edit') {
        formData.value = data;
    }
    else {
        formData.value = {treeLevel:0};
    }
    openType.value = type
    isShowMenuDialog.value = true
}
function deleteMenu(data){
    const hintTextMap = {
        0:'菜单及子项',
        1:'按钮',
        2:'字段'
    }
    ElMessageBox.confirm(`删除后不可恢复，确认删除该${hintTextMap[data.MenuType]}吗？`,'提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(()=>{
        menuConfigInterface.removeMenu({MenuId:data.MenuId}).then(res=>{
            if(res.Ret!==200) return 
            ElMessage.success('删除成功')
            getMenuData()
        })
    }).catch(()=>{})
}
function 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 
            ElMessage.success(`${type==='addMenu'?'添加':'编辑'}成功`)
            getMenuData()
            isShowMenuDialog.value = false
        })
}
</script>

<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="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 #default="{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" label="操作">
                    <template #default="{row}">
                        <el-link :underline="false" type="primary" style="margin-right: 20px;" @click="handleModifyMenu('addNext',row)">添加子项</el-link>
                        <el-link :underline="false" type="primary" style="margin-right: 20px;" @click="handleModifyMenu('edit',row)">编辑</el-link>
                        <el-link :underline="false" type="danger" @click="deleteMenu(row)">删除</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
    <ModifyMenuDialog 
        :isShow="isShowMenuDialog"
        :formData="formData"
        :etaMenu="tableData"
        :openType="openType"
        @add="(params)=>{modifyMenu(params,'addMenu')}"
        @edit="(params)=>{modifyMenu(params,'editMenu')}"
        @closeDia="()=>{formData = {};isShowMenuDialog = false;}"
    />
</template>

<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>
