<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改报废处置申请')" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-disposal-edit" th:object="${amsDisposalOrder}">
            <h4 class="form-header h4">基本信息</h4>
            <input name="orderId" th:field="*{orderId}" type="hidden" />
            <input type="hidden" name="applicantId" th:field="*{applicantId}" />
            <input type="hidden" name="applyDeptId" th:field="*{applyDeptId}" />
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">报废单号：</label>
                        <div class="col-sm-8">
                            <input name="disposalNo" th:field="*{disposalNo}" class="form-control" type="text" readonly>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">单据状态：</label>
                        <div class="col-sm-8">
                            <select name="orderStatus" class="form-control" th:with="type=${@dict.getType('ams_disposal_status')}" th:field="*{orderStatus}" disabled>
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">申请人：</label>
                        <div class="col-sm-8">
                            <input name="applicantName" class="form-control" type="text" th:field="*{applicantName}" readonly>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">申请部门：</label>
                        <div class="col-sm-8">
                            <input name="applyDeptName" class="form-control" type="text" th:field="*{applyDeptName}" readonly>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label is-required">处置方式：</label>
                        <div class="col-sm-8">
                            <input name="disposalMethod" th:field="*{disposalMethod}" class="form-control" type="text" placeholder="如：报废、变卖、捐赠等" required maxlength="64">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">申请备注：</label>
                        <div class="col-sm-10">
                            <textarea name="remark" class="form-control" placeholder="请输入报废备注信息" maxlength="500">[[*{remark}]]</textarea>
                        </div>
                    </div>
                </div>
            </div>

            <h4 class="form-header h4">报废处置明细信息</h4>
            <div class="row">
                <div class="col-sm-12">
                    <div class="btn-group-sm" id="toolbar" role="group">
                        <button type="button" class="btn btn-success" onclick="selectAssets()"><i class="fa fa-plus"> 选择资产</i></button>
                        <button type="button" class="btn btn-danger" onclick="removeSelectedAssets()"><i class="fa fa-minus"> 移除资产</i></button>
                    </div>
                    <div class="col-sm-12 select-table table-striped" style="padding-top: 10px;">
                        <table id="bootstrap-table"></table>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript">
        var prefix = ctx + "asset/disposal";

        $("#form-disposal-edit").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                var data = $("#bootstrap-table").bootstrapTable("getData");
                if (data.length === 0) {
                    $.modal.alertWarning("请选择需要报废的资产明细！");
                    return;
                }
                syncDetailRows();
                $.operate.save(prefix + "/edit", $('#form-disposal-edit').serialize());
            }
        }

        $(function() {
            var data = [[${amsDisposalOrder.amsDisposalOrderItemList}]];
            initDetailTable(data);
        });

        function initDetailTable(data) {
            $.table.init({
                data: data,
                pagination: false,
                showSearch: false,
                showRefresh: false,
                showToggle: false,
                showColumns: false,
                sidePagination: "client",
                columns: [
                    { checkbox: true },
                    {
                        field: "assetId",
                        title: "资产编码",
                        formatter: function(value, row, index) {
                            return buildAssetCell(row, index);
                        }
                    },
                    { field: "assetName", title: "资产名称" },
                    { field: "categoryName", title: "资产类别" },
                    { field: "specModel", title: "规格型号" },
                    { field: "brand", title: "品牌" },
                    {
                        field: "disposalReason",
                        title: "报废原因",
                        formatter: function(value, row, index) {
                            return buildInput("amsDisposalOrderItemList[" + index + "].disposalReason", value, 500);
                        }
                    },
                    {
                        field: "disposalRemark",
                        title: "处置备注",
                        formatter: function(value, row, index) {
                            return buildInput("amsDisposalOrderItemList[" + index + "].disposalRemark", value, 500);
                        }
                    },
                    {
                        title: "操作",
                        align: "center",
                        formatter: function(value, row) {
                            return '<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="removeAsset(\'' + row.assetId + '\')"><i class="fa fa-remove"></i>删除</a>';
                        }
                    }
                ]
            });
        }

        function selectAssets() {
            syncDetailRows();
            $.modal.openOptions({
                title: "选择待报废资产",
                url: prefix + "/selectAsset?orderId=" + $("[name='orderId']").val(),
                width: "1200",
                height: "680",
                callBack: addSelectedAssets
            });
        }

        function addSelectedAssets(index, layero) {
            var selectedAssets = layero.find("iframe")[0].contentWindow.getSelectedAssets();
            if (!selectedAssets || selectedAssets.length === 0) {
                $.modal.alertWarning("请至少选择一条资产记录");
                return;
            }
            syncDetailRows();
            var existing = {};
            $.each($("#bootstrap-table").bootstrapTable("getData"), function(i, row) {
                existing[String(row.assetId)] = true;
            });
            $.each(selectedAssets, function(i, asset) {
                if (!existing[String(asset.assetId)]) {
                    $("#bootstrap-table").bootstrapTable("insertRow", {
                        index: $("#bootstrap-table").bootstrapTable("getData").length,
                        row: buildDisposalItem(asset)
                    });
                    existing[String(asset.assetId)] = true;
                }
            });
            $.modal.close(index);
        }

        function buildDisposalItem(asset) {
            return {
                assetId: asset.assetId,
                assetCode: asset.assetCode,
                assetName: asset.assetName,
                categoryName: asset.categoryName,
                specModel: asset.specModel,
                brand: asset.brand,
                disposalReason: "",
                disposalRemark: ""
            };
        }

        function removeSelectedAssets() {
            var rows = $("#bootstrap-table").bootstrapTable("getSelections");
            if (rows.length === 0) {
                $.modal.alertWarning("请至少选择一条记录");
                return;
            }
            syncDetailRows();
            $("#bootstrap-table").bootstrapTable("remove", {
                field: "assetId",
                values: $.map(rows, function(row) { return row.assetId; })
            });
        }

        function removeAsset(assetId) {
            syncDetailRows();
            $("#bootstrap-table").bootstrapTable("remove", { field: "assetId", values: [assetId] });
        }

        function syncDetailRows() {
            var rows = $("#bootstrap-table").bootstrapTable("getData");
            $.each(rows, function(index, row) {
                var tr = $("#bootstrap-table tbody tr[data-index='" + index + "']");
                row.disposalReason = tr.find("[name$='.disposalReason']").val() || "";
                row.disposalRemark = tr.find("[name$='.disposalRemark']").val() || "";
            });
        }

        function buildAssetCell(row, index) {
            var hidden = $("<input>").attr({
                type: "hidden",
                name: "amsDisposalOrderItemList[" + index + "].assetId",
                value: row.assetId
            }).prop("outerHTML");
            return hidden + $("<span>").text(row.assetCode).prop("outerHTML");
        }

        function buildInput(name, value, maxLength) {
            return $("<input>").addClass("form-control").attr({
                type: "text",
                name: name,
                maxlength: maxLength
            }).val(value || "").prop("outerHTML");
        }
    </script>
</body>
</html>