<style>
    ul#tableList {
        height: 100%;
        width: 100%;
        padding-bottom: 15px;
    }

        ul#tableList li {
            height: 40px;
            border-bottom: 1px solid #ddd;
            line-height: 40px;
            padding-left: 15px;
        }

            ul#tableList li:last-child {
                border-bottom: 0px;
            }

            ul#tableList li:hover, ul li.active {
                background: #fff;
                color: #409EFF;
                cursor: pointer;
            }

    .table thead tr td {
        padding-left: 10px !important;
    }

    .table tr.item td {
        vertical-align: top;
    }

    .table tr.item:hover td {
        background-color: #fff;
    }

    .table tr.item td:first-child {
        background-color: #eee;
        padding-bottom: 20px;
        padding: 0px !important;
    }
</style>
<div class="main" id="main" v-cloak>
    <table border=0 cellpadding=0 cellspacing=0 class="table table-bordered">
        <thead>
            <tr>
                <td width="200">
                    <ui-select size="small" :clearable="false" v-on:change="changeSite" :options="siteOptions" v-model="siteId" placeholder="所属站点">
                    </ui-select>
                </td>
                <td>权限设置</td>
            </tr>
        </thead>
        <tr class="item list-template-item">
            <td>
                <ul id="tableList">
                    <li v-bind:class="[permission.InfoTableId==item.Id ? 'active' : '']" v-on:click="changeTableId(item.Id)" v-for="item in tableList" class="item list-template-item">
                        {{item.Remark}} <i class="el-icon-document-checked" v-show="isSeted(item.Id)" title="已开启"></i>  
                    </li>
                </ul>
            </td>
            <td>
                <el-form  ref="form" label-width="160px" label-position="left" v-show="infoTableId>0">
                    <el-form-item label="是否开启">
                        <el-radio-group v-model="permission.Open">
                            <el-radio :label=1>开启管理</el-radio>
                            <el-radio :label=0>关闭管理</el-radio>
                        </el-radio-group>
                        <span class="help-block validate-tips-box"></span>
                    </el-form-item>
                    <div v-show="permission.Open==1">

                        <el-form-item label="添加权限">
                            <el-radio-group v-model="permission.CanAdd">
                                <el-radio :label=1>是</el-radio>
                                <el-radio :label=0>否</el-radio>
                            </el-radio-group>
                            <span class="help-block validate-tips-box"></span>
                        </el-form-item>
                        <el-form-item label="修改权限">
                            <el-radio-group v-model="permission.CanEdit">
                                <el-radio :label=2>可修改所有信息</el-radio>
                                <el-radio :label=1>只能修改未审核信息</el-radio>
                                <el-radio :label=0>无</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="删除权限">
                            <el-radio-group v-model="permission.CanDelete">
                                <el-radio :label=2>可删除所有信息</el-radio>
                                <el-radio :label=1>只能删除未审核信息</el-radio>
                                <el-radio :label=0>无</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="新增信息">
                            <el-radio-group v-model="permission.AddDefaultState">
                                <el-radio :label=1>默认通过审核</el-radio>
                                <el-radio :label=0>需要审核</el-radio>
                            </el-radio-group>
                            <span class="help-block validate-tips-box"></span>
                        </el-form-item>

                        <el-form-item label="修改已审核信息">
                            <el-radio-group v-model="permission.EditDefaultState">
                                <el-radio :label=1>默认通过审核</el-radio>
                                <el-radio :label=0>需要重新审核</el-radio>
                            </el-radio-group>
                            <span class="help-block validate-tips-box"></span>
                        </el-form-item>

                        <el-form-item label="是否可设置提交状态">
                            <el-radio-group v-model="permission.CanSetSubmitState">
                                <el-radio :label=1>是</el-radio>
                                <el-radio :label=0>否</el-radio>
                            </el-radio-group>
                            <span class="help-block validate-tips-box">此项权限只用信息发布界面，对超级管理员无效</span>
                        </el-form-item>

                        <el-form-item label="其他权限设置" v-show="permission.MemberGroupId==0">
                            <el-checkbox v-model="permission.OnlyAdminMyself" :false-label="0" :true-label="1">只能管理自己信息</el-checkbox>
                            <el-checkbox v-model="permission.CanSetState" :false-label=0 :true-label=1>可批量设置信息状态</el-checkbox>
                            <el-checkbox v-model="permission.CanPushData" :false-label=0 :true-label=1>可推送信息/副栏目发布</el-checkbox>
                            <el-checkbox v-model="permission.CanMultipleSet" :false-label=0 :true-label=1>可批设属性</el-checkbox>
                            <el-checkbox v-model="permission.CanAdminRecycleBin" :false-label=0 :true-label=1>可管理回收站</el-checkbox>
                            <span class="help-block validate-tips-box">此项权限只用于后台，对用户中心无效</span>
                        </el-form-item>


                        <el-form-item label="最大信息发布数">
                            <el-input v-model="permission.MaxNum" style="width:150px;" maxlength="8"></el-input>
                            <span class="help-block validate-tips-box">0则表示不限制</span>
                        </el-form-item>

                        <el-form-item label="信息栏目权限">
                            <ui-cascader style="width:90%" v-model="permission.ColumnIds" :options="columnOptions" :props="{ expandTrigger: 'hover',multiple: true}" clearable></ui-cascader>
                            <span class="help-block validate-tips-box">不选择则默认有可管理所有栏目权限</span>
                        </el-form-item>
                    </div>
                </el-form>
            </td>
        </tr>
    </table>

    <div class="footer-submit-bar" style="padding-left:400px">
        <el-button type="primary" v-on:click="postSubmit">提交保存</el-button>
        <el-button v-on:click="closeDrawer()">关闭</el-button>
    </div>

