<div class="main" id="main">
    <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="fa fa-home fa-fw"></i><a href="javascript:void(0)" onclick="location.href=location.href">管理员管理</a></el-breadcrumb-item>
    </el-breadcrumb>
    <div class="menu-bar-box" style="margin-top:20px;">
        <table border=0 cellpadding=0 cellspacing=0 class="tb-head form-inline form-group-sm">
            <tr>
                <td>
                    <el-tooltip class="item" effect="dark" content="添加管理员" placement="bottom-start">
                        <el-button size="small" type="button" v-on:click="dialog({title:'增加管理员',url:'@Url.ActionUrl("Add")',width:'95%',height:'95%'})">添加</el-button>
                    </el-tooltip>
                    <el-button size="small" type="button" 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">
                    <el-select size="small" v-model="queryData.siteIds" clearable placeholder="选择可管理站点" v-on:change="loadData">
                        <el-option :value="item.value" :key="item.value" :label="item.label" v-for="item in siteList"></el-option>
                    </el-select>
                    <el-select size="small" v-model="queryData.roleId" clearable placeholder="选择角色" v-on:change="loadData">
                        <el-option :value="item.value" :key="item.value" :label="item.label" v-for="item in roleList"></el-option>
                    </el-select>
                    <el-input size="small" v-model="queryData.username" style="width:225px;" placeholder="用户名"></el-input>
                    <el-button size="small" v-on:click="loadData">搜索</el-button>
                </td>
            </tr>
        </table>
        <el-table ref="multipleTable" :data="dataList" tooltip-effect="dark" row-key="id" border highlight-current-row style="width:100%" v-on:selection-change="handleSelectionChange">
            <el-table-column type="selection" width="40" align="center"></el-table-column>
            <el-table-column prop="Username" label="用户名"></el-table-column>
            <el-table-column label="管理员角色" align="center">
                <template slot-scope="scope">
                    {{getRoleName(scope.row.RoleId)}}
                </template>
            </el-table-column>
            <el-table-column prop="Remark" label="备注" align="center" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="投稿权限" align="center"  width="150">
                <template slot-scope="scope">
                    <el-button size="small" href="javascript:void(0)" :disabled="scope.row.roleId==1" v-on:click="dialog({title:scope.row.Username+'-信息管理权限设置',url:'@Url.ActionUrl("Index","AdminInfoPermissions")?uid='+scope.row.Uid,width:'90%',height:'95%'})">设置</el-button>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button-group>
                        <el-button v-on:click="dialog({title:scope.row.Username+'-管理员设置',url:'@Url.ActionUrl("Edit")?id='+scope.row.Id,width:'95%',height:'95%'})" size="small">修改</el-button>
                        <el-button v-on:click="submit({url: '@Url.ActionUrl("Delete")',data:{id:scope.row.Id},confirmMsg:'确定删除吗？',success:'loadData()'})" size="small">删除</el-button>
                    </el-button-group>
                </template>
            </el-table-column>
        </el-table>
        <ui-page-panel v-model="pageInfo" v-on:change="loadData" v-if="pageInfo.RecordCount>0"></ui-page-panel>
    </div>
    </div>
    <script type="text/javascript">

    //vue实例化
    var vue = new Vue({
        el: "#main",
        data: {
            dataList: [],
            selectList: [],
            pageInfo: { PageSize: 15, CurrentPage: 1, RecordCount: 0, PageCount: 1 },
            siteList:@Html.Raw(Html.GetOptionsJson("pa_site")),
            roleList:@Html.Raw(Html.GetOptionsJson("pa_role")),
            queryData: { siteIds: "", roleId: "", username: "" }
        },
        methods: {
            handleSelectionChange: function (val) {
                this.selectList = val;
            },
            loadData: function () {
                loadData();
            },
            getRoleName: function (id) {
                var name = "";
                this.roleList.some(function (item, index) {
                    if (item.value == id)
                    {
                        name = item.label;
                        return true;
                    }
                })
                return name;
            }
        }
    });

        //加载数据
    function loadData()
    {
        var serverData = extend(vue.pageInfo, vue.queryData);
        vue.ajax({
            url: "@Url.ActionUrl("PageListData")",
            data: serverData,
            success: function (responseData) {
                if (responseData != "")
                {
                    vue.dataList = responseData.Data;
                    vue.pageInfo = responseData.PageInfo;
                }
            }
        });
    }
    loadData();


</script>