<%--
  Created by IntelliJ IDEA.
  User: mrz
  Date: 2017/10/21
  Time: 下午9:51
  To change this template use File | Settings | File Templates.
--%>
<%@include file="/common/CHeader.jsp" %>
<%@page pageEncoding="UTF-8" %>
<body>
<div id="app" class="container-fluid">
    <table class="table table-bordered table-hover definewidth m10">
    <template v-for="(value,key) in permission">
        <tbody>
        <tr>
        <td>
            <input type="checkbox" v-bind:id="'pm'+key" v-bind:value="value.permissionId" v-model="checkedPMSIds">
            <label v-bind:for="'pm'+key">{{value.permissionName}}</label>
        </td>
        </tr>
        </tbody>
    </template>
    <%--<pre>{{ checkedPMSIds | json }}</pre>--%>
        <tr>
            <td>
                <button @click="submit()"class="btn btn-primary">设置权限</button>
            </td>
        </tr>

        </table>
</div>
</body>

<script>
    var roleId = ${role.roleId};
    var vm = new Vue({
        el: '#app',
//需要注入的模板的父元素
        data: {
            permission: [],
            checkedPMSIds:[],
            hasRole:{},
            pages: [],
            currentPage: [],
            pageLength: '2',
            pageOptions: [
                {text: '每页2条', value: '2'},
                {text: '每页4条', value: '4'},
                {text: '每页10条', value: '10'},
                {text: '每页50条', value: '50'},
                {text: '每页100条', value: '100'}
            ]
        }, //end data
        created: function () {
            $.post("list.json", {"begin": 0, "length": this.pageLength}, function (data) {
                vm.pages = data.page;
                vm.permission = data.model;
                vm.currentPage = data.page.current;

                var para = {roleId:roleId};
                $.ajax({
                    type:"POST",
                    url:"listByRole.json",
                    dataType:'json',
                    data:JSON.stringify(para),
                    contentType:"application/json",
                    success: function (data) {
                        var rolePMS = data.model;
                        rolePMS.forEach(function (val,index) {
                             vm.checkedPMSIds.push(val['permissionId']) ;
                        });
                        console.log(vm.checkedPMSIds);
                    },
                });

            });



//end post
        }, //created
        methods: {
            submit: function () {
                var list = {roleId:roleId,pmList:vm.checkedPMSIds};
                var para  = JSON.stringify(list);
                $.ajax({
                    type:"POST",
                    url:"update.json",
                    dataType:'json',
                    data:para,
                    contentType:"application/json",
                    success: function (data) {

                    },
                });
            }
        }
    }); //end vue

</script>
</html>