<style type="text/css">
    .tree_table .el-form-item{margin-bottom:0px;padding-left:0px}
    .tree_table .el-form-item--medium .el-form-item__label {line-height:30px}
    .tree_table .el-form--label-top .el-form-item__label{padding-bottom:0px;}
</style>
<div class="main" id="main">
    <div class="table-list-box">
        <template>
            <el-table class="tree_table" :data="menuItemList" tooltip-effect="dark" highlight-current-row style="width: 100%" default-expand-all row-key="Id" :tree-props="{children: 'Children'}" border v-on:selection-change="handleSelectionChange">
                <el-table-column label="菜单权限" width="260" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <el-checkbox v-model="scope.row.Checked" v-on:change="menuCheckedChange(scope.row)">
                            <span v-show="scope.row.IsFinal==1">
                                <i class="el-icon-empty"></i>{{scope.row.Name}}
                            </span>
                        </el-checkbox>
                        <span v-on:click="loadChildMenuItem(scope.row)" style="cursor:pointer;" v-show="scope.row.IsFinal==0">
                            <i v-bind:class="{'el-icon-arrow-right':scope.row.OpenChildren==false,'el-icon-arrow-down':scope.row.OpenChildren==true}"></i>{{scope.row.Name}}
                        </span>
 
                    </template>
                </el-table-column>
                <el-table-column label="菜单项目权限">
                    <template slot-scope="scope">
                        <el-form label-position="top" label-width="80px">
                            <el-form-item :label="category" v-for="category in scope.row.MenuItemCategory" size="medium">
                                <el-checkbox v-model="item.Checked" :title="item.Remark" v-for="item in getCategoryMenuItem(scope.row.MenuItem,category)" v-on:change="menuItemCheckedChange(scope.row,item.Checked)">{{item.Name}}</el-checkbox>
                            </el-form-item>
                          </el-form>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </div>
    <div class="help-block"><span class="fa fa-info-circle"></span> 点击名称前的文件夹图标可展开子级菜单！</div>
    <div class="footer-submit-bar" style="padding-left:50px">
        <el-button type="primary" v-on:click="postSubmit">提交保存</el-button>
        <el-button v-on:click="closeDrawer()">关闭</el-button>
    </div>
</div>
<script type="text/javascript">
    var querySting = getQueryString(true); //获取url中参数组成对象
    console.log(querySting)
    var loadUrl = "@Url.ActionUrl("")";
    //vue实例化
    var vue = new Vue({
        el: "#main",
        data: {
            menuItemList: [],
        },
        methods: {
            menuCheckedChange: function (itemRow) {//点击菜单触发
                var _this = this;
                _this.menuItemCheckd(itemRow);//同时选菜单项目
                _this.childMenuChecked(itemRow);//同时选菜单子级
                _this.parentMenuChecked(itemRow);//同时选菜单父级
            },
            menuItemCheckedChange: function (itemRow, itemChecked) { //菜单项目选中后同步选中主菜单
                var _this = this;
                if (itemChecked)
                {
                    //itemRow.Checked = true;//同时选中当前菜单项
                    //_this.parentMenuChecked(itemRow); //同时选菜单父级
                }
            },
            menuItemCheckd: function (itemRow){ //菜单项目选中/取消
                if (itemRow.MenuItem == null || itemRow.MenuItem == undefined) {
                    return;
                }
                itemRow.MenuItem.forEach(function (item) {
                    item.Checked = itemRow.Checked;
                });
            },
            getCategoryMenuItem: function (items, categoryName) {
                var newItems = [];
                items.forEach(function (item) {
                    var itemCategory = item.Category;
                    if (isNullOrEmpty(itemCategory)) {
                        itemCategory = "";
                    }
                    if (itemCategory==categoryName) {
                        newItems.push(item);
                    }
                })
                return newItems;
            },
            parentMenuChecked: function (itemRow) { //父菜单递归选择
                if (!itemRow.Checked) {//没选中则退出
                    return;
                }
                var parentId = itemRow.ParentId;
                if (!parentId) {
                    return;
                }
                var _this = this;
                function findParent(list) { //查找父级并选中
                    if (list == null) {
                        return;
                    }
                    list.forEach(function (item) {
                        if (item.Id == parentId) {
                            item.Checked = true;
                            if (item.ParentId <= 0) {
                                return; //找到第一级后退出不再继续递归
                            }
                            _this.parentMenuChecked(item); //找到了再找，只要不是第一级就继续
                        }
                        else
                        {
                            findParent(item.Children); //找不到就继续找下级
                        }
                    });
                }
                findParent(_this.menuItemList);
            },
            childMenuChecked: function (itemRow) {//子菜单递归选中、取消
                var _this = this;
                function setChecked(list, checked) {
                    if (list == null) {
                        return;
                    }
                    list.forEach(function (item) {
                        item.Checked = checked;
                        _this.menuItemCheckd(item);
                        setChecked(item.Children, item.Checked);//递归
                    });
                }
                setChecked(itemRow.Children, itemRow.Checked);
            },
            loadChildMenuItem: function (itemRow){
                var vue = this;
                var serverData = extend(querySting, { MenuId: itemRow.Id })
                if (itemRow.OpenChildren == false) {
                    itemRow.OpenChildren  = true;
                    vue.ajax({
                        url: "@Url.ActionUrl("GetMenuPermission")",
                        data: serverData,
                        success: function (data) {
                            if (Array.isArray(data)) {
                                vue.$set(itemRow,"Children", data); //必须采用vue的设置方式才能进行跟踪
                            }
                        }
                    });
                    } else {
                    vue.$set(itemRow, "Children",[]);
                    itemRow.OpenChildren = false;
                    }
            },

            handleSelectionChange: function (val){//顶部全选控制
                var _this = this;
                var checked = false;
                if (val.length>0)
                {
                    checked = true;
                }
            },
            postSubmit: function ()
            {
                var _this = this;
                var urlParams = "?" + getQueryString(false);
                this.submit({ url: "@Url.ActionUrl("SaveMenuPermission")" + urlParams , contentType: "application/json;charset=utf-8",data: _this.menuItemList});
            },
        }
    });
    function LoadMenuItem()
    {
        var _this = vue;
        vue.ajax({
            url: "@Url.ActionUrl("GetMenuPermission")",
            data:querySting,
            success: function (responseData) {
                _this.menuItemList = responseData;
            }
        });
    }
    LoadMenuItem();
</script>
