{extend name="layout/content" /}
{block name="header"}
<title>添加配置</title>

<style>
    label {
        padding-top: 10px;
        margin-left: 10px;
    }
    .all-selected-tag {
        display: inline-block;
        padding: 2px 8px;
        background-color: #52c41a;
        color: #fff;
        font-size: 12px;
        border-radius: 4px;
        margin-left: 8px;
        vertical-align: middle;
        line-height: 20px;
    }
</style>
{/block}

{block name="content"}
<div class="x-body">
    <form class="layui-form" action="{:url('edit',['id'=>$data.id])}" method="post">
        <input type="hidden" name="id" value="{$data.id}">

        <div class="layui-form-item">
            <label for="" class="layui-form-label">
                <span class="x-red">*</span>配置标题：
            </label>
            <div class="layui-input-inline">
                <input type="text" id="title" name="title" value="{:escape($data.title)}" required=""
                    lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label for="" class="layui-form-label">
                <span class="x-red">*</span>字段名：
            </label>
            <div class="layui-input-inline">
                <input type="text" id="name" name="name" value="{:escape($data.name)}" required="" lay-verify="required"
                    autocomplete="off" class="layui-input">
            </div>
        </div>

        {if condition="$data.name eq 'game_channel_by_mobild_whitelist'"}
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="x-red">*</span>适用游戏：</label>
            <div class="layui-input-inline" style="width:500px;">
                <div id="gameSelect"></div>
                <input type="hidden" name="game_ids" id="hidden_game_ids">
            </div>
            <span id="gameAllTag" class="all-selected-tag" style="display:none;">已全选</span>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="x-red">*</span>适用渠道：</label>
            <div class="layui-input-inline" style="width:500px;">
                <div id="channelSelect"></div>
                <input type="hidden" name="channel_ids" id="hidden_channel_ids">
            </div>
            <span id="channelAllTag" class="all-selected-tag" style="display:none;">已全选</span>

            <div class="layui-form-mid layui-word-aux">
                <span class="x-red">&nbsp;* 选择会长，自动包含所有下级；</span>
            </div>
        </div>
        {else/}
        <div class="layui-form-item">
            <label for="" class="layui-form-label"><span class="x-red">*</span>字段值：</label>
            <div class="layui-input-inline" style="width:500px;">
                <input type="text" id="value" name="value" value="{:escape($data.value)}" required=""
                    lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        {/if}

        <div class="layui-form-item">
            <label for="" class="layui-form-label">
                排序：
            </label>
            <div class="layui-input-inline">
                <input type="text" name="order" value="{$data.order}" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label for="" class="layui-form-label">
                描述：
            </label>
            <div class="layui-input-inline" style="width: 50%;">
                <textarea name="description" rows="5" class="layui-textarea">{$data.description}</textarea>
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
                <button type="button" onClick="javascript:history.back(-1);" class="layui-btn layui-btn-primary">返回
                </button>
            </div>
        </div>

    </form>
</div>
{/block}

