{extend name="common/common2" /}
{block name="main"}

<style>
    .submit-btn{
        position: fixed;
        z-index: 10;
        top: 3px;
        right: 5px;
    }
    .submit-btn2{
        position: fixed;
        z-index: 10;
        top: 3px;
        right: 90px;
    }
    .panel-body{
        height: 90%;
        overflow: auto;
    }
</style>

<div class="tabs-container" id="app">
    <ul class="nav nav-tabs">

        <li {if $cate==0} class="active" {/if}><a  href="{:url('auth',['id'=>$rolesId,'cate'=>0])}" aria-expanded="true">后台权限</a>
        </li>

        <li {if $cate==1} class="active" {/if}><a  href="{:url('auth',['id'=>$rolesId,'cate'=>1])}" aria-expanded="true">APP权限</a>
        </li>
    </ul>


    <div class="tab-content">
        <div id="tab-1" class="tab-pane active">
            <div class="panel-body">
                <div >
                    <p>
                        <el-checkbox
                                @change="handleCheckedTreeNodeAll($event, 'tree')"
                        >全选/全不选</el-checkbox>
                    </p>
                    <p>
                        <el-input
                                clearable
                                size="mini"
                                placeholder="输入关键字"
                                v-model="filterText">
                        </el-input>
                    </p>
                    <p>
                        <el-tree
                                :data="data"
                                :empty-text="emTxt"
                                show-checkbox
                                default-expand-all
                                :filter-node-method="filterNode"
                                node-key="id"
                                ref="tree"
                                highlight-current
                                :default-checked-keys="value"
                                @check="handleClick1"
                                :check-strictly="strictly"
                                :props="defaultProps">
                        </el-tree>
                    </p>
                </div>

            </div>
        </div>
    </div>
    <button type="button" @click="save" class="btn btn-primary  submit-btn">保存权限</button>
    <a href="{:url('auth',['id'=>$rolesId,'type'=>1])}" class="btn btn-warning submit-btn2">推荐权限</a>

</div>
</div>

<div class="ibox" style="display: none">
    <div class="ibox-content">

    </div>
</div>
{/block}
{block name="script"}
<script>
    new Vue({
        el: '#app',
        data: function() {
            return {
            data: {:json_encode($menus)},
            defaultProps: {
            children: 'children',
                label: 'title',
                value: 'id',
            },
            value:[],
            emTxt:"没有数据",
            checkValue:false,
            arr:[],
            filterText: '',
            checked:false,
            strictly:false,
            menuNodeAll: false,
        }
        },
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val);
            }
        },
        mounted(){
            this.strictly = true;
            this.$nextTick(() => {
                this.value  = {:json_encode($sauth)};
                this.strictly = false;
            })
        },
        methods: {
            // 树权限（全选/全不选）
            handleCheckedTreeNodeAll(value) {
                this.$refs.tree.setCheckedNodes(value ? this.data : []);
            },
            handleClick1(data) {
                // const node = this.$refs.tree.getNode(data.id);
                // this.setNode(node);
            },
            setNode(node) {
                if (node.checked) {
                    //选中,递归设置所有父节点选中
                    this.setParentNode(node);
                } else {
                    //取消选中,所有子节点取消选中
                    this.setChildenNode(node);
                }
            },
            setParentNode(node) {
                if (node.parent) {
                    for (const key in node) {
                        if (key === "parent") {
                            node[key].checked = true;
                            this.setParentNode(node[key]);
                        }
                    }
                }
            },
            setChildenNode(node) {
                for (let i = 0; i < node.childNodes.length; i++) {
                    node.childNodes[i].checked = false;
                    this.setChildenNode(node.childNodes[i]);
                }
            },
            filterNode(value, data) {
                if (!value) return true;
                return data.title.indexOf(value) !== -1;
            },
            handleCheckAllChange(e){
                var list = this.$refs.tree.store._getAllNodes();
                for (let i = 0;i < list.length;i++) {
                    this.$refs.tree.store._getAllNodes()[i].checked = e;

                }
                for (var i = 0; i <= this.value.length; i++) {
                    if (this.checked == false) {
                        this.value.splice(this.value.indexOf(this.i), 1)
                    }
                }
            },
            all(){

            },
            handleNodeClick(e){   //点击节点
                console.log(e);
            },
            handleCheckChange(e,checked){    //多选框
                // this.all();
                this.value = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys())
                for (var i = 0; i <= this.value.length; i++) {
                    if (this.checked == false) {
                        this.value.splice(this.value.indexOf(this.i), 1)
                    }
                }
                console.log(this.value);

            },
            save(){
                // 获取选中的子节点
                let checkedKeys = this.$refs.tree.getCheckedKeys();
                // 获取选中的父节点
                let hafCheckedKeys = this.$refs.tree.getHalfCheckedKeys();
                // 合并
                let functionIdList = checkedKeys.concat(hafCheckedKeys)
                var  checkedId = functionIdList;
                console.log(checkedId)
                //  this.value = checkedId;
                var that = this;
                if(checkedId.length===0){
                    this.$message.error('请选择权限');
                    return ;
                }
                $.post("{:url('auth')}",{cate:"{$cate}",rolesId:"{$rolesId}",ids:checkedId},function (res) {
                    if(res.code==1){
                        that.$message({
                            message: res.msg,
                            type: 'success',
                            showClose: true,
                            onClose:function () {
                                parent.layer.closeAll();
                            }
                        });
                    }else {
                        that.$message.error(res.msg);
                    }
                })
            }

        }
    })
    $(document).on('click','.app-check-all',function(){
        $(".appids").prop("checked", $(this).prop('checked'));
    });

    function checkSubClick(id,_this){
        if($(_this).prop('checked') == true){
            $('.sub_'+id).prop("checked", $(_this).prop('checked'));
        }else {
            $('.sub_'+id).prop("checked", false);
        }
    }
</script>
{/block}