{include file="Public:header2"/}

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <form onsubmit="return false;">
                        <input type="hidden" name="id" value="{$info.id}">
                        <div class="layui-form" wid100 lay-filter="editForm">
                            <div class="layui-form-item">
                                <label class="layui-form-label">配置类型</label>
                                <div class="layui-input-inline" style="width: 700px">
                                    <input type="radio" name="type" value="1" lay-filter="config_type"
                                        class="layui-input" title="每日签到" {if $info.type == 1}checked{/if}>
                                    <input type="radio" name="type" value="2" lay-filter="config_type"
                                        class="layui-input" title="累计签到" {if $info.type == 2}checked{/if}>
                                </div>
                            </div>

                            <div class="layui-form-item" id="day_select">
                                <label class="layui-form-label">签到天数</label>
                                <div class="layui-input-inline">
                                    <input type="number" name="day" min="1" max="365" value="{$info.day}"
                                        placeholder="请输入连续签到天数/累计天数" autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-form-mid layui-word-aux">签到多少天可以获得奖励</div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">配置标题</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="title" lay-verify="required" placeholder="请输入配置标题"
                                        autocomplete="off" class="layui-input" value="{$info.title}">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">配置图标</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="icon" placeholder="请输入图标URL" autocomplete="off"
                                        class="layui-input" style="width: 500px" value="{$info.icon}">
                                    <div style="margin-top: 5px;">
                                        <button type="button" class="layui-btn" id="upload_icon">
                                            <i class="layui-icon">&#xe67c;</i>上传图标
                                        </button>
                                        <img id="icon_preview" style="max-width:200px;{if !empty($info.icon)}display:block;{else}display:none;{/if}margin-top:10px;" src="{$info.icon}">
                                    </div>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">配置描述</label>
                                <div class="layui-input-inline">
                                    <textarea name="description" placeholder="请输入配置描述" class="layui-textarea"
                                        style="width: 600px">{$info.description}</textarea>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">排序</label>
                                <div class="layui-input-inline">
                                    <input type="number" name="sort" value="{$info.sort}" placeholder="请输入排序值，越小越靠前"
                                        autocomplete="off" class="layui-input">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">状态</label>
                                <div class="layui-input-inline" style="width: 700px">
                                    <input type="radio" name="status" value="1" class="layui-input" title="启用" {if $info.status == 1}checked{/if}>
                                    <input type="radio" name="status" value="0" class="layui-input" title="禁用" {if $info.status == 0}checked{/if}>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">奖励信息</label>
                                <div class="layui-input-inline" style="width: 700px">
                                    <div id="rewardInfoContainer"></div>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" onclick="return check()">确认保存</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{include file="Public:footer"/}
<script type="text/javascript">
    layui.use(['layer', 'form', 'upload'], function () {
        var $ = layui.$;
        var form = layui.form;
        var upload = layui.upload;

        // 初始化表单
        form.render();

        // 页面加载时初始化奖励信息区域
        initRewardInfo('rewardInfoContainer', {$rewards|json_encode|raw});

        // 监听配置类型切换
        form.on('radio(config_type)', function (data) {
            if (data.value == '2') { // 累计签到

            } else { // 每日签到

            }
        });

        // 图标上传
        upload.render({
            elem: '#upload_icon',
            url: '/admin/picture',
            done: function (res) {
                if (res.status == 1) { // 上传成功
                    layer.msg("上传成功", { icon: 1, time: 1000 }, function () {
                        $("input[name=icon]").val(res.data.imgurl);
                        $("#icon_preview").attr("src", res.data.path).show();
                    });
                } else { // 上传失败
                    layer.msg(res.msg, { icon: 2, anim: 6, time: 1500 });
                }
            },
            error: function () {
                layer.msg('服务繁忙，请稍后重试', { icon: 2, anim: 6, time: 1500 });
            }
        });
    });

    function check() {
        var url = "{:url('/admin/sign_config_update')}";
        var $ = layui.$;
        var load = layer.load(2);

        // 表单验证
        var type = $("input[name='type']:checked").val();
        if (type == 1) {
            var day = $("input[name='day']").val();
            if (!day || day < 1) {
                layer.msg('请输入有效的连续签到天数', { icon: 2, anim: 6, time: 1500 });
                layer.close(load);
                return false;
            }
        }

        var title = $("input[name='title']").val();
        if (!title) {
            layer.msg('请输入配置标题', { icon: 2, anim: 6, time: 1500 });
            layer.close(load);
            return false;
        }

        // 验证奖励信息
        if (!validateRewardInfo()) {
            layer.close(load);
            return false;
        }

        // 确保处理奖励数据 - 虽然validateRewardInfo已经调用了processRewardData，这里再次调用以确保数据已处理
        processRewardData();
        var loadIndex = layer.load(1, { shade: [0.1, '#fff'] });
        // 提交表单
        $.post(url, $("form").serialize(), function (data) {
            layer.close(loadIndex);
            if (data.status == 1) {
                layer.msg(data.msg, { icon: 1, time: 1000 }, function () {
                    // 关闭当前弹出层
                    var index = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(index);
                });
            } else {
                layer.msg(data.msg, { icon: 2, anim: 6, time: 1500 }, function () {
                    layer.close(load);
                });
            }
        });
    }
</script>