</div>
<script type="text/javascript">
    //vue实例化
    var vue = new Vue({
        el: "#main",
        data: {
            key: "0",
            permissionTableIdList:[], //已经设置的信息表id集合
            siteId: 0,
            infoTableId: 0,
            tableList: [],
            permission: {},
            columnOptions: [],
            siteOptions:[],
        },
    created: function() {
        this.loadData();
    },
    methods: {
        loadData: function () {
            var _this = this;
            var serverData = { siteId: _this.siteId, infoTableId: _this.infoTableId };
            serverData = extend(serverData,getQueryString(true));
            _this.ajax({
                url: "@Url.ActionUrl("GetInfoPermission")",
                data: serverData,
                success: function (response) {
                    if (response)
                    {
                        _this.permission = response.Permission;
                        _this.siteId = response.SiteId;
                        _this.infoTableId = _this.permission.InfoTableId;
                        _this.columnOptions = response.ColumnOptions;
                        _this.tableList = response.TableList;
                        _this.permissionTableIdList = response.permissionTableIdList;
                        _this.siteOptions = response.siteOptions;
                        _this.permissionTableIdList = response.permissionTableIdList;
                    }
                    else
                    {
                        alert("当前管理员未分配管理站点！");
                        closeSelf();
                    }
                }
            });
        },
        isSeted: function (tableId)
        {
            return this.permissionTableIdList.findIndex(function (item) {return item.TableId ==tableId})>=0
        },
        changeTableId: function (tableId) {
            if (tableId == this.infoTableId) {
                return;
            }
            this.infoTableId = tableId;
            this.loadData();
        },
        changeSite: function (siteId) {
            this.infoTableId = 0;
            this.siteId = siteId;
            this.loadData();
        },
        postSubmit: function () {
            var _this = this;
            var currentTableId = _this.permission.InfoTableId;
            this.submit({
                url: "@Url.ActionUrl("SaveInfoPermission")", data: _this.permission, success: function () {
                    if (_this.permission.Open == 1)
                    {
                        _this.permissionTableIdList.push({TableId:currentTableId});
                    }
                    else
                    {
                        _this.permissionTableIdList.remove(function (item) {return item.TableId == currentTableId });
                    }
                }
            });
        }
    },
    });
</script>

