{% load i18n %}


<script type="text/javascript">
    $(document).ready(function () {
        var page_length = 10;

        var table = $('#tb').DataTable({
            dom: 'Bfrtip',
            autoWidth: true,
            pageLength: page_length,
            buttons: [{ extend: 'excelHtml5', text: '导出到Excel' }],
            language: lng,
            data: {{ data| safe}}
        });
    table.columns().every(function () {
        var that = this;
        $('input', this.footer()).on('keyup change clear', function () {
            if (that.search() !== this.value) {
                that.search(this.value).draw();
            }
        });
    });
    $('.btn-save').click(function () {
        var a = [];
        $("#sel-product option").each(function () {
            a.push($(this).val());
        });
        if (a.length > 0) {
            $('#id_products').val(a.join(','));
        };
        console.log(a);


        $.SubmitForm('#form_1', '{{request.path}}');
    });
    $('#btn_save2').click(function () {
        $.SubmitForm('#form_2', '{{request.path}}', function () {
            $('.modal-backdrop').remove();
        });
    })
    $('#product_label').autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '/obj/ajax/autocomplete/product/',
                dataType: "json",
                data: {
                    term: $("#product_label").val(),//搜索栏里的内容
                    company_id: $('#id_company').val(),//额外参数
                },
                success: function (data) {
                    response(data);
                }
            });
        },
        select: function (event, ui) {
            $("#product_id").val(ui.item.value);
            $("#product_label").val(ui.item.label);
            return false;
        }
    });
    $('.add-product').click(function () {
        var id = $('#product_id').val();
        var label = $('#product_label').val();
        var num = $("#product_num").val().trim();
        var select_type = $("#select_type").val();
        if (id == '') {

            toastr.error("请添加产品！", "操作错误：",
                { timeOut: 800, positionClass: "toast-center-center" }
            );
            return;


        } else {
            if (select_type === '1') {
                if (num === '' || parseInt(num) < 1) {
                    toastr.error("请添数量！", "操作错误：",
                        { timeOut: 800, positionClass: "toast-center-center" }
                    );
                    return;
                }
            }
            else {
                num = '0'
            }


            var e = false;
            $("#sel-product option").each(function () {
                if ($(this).val() == id) {
                    e = true;
                    return false;
                }
            });
            if (e) {
                toastr.error(label + "已在列表中！", "操作错误：",
                    { timeOut: 800, positionClass: "toast-center-center" }
                );
                return;
            } else {
                if (select_type === '1') {
                    $('#sel-product').append("<option value='" + id + "|" + num + "'>" + label + "," + num + "箱</option>");
                }
                else {
                    $('#sel-product').append("<option value='" + id + "|" + num + "'>" + label + "</option>");
                }
            }
        };
    });
    $('.select2_multiple').on('click', 'option', function () {
        $(this).remove();
    });


    $("#select_type").change(function () {
        select_type = $(this).val();
        if (select_type === '0') {
            $("#product_num").hide();
            $("#formMoney").show();
            $("#chooseProduct").hide();
        }
        else {
            $("#product_num").show();
            $("#formMoney").hide();
            $("#chooseProduct").show();
        }
        $("#sel-product").empty();

    })

    });

    function editData(id) {
        var items = JSON.parse($("#h_data").val());
        for (var i = 0; i < items.length; i++) {
            if (parseInt(id) === items[i].pk) {
                $("#allocate_id").val(items[i].pk);
                $("#inputSaleMoney2").val(items[i].fields.sale_money);
                $("#inputAgent").val(items[i].fields.agent);
                $("#inputRemark2").val(items[i].fields.remark);
                $('#model_2').modal('show')
                break;
            }
        }
    }

    function deleteData(id) {
        var r = confirm('您确定要删除这条数据吗？');
        if (r) {
            $.RefreshContent('{{request.path}}delete/' + id + '/');
        }
    }
</script>


<ol class="breadcrumb">
    <li>{{subtt.0}}</li>
    <li>{{subtt.1}}</li>
    <li>{{subtt.2}}</li>
</ol>


{% if perms.company.sys_admin %}

