{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="homeinformation_name" id="homeinformation_name" value="{$information.homeinformation_name|default=''}" autocomplete="off" placeholder="请输入标题" required />
                    </div>
                </div>
                <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="homeinformation_content" id="homeinformation_content" value="{$information.homeinformation_content|default=''}" autocomplete="off" placeholder="请输入内容" required />
                    </div>
                </div>
                <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="homeinformation_en" id="homeinformation_en" value="{$information.homeinformation_en|default=''}"  placeholder="请输入英文简称" />
                    </div>
                </div>
                <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="homeinformation_bgcolor" id="homeinformation_bgcolor" value="{$information.homeinformation_bgcolor|default=''}"  placeholder="请输入背景颜色" />
                    </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="homeinformation_bgImg"/>
                        <input style="display: none;" type="text" name="bgImgName" value="{$information.homeinformation_bgImg}"/>
                        <div style="display: flex;margin-left: 20px;">
                            所选图片：
                            <img id="onFile" src="/static/user/images/header.png" style="width: 100px;height: 100px">
                        </div>
                        <div style="display: flex;margin-left: 20px;">
                            原图片：
                            {if $information.homeinformation_bgImg}
                            <img src="{$Think.HOME_SITE_ROOT}{$information.homeinformation_bgImg}" style="width: 100px;height: 100px">
                            {/if}
                        </div>
                    </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}