<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改报修维修单')" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-repair-edit" th:object="${amsRepairOrder}">
            <input name="repairId" th:field="*{repairId}" type="hidden">
            <h4 class="form-header h4">基本信息</h4>
            <div class="row">
                <div class="col-xs-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">报修单号：</label>
                        <div class="col-sm-8">
                            <input name="repairNo" th:field="*{repairNo}" class="form-control" type="text" readonly>
                        </div>
                    </div>
                </div>
                <div class="col-xs-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label is-required">选择资产：</label>
                        <div class="col-sm-8">
                            <div class="input-group">
                                <input id="assetId" name="assetId" th:field="*{assetId}" type="hidden" required>
                                <input id="assetCode" name="assetCode" th:field="*{assetCode}" class="form-control" type="text" placeholder="请选择报修资产" readonly required>
                                <span class="input-group-btn">
                                    <button type="button" class="btn btn-primary" onclick="selectAsset()"><i class="fa fa-search"></i> 选择</button>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">资产名称：</label>
                        <div class="col-sm-8">
                            <input id="assetName" name="assetName" th:field="*{assetName}" class="form-control" type="text" readonly>
                        </div>
                    </div>
                </div>
                <div class="col-xs-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">资产类别：</label>
                        <div class="col-sm-8">
                            <input id="categoryName" name="categoryName" th:field="*{categoryName}" class="form-control" type="text" readonly>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">规格型号：</label>
                        <div class="col-sm-8">
                            <input id="specModel" name="specModel" th:field="*{specModel}" class="form-control" type="text" readonly>
                        </div>
                    </div>
                </div>
                <div class="col-xs-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">品牌：</label>
                        <div class="col-sm-8">
                            <input id="brand" name="brand" th:field="*{brand}" class="form-control" type="text" readonly>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label is-required">预计完成日期：</label>
                        <div class="col-sm-8">
                            <div class="input-group date">
                                <input name="expectedFinishTime" th:value="${#dates.format(amsRepairOrder.expectedFinishTime, 'yyyy-MM-dd')}" class="form-control" placeholder="yyyy-MM-dd" type="text" required>
                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">报修人：</label>
                        <div class="col-sm-8">
                            <input name="reportUserId" th:field="*{reportUserId}" type="hidden">
                            <input name="reportUserName" th:field="*{reportUserName}" class="form-control" type="text" readonly>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">报修时间：</label>
                        <div class="col-sm-8">
                            <input name="reportTime" th:value="${#dates.format(amsRepairOrder.reportTime, 'yyyy-MM-dd HH:mm:ss')}" class="form-control" type="text" readonly>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-12">
                    <div class="form-group">
                        <label class="col-sm-2 control-label is-required">故障描述：</label>
                        <div class="col-sm-10">
                            <textarea name="faultDesc" maxlength="500" class="form-control" rows="3" required placeholder="请详细描述资产故障表现...">[[*{faultDesc}]]</textarea>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-12">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">备注：</label>
                        <div class="col-sm-10">
                            <textarea name="remark" maxlength="500" class="form-control" rows="2" placeholder="备注信息...">[[*{remark}]]</textarea>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <script th:inline="javascript">
        var prefix = ctx + "asset/repair";
        $("#form-repair-edit").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/edit", $('#form-repair-edit').serialize());
            }
        }

        function selectAsset() {
            var repairId = $("input[name='repairId']").val();
            var url = prefix + "/selectAsset?repairId=" + repairId;
            $.modal.openOptions({
                title: "选择可报修资产",
                url: url,
                width: "1200",
                height: "680",
                callBack: function(index, layero) {
                    var iframeWindow = layero.find("iframe")[0].contentWindow;
                    var selected = iframeWindow.getSelectedAssets();
                    if (!selected || selected.length === 0) {
                        $.modal.alertWarning("请选择一条资产记录");
                        return;
                    }
                    if (selected.length > 1) {
                        $.modal.alertWarning("一期报修仅支持一单一资产，请只选择一条资产");
                        return;
                    }
                    var asset = selected[0];
                    $("#assetId").val(asset.assetId);
                    $("#assetCode").val(asset.assetCode);
                    $("#assetName").val(asset.assetName);
                    $("#categoryName").val(asset.categoryName);
                    $("#specModel").val(asset.specModel || "-");
                    $("#brand").val(asset.brand || "-");

                    $.modal.close(index);
                }
            });
        }

        $("input[name='expectedFinishTime']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            todayBtn: true,
            autoclose: true,
            startDate: new Date()
        });
    </script>
</body>
</html>