{block name="footer"}
{if condition="$data.name eq 'game_channel_by_mobild_whitelist'"}
<script src="/static/lib/xm-select.js"></script>
<script>
    var gameList = {$gameList|htmlspecialchars_decode};
    var channelTree = {$channelTree|htmlspecialchars_decode};
    var selectedChannels = {$selectedChannels|htmlspecialchars_decode};
    var channelIdsStr = "{$channelIds}";

    // 获取所有一级渠道ID
    var allLevel1Ids = channelTree.map(function(item) { return item.value; });
    var allGameIds = gameList.map(function(item) { return item.value; });

    // 解析 channelIds，判断是否是一级全选模式
    var channelIdsArr = channelIdsStr ? channelIdsStr.split(',') : [];
    var isLevel1All = channelIdsArr.length > 0 && channelTree.every(function(level1) {
        return channelIdsArr.indexOf(String(level1.value)) > -1;
    });

    // 根据模式决定 initValue
    var channelInitValue = [];
    var needSetAllValue = false;
    if (channelIdsStr === 'all' || isLevel1All) {
        needSetAllValue = true;
    } else if (channelIdsStr) {
        channelInitValue = selectedChannels;
    }

    var gameSelect = xmSelect.render({
        el: '#gameSelect',
        data: gameList,
        toolbar: { show: true, list: ['ALL', 'CLEAR'] },
        filterable: true,
        initValue: "{$gameIds}" === "all" ? allGameIds : ("{$gameIds}" ? "{$gameIds}".split(',').map(function(v){return parseInt(v)}) : []),
        on: function (data) {
            var isAll = data.arr.length === allGameIds.length && allGameIds.length > 0;
            var gameIdsVal = isAll ? 'all' : data.arr.map(function(item){return item.value}).join(',');
            $('#hidden_game_ids').val(gameIdsVal);
            $('#gameAllTag').toggle(isAll);
        }
    });

    var channelSelect = xmSelect.render({
        el: '#channelSelect',
        data: channelTree,
        tree: {
            show: true,
            strict: true,
            expandedKeys: [],
        },
        toolbar: { show: true, list: ['ALL', 'CLEAR'] },
        filterable: true,
        filterDone: function(val, list) {
            // 搜索框为空时，收起所有节点
            if (!val) {
                channelSelect.changeExpandedKeys([]);
                return;
            }
            
            // 有搜索内容时，先尝试全展开测试
            channelSelect.changeExpandedKeys(true);
        },
        initValue: channelInitValue,
        on: function (data) {
            var selectedValues = data.arr.map(function(item) { return item.value; });

            if (selectedValues.length === 0) {
                // 未选择任何渠道
                $('#hidden_channel_ids').val('');
                $('#channelAllTag').hide();
                return;
            }

            // 判断是否所有一级节点都已选中
            var selectedLevel1Count = 0;
            selectedValues.forEach(function(val) {
                if (allLevel1Ids.indexOf(val) > -1) {
                    selectedLevel1Count++;
                }
            });
            if (selectedLevel1Count >= allLevel1Ids.length) {
                // 所有一级节点都选中，视为全选
                $('#hidden_channel_ids').val('all');
                $('#channelAllTag').show();
                return;
            }

            // 统计所有叶子节点（最底层渠道）的数量
            var totalLeafCount = 0;
            function countLeaves(nodes) {
                nodes.forEach(function(node) {
                    if (node.children && node.children.length > 0) {
                        countLeaves(node.children);
                    } else {
                        totalLeafCount++;
                    }
                });
            }
            countLeaves(channelTree);

            // 统计已选中的叶子节点数量
            var selectedLeafCount = 0;
            data.arr.forEach(function(item) {
                if (!item.children || item.children.length === 0) {
                    selectedLeafCount++;
                }
            });

            if (selectedLeafCount >= totalLeafCount) {
                // 所有叶子节点都已选中，视为全选
                $('#hidden_channel_ids').val('all');
                $('#channelAllTag').show();
            } else {
                // 部分选中，提交具体ID
                $('#hidden_channel_ids').val(selectedValues.join(','));
                $('#channelAllTag').hide();
            }
        }
    });

    // 全选/一级全选模式：用 setValue 强制设置所有节点选中
    if (needSetAllValue) {
        setTimeout(function() {
            var allValues = [];
            function collectAll(nodes) {
                nodes.forEach(function(node) {
                    allValues.push(node.value);
                    if (node.children && node.children.length > 0) {
                        collectAll(node.children);
                    }
                });
            }
            collectAll(channelTree);
            channelSelect.setValue(allValues);
        }, 300);
    }

    // 初始化隐藏域和全选标签
    $('#hidden_game_ids').val("{$gameIds}");
    $('#hidden_channel_ids').val(channelIdsStr);
    if ("{$gameIds}" === 'all') $('#gameAllTag').show();
    if (channelIdsStr === 'all' || isLevel1All) $('#channelAllTag').show();

    // 使用layui的表单提交事件
    layui.use('form', function(){
        var form = layui.form;
        form.on('submit(formDemo)', function(data){
            // 检查游戏是否全选
            var gameSelected = gameSelect.getValue();
            if (gameSelected.length === allGameIds.length && allGameIds.length > 0) {
                $('#hidden_game_ids').val('all');
            }

            // 检查渠道是否全选
            var channelSelected = channelSelect.getValue();
            var selectedValues = channelSelected.map(function(item) { return item.value; });

            // 检查一级节点是否全选
            var selectedLevel1Count = 0;
            selectedValues.forEach(function(val) {
                if (allLevel1Ids.indexOf(val) > -1) {
                    selectedLevel1Count++;
                }
            });

            if (selectedLevel1Count >= allLevel1Ids.length) {
                $('#hidden_channel_ids').val('all');
            } else {
                // 检查叶子节点是否全选
                var totalLeafCount = 0;
                function countLeaves(nodes) {
                    nodes.forEach(function(node) {
                        if (node.children && node.children.length > 0) {
                            countLeaves(node.children);
                        } else {
                            totalLeafCount++;
                        }
                    });
                }
                countLeaves(channelTree);

                var selectedLeafCount = 0;
                channelSelected.forEach(function(item) {
                    if (!item.children || item.children.length === 0) {
                        selectedLeafCount++;
                    }
                });

                if (selectedLeafCount >= totalLeafCount) {
                    $('#hidden_channel_ids').val('all');
                }
            }

            // 允许表单继续提交
            return true;
        });
    });
</script>
{/if}
<script>
</script>
{/block}