{layout name="layout" /}

<link rel="stylesheet" href="/static/css/bootstrap-select.min.css">
<script src="/static/js/bootstrap-select.min.js"></script>

<nav class="breadcrumb">
    <span><a href="/">首页</a></span>
    <span>&gt;</span>
    <span><a href="/order/lists/{$year}">销售订单</a></span>
    <span>&gt;</span>
    <span>产品明细</span>
</nav>

<div class="content">
    <div class="row">
        <div class="col-md-3 btn-top-box" style="padding-left: 50px;">
            <a href="javascript:window.history.back();" class="btn btn-default radius">返回</a>
            <a href="javascript:save(0);" class="btn btn-primary radius">新增明细</a>
        </div>
    </div>
    <div class="col-md-12">
        <table class="table table-hover table-bordered table-condensed">
            <thead>
                <tr>
                    <th class="bg-info" colspan="17" style="text-align: left;">
                        订单id:  {$orderInfo.id}|
                        购货单位: {$orderInfo.company_name} | 合同号: {$orderInfo.contract_no} | 时间: {$orderInfo.contract_time}
                    </th>
                </tr>
                <tr>
                    <th>id</th>
                    <th>种类</th>
                    <th>产品名称</th>
                    <th>基准单价</th>
                    <th>销售数量(单位KG/台)</th>
                    <th>销售价格</th>
                    <th>合同金额</th>
                    <th>实际发货</th>
                    <th>成交价格</th>
                    <th>成交金额</th>
                    <th>运费分摊</th>
                    <th>代理费分摊</th>
                    <th>其他费用</th>
                    <th>备注</th>
                    <th>状态</th>
                    <th>提成类型</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {php}$types=['一般', '特批1', '特批2'];{/php}
                {foreach $list as $value}
                <tr class="text-center">
                    <td>{$value.id}</td>
                    <td class="text-left">{$value.goods_category_name}</td>
                    <td class="text-left">{$value.goods_name}</td>
                    <td>{$value.goods_price|format_money}</td>
                    <td>{$value.sales_amount}</td>
                    <td>{$value.sales_price|format_money}</td>
                    <td>{$value.sales_money|format_money}</td>
                    <td>{$value.actual_amount}</td>
                    <td>{$value.actual_price|format_money}</td>
                    <td>{$value.actual_money|format_money}</td>
                    <td>{$value.fare|format_money}</td>
                    <td>{$value.agency|format_money}</td>
                    <td>{$value.other_fee|format_money}</td>
                    <td>{$value.remark}</td>
                    <td class="td-status">{$value.status}</td>
                    <td>{$types[$value['type']]}</td>
                    <td class="td-manager">
                        <a href="javascript:void(0);" onclick="save('{$value.id}')">修改</a>
                        <a href="javascript:void(0);" onclick="del('{$value.id}', this)">删除</a>
                    </td>
                </tr>
                {/foreach}
                <tr class="bg-info text-center">
                    <td>合计</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>{$orderInfo.contract_money|format_money}</td>
                    <td></td>
                    <td></td>
                    <td>{$orderInfo.actual_money|format_money}</td>
                    <td>{$orderInfo.fare|format_money}</td>
                    <td>{$orderInfo.agency|format_money}</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td class="td-manager">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<div class="modal" tabindex="-1" role="dialog" data-backdrop="false" id="myModal" aria-labelledby="myModalLabel"
    style="right: 10%;">
    <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" id="goods-form">
                    <input type="hidden" name="id" id="id" value="0">
                    <input type="hidden" name="order_id" id="order_id" value="{$order_id}">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="name">产品名称</label>
                                <!-- <input type="text" class="form-control" name="goods_name" id="goods_name" placeholder="产品名称"> -->
                                <select class="selectpicker form-control" data-live-search="true" name="goods_id"
                                    id="goods_id">
                                    <option value="0">请选择产品</option>
                                    {foreach $goodsSubtotalList as $key=>$value}
                                    <optgroup label="{$value.goods_category_name}">
                                        {noempty name="value.items"}
                                        {foreach $value.items as $val}
                                        <option value="{$val.id}">{$val.name}</option>
                                        {/foreach}
                                        {/noempty}
                                    </optgroup>
                                    {/foreach}
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="name">产品价格(公司低价)</label>
                                <input type="text" class="form-control" name="goods_price" id="goods_price"
                                    placeholder="产品价格">
                                <input type="hidden" name="goods_name" id="goods_name" value="">
                                <input type="hidden" name="goods_category_id" id="goods_category_id" value="">
                                <input type="hidden" name="goods_category_name" id="goods_category_name" value="">    
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="name">提成类型</label>
                                <div class="mt-5">
                                    <label class="radio-inline">
                                        <input type="radio" name="type" id="type0" value="0" checked="checked"> 一般
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="type" id="type1" value="1"> 特批1
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="type" id="type2" value="2"> 特批2
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="name">销售数量（KG/台）</label>
                                <input type="number" class="form-control s_val_change" name="sales_amount"
                                    id="sales_amount" placeholder="数量">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="name">销售单价</label>
                                <input type="number" class="form-control s_val_change" name="sales_price" id="sales_price"
                                    placeholder="单价">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="name">总金额</label>
                                <input type="number" class="form-control" name="sales_money" id="sales_money" placeholder="总金额"
                                    disabled>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="name">实际发货量（KG/台）</label>
                                <input type="number" class="form-control a_val_change" name="actual_amount"
                                    id="actual_amount" placeholder="数量">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="name">实际成交价</label>
                                <input type="number" class="form-control a_val_change" name="actual_price"
                                    id="actual_price" placeholder="单价">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="name">总金额</label>
                                <input type="number" class="form-control" name="actual_money" id="actual_money" placeholder="总金额"
                                    disabled>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="name">代理费分摊</label>
                                <input type="number" class="form-control" name="agency" id="agency"
                                    placeholder="代理费">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="name">运费分摊</label>
                                <input type="number" class="form-control" name="fare" id="fare"
                                    placeholder="运费">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="name">其他费用</label>
                                <input type="number" class="form-control" name="other_fee" id="other_fee"
                                    placeholder="其他费用">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="name">备注</label>
                                <textarea class="form-control" name="remark" id="remark" rows="3"></textarea>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" onclick="closeModel()">Close</button>
                <button type="button" class="btn btn-success" onclick="doSave()">Save</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script>
    $("#goods_id").change(function () {
        // console.log($("#goods_id").val());
        var goods_id = $("#goods_id").val();
        $.get('/goods/info/' + goods_id, null, function (res) {
            var data = res.data;
            console.log(data);
            $("#goods_price").val((data.price/100).toFixed(2));
            $("#goods_name").val(data.name);
            $("#goods_category_id").val(data.category_id);
            $("#goods_category_name").val(data.category_name);
            $("input[type='radio'][name='type']").prop("checked", false);
            $("input[type='radio'][name='type'][value='" + data.type + "']").prop("checked", true);
        }, 'json');
    })

    $(".s_val_change").change(function(){
        var sales_amount = Number($("#sales_amount").val());
        var sales_price = Number($("#sales_price").val());
        var sales_money = sales_amount*sales_price;
        $("#sales_money").val(sales_money.toFixed(2));
    })

    $(".a_val_change").change(function(){
        var actual_amount = Number($("#actual_amount").val());
        var actual_price = Number($("#actual_price").val());
        var actual_money = actual_amount*actual_price;
        $("#actual_money").val(actual_money.toFixed(2));
    })

    function save(id) {
        // console.log(id);
        if (id) {
            $.get('/order_item/info', {
                'id': id,
            }, function (res) {
                if (res.code == 2) {
                    var data = res.data;
                    $("#id").val(data.id);
                    $("#order_id").val(data.order_id);
                    $('.selectpicker').selectpicker('val', data.goods_id);
                    $("#goods_category_id").val(data.goods_category_id);
                    $("#goods_category_name").val(data.goods_category_name);
                    $("#goods_name").val(data.goods_name);
                    $("#goods_price").val(data.goods_price/100);
                    $("#sales_amount").val(data.sales_amount);
                    $("#sales_price").val(data.sales_price/100);
                    $("#sales_money").val(data.sales_money/100);
                    $("#actual_amount").val(data.actual_amount);
                    $("#actual_price").val(data.actual_price/100);
                    $("#actual_money").val(data.actual_money/100);
                    $("#agency").val(data.agency/100);
                    $("#fare").val(data.fare/100);
                    $("#other_fee").val(data.other_fee/100);
                    $("input[type='radio'][name='type']").prop("checked", false);
                    $("input[type='radio'][name='type'][value='" + data.type + "']").prop("checked", true);
                    $("#remark").val(data.remark);
                }
            }, 'json');
        } else {
            $("#id").val(0);
            $("#order_id").val({$order_id});
        }
        $('#myModal').modal('show');
    }

    function closeModel() {
        $("#goods-form")[0].reset();
        $('#myModal').modal('hide');
    }

    function doSave() {
        var data = $("#goods-form").serializeArray();
        $.post('/order_item/save', data, function (res) {
            if (res.code == 2) {
                alert('保存成功');
                $("#goods-form")[0].reset();
                $('#myModal').modal('hide');
                window.location.reload();
            } else {
                alert(res.msg);
            }
            return false;
        }, 'json');
        return false;
    }

    function del(id, obj) {
        $.ajax({
            url: "/order_item/delete",
            type: "POST",
            data: {
                "id": id
            },
            dataType: 'json',
            success: function (data) {
                if (data.code == 2) {
                    $(obj).parents("tr").remove();
                } else {
                    alert("操作失败, 请稍后重试!");
                }
                return false;
            }
        });
    }
</script>
</body>

</html>