<!-- 配置：增加 / 修改 -->
<template>
    <div class="vue-box submit-box--dialog" style="width: 650px; height: 560px;">
        <div class="c-card">
            <el-form :inline="false" label-width="7em">
                <!-- <in-input type="text" name="配置分组：" v-model="state.model.groupName"></in-input> -->
                <in-item name="所属父级：" required>
                    <!-- <el-input v-model="state.model.parentId" />-->
                    <el-tree-select
                        ref="tree"
                        v-model="state.model.parentId"
                        :data="state.menuList"
                        node-key="id"
                        :props="{label: 'title'}"
                        :check-strictly="true"
                        :render-after-expand="false"
                        :default-expanded-keys="['-1']"
                    />
                </in-item>
                <in-input type="text" name="菜单 ID ：" v-model="state.model.id" :disabled="state.id !== 0" required></in-input>
                <in-input type="text" name="菜单名称：" v-model="state.model.title" required></in-input>
                <in-item name="菜单图标：">
                    <el-input v-model="state.model.icon" style="width: calc(100% - 80px); margin-right: 10px;"></el-input>
                    <el-link type="primary" href="https://element-plus.gitee.io/zh-CN/component/icon.html#图标集合" target="_blank">图标参考</el-link>
                </in-item>
                <in-item name="菜单类型：" required>
                    <el-radio-group v-model="state.model.type">
                        <el-radio-button label="dir"> 目录 </el-radio-button>
                        <el-radio-button label="com"> 组件 </el-radio-button>
                        <el-radio-button label="link"> 链接 </el-radio-button>
                        <el-radio-button label="btn"> 按钮 </el-radio-button>
                    </el-radio-group>
                    <span class="c-remark" style="padding-left: 10px;" v-if=" state.model.type === 'btn' ">按钮权限标识不会显示在菜单上</span>
                </in-item>
                <in-input type="text" name="指向组件：" v-model="state.model.componentPath" v-if="isType('com')" required></in-input>
                <in-input type="text" name="访问路由：" v-model="state.model.path" v-if="isType('com')" placeholder="可不填，将自动根据 ID 拼接"></in-input>
                <in-input type="text" name="跳转链接：" v-model="state.model.url" v-if="isType('link')" required></in-input>
                <!-- <in-input type="text" name="是否外部：" v-model="state.model.isBlank" v-if="isType('link')"></in-input>-->
                <in-item name="打开方式：" v-if="isType('link')" required>
                    <el-radio-group v-model="state.model.isBlank">
                        <el-radio :label="false" border>从面板内打开</el-radio>
                        <el-radio :label="true" border>从新窗口打开</el-radio>
                    </el-radio-group>
                </in-item>
                <in-item name="何时显示：" v-if="isType(['dir', 'com', 'link'])" required>
                    <el-radio-group v-model="state.model.show">
                        <el-radio-button label="yes"> 永远显示 </el-radio-button>
                        <el-radio-button label="auth"> 鉴权显示 </el-radio-button>
                        <el-radio-button label="no"> 永远隐藏 </el-radio-button>
                    </el-radio-group>
                    <el-checkbox v-model="state.model.auth" label="在访问时需要鉴权" v-if=" isType(['com', 'link']) && state.model.show === 'no' " />
                </in-item>
                <!-- <in-item name="在访问时：" v-if="isType(['com', 'link'])" required>
                    <el-radio-group v-model="state.model.auth">
                        <el-radio-button :label="true"> 鉴权 </el-radio-button>
                        <el-radio-button :label="false"> 不鉴权 </el-radio-button>
                    </el-radio-group>
                    <span class="c-remark" style="padding-left: 10px;">
                        {{ state.model.auth === 'true' ? '鉴权通过后才可以打开页面' : '无需鉴权就可以打开页面' }}
                    </span>
                </in-item>-->
                <in-input type="text" name="菜单介绍：" v-model="state.model.info" placeholder="详细描述一下这个菜单的作用"></in-input>
                <in-item name="排序索引：" required>
                    <el-input v-model="state.model.sort" style="width: calc(100% - 110px); margin-right: 10px;" />
                    <span class="c-remark">值越小，越靠前</span>
                </in-item>
            </el-form>
        </div>
    </div>
</template>

<script setup name="menu-add">
import {getCurrentInstance, onMounted, reactive} from "vue";
import {arrayToTree, defineMenu} from "../../router/router-util";
const { proxy } = getCurrentInstance();

// 获取插值 
const prop = defineProps({
    param: {type: Object}
})

// ------------------ 数据 ------------------
const state = reactive({
    id: prop.param.id || 0,    // 获取传值id （0=添加，非0=修改）
    model: {    // 数据 Model
        id: '',		// 菜单id 
        title: '',		// 菜单名称 
        icon: '',		// 菜单图标 
        info: '',		// 菜单介绍 
        type: 'dir',		// 菜单介绍 (dir=目录, com=组件, btn=按钮, link=链接) 
        path: '',		// 菜单路由 
        componentPath: '',		// 组件路径 
        url: '',		// 菜单url (如果指定了此值，则通过 iframe 打开页面视图) 
        isBlank: false,		// 是否属于外部链接 (如果为true, 则点击菜单时从新窗口打开url) 
        show: 'auth',		// 是否显示 (yes=永远显示,no=永远不显示,auth=根据权限决定是否显示) 
        auth: true,		// 是否鉴权 
        parentId: prop.param.parentId || '-1',		// 父菜单id 
        sort: prop.param.sort || '',		// 排序索引 
        createTime: '',		// 创建时间 
        updateTime: '',		// 更新时间 
    },
    menuList: []   // 父菜单列表 
})

// 组件加载时执行函数
onMounted(function (){
    // 渲染旧数据  
    if(state.id !== 0) {
        sa.ajax('/SpMenu/getById?id=' + state.id, function (res) {
            if(!res.data) {
                return sa.alertError('数据不存在');
            }
            state.model = res.data;
            f5MenuList();
        })
    } else {
        f5MenuList();
    }
})

// ------------------ 函数 ------------------
// 判断当前菜单是否属于指定的type
const isType = function (typeArr) {
    if(typeof typeArr === 'string') {
        typeArr = [typeArr];
    }
    return typeArr.indexOf(state.model.type) > -1;
}

// 加载全部菜单
const f5MenuList = function () {
    sa.ajax('/SpMenu/getList', function(res){
        // 将本菜单设为禁选状态
        for (const item of res.data) {
            if(item.id === state.model.id) {
                // item.disabled = true;
                item.title = item.title + ' [ 当前菜单 ]'
            }
        }
        // 加上根节点
        const rootMenu = {
            id: '-1',
            title: '顶级菜单',
            children: defineMenu(arrayToTree(res.data))
        }
        state.menuList = [rootMenu];
    });
};

// 提交表单 
const ok = function () {
    // 表单校验 
    let m = sa.copyJSON(state.model);

    console.log(m)
    // return
    
    // 如果是增加
    if(state.id === 0) {
        sa.ajax('/SpMenu/add', m, function(res) {
            sa.alert('添加成功', function() {
                sa.closeModel();
                sa.currView().f5();
            });
        });
    } else {
        // 如果是修改 
        sa.ajax('/SpMenu/update', m, function(res) {
            sa.alert('修改成功', function() {
                sa.closeModel();
                sa.currView().f5();
            });
        });
    }
}

// 对外开放函数 
defineExpose({ ok });

</script>

<style scoped lang="scss">
    :deep(.el-checkbox){vertical-align: middle; margin-left: 10px; color: #888;}
</style>
