{include file="Public/header3" /}
<link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet" />
<style>
    #editor—wrapper {
        border: 1px solid #ccc;
        z-index: 100;
    }

    #toolbar-container {
        border-bottom: 1px solid #ccc;
    }

    #editor-container {
        height: 500px;
    }

    .category-checkbox {
        display: inline-block;
        margin-right: 15px;
        margin-bottom: 10px;
    }

    .custom-checkbox {
        margin-right: 5px;
        vertical-align: middle;
    }

    .category-label {
        display: inline-block;
        padding: 5px 10px;
        border: 1px solid #e6e6e6;
        background-color: #f2f2f2;
        border-radius: 3px;
        cursor: pointer;
        margin-bottom: 5px;
        font-size: 13px;
    }

    .category-label:hover {
        background-color: #e6e6e6;
    }

    .category-label.checked {
        background-color: #009688;
        color: #fff;
        border-color: #009688;
    }
</style>
<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="text" name="product_name" id="product_name" autocomplete="off" placeholder="请输入商品名称"
                class="layui-input" lay-verify="required">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">所属分类</label>
        <div class="layui-input-block" id="categoriesContainer">
            {foreach $categories as $category}
            <label class="category-label">
                <input type="checkbox" lay-ignore class="custom-checkbox" name="categories[]"
                    value="{$category.category_name}" style="display:none;">
                {$category.category_name}
            </label>
            {/foreach}
        </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="price" id="price" autocomplete="off" placeholder="请输入价格" class="layui-input"
                    lay-verify="required|number">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">商品库存</label>
            <div class="layui-input-inline">
                <input type="text" name="stock" id="stock" autocomplete="off" placeholder="请输入库存" class="layui-input"
                    lay-verify="required|number" value="0">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">剩余库存</label>
            <div class="layui-input-inline">
                <input type="text" name="sales" id="sales" autocomplete="off" placeholder="请输入初始销量" class="layui-input"
                    value="0">
            </div>
        </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="uploadCover">上传封面图</button>
            <div class="layui-upload-list">
                <img class="layui-upload-img" id="coverPreview" style="max-width: 200px; max-height: 150px;">
            </div>
            <input type="hidden" name="cover_image" id="cover_image" value="">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">详情图片1</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="uploadDetail1">上传详情图1</button>
            <div class="layui-upload-list">
                <img class="layui-upload-img" id="detail1Preview" style="max-width: 200px; max-height: 150px;">
            </div>
            <input type="hidden" name="detail_image1" id="detail_image1" value="">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">详情图片2</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="uploadDetail2">上传详情图2</button>
            <div class="layui-upload-list">
                <img class="layui-upload-img" id="detail2Preview" style="max-width: 200px; max-height: 150px;">
            </div>
            <input type="hidden" name="detail_image2" id="detail_image2" value="">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">详情图片3</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="uploadDetail3">上传详情图3</button>
            <div class="layui-upload-list">
                <img class="layui-upload-img" id="detail3Preview" style="max-width: 200px; max-height: 150px;">
            </div>
            <input type="hidden" name="detail_image3" id="detail_image3" value="">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">详情图片4</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="uploadDetail4">上传详情图4</button>
            <div class="layui-upload-list">
                <img class="layui-upload-img" id="detail4Preview" style="max-width: 200px; max-height: 150px;">
            </div>
            <input type="hidden" name="detail_image4" id="detail_image4" value="">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">商品描述</label>
        <div class="layui-input-block">
            <textarea name="product_desc" id="product_desc" placeholder="请输入商品描述" class="layui-textarea"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">详情内容</label>
        <div class="layui-input-block">
            <div id="editor—wrapper">
                <div id="toolbar-container"><!-- 工具栏 --></div>
                <div id="editor-container"><!-- 编辑器 --></div>
            </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="radio" name="status" value="0" title="下架">
                <input type="radio" name="status" value="1" title="上架" checked>
            </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="radio" name="is_hot" value="0" title="否" checked>
                <input type="radio" name="is_hot" value="1" title="是">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">新品</label>
            <div class="layui-input-inline">
                <input type="radio" name="is_new" value="0" title="否">
                <input type="radio" name="is_new" value="1" title="是" checked>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">推荐</label>
            <div class="layui-input-inline">
                <input type="radio" name="is_recommend" value="0" title="否">
                <input type="radio" name="is_recommend" value="1" title="是" checked>
            </div>
        </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/footer" /}
