{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="systemPayment_name" id="systemPayment_name" value="{$systempayment.systemPayment_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="systemPayment_account" id="systemPayment_account" value="{$systempayment.systemPayment_account|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="systemPayment_invoicePayable" id="systemPayment_invoicePayable" value="{$systempayment.systemPayment_invoicePayable|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="systemPayment_bank" id="systemPayment_bank" value="{$systempayment.systemPayment_bank|default=''}"  placeholder="请输入详细信息" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-inline">
                        <select name="systemPayment_status" id="systemPayment_status">
                            <option value="1">启用</option>
                            <option value="0">停用</option>
                        </select>
                    </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="systemPayment_img"/>
                        <input style="display: none;" type="text" name="bgImgName" value="{$systempayment.systemPayment_img}"/>
                        <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 $systempayment.systemPayment_img}
                            <img src="{$Think.UPLOADS_ROOT}/{$systempayment.systemPayment_img}" 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}