{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="product_name" id="product_name" value="{$product.product_name|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="product_content" id="product_content" placeholder="请输入服务简介" autocomplete="off" required>{$product.product_content|default=''}</textarea>
                    </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="product_money" id="product_money" placeholder="请输入服务报价" autocomplete="off" required>{$product.product_money|default=''}</textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-inline">
                        <select name="product_status" id="product_status">
                            <option value="1">启用</option>
                            <option value="0">停用</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">期限1金额</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input field-name" name="product_TypeOne" id="product_TypeOne" value="{$product.product_TypeOne|default=''}" autocomplete="off" placeholder="请输入期限1金额" required />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">期限2金额</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input field-name" name="product_TypeTwo" id="product_TypeTwo" value="{$product.product_TypeTwo|default=''}" autocomplete="off" placeholder="请输入期限2金额" required />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">期限3金额</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input field-name" name="product_TypeThree" id="product_TypeThree" value="{$product.product_TypeThree|default=''}" autocomplete="off" placeholder="请输入期限3金额" required />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">期限4金额</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input field-name" name="product_TypeFour" id="product_TypeFour" value="{$product.product_TypeFour|default=''}" autocomplete="off" placeholder="请输入期限4金额" required />
                    </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="product_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($product) && $product.product_img}
                        <div style="display: flex;margin-left: 20px;">
                            原图片：
                            <img src="{$Think.UPLOADS_ROOT}{$product.product_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}