<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
<script>
    const { createEditor, createToolbar } = window.wangEditor

    const editorConfig = {
        placeholder: 'Type here...',
        onChange(editor) {
            const html = editor.getHtml()
            console.log('editor content', html)
        },
        MENU_CONF: {}
    }
    editorConfig.MENU_CONF['uploadImage'] = {
        customUpload: async (file, insertFn) => {
            console.log(file);

            // 上传图片
            const formData = new FormData();
            formData.append('file', file);
            const res = await fetch('/admin/picture?dir=products', {
                method: 'POST',
                body: formData
            });
            console.log("res", res);

            const result = await res.json();

            // 成功后插入图片
            insertFn(result.data.imgurl, '图片描述', result.data.imgurl);
        }
    }


    const editor = createEditor({
        selector: '#editor-container',
        html: '<p><br></p>',
        config: editorConfig,
        mode: 'default',
    })

    const toolbarConfig = {}

    const toolbar = createToolbar({
        editor,
        selector: '#toolbar-container',
        config: toolbarConfig,
        mode: 'default',
    })

    layui.use(['form', 'upload', 'layer', 'laydate'], function () {
        var form = layui.form,
            layer = layui.layer,
            upload = layui.upload,
            $ = layui.jquery;

        // 自定义复选框的点击事件
        $('.category-label').click(function () {
            // 获取隐藏的checkbox
            var checkbox = $(this).find('.custom-checkbox');

            // 切换选中状态
            if (checkbox.prop('checked')) {
                checkbox.prop('checked', false);
                $(this).removeClass('checked');
            } else {
                checkbox.prop('checked', true);
                $(this).addClass('checked');
            }
        });

        // 封面图上传
        upload.render({
            elem: '#uploadCover',
            url: '/admin/picture',
            accept: "file",
            data: {
                dir: 'products'
            },
            done: function (res) {
                if (res.status == 1) {
                    layer.msg("上传成功", { icon: 1, time: 1000 }, function () {
                        $("#coverPreview").attr("src", res.data.path);
                        $("#cover_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 });
            }
        });

        // 详情图1上传
        upload.render({
            elem: '#uploadDetail1',
            url: '/admin/picture',
            accept: "file",
            data: {
                dir: 'products'
            },
            done: function (res) {
                if (res.status == 1) {
                    layer.msg("上传成功", { icon: 1, time: 1000 }, function () {
                        $("#detail1Preview").attr("src", res.data.path);
                        $("#detail_image1").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 });
            }
        });

        // 详情图2上传
        upload.render({
            elem: '#uploadDetail2',
            url: '/admin/picture',
            accept: "file",
            data: {
                dir: 'products'
            },
            done: function (res) {
                if (res.status == 1) {
                    layer.msg("上传成功", { icon: 1, time: 1000 }, function () {
                        $("#detail2Preview").attr("src", res.data.path);
                        $("#detail_image2").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 });
            }
        });

        // 详情图3上传
        upload.render({
            elem: '#uploadDetail3',
            url: '/admin/picture',
            accept: "file",
            data: {
                dir: 'products'
            },
            done: function (res) {
                if (res.status == 1) {
                    layer.msg("上传成功", { icon: 1, time: 1000 }, function () {
                        $("#detail3Preview").attr("src", res.data.path);
                        $("#detail_image3").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 });
            }
        });

        // 详情图4上传
        upload.render({
            elem: '#uploadDetail4',
            url: '/admin/picture',
            accept: "file",
            data: {
                dir: 'products'
            },
            done: function (res) {
                if (res.status == 1) {
                    layer.msg("上传成功", { icon: 1, time: 1000 }, function () {
                        $("#detail4Preview").attr("src", res.data.path);
                        $("#detail_image4").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) {
            // 获取富文本编辑器内容
            data.field.detail_html = editor.getHtml();

            if (!data.field.product_name) {
                layer.msg('商品名称不能为空', { icon: 2 });
                return false;
            }

            if (!data.field.price) {
                layer.msg('商品价格不能为空', { icon: 2 });
                return false;
            }

            // 检查是否选择了分类
            var selectedCategories = [];
            $('.custom-checkbox:checked').each(function () {
                selectedCategories.push($(this).val());
            });

            if (selectedCategories.length === 0) {
                layer.msg('请至少选择一个分类', { icon: 2 });
                return false;
            }

            $.ajax({
                url: '{:url("/admin/ff_products_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>