{layout name="layout2" /}
<link rel="stylesheet" href="/static/admin/css/goods.css" media="all">
<div class="">
    <div class="layui-tab-content layui-form">
        <div class="layui-tab-item goods-content layui-show">
            <div class="layui-card-body" pad15>
                <div lay-filter="">
                    <input type="hidden" name="id" value="{$moment.id|default=''}">
                    
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="form-label-asterisk">*</span>标题：</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" lay-verify="custom_required" lay-verType="tips"
                                   autocomplete="off"
                                   switch-tab="0" verify-msg="请输入标题" placeholder="请输入标题"
                                   value="{$moment.title|default=''}"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="form-label-asterisk">*</span>员工：</label>
                        <div class="layui-input-block">
                            <select name="sid" lay-verType="" placeholder="请选择员工" switch-tab="0" verify-msg="请选择员工">
                                <option value="">请选择员工</option>
                                {foreach $staff as $key=>$vo}
                                    <option value="{$vo.id}" {if $moment.sid == $vo.id}selected{/if}>{$vo.name}</option>
                                {/foreach}
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="form-label-asterisk">*</span>产品：</label>
                        <div class="layui-input-block">
                            <select name="goods_id" lay-verType="" placeholder="请选择关联产品" switch-tab="0" verify-msg="请选择关联产品">
                                <option value="">请选择关联产品</option>
                                {foreach $goods as $key=>$vo}
                                <option value="{$vo.id}" {if $moment.goods_id == $vo.id}selected{/if}>{$vo.name}</option>
                                {/foreach}
                            </select>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">显示状态：</label>
                        <div class="layui-input-inline">
                            <input type="radio" name="state" value="1" title="显示" {if $moment.state == 1}checked{/if}>
                            <input type="radio" name="state" value="2" title="不显示" {if $moment.state == 2}checked{/if}>
                        </div>
                    </div>
  
                    <div class="layui-form-item" style="margin-bottom: 0px">
                        <label class="layui-form-label"><span class="form-label-asterisk">*</span>图片：</label>
                        <div style="min-height:80px;">
                            <ul style="list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px;">
                                {notempty name='images'}
                                {foreach $images as $key=>$img}
                                <li class="goods-li">
                                    <input name="goods_image[]" type="hidden" value="{$imagePaths[$key]}">
                                    <img class="goods-img goods_image" src="{$img}">
                                    <a class="goods-img-del-x" style="display: none;">x</a>
                                </li>
                                {/foreach}
                                {/notempty}
                            </ul>
                            <div class="goods-img-add" lay-verify="goods_image" lay-verType="tips" switch-tab="0" verify-msg="选择图片" style="margin-top: 10px;"></div>
                        </div>
                        <br>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">内容详情</label>
                        <div class="layui-input-block">
                            <textarea name="content" id="content" lay-verify="content" class="field-content">{$moment.content|default=''|raw}</textarea>
                        </div>
                    </div>
         
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-hide">
            <input type="button" lay-submit lay-filter="edit-submit" id="edit-submit" value="确认">
        </div>
    </div>
</div>

<!---------------------------------html模板---------------------------------->
<script type="text/html" id="template-goods-image">
    <li class="goods-li">
        <input name="goods_image[]" type="hidden" value="{image-src}">
        <img class="goods-img goods_image" src="{image-src}">
        <a class="goods-img-del-x" style="display: none;">x</a></li>
</script>

<script type="text/javascript">
    layui.config({
        version:"{$front_version}",
        base: '/static/plug/layui-admin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'element', 'form', 'like', 'likeedit'], function () {
        var $ = layui.$;
        var like = layui.like;
        var form = layui.form;
        var likeedit = layui.likeedit;

        //------------------------基本信息----------------------------------
        //图片事件
        $(document).on('mouseenter', '.goods-li', function () {
            $(this).children().last().show();
        });
        $(document).on('mouseleave', '.goods-li', function () {
            $(this).children().last().hide();
        });
        $(document).on('click', '.goods-li', function () {
            var src = $(this).children('img').attr('src');
            like.showImg(src,600);
        });

        $(document).on('click', '.goods-img-del-x', function () {
            $(this).parent().remove();
            return false;
        });

        like.imageUpload('.goods-img-add', function (uris, element) {
            // 多图片上传逻辑（最多8张）
            var count = element.prev().children().length;
            count = !count ? 0 : count;
            if (count + uris.length > 8) {
                layer.msg('最多只能选中8张图片');
                return;
            }
            uris = uris.reverse();
            for(var i in uris){
                var uri = uris[i];
                if (!uri) continue; // 跳过无效的 uri
                
                var template_goods_image = $('#template-goods-image').html();
                if (!template_goods_image) {
                    console.error('模板 template-goods-image 不存在');
                    continue;
                }
                
                // 获取文件路径（用于 hidden input）
                var filePath = like.getUrlFileName ? like.getUrlFileName(uri, '{$storageUrl}') : uri;
                if (!filePath) {
                    filePath = uri; // 如果 getUrlFileName 返回 undefined，使用原始 uri
                }
                
                // 先替换 input 中的 {image-src}，再替换 img 中的 {image-src}
                var html = template_goods_image.replace('{image-src}', filePath);
                html = html.replace('{image-src}', uri);
                element.prev().append(html);
            }
        }, true);

        likeedit.set({
            uploadImage: {
                url: "{:url('file/image')}",
                type: 'post'
            }
        });
        var likeedit_index = likeedit.build('content'); //建立编辑器
        
        // 设置编辑器内容（编辑模式）
        {notempty name='moment.content'}
        likeedit.setContent(likeedit_index, '{$moment.content|raw}');
        {/notempty}
        
        form.verify({
            content: function () {
                likeedit.sync(likeedit_index)
            },
            custom_required: function (value, item) {
                if (!value) {
                    return $(item).attr('verify-msg');
                }
            },
            goods_image: function (value, item) {
                // 检查是否有上传的图片
                var imageCount = $('input[name="goods_image[]"]').filter(function() {
                    return $(this).val() != '';
                }).length;
                if (imageCount == 0) {
                    return $(item).attr('verify-msg');
                }
            }
        });

        form.render();
    });
</script>