<div class="main" id="main" v-cloak>
    <table border=0 cellpadding=0 cellspacing=0 class="tb-head form-inline form-group-sm">
        <tr>
            <td class="btn-group">
                <el-button size="small" v-on:click="dialog({title:'添加',url:'@Url.ActionUrl("Add")?menuId=@Request.QueryString["menuId"]',width:'70%',height:'90%',target:'self'})">
                    添加
                </el-button>
                <el-button size="small" style="margin-left: 0px;" v-on:click="submit({url:'@Url.ActionUrl("Delete")',data:{Id:getSelectedPropertys(selectList,'Id')},confirmMsg:'确定删除吗？',success:'loadData()',beforeExecute:function(){return checkSelectedItems(selectList)},})">
                    删除
                </el-button>
            </td>
            <td align="right">
                <ui-select size="mini"  :options="categoryList" v-model="category"  v-on:change="search" placeholder="根据分类筛选"></ui-select>
            </td>
        </tr>
    </table>
    <div class="table-list-box">
        <template>
            <el-table ref="multipleTable" :data="filterList" tooltip-effect="dark" style="width: 100%" v-on:selection-change="handleSelectionChange" border>
                <el-table-column type="selection" width="40"> </el-table-column>
                <el-table-column label="名称" prop="Name" align="center"></el-table-column>
                <el-table-column label="分类" prop="Category" align="center"></el-table-column>
                <el-table-column label="控制器" prop="Controller" align="center"></el-table-column>
                <el-table-column label="方法" prop="Action" align="center"></el-table-column>
                <el-table-column label="请求类型" prop="Method" align="center" width="100"></el-table-column>
                <el-table-column label="默认项" align="center" width="100">
                    <template slot-scope="scope">
                        <i class="el-icon-check" v-if="scope.row.IsDefault==1"></i>
                        <span v-else>‐</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <div class="el-button-group">
                            <el-button size="small" v-on:click="dialog({title:scope.row.Name,url:'@Url.ActionUrl("Edit")?id='+scope.row.Id,width:'70%',height:'90%',target:'self'})">修改</el-button>
                            <el-button size="small" :disabled="scope.row.IsDefault==1" v-on:click="submit({url:'@Url.ActionUrl("Delete")',data:{id:scope.row.Id},confirmMsg:'确定删除吗？',success:'loadData()'})">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </div>
    <div class="text-gray"><span class="fa fa-info-circle"></span> 如果需要对主菜单下所有功能进行精细的权限控制，可在这里填写，然后在角色管理>权限设置中重新进行设置。</div>
</div>

<script type="text/javascript">

    //vue实例化
    var vue = new Vue({
        el: "#main",
        data: {
            categoryList: [],
            selectList: [],
            dataList: [],
            filterList: [],
            category:""
        },
        methods: {
            loadData: function () {
                loadData();
            },
            search:function () {
                var _this = this;
                var category = this.category;
                if (isNullOrEmpty(category)) {
                    _this.filterList = _this.dataList;
                    return;
                }
                var filterList = [];
                _this.dataList.forEach(function (item) {
                    var itemCategory = item.Category;
                    if (itemCategory == category) {
                        filterList.push(item);
                    }
                });
                _this.filterList = filterList;
            },
            handleSelectionChange: function(val) {
                this.selectList = val;
            }
        }
    });


    //加载数据
    function loadData(category)
    {
        var categoryList = [];
        var searchData = { category: category };
        if (category == undefined) {
            searchData = {};
        }
        vue.ajax({
            url: "@Url.ActionUrl("ListData")?menuId=@Request.QueryString["menuId"]",
            data: searchData,
            success: function (responseData) {
                vue.dataList = responseData;
                vue.dataList.forEach(function (item) {
                    var category = item.Category;
                    var categoryItem;
                    if (isNullOrEmpty(category)) {
                        categoryItem = { value: "未分类", label: "未分类" };
                        item.Category = "未分类";
                        category = "未分类";
                    } else
                    {
                        categoryItem = { value:category,label:category};
                    }
                    if (categoryList.findIndex(function (item) { return item.value == category }) < 0)
                    {
                        categoryList.push(categoryItem);
                    }    
                });
                vue.filterList = vue.dataList
                vue.categoryList = categoryList;
            }
        });
    }
    loadData();
</script>
