{include file="Public/header3" /}
<div class="layui-form" style="width: 90%; margin: 0 auto; padding-top: 20px;">
    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
            <input type="radio" name="status" value="0" title="关闭" checked>
            <input type="radio" name="status" value="1" title="开启">
        </div>
    </div>
  
    <div class="layui-form-item">
        <label class="layui-form-label">标题</label>
        <div class="layui-input-block">
            <input type="text" name="title" id="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
        </div>
    </div>
    
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">X坐标</label>
            <div class="layui-input-inline">
                <input type="text" name="position_x" id="position_x" autocomplete="off" placeholder="请输入X坐标，如：15% 或 15rpx" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">Y坐标</label>
            <div class="layui-input-inline">
                <input type="text" name="position_y" id="position_y" autocomplete="off" placeholder="请输入Y坐标，如：15% 或 15rpx" class="layui-input">
            </div>
        </div>
    </div>
    
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">宽度</label>
            <div class="layui-input-inline">
                <input type="text" name="width" id="width" autocomplete="off" placeholder="请输入宽度，如：100rpx" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">高度</label>
            <div class="layui-input-inline">
                <input type="text" name="height" id="height" autocomplete="off" placeholder="请输入高度，如：100rpx" class="layui-input">
            </div>
        </div>
    </div>
      
    <div class="layui-form-item">
        <label class="layui-form-label">类型</label>
        <div class="layui-input-block">
            <input type="radio" name="type" value="1" title="展示图片" checked lay-filter="typeFilter">
            <input type="radio" name="type" value="2" title="跳转页面" lay-filter="typeFilter">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">图片</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="uploadImage">上传图片</button>
            <div class="layui-upload-list">
                <img class="layui-upload-img" id="imagePreview" style="max-width: 120px; max-height: 80px;">
            </div>
            <input type="hidden" name="image" id="image" value="">
        </div>
    </div>
    
    <!-- 展示图片类型专属字段 -->
    <div id="showImageFields">
        <div class="layui-form-item" id="imageDetailsDiv">
            <label class="layui-form-label">图片详情</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="uploadImageDetails">上传图片详情</button>
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="imageDetailsPreview" style="max-width: 120px; max-height: 80px;">
                </div>
                <input type="hidden" name="image_details" id="image_details" value="">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">背景图</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="uploadImageBj">上传背景图</button>
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="imageBjPreview" style="max-width: 120px; max-height: 80px;">
                </div>
                <input type="hidden" name="image_bj" id="image_bj" value="">
            </div>
        </div>
        
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">详情图X坐标</label>
                <div class="layui-input-inline">
                    <input type="text" name="image_details_x" id="image_details_x" autocomplete="off" placeholder="请输入详情图X坐标" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">详情图Y坐标</label>
                <div class="layui-input-inline">
                    <input type="text" name="image_details_y" id="image_details_y" autocomplete="off" placeholder="请输入详情图Y坐标" class="layui-input">
                </div>
            </div>
        </div>
        
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">详情图宽度</label>
                <div class="layui-input-inline">
                    <input type="text" name="image_details_w" id="image_details_w" autocomplete="off" placeholder="请输入详情图宽度" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">详情图高度</label>
                <div class="layui-input-inline">
                    <input type="text" name="image_details_h" id="image_details_h" autocomplete="off" placeholder="请输入详情图高度" class="layui-input">
                </div>
            </div>
        </div>
    </div>
    
    <div class="layui-form-item" id="linkUrlDiv">
        <label class="layui-form-label">跳转链接</label>
        <div class="layui-input-block">
            <input type="text" name="link_url" id="link_url" autocomplete="off" placeholder="请输入跳转链接" class="layui-input">
        </div>
    </div>
    
    <div class="layui-form-item">
        <label class="layui-form-label">特效</label>
        <div class="layui-input-block">
            <select name="effect">
                <option value="0">无</option>
                <option value="1">特效1（放大，缩小）</option>
            </select>
        </div>
    </div>
    
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="saveBtn">保存</button>
        </div>
    </div>
</div>
{include file="Public/footer3" /}
<script>
    layui.use(['form', 'upload', 'layer'], function () {
        var form = layui.form,
            layer = layui.layer,
            upload = layui.upload,
            $ = layui.jquery;

        // 初始隐藏跳转链接和展示图片相关字段
        $('#linkUrlDiv').hide();
        $('#showImageFields').hide();
            
        // 监听类型切换
        form.on('radio(typeFilter)', function(data){
            if(data.value == 1) {
                $('#linkUrlDiv').hide();
                $('#showImageFields').show();
            } else {
                $('#linkUrlDiv').show();
                $('#showImageFields').hide();
            }
        });
        
        // 上传图片
        upload.render({
            accept: 'imgurl',
            elem: '#uploadImage',
            url: '/admin/picture',
            done: function (res) {
                if (res.status == 1) {
                    layer.msg("上传成功", { icon: 1, time: 1000 }, function () {
                        $("#imagePreview").attr("src", res.data.path);
                        $("input[name=image]").val(res.data.imgurl);
                    });
                } else {
                    layer.msg(res.msg, { icon: 2, anim: 6, time: 1500 });
                }
            },
            error: function () {
                layer.msg('服务繁忙，请稍后再试', { icon: 2, anim: 6, time: 1500 });
            }
        });
        
        // 上传图片详情
        upload.render({
            accept: 'imgurl',
            elem: '#uploadImageDetails',
            url: '/admin/picture',
            done: function (res) {
                if (res.status == 1) {
                    layer.msg("上传成功", { icon: 1, time: 1000 }, function () {
                        $("#imageDetailsPreview").attr("src", res.data.path);
                        $("input[name=image_details]").val(res.data.imgurl);
                    });
                } else {
                    layer.msg(res.msg, { icon: 2, anim: 6, time: 1500 });
                }
            },
            error: function () {
                layer.msg('服务繁忙，请稍后再试', { icon: 2, anim: 6, time: 1500 });
            }
        });
        
        // 上传背景图
        upload.render({
            accept: 'imgurl',
            elem: '#uploadImageBj',
            url: '/admin/picture',
            done: function (res) {
                if (res.status == 1) {
                    layer.msg("上传成功", { icon: 1, time: 1000 }, function () {
                        $("#imageBjPreview").attr("src", res.data.path);
                        $("input[name=image_bj]").val(res.data.imgurl);
                    });
                } else {
                    layer.msg(res.msg, { icon: 2, anim: 6, time: 1500 });
                }
            },
            error: function () {
                layer.msg('服务繁忙，请稍后再试', { icon: 2, anim: 6, time: 1500 });
            }
        });
        
        // 表单提交
        form.on('submit(saveBtn)', function (data) {
            $.ajax({
                url: '{:url("/admin/float_ball_add")}',
                type: 'POST',
                data: data.field,
                success: function (res) {
                    if (res.status) {
                        layer.msg(res.msg, {icon: 1, time: 1000}, function () {
                            parent.layui.table.reload('tableList');
                            var iframeIndex = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(iframeIndex);
                        });
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                }
            });
            return false;
        });
    });
</script>