{include file='common/_js_css'}

<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--页面主要内容-->
        <main>
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-body">
                                <form class="layui-form">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">{:lang("Name")}</label>
                                        <div class="layui-input-block">
                                            <input name="id" value="{$group.id}" hidden>
                                            <input type="text" name="name" value="{$group.name}" lay-verify="required" lay-reqtext="{:lang('Please fill in')}" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">{:lang("Describe")}</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="describe" value="{$group.describe}" lay-verify="required" lay-reqtext="{:lang('Please fill in')}" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">{:lang("Store")}</label>
                                        <div class="layui-input-block">
                                            {volist name="stores" id="item"}
                                            <input type="checkbox" name="store_ids[]" value="{$item.id}" title={$item.name} {if $item.isChecked} checked {/if}>
                                            {/volist}
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">{:lang('Superior department')}</label>
                                        <div class="layui-input-block">
                                            <select name="pid" lay-filter="required">
                                                <option value="0" selected>{:lang("Unknown")}</option>
                                                {volist name="all_groups" id="item"}
                                                <option value="{$item.id}"  {if $group.pid == $item.id} selected {/if} >{$item.name}</option>
                                                {volist name='$item.children' id='first'}
                                                <option value="{$first.id}"  {if $group.pid == $first.id} selected {/if}>&nbsp;&nbsp;| --&nbsp;{$first.name}</option>
                                                {volist name='$first.children' id='second'}
                                                <option value="{$second.id}"  {if $group.pid == $second.id} selected {/if}>&nbsp;&nbsp;| --&nbsp;&nbsp;| --&nbsp;{$second.name}</option>
                                                {volist name='$second.children' id='thirdly'}
                                                <option value="{$thirdly.id}"  {if $group.pid == $thirdly.id} selected {/if}>&nbsp;&nbsp;| --&nbsp;&nbsp;| --&nbsp;&nbsp;| --&nbsp;{$thirdly.name}</option>
                                                {volist name='$thirdly.children' id='fourthly'}
                                                <option value="{$fourthly.id}"  {if $group.pid == $fourthly.id} selected {/if}>&nbsp;&nbsp;| --&nbsp;&nbsp;| --&nbsp;&nbsp;| --&nbsp;&nbsp;| --&nbsp;{$fourthly.name}</option>
                                                {/volist}
                                                {/volist}
                                                {/volist}
                                                {/volist}
                                                {/volist}
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">{:lang("Permission")}</label>
                                        <div class="layui-input-block">
                                            <div id="auth_caviar" class="demo-tree-more"></div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button type="button" class="layui-btn" lay-submit="" lay-filter="caviar_submit_btn" lay-checked="getChecked">{:lang('Submit')}</button>
                                            <button type="button" class="btn btn-danger" onclick='
                                           deletingASingle_("{:url(\"admin/auth_group/delete\")}","{$group.id}",["{:lang(\"Succeed\")}"],"{:lang(\"Warn\")}","{:lang(\"Are you sure you want to delete the selected data\")}",["{:lang(\"Confirm\")}"])'
                                            >{:lang('Delete')}</button>
                                            <button type="reset" class="layui-btn layui-btn-primary">{:lang("Reset")}</button>
                                        </div>
                                    </div>
                                </form>

                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </main>
        <!--End 页面主要内容-->
    </div>
</div>
<script>
    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引

    layui.use(['tree', 'util'], async function(){
        var tree = layui.tree
            ,layer = layui.layer
            ,form = layui.form;

        const response = await request('{:url("admin/auth/findAuthRuleByGroupId")}?group_id={$group.id}');
        let data = []
        if(response.code === 200) data = response.data;

        tree.render({
            elem: '#auth_caviar'
            ,data: data
            ,showCheckbox: true  //是否显示复选框
            ,id: "auth_input"
        });

        form.on('submit(caviar_submit_btn)', (data) => {
            const checkedData = deepTraversal(tree.getChecked('auth_input')); //获取选中节点的数据
            request('{:url("admin/auth_group/edit")}',{
                ...data.field,
                rule_ids: checkedData.length === 0 ? undefined : checkedData.map(v => v.id).join(",")
            }).then((res) => {
                res.code === 200 ? layer.msg("{:lang('Succeed')}", {icon: 1,time:500},() => {
                    parent.location.reload();
                }) : layer.msg(res.message,{icon: 5})
            })
            return false;
        });

    });
    function deletingASingle_(url,
                             id,
                             hints = ['Succeed'],
                             title= 'Warn',
                             content= 'Are you sure you want to delete the selected data?',
                             btn = ['Confirm']) {
        layer.open({
            title: title,
            content: content,
            btn: btn,
            yes: async (index, layero) => {
                const response = await request(url, { ids: id.toString()} );
                response.code === 200 ? layer.msg(hints[0], {icon: 1,time:200},() => {
                    parent.layer.close(index);
                    location.replace("{:url('admin/auth_group/index')}")
                }) : layer.msg(res.message,{icon: 5})
                layer.close(index);
            }

        });
    }
</script>