<!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-add">
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label">出入库标记：</label>
                    <div class="col-sm-8">
                        <select id="ioFlag" name="ioFlag" class="form-control m-b" th:with="type=${@dict.getType('inventory_bill_type')}" data-placeholder="出入库标记">
                            <option value="">-</option>
                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                        </select>
                    </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">
                        <select id="ioType" name="ioType" class="form-control m-b" th:with="type=${@dict.getType('inventory_bill_reason')}" data-placeholder="出入库原因">
                            <option value="">-</option>
                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                        </select>
                    </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="merchantSelect form-control" id="inMercName" name="inMercName" th:placeholder="入库商户"/>
                        <input type="hidden" id="inMercId" name="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="merchantSelect form-control" id="outMercName" name="outMercName" th:placeholder="出库商户"/>
                        <input type="hidden" id="outMercId" name="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;" th:placeholder="备注"></textarea>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <!-- 商户选择请求区域 -->
    <script id="selectMerchantDiv" type="text/template">
        <div>
            <div class="col-sm-12 search-collapse">
                <form id="formSelectMerchant">
                    <div class="select-list" style="margin-left: 20px;">
                        <ul>
                            <li>
                                <label>商户名称：</label>
                            </li>
                            <li>
                                <input type="text" class="form-control" name="mercName"/>
                            </li>
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search('formSelectMerchant', 'merchant-table')"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset('formSelectMerchant', 'merchant-table')"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>
            <div class="col-sm-11 select-table table-striped">
                <table id="merchant-table"></table>
            </div>
            <form id="formSelectMerchantProd">
                <input type="hidden" id="showMerchantProdList" />
            </form>
        </div>
    </script>
    <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";

        $(".merchantSelect").click(function() {
            var controlNameObjId = $(this).attr("id");
            var controlIdObjId = controlNameObjId.replace("Name", "Id");
            var content = $('#selectMerchantDiv').html();
            layer.open({
                type: 1,
                fix: false,
                maxmin: false,
                shade: 0.3,
                area: ['800px', '690px'],
                title: '选择商户',
                // 弹层外区域关闭
                shadeClose: true,
                success: function(layero, index) {
                    var merchantOptions = {
                        id: "merchant-table",
                        formId: "formSelectMerchant",
                        url: ctx + "master/merchant/list",
                        modalName: "选择商户",
                        showSearch: false,
                        showColumns: false,
                        showRefresh: false,
                        showExport: false,
                        showToggle: false,
                        singleSelect: true,
                        clickToSelect: true,
                        pageSize: 10,
                        pageList: [10,20,50],
                        columns: [
                            {
                                checkbox: true,
                            },
                            {
                                field: 'mercName',
                                title: '商户名称'
                            },
                            {
                                field: 'contact',
                                title: '联系人'
                            },
                            {
                                field: 'mail',
                                title: '联系信箱'
                            },
                            {
                                field: 'mobile',
                                title: '手机号'
                            }
                        ]
                    };
                    $.table.init(merchantOptions);
                },
                content: content,
                btn: ['<i class="fa fa-check"></i> 确定', '<i class="fa fa-remove"></i> 关闭'],
                btn1: function() {
                    var selectedMercId;
                    var selectedMercName;
                    $.map($("#" + table.options.id).bootstrapTable('getSelections'), function (row) {
                        selectedMercId = $.common.getItemField(row, "mercId");
                        selectedMercName =  $.common.getItemField(row, "mercName");
                    });
                    $("#" + controlNameObjId).val(selectedMercName);
                    $("#" + controlIdObjId).val(selectedMercId);
                    layer.closeAll();
                }
            });
        })

        $("#form-inventory-order-add").validate({
            rules: {
                ioFlag: {
                    required: true
                },
                ioType: {
                    required: true
                }
            },
            messages: {
                ioFlag: {
                    required: icon + "请选择出入库标记"
                },
                ioType: {
                    required: icon + "请选择出入库原因"
                }
            },
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                if ($("#ioFlag").val() === "stockin" && $("#inMercName").val() === "") {
                    $.modal.alertError("选择入库时，请选择入库商户！");
                } else if ($("#ioFlag").val() === "stockout" && $("#outMercName").val() === "") {
                    $.modal.alertError("选择出库时，请选择出库商户！");
                } else if ($("#ioFlag").val() === "stockin" && $("#ioType").val().indexOf("IN") < 0) {
                    $.modal.alertError("入出库标记为入库时，请选择正确的入出库原因！");
                } else if ($("#ioFlag").val() === "stockout" && $("#ioType").val().indexOf("OUT") < 0) {
                    $.modal.alertError("入出库标记为出库时，请选择正确的入出库原因！");
                } else if ($("#outMercName").val() === "" && $("#inMercName").val() === "") {
                    $.modal.alertError("请至少选择一个入库或出库商户！");
                } else if ($("#outMercName").val() !== "" && $("#inMercName").val() !== "") {
                    $.modal.alertError("只能同时选择一个入库或出库商户！");
                } else {
                    $.operate.save(prefix + "/inventoryOrder/add", $('#form-inventory-order-add').serialize());
                }
            }
        }
    </script>
</body>
</html>