<form role="form" method='POST' enctype="multipart/form-data" class="form-horizontal" id="form_1"> {% csrf_token %}
    <div class="form-group">
        <label for="select_agent" class="col-sm-1 control-label">参与经销商</label>
        <div class="col-sm-11">
            <select name="agent" id="select_agent" class="form-control">
                <option value="">请选择---</option>
                {% for a in agents %}
                <option value="{{a.pk}}">{{a.fields.name}}</option>
                {% endfor %}
            </select>
        </div>
    </div>

    <div class="form-group">
        <label for="select_type" class="col-sm-1 control-label">计算方式</label>
        <div class="col-sm-11">
            <select name="allocate_type" id="select_type" class="form-control">
                <option value="1" selected="selected">按销售数量</option>
                <option value="0">按销售金额</option>
            </select>
        </div>
    </div>
    <div class="form-group" id="formMoney" style="display: none;">
        <label for="inputSaleMoney" class="col-sm-1 control-label">销售金额</label>
        <div class="col-sm-11">
            <div class="input-group" style="margin: 0">
                <div class="input-group-addon">￥</div>
                <input type="text" name="sale_money" class="form-control" id="inputSaleMoney"
                    placeholder="请输入销售金额目标(元)">
                <div class="input-group-addon">.00</div>
            </div>
        </div>
    </div>
    <div id="chooseProduct"> 
        <div class="form-group " >
            <label class="col-sm-1 control-label">产品选择</label>
            <div class='col-sm-5'>
                <div class="input-group">
                    <input type="text" class="form-control" id="product_label" placeholder="所有产品">
                    <input type="hidden" id="product_id" />
                    <span class="input-group-btn"><button type="button" class="btn btn-success add-product">
                            <span class='glyphicon glyphicon-arrow-down'></span></button></span>
                </div>
            </div>
            <div class="col-sm-1">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="数量" id="product_num">
                </div>
            </div>
        </div>
    
        <div class="form-group">
            <label class="col-sm-1 control-label"></label>
            <div class='col-sm-6'>
                <select class="select2_multiple form-control" id="sel-product" multiple="multiple">
                    {% for o in products %}
                    <option value='{{o.0}}'>{{o.1}}</option>
                    {% endfor %}
                </select>
            </div>
        </div>
    </div>

    <div class="form-group">
        <label for="inputRemark" class="col-sm-1 control-label">备注信息</label>
        <div class="col-sm-11">
            <input id="inputRemark" name="remark" type="text" class="form-control" placeholder="备注信息" maxlength="50" />
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-offset-1 col-sm-11">
            <a class="btn btn-default btn-save">添加</a>
        </div>
    </div>
    <input type="hidden" name="product_ids" id="id_products">
</form>

{% endif%}

<div class="col-md-12 col-sm-12 col-xs-12">
    <div class="x_panel">
        <div class="table-responsive">
            <table id='tb' class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
                <thead>
                    {% for c in clmns %}
                    <th>{{c}}</th>
                    {% endfor %}
                </thead>
                <tbody></tbody>
                <tfoot>
                    {% for c in clmns %}
                    <th><input type="text" placeholder="{{c}}"></th>
                    {% endfor %}
                </tfoot>
            </table>
        </div>
    </div>
</div>
<input type="hidden" id="h_data" value="{{list}}">
<div class="modal fade" tabindex="-1" role="dialog" id="model_2">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">任务分配修改</h4>
            </div>
            <div class="modal-body">
                <form role="form" method='POST' enctype="multipart/form-data" class="form-horizontal" id="form_2">
                    {% csrf_token %}
                    <input type="hidden" name="agent" id="inputAgent">

                    <div class="form-group">
                        <label for="inputSaleMoney" class="col-sm-2 control-label">销售金额</label>
                        <div class="col-sm-10">
                            <div class="input-group" style="margin: 0">
                                <div class="input-group-addon">￥</div>
                                <input type="text" name="sale_money" class="form-control" id="inputSaleMoney2"
                                    placeholder="请输入销售金额目标(元)">
                                <div class="input-group-addon">.00</div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputRemark" class="col-sm-2 control-label">备注信息</label>
                        <div class="col-sm-10">
                            <input id="inputRemark2" name="remark" type="text" class="form-control" placeholder="备注信息"
                                maxlength="50" />
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <a class="btn btn-primary" id="btn_save2" style="margin-right: 10px;">修改</a>
                        </div>
                    </div>


                    <input type="hidden" name="allocate_id" id="allocate_id">


                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->