{extend name="layout:home" /}

{block name="container"}
<form class="layui-form layui-form-pane" method="post" enctype="multipart/form-data">
    <div class="layui-tab layui-tab-card">
        <div class="layui-tab-content page-tab-content">
            <div class="layui-tab-item layui-show ">
                <div class="layui-form-item">
                    <label class="layui-form-label">标题</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input field-name" name="productInfo_title" id="productInfo_title" value="{$productInfo.productInfo_title|default=''}" autocomplete="off" placeholder="请输入标题" required />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">内容</label>
                    <div class="layui-input-block">
                        <textarea class="layui-textarea field-name" name="productInfo_content" id="productInfo_content" placeholder="请输入内容" autocomplete="off" required>{$productInfo.productInfo_content|default=''}</textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">图片</label>
                    <div class="layui-input-block" style="display: flex;">
                        <input id="file" style="border-style: hidden;border-left: 1px solid #ededed;width: 150px;" type="file" class="layui-input field-name" name="productInfo_img"/>
                        <div style="display: flex;margin-left: 20px;">
                            所选图片：
                            <img id="onFile" src="/static/user/images/header.png" style="width: 200px;height: 100px">
                        </div>
                        {if isset($productInfo) && $productInfo.productInfo_img}
                        <div style="display: flex;margin-left: 20px;">
                            原图片：
                            <img src="{$Think.UPLOADS_ROOT}{$productInfo.productInfo_img}" style="width: 200px;height: 100px">
                        </div>
                        {/if}
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input type="submit" class="layui-btn layui-btn-normal" lay-submit value="{:lang('ds_submit')}" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
<script>
    layui.use('form', function() {
        var form = layui.form;
    });
    $(function() {
        $("#file").change(function(e) {
            var imgBox = e.target;
            uploadImg(imgBox)
        });

        function uploadImg(tag) {
            var file = tag.files[0];
            var imgSrc;
            if (!/image\/\w+/.test(file.type)) {
                alert("您选择的图片格式错误");
                let fileIput = $("#file").val("");
                //fileIput.after(fileIput.clone().val(""));
                $("#onFile").attr("src", '/static/user/images/header.png');
                //fileIput.remove();
                return false;
            }
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function() {
                imgSrc = this.result;
                $("#onFile").attr("src", imgSrc);
            };
        }
    })


</script>
{/block}