{% extends 'obj_form.html' %}
{% load i18n %}
{% load tj_filters %}









{% block js %}
    {{ block.super }}
	
	var editor = null;
	
	
	{% if cfg.product_photo %}
	
		var content = $("#id_product_content").val();
        if (content!="None"){
            $("#htmlEdit").html(content);
        }

        var E = window.wangEditor
        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()
 
	
    {% endif %}


    $('#data-content div.product_photo br').remove();
    $('#photo-clear_id,#id_photo').removeClass('form-control');


    
    var html='<tr><th>{% trans "属性名" %}</th>'+
        '<th>{% trans "属性值" %}</th>'+
        '<th>{% trans "单位" %}</th>'+
        '<th>{% trans "备注" %}</th></tr>';
    var s='',sel='', sSel='';
    {% for p in props %}
        s='';
        sel='<select class="form-control prd_props" name="pro_id_{{forloop.counter}}">';
        {% for o in p.ops %}
            sSel='';
            {% ifequal p.pro_id o.0 %}
                sSel='selected="selected"';
            {% endifequal %}
             s = s + '<option value="{{o.0}}" '+sSel+'>{{o.1}}</option>';
        {% endfor %};
        sSel='';
        {% ifequal p.pro_id '' %}
            sSel=' selected="selected"';
        {% endifequal %}
        s=s+'<option value=""  '+sSel+'>-------------</option>';
        sel=sel+s+'</select>';
        html = html + '<tr><input type="hidden" name="rec_id_{{forloop.counter}}" value="{{p.rec_id}}">'+
                '<td>{{ p.label }}</td>'+
                '<td>'+sel+'</td>'+
                '<td>{{ p.unit }}</td>'+
                '<td><input class="form-control" value="{{ p.remark|default_if_none:''}}" name="remark_{{forloop.counter}}" > </td>'+
            '</tr>';
    {% endfor %}
    
    {% if props %}
        $('#tb_props tbody').html(html);
    {% endif %}

    $('#tb_props').append('<input type="hidden" name="rec_cnt" value="{{ props|length }}">');

    $('.btn-save').click(function(){
	
		if(editor){ 
			var editorData = editor.txt.html();
			$("#id_product_content").val(editorData); 			
		}

        //2022-06-12
        if( !$.isEmpty($('#shelf_life_value').val()) ){
            var period=$('#shelf_life_period').val();
            var value=$('#shelf_life_value').val();          
            $('#id_shelf_life').val('{"period":"'+period+'","value":'+value+'}');         

        }

        var scpc = []
        var trs = $("#tb_scpc tbody tr")
        if(trs.length>0){
            for(const t of trs){
                scpc.push({
                    name: $(t).find('.scpc-name').val(),
                    value: $(t).find('.scpc-value').val()
                })
            }
            $("#id_product_scpc").val(JSON.stringify(scpc))
        }
        console.log(scpc)
        $(this).hide();
        $.SubmitForm('#obj_form form','{{request.path}}');
    });  
    //2022-06-12
    {% if form.instance.shelf_life %}
        $('#shelf_life_period').val('{{form.instance.shelf_life.period}}');
        $('#shelf_life_value').val({{form.instance.shelf_life.value}});
    {% endif %}


    //2020-11-24
    $('#data-content .btn-delete').click(function(){
        $.ajax({
            url:'/obj/delete/product/{{form.instance.id}}/',                             
            success: function(data) {
                if(data.cnt>0){  
                    toastr.success('当前产品已删除!', '操作成功：',
                        {timeOut: 800, positionClass: "toast-center-center"}
                    );
                    $.RefreshContent("/obj/list/product/");                   
                };
            },

        });       
    
    });


    $('#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);                   
    });
	
	



	
	//2022-12-09
    $('.btn-show-components').click(function(){
        $('#components-modal').modal('show');         
    });
    $('#cp_label').autocomplete({            
        source: function(request, response) {
            $.ajax({
                url: '/obj/ajax/autocomplete/product/',
                dataType: "json",
                data: {
                    term: $("#cp_label").val() ,//搜索栏里的内容
                    company_id:{{request.user.company_id}} //额外参数
                },
                success: function(data) {
                    response(data);
                }
            });
        },
        select: function (event, ui) {
            $("#cp_id").val(ui.item.value);
            $("#cp_label").val(ui.item.label);
            return false;
        }
    });
    $('#components-modal .add-cp').click(function(){
        var cp_name=$('#cp_label').val();
        var cp_id=$('#cp_id').val();
        var cp_qty=$('#cp_qty').val();        
        //console.log(cp_id,cp_name,cp_qty);
        if($.isEmpty(cp_id) || $.isEmpty(cp_name) || $.isEmpty(cp_qty)){
            toastr.error(
                "产品和数量不能为空！",
                "操作错误：",
                {timeOut: 800, positionClass: "toast-center-center"}
            );     
            return false;
        }else{ 
            var bExists=false;
            $("#tb-components tbody tr").each(function(rowIndex) {  
                if($(this).attr('cp_id')==cp_id){                    
                    bExists=true;
                    return;
                };
            });
            if (bExists){
                toastr.error(
                    "产品'"+cp_name+"'在表中已存在！",
                    "操作错误：",
                    {timeOut: 800, positionClass: "toast-center-center"}
                );
            }else{
                var tr="<tr cp_id='"+cp_id+"'>"+
                    "<td class='cp_name'>"+cp_name+"</td>"+
                    "<td class='cp_qty'>"+cp_qty+"</td>"+
                    "<td><a type='button' class='btn btn-xs btn-danger cp_delete'>删除<a/></td>";
                $('#tb-components tbody').append(tr);  
            };
            
        };   
    });
	
    $('#tb-components').on('click', 'a.cp_delete', function(){        
        $(this).closest('tr').remove();
    });

    $('#components-modal .btn-confirm').click(function(){
        var ps=[],aPs=[],sId='',sName='',sQty='';
        var cnt=$("#package_count").val();
        $("#tb-components tbody tr").each(function(rowIndex) {
            sId=$(this).attr('cp_id');
            sName=$(this).find('.cp_name').text();
            sQty=$(this).find('.cp_qty').text();
            ps.push({ 'id':sId, 'name':sName,'qty':sQty });
            aPs.push(sName+":"+sQty+"份");
        });
        $('#id_components').val(JSON.stringify({"per_package":ps,"package_count":cnt}));   
        $('#components').text("每箱"+cnt+"套 "+aPs.join(' ; '));
        $('#components-modal').modal('hide');        
    });
    var aCp=[],sTr='';
    {% if form.instance.components %}
        {% for p in form.instance.components.per_package %}
            aCp.push('{{p.name}}:{{p.qty}}份');
            sTr=sTr+"<tr cp_id='{{p.id}}'>"+
                "<td class='cp_name'>{{p.name}}</td>"+
                "<td class='cp_qty'>{{p.qty}}</td>"+
                "<td><a type='button' class='btn btn-xs btn-danger cp_delete'>删除<a/></td></tr>";
        {% endfor %}
        $('#package_count').val({{form.instance.components.package_count}});
        $('#components').text('每箱{{form.instance.components.package_count}}套 '+aCp.join(' ; '));
        $('#tb-components tbody').append(sTr);
    {% endif %}

    var initial_scpc = $("#id_product_scpc").val()
    if(initial_scpc!=""){
        try{
            initial_scpc = JSON.parse(initial_scpc)
            for(const s of initial_scpc){
                appendScpcItem(s.name, s.value)
            }
        }
        catch(e){
            console.log(e)
        }
    }

    $("#btn_scpc_add").click(function(){
        var scpc_name = $("#input_scpc_name").val().trim()
        var scpc_value = $("#input_scpc_value").val()
        if(scpc_name.length === 0){
            alert('请输入规格名称')
            return
        }
        if(scpc_value.length === 0){
            alert('请输入规格值')
            return
        }
        appendScpcItem(scpc_name, scpc_value)
    })

    function appendScpcItem(name,value){
        $("#tb_scpc tbody").append(`
            <tr>
                <td><input type="text" value="${name}" class="scpc-name"/></td>
                <td><input type="text" value="${value}" class="scpc-value"/></td>
                <td><input type="button" value="删除" class="btn-delete"></td>
            </tr>
        `)
    }
    
    $('#tb_scpc tbody').on('click', '.btn-delete', function(){        
        $(this).parent().parent().remove();
    });

{% endblock %}

{% block subtitle-1 %}
        {% trans "产品管理" %}
{% endblock %}
{% block subtitle-2 %}
        {% trans "产品名称" %}
{% endblock %}




{% block form_content %}

    <style>
        body .ui-autocomplete{
            z-index:20000;    
        }    
        #tb_omponents tbody a{
            padding:0px;
            margin:0px;
        }
        #tb_scpc tbody input{
            border: none;
        }
        #tb_scpc .btn-delete{
            background-color: #f00;
            color: #fff;
            border: none;
        }

    </style>



    {{ block.super }}
    

    {% if has_series %}
        <div class="form-group ">
            <label class="col-sm-1 control-label ">{% get_verbose_field_name form.instance 'series' %} </label>
            <div class="col-sm-11">{{ form.series }}</div>
        </div>        
    {% endif %}

    {% if form.instance.company.has_external_code %}
        <div class="form-group ">
            <label class="col-sm-1 control-label ">{% get_verbose_field_name form.instance 'external_code' %}</label>
            <div class="col-sm-11">{{ form.external_code }}</div>
        </div>
    {% endif %}


    <div class="form-group ">
        <label class="col-sm-1 control-label ">{% get_verbose_field_name form.instance 'name' %} </label>
        <div class="col-sm-11">{{ form.name }}</div>
    </div>
    <div class="form-group ">
        <label class="col-sm-1 control-label ">{% get_verbose_field_name form.instance 'barcode' %} </label>
        <div class="col-sm-11">{{ form.barcode }}</div>
    </div>
    <div class="form-group ">
        <label class="col-sm-1 control-label ">{% get_verbose_field_name form.instance 'pl' %} </label>
        <div class="col-sm-11">{{ form.pl }}</div>
    </div>
    <div class="form-group ">
        <label class="col-sm-1 control-label ">{% get_verbose_field_name form.instance 'standard' %} </label>
        <div class="col-sm-11">{{ form.standard }}</div>
    </div>
    <div class="form-group "> 
        <label class="col-sm-1 control-label ">{% get_verbose_field_name form.instance 'processflow' %} </label>
        <div class="col-sm-11">{{ form.processflow }}</div>
    </div>
    <div class="form-group "> 
        <label class="col-sm-1 control-label ">{% get_verbose_field_name form.instance 'desc' %} </label>
        
		<div class="col-sm-11">{{ form.desc }}</div>
    </div>

    {% ifequal user.company.id 26560 %}
        <div class="form-group ">
            <label class="col-sm-1 control-label ">{% get_verbose_field_name form.instance 'specs' %} </label>
            <div class="col-sm-11">{{ form.specs }}</div>
        </div>
    {% endifequal %}

    {% if cfg.product_price %}
        <div class="form-group ">
            <label class="col-sm-1 control-label ">{% get_verbose_field_name form.instance 'price' %} </label>
            <div class="col-sm-11">{{ form.price }}</div>
        </div>
    {% endif %}   


    <div class='clearfix' /> 
    {% if cfg.shelf_life %}
        <div class="form-group">
            <label class="col-sm-1 control-label ">{% get_verbose_field_name form.instance 'shelf_life' %} </label>
            <div class="col-sm-11 input-group">  
                <div class='col-sm-3'>
                    <input type='number' class="form-control" id="shelf_life_value" />
                </div>
                <span class='col-sm-3'>
                    <select id='shelf_life_period'>
                        <option value='day' selected="selected">天</option>                        
                        <option value='month'>个月</option>
                        <option value='year'>年</option>                        
                    </select>
                </span>
                <label class="col-sm-1 control-label">{% get_verbose_field_name form.instance 'remark' %} </label>
                <div class="col-sm-5">{{ form.remark|default_if_none:'' }}</div>
            </div>        
            
        </div>
    {% else %}
        <div class="form-group">
            {% ifequal user.company.category_id 1 %}
                <label class="col-sm-1 control-label ">{% get_verbose_field_name form.instance 'remark' %} </label>
                <div class="col-sm-5">{{ form.remark|default_if_none:'' }}</div>
                <label class="col-sm-1 control-label ">{% get_verbose_field_name form.instance 'bottlecap' %} </label>
                <div class="col-sm-5">{{ form.bottlecap|default_if_none:'0' }}</div>                
            {% else %}
                <label class="col-sm-1 control-label ">{% get_verbose_field_name form.instance 'remark' %} </label>
                <div class="col-sm-11">{{ form.remark|default_if_none:'' }}</div>                
            {% endifequal %}
        </div>        
    {% endif %}



    {% if cfg.product_photo %}
        <div class="form-group product_photo">
            <label class="col-sm-1 control-label ">{% get_verbose_field_name form.instance 'photo' %} </label>
            <div class="col-sm-11">{{ form.photo }}</div>
        </div>
    {% endif %}

    <div class="form-group ">
        <label class="col-sm-1 control-label ">包装类型</label>
        <div class="col-sm-11">
            <label class='control-label'>
            {% if form.instance.components %}
                组合包装
            {% else %}
                单品包装
            {% endif %}
            </label>
            <label class='control-label' id='components' style='margin-right:5px;color:green;'></label>
            <a class='btn-show-components' style='cursor:pointer;'>设置</a>
        </div>
    </div>

    <!--Bootstrap模式确认对话框 组合包装产品明细-->
    <div class="modal fade bs-example-modal-lg" id='components-modal' tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title">组合包装产品明细：</h4>
                </div>
                <div class="modal-body"> 
                    <div class='form-group'>

                        <label class='col-sm-1 control-label'>套盒数量</label>
                        <div class='col-sm-1'>
                            <input id='package_count' placeholder='每箱套盒数量' class='form-control' />                            
                        </div> 

                        <label class='col-sm-1 control-label'>名称</label>
                        <div class='col-sm-4'>
                            <input id='cp_id' type='hidden' />
                            <input id='cp_label' class='form-control' placeholder='输入选择产品名称' />
                        </div>  
                         <label class='col-sm-1 control-label'>数量</label>
                         <div class='col-sm-1'>
                             <input id='cp_qty' class='form-control' placeholder='数量'/></div>                       
                        <span>
                            <a type="button" class='btn btn-success add-cp'>
                                <span class='glyphicon glyphicon-arrow-down' style='padding-right:5px;'></span>添加
                        </a></span>                       
                    </div>

                    <div class="table-responsive">
                        <table id='tb-components' class='table table-bordered table-condensed table-hover'>
                            <thead>
                                <th>产品名称</th>
                                <th>数量</th>
                                <th>操作</th>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <a type="button" class="btn btn-primary btn-confirm" >保存</a>
                    <a type="button" class="btn btn-default btn-cancel" data-dismiss="modal">取消</a>    
                </div>
            </div>
        </div>
    </div> 
	
    
    <div {% ifequal user.company.id 26560 %} style="display:none"  {% endifequal %}>
            <table id='tb_props' class="table table-condensed table-responsive table-bordered table-hover"><tbody></tbody></table>
    </div>
   
   
    {% if cfg.product_photo %}
		<div style="margin-bottom:30px"> 
			<h5>产品介绍：</h5>
			<div id="htmlEdit"></div>
		</div>
    {% endif %}

    <div style="margin-bottom:30px"> 
        <h5>产品规格：</h5>
        <div style="display: flex; align-items: center;">
            <input type="text" id="input_scpc_name" placeholder="输入规格名称" style="width: 200px;">
            <div style="padding: 0 10px;">:</div>
            <input type="text" id="input_scpc_value" placeholder="输入规格值" style="width: 200px;">
            <div style="margin-left: 20px;">
                <input type="button" value="添加" id="btn_scpc_add">
            </div>
        </div>
        <table id='tb_scpc' class="table table-condensed table-responsive table-bordered table-hover" style="margin-top: 10px;">
            <thead>
                <th>规格名称</th>
                <th>规格值</th>
                <th>操作</th>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>

    <div>
        {% if form.instance.id %}
            {% if is_show %}
                <a class="btn btn-danger btn-delete" type="button">{% trans '删除' %}</a>
            {% endif %}
        {% endif %}
        <a class="btn btn-primary btn-save" type="submit" style="float:right;">{% trans '保存' %}</a>
    </div>
	
	<input type="hidden" id="id_product_content" name="contents" value="{{ form.instance.contents }}">
	<input type="hidden" id="id_product_scpc" name="scpc" value="{{ form.instance.scpc }}">
{% endblock %}
