<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增商品入出库单')" />
    <th:block th:include="include :: select2-css" />
    <th:block th:include="include :: bootstrap-select-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-inventory-order-edit" th:object="${prodInventoryOrder}">
            <input type="hidden" id="inventoryOrderId" name="inventoryOrderId" th:value="*{inventoryOrderId}"/>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label">出入库标记：</label>
                    <div class="col-sm-8" th:with="type=${@dict.getType('inventory_bill_type')}">
                        <input type="text" class="form-control" th:each="dict:${type}" th:if="${prodInventoryOrder.ioFlag == dict.dictValue}" th:value="${dict.dictLabel}" readonly>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label">出入库原因：</label>
                    <div class="col-sm-8" th:with="type=${@dict.getType('inventory_bill_reason')}">
                        <input type="text" class="form-control" th:each="dict:${type}" th:if="${prodInventoryOrder.ioType == dict.dictValue}" th:value="${dict.dictLabel}" readonly>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label">入库商户：</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" id="inMercName" name="inMercName" th:field="*{stockInName}" readonly/>
                        <input type="hidden" id="inMercId" name="inId" th:value="*{inId}"/>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label">出库商户：</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" id="outMercName" name="outMercName" th:field="*{stockOutName}" readonly/>
                        <input type="hidden" id="outMercId" name="outId" th:value="*{outId}"/>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label">备注：</label>
                    <div class="col-sm-8">
                        <textarea id="remark" name="remark" class="form-control col-sm-3" maxlength="500" style="height: 100px;" readonly></textarea>
                    </div>
                </div>
            </div>
        </form>
        <div class="col-sm-12">
            <a class="btn btn-success" onclick="selectRows()">
                <i class="fa fa-plus"></i>调整库存
            </a>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="prod-list-table"></table>
            <table id="prod-inv-list-table"></table>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: select2-js" />
    <th:block th:include="include :: bootstrap-select-js" />
    <script th:inline="javascript">
        var prefix = ctx + "business/prodInventory";

        $(function() {
            var options = {
                id: "prod-list-table",
                formId: "form-inventory-order-edit",
                url: prefix + "/mercInventory/list",
                createUrl: prefix + "/mercInventory/add",
                removeUrl: prefix + "/remove",
                modalName: "商品库存",
                showSearch: false,
                showRefresh: false,
                showColumns: false,
                showToggle: false,
                clickToSelect: true,
                queryParams: myQueryParams,
                pageSize: 5,
                pageList: [5],
                columns: [
                    {
                        checkbox: true
                    },
                    {
                        field: 'prodName',
                        title: '商品名称'
                    },
                    {
                        field: 'attrName',
                        title: '属性名称'
                    },
                    {
                        field: 'quantity',
                        title: '库存数量'
                    },
                    {
                        field: 'availQty',
                        title: '可售数量'
                    }
                ]
            };
            $.table.init(options);
        });

        function submitHandler() {
            var rows = $('#prod-inv-list-table').bootstrapTable('getData');
            var inventoryOrderDetails = []
            if ($("#prod-list-table").bootstrapTable('getSelections').length === 0) {
                $.modal.alertError("没有选择配置库存的商品！");
            } else if (rows.length === 0) {
                $.modal.alertError("请选择需要增加库存的商品！");
            } else {
                var hasData = false;
                $.each(rows, function(index, row) {
                    var addInvQty = $("input[name='addInvQty']").eq(index).val();
                    if (addInvQty + "" !== "0") {
                        hasData = true;
                    }
                    let inventoryOrderDetail = {
                        "prodId": row.prodId,
                        "prodName": row.prodName,
                        "prodAttrId": row.prodAttrId,
                        "prodAttrName": row.attrName,
                        "quantity": addInvQty
                    }
                    inventoryOrderDetails.push(inventoryOrderDetail);
                });
                if (!hasData) {
                    $.modal.alertError("请检查增加库存的数据！");
                } else {
                    var data = {
                        "inventoryOrderId": $("#inventoryOrderId").val(),
                        "inventoryOrderDetails": inventoryOrderDetails
                    }
                    $.ajax({
                        url: prefix + "/inventoryOrder/edit",
                        contentType: 'application/json',
                        data: JSON.stringify(data),
                        type: "post",
                        processData: false,
                        success: function(result) {
                            $.operate.successCallback(result);
                        }
                    });
                }
            }
        }

        function myQueryParams(params) {
            var search = $.table.queryParams(params);
            search.mercId = $("#inMercId").val();
            return search;
        }

        function selectRows() {
            var rows = $('#prod-list-table').bootstrapTable('getSelections');
            var invDatas = [];
            $.each(rows, function(index, row) {
                var invData = {
                    "prodId": row.prodId,
                    "prodAttrId": row.prodAttrId,
                    "prodName": row.prodName,
                    "attrName": row.attrName,
                    "addInvQty": 0
                }
                invDatas.push(invData);
            });
            $.table.destroy("prod-inv-list-table");
            var optionsInvTable = {
                id: "prod-inv-list-table",
                modalName: "商品库存",
                showSearch: false,
                showRefresh: false,
                showColumns: false,
                showToggle: false,
                pagination: false,
                clickToSelect: true,
                data: invDatas,
                columns: [
                    {
                        field: 'prodName',
                        title: '商品名称'
                    },
                    {
                        field: 'attrName',
                        title: '属性名称'
                    },
                    {
                        field: 'addInvQty',
                        title: '增加库存',
                        width: 100,
                        formatter: function(value, row) {
                            var html = "<input class='form-control' type='text' name='addInvQty' value='" + value +"'>"
                            return html;
                        }
                    },
                ]
            };
            $.table.init(optionsInvTable);
        }
    </script>
</body>
</html>