<div class="main" id="main" v-cloak>
    <div class="breadcrumb-box">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item><i class="el-icon-s-home"></i>管理员管理</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <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:'80%',height:'90%'})">添加</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="mini" v-model="queryData.isSuperAdmin" clearable placeholder="是否超级管理员" v-on:change="loadData">
                        <el-option :key="1" :value="1" label="超级管理员"></el-option>
                        <el-option :key="0" :value="0" label="普通管理员"></el-option>
                    </el-select>
                    <el-select size="mini" v-model="queryData.siteId" 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="mini" v-model="queryData.memberGroupId" clearable placeholder="根据会员组权限选择" v-on:change="loadData">
                        <el-option :value="item.value" :key="item.value" :label="item.label" v-for="item in memberGroupList"></el-option>
                    </el-select>
                    <el-select size="mini" 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="mini" v-model="queryData.username" style="width:150px;" placeholder="用户名" clearable v-on:clear="loadData"></el-input>
                    <el-button size="mini" 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 prop="Department" label="所属部门" :show-overflow-tooltip="true" max-width="100"></el-table-column>
            <el-table-column prop="Remark" label="备注" :show-overflow-tooltip="true" max-width="200"></el-table-column>
            <el-table-column label="超级管理员" align="center" width="150">
                <template slot-scope="scope">
                    <span :class="'sp_state is-'+scope.row.IsSuperAdmin"></span>
                </template>
            </el-table-column>
            <el-table-column label="站点权限" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                   {{getName(scope.row,scope.row.AdminSiteIds,siteList)}}
                </template>
            </el-table-column>
            <el-table-column label="用户组权限" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                   {{getName(scope.row,scope.row.AdminMemberGroupIds,memberGroupList)}}
                </template>
            </el-table-column>
            <el-table-column label="管理角色" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    {{getName(scope.row,scope.row.RoleIds,roleList)}}
                </template>
            </el-table-column>
            <el-table-column prop="Remark" label="信息权限设置" align="center">
                <template slot-scope="scope">
                    <el-button size="small" :disabled="setInformationPermissionDisabled(scope.row)" v-on:click="dialog({title:scope.row.Username+'-信息权限设置',url:'@Url.ActionUrl("InfoPermission")?uid='+scope.row.Uid,width:'90%',height:'95%'})"><span class="fa fa-pencil-square"> 设置</span></el-button>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button-group>
                        <el-button  size="small" v-on:click="dialog({title:scope.row.Username+'-管理员设置',url:'@Url.ActionUrl("Edit")?id='+scope.row.Id,width:'60%',height:'80%'})">修改</el-button>
                        <el-button  size="small" v-on:click="submit({url: '@Url.ActionUrl("Delete")',data:{id:scope.row.Id,uid:scope.row.Uid},confirmMsg:'确定删除吗？',success:'loadData()'})">删除</el-button>
                    </el-button-group>
                </template>
            </el-table-column>
        </el-table>
        <div class="help-block">
            <i class="el-icon-warning"></i> 同一个信息表同时设置管理员和部门信息发布权限时，管理员权限优先
        </div>
        <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 },
            memberGroupList:@Html.Raw(Html.GetOptionsJson("pa_member_group")),
            siteList:@Html.Raw(Html.GetOptionsJson("pa_site","remark")),
            roleList:@Html.Raw(Html.GetOptionsJson("pa_role")),
            queryData: {isSuperAdmin:"",siteId: "", roleId: "",memberGroupId:"",username: "" }
        },
        created: function () {
            this.memberGroupList.unshift({ value: 0, label: "所有用户组" })
        },
        methods: {
            handleSelectionChange: function (val) {
                this.selectList = val;
            },
            loadData: function () {
                loadData();
            },
            setInformationPermissionDisabled:function(row)
            {
                if (row.IsSuperAdmin == 1) { //超级管理不需要设置
                    return true;
                }
                var adminSiteIds = row.AdminSiteIds;
                if (!adminSiteIds)
                {
                    return true;
                }
                adminSiteIds = adminSiteIds.split(",");
                if (this.siteList.findIndex(function (item) {return adminSiteIds.indexOf(item.value.toString())>=0})>= 0)
                {
                    return false;
                }
                else
                {
                    return true;
                }
            },
            getName: function (row, ids, options) {
                if (row.IsSuperAdmin == 1) {
                    return "-";
                }
                if (ids == null || ids == undefined || ids == "") {
                    return "/";
                }
                var name = [];
                var ids = ids.split(",");
                options.forEach(function (item, index) {
                    if (ids.indexOf(item.value.toString())>= 0) {
                        name.push(item.label);
                    }
                })
                return name.join("/");
            },
          
        }
    });

        //加载数据
    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>