<script setup>
import { ref, reactive, computed, watch } from 'vue'
import { QuestionFilled } from '@element-plus/icons-vue'
import _ from 'lodash'
import ChoosedIconDialog from './ChoosedIconDialog.vue'
const props = defineProps({
    isShow:{
        type:Boolean,
        default:false
    },
    openType:{
        type:String,
        default:'add'
    },
    etaMenu:{
        type:Array,
        default:[]
    },
    formData:{
        type:Object,
        default:{}
    }
})

const emit = defineEmits(["closeDia","edit","add"])

const baseForm = {
    MenuType: 0,
    ParentId: 0,
    Name: '',
    IconPath: '',
    Path: '',
    Component: '',
    Sort: 0,
    Hidden: 0,
    ButtonCode: '',
    treeLevel: 0
}

let form = reactive({})

let menuFormRef = ref(null)

const baseMenuList = [{MenuId: -1,Name: '无'}]
let menuList = ref([])
//菜单类型-菜单 是否禁用
const isMenuDisabled = computed(()=>form.treeLevel>1&&props.openType!=='add')
//菜单类型-按钮、字段 是否禁用
const isbtnDisabled = computed(()=>form.treeLevel === 1 && props.openType !== 'add')
//名称label
const nameLabel = computed(()=>{
    const nameMap = {
        0:'菜单标题',
        1:'按钮名称',
        2:'字段名称'
    }
    return nameMap[form.MenuType]||'菜单标题'
})
//控制选择图标弹窗
let isShowIconDialog = ref(false)

watch(()=>props.isShow,(newVal)=>{
    if(newVal){
        menuList.value = baseMenuList
        initForm()
    }else{
        menuFormRef.value?.resetFields()
    }
})
watch(()=>form.MenuType,(newVal)=>{
    changeListLevel(newVal)
},{deep:true})

function initForm(){
    Object.assign(form,baseForm)
    menuList.value = [...baseMenuList, ..._.cloneDeep(props.etaMenu)];
    if (props.openType === 'addNext') {
        form.ParentId = props.formData.ParentId;
        form.treeLevel = props.formData.treeLevel;
    }
    if (props.openType === 'edit') {
        Object.assign(form,props.formData)
    }
    if (form.treeLevel > 1 && props.openType !== 'edit') {
        form.MenuType = 1;
    }
    if(form.treeLevel===0 && props.openType !== 'add'){
        form.ParentId = -1
    }
}
function changeListLevel(level){
    if (level === 0) {
        menuList.value = menuList.value.map(m => {
            if (m.Children) {
                delete m.Children;
            }
            return m;
        });
    }
    else {
        menuList.value = [...baseMenuList, ..._.cloneDeep(props.etaMenu)];
    }
}
const rules = reactive({
    ParentId:[{required:true,message:'请选择上级菜单'}],
    Name:[{required:true,message:'请输入菜单标题'}],
    IconPath:[{required:true,message:'请选择菜单图标'}],
    Path:[{required:true,message:'请输入路由地址'}],
    Component:[{required:true,message:'请输入组件地址'}],
    Sort:[{required:true,message:'请输入显示排序'}],
    ButtonCode:[{required:true,message:'请输入按钮ID'}]
})
async function saveMenu(){
    try{
        await menuFormRef.value?.validate()
    }catch(e){

    }
    emit(form.MenuId ? 'edit' : 'add', form)

}
</script>

<template>
    <el-dialog
        :model-value="props.isShow"
        :close-on-click-modal="false"
        :modal-append-to-body='false'
        :title="form.MenuId?'编辑菜单':'添加菜单'"
        @close="emit('closeDia')"
        width="820px"
        center
        class="modify-menu-wrap"
    >
        <div class="dialog-container-wrap">
            <el-form :model="form" :rules="rules" label-width="80px" :hide-required-asterisk="true" ref="menuFormRef">
                <el-form-item label="菜单类型" prop="MenuType">
                    <el-radio-group v-model="form.MenuType" :disabled="Boolean(form.MenuId)">
                        <el-radio :label="0" :disabled="Boolean(isMenuDisabled)">菜单</el-radio>
                        <el-radio :label="1" :disabled="Boolean(isbtnDisabled)">按钮</el-radio>
                        <el-radio :label="2" :disabled="Boolean(isbtnDisabled)">字段</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="上级菜单" prop="ParentId">
                    <el-cascader v-model="form.ParentId"
                        :options="menuList"
                        :props="{
                            value: 'MenuId',
                            label: 'Name',
                            children: 'Children',
                            checkStrictly: true,
                            emitPath: false,
                        }"
                        :disabled="openType==='add'?false:!(openType!=='add'&&form.MenuType===0&&form.treeLevel===1)"
                    >
                    </el-cascader>
                </el-form-item>
                <el-form-item :label="nameLabel" prop="Name">
                    <el-input v-model="form.Name"></el-input>
                </el-form-item>
                <template v-if="form.MenuType===0">
                    <el-form-item label="菜单图标" v-if="form.treeLevel===0">
                        <div class="icon-wrap">
                            <img :src="form.IconPath" v-if="form.IconPath">
                            <el-button @click="isShowIconDialog = true">选择图标</el-button>
                        </div>
                    </el-form-item>
                    <el-form-item label="路由地址" prop="Path">
                        <el-input v-model="form.Path"></el-input>
                        <el-tooltip effect="dark" content="页面跳转路径" placement="right">
                            <el-icon><QuestionFilled /></el-icon>
                        </el-tooltip>
                    </el-form-item>
                    <el-form-item label="组件地址" prop="Component">
                        <el-input v-model="form.Component"></el-input>
                        <el-tooltip effect="dark" content="代码中页面地址" placement="right">
                            <el-icon><QuestionFilled /></el-icon>
                        </el-tooltip>
                    </el-form-item>
                </template>
                <el-form-item label="按钮ID" prop="ButtonCode" v-if="form.MenuType!==0">
                    <el-input v-model="form.ButtonCode"></el-input>
                </el-form-item>
                <el-form-item label="显示排序" prop="Sort">
                    <el-input v-model="form.Sort" type="number" :min="0"></el-input>
                </el-form-item>
                <el-form-item label="是否隐藏" prop="Hidden">
                    <el-radio-group v-model="form.Hidden">
                        <el-radio :label="0">显示</el-radio>
                        <el-radio :label="1">隐藏</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div class="btn-wrap" style="text-align: center;margin-bottom: 25px;">
                <el-button type="primary" plain style="width:200px;" @click="emit('closeDia')">取消</el-button>
                <el-button type="primary"  style="margin-left:50px;width:200px;" @click="saveMenu">保存</el-button>
            </div>
        </div>
    </el-dialog>
    <ChoosedIconDialog
        :isShow="isShowIconDialog"
        @choosedIcon="(e)=>{form.IconPath = e;isShowIconDialog = false}"
        @closeDia="isShowIconDialog = false"
    ></ChoosedIconDialog>
</template>

<style scoped lang="scss">
.modify-menu-wrap{
    .dialog-container-wrap{
        display: flex;
        flex-direction: column;
        .el-form{
            align-self: center;
            .el-form-item{
                .el-input{
                    width: 315px;
                }
                .icon-wrap{
                    display: flex;
                    align-items: center;
                    img{
                        width:24px;
                        height: 24px;
                        margin-right: 15px;
                    }
                }
            }
        }
    }
}
</style>
