{% extends 'obj_form.html' %}

{% block form_content %} 
<script>
    $(document).ready(function () {

        var content = $("#id_product_content").val();
        if (content!="None"){
            $("#htmlEdit").html(content);
        }

        var E = window.wangEditor
        var editor = new E('#htmlEdit')
        editor.config.uploadImgServer = '/mall/points_product/upload/'
        editor.config.uploadImgMaxLength = 20
        editor.config.uploadImgMaxSize = 3 * 1024 * 1024 // 512kb
        editor.config.uploadFileName = 'file'
        editor.create()

        $('#image-clear_id,#id_image').removeClass('form-control');

        $('.btn-save').click(function () {
            let editorData = editor.txt.html();
            $("#id_product_content").val(editorData);
            $.SubmitForm('#obj_form form', '{{request.path}}',function (){
                $('.alert').fadeIn();
                setTimeout(function (){
                    $('.alert').fadeOut();
                },3000)
            });
        });

        $('#obj_form .product_photo a').click(function (event) {
            event.preventDefault();
            var src = $(this).attr('href');
            var i = "<div style='text-align:center;'><img src='" + src + "' style='height:400px;'></img></div>";
            $.OpenCfmDlg($('#id_name').val(), i);
        });
    })


</script>
<style>

    #product_image-clear_id{
        display: inline-block;
        width:auto;
        vertical-align: middle;
    }

</style>

<div class="form-group ">
    <label class="col-sm-2 control-label ">商品名称</label>
    <div class="col-sm-8">{{ form.product_name }}</div>
</div>
<div class="form-group product_photo">
    <label class="col-sm-2 control-label ">商品图片</label>
    <div class="col-sm-8">
        {% if form.instance.product_image %}
        <img src="{{form.instance.product_image.url}}" style="width:100px" />
        {% endif %}
        <div>
            {{ form.product_image }}
        </div>
    </div>
</div>
<div class="form-group product_photo">
    <label class="col-sm-2 control-label ">商品分类</label>
    <div class="col-sm-8">{{ form.cat }}</div>
</div>
<div class="form-group ">
    <label class="col-sm-2 control-label ">商品价格</label>
    <div class="col-sm-8">{{ form.product_cost }}</div>
</div>
<div class="form-group ">
    <label class="col-sm-2 control-label ">商品介绍</label>
    <div class="col-sm-8">{{ form.product_desc }}</div>
</div>

<div class="form-group " style="display: none;">
    <label class="col-sm-2 control-label ">面向对象</label>
    <div class="col-sm-8">
        <input type="number" name="face_to" id="id_face_to" class="form-control" value="1">
    </div>
</div>
<div class="form-group">
    <label class="col-sm-2 control-label ">内容编辑</label>
    <div class="col-sm-8">
        <div id="htmlEdit"></div>
    </div>
</div>
<div class="form-group ">
    <label class="col-sm-2 control-label ">是否有效</label>
    <div class="col-sm-1">
        <div>
            {{ form.is_active }}
        </div>
    </div>
</div>
<div class="alert alert-success col-sm-10 col-sm-offset-2" role="alert" style="display: none">保存成功！</div>
<div>
    <a class="btn btn-primary btn-save" type="button" style="float:right;">保存</a>
</div>
<input type="hidden" id="id_product_content" name="product_content" value="{{ form.instance.product_content }}">
{% endblock %}