{extend name="layout_container" /}

{block name="title"}
角色菜单管理
{/block}

{block name="main"}
<el-row>
    <el-col :span="24">
        <el-page-header @back="goBack" content="{$pageTitle?:'编辑'}" style="margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #eaeefb">
        </el-page-header>
    </el-col>
</el-row>

<el-input
        placeholder="输入关键字进行过滤"
        v-model="filterText">
</el-input>
<el-tree
        :data="data"
        show-checkbox
        default-expand-all
        node-key="id"
        ref="tree"
        :filter-node-method="filterNode"
        :default-checked-keys="checkedKeys"
        @check-change="handleCheckChange"
        :props="defaultProps">
</el-tree>

</div>
{/block}

{block name='script'}
<script>
    var role_id = {$id};
    new Vue({
        el: '#app',
        template: "#appCnt",
        data: function () {
            return {
                filterText: '',
                data: [],
                checkedKeys: [],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                }
            }
        },
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val);
            }
        },
        methods: {
            filterNode(value, data) {
                if (!value) return true;
                return data.label.indexOf(value) !== -1;
            },
            handleCheckChange: function (data, checked, indeterminate) {
                if(indeterminate){
                    return false;
                }
                var _this = this
                $.post('', {id: role_id, checked: checked, data_id: data.id}, function (rs) {
                    if(rs.code !== 200) {
                        _this.$message.error(rs.message ? rs.message : '操作错误');
                    }
                })
            },
            generateData: function () {
                var _this = this
                $.get('{:url("/thinkadmin/menu/roleMenuTree")}', {role_id: role_id}, function (rs) {
                    if (rs.code === 200) {
                        _this.data = rs.data.all;
                        _this.checkedKeys = rs.data.my;
                    }
                })
            },
            goBack: function () {
                window.location.href = document.referrer
            }
        },
        created: function () {
            this.generateData()
        }
    })
</script>
{/block}