<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>

    <th:block th:if="${settleType=='0'}" th:include="include :: header('修改收款计划')"/>
    <th:block th:if="${settleType!='0'}" th:include="include :: header('修改确认收款')"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <style>
        .day {
            color: #000000;
        }
    </style>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-settlement-edit">
        <h4 class="form-header h4">合同信息</h4>
        <div class="form-group">
            <div class="col-md-8">
                <label class="col-sm-2 control-label is-required">所属合同：</label>
                <div class="col-sm-8">
                    <input id="settleType" name="settleType" th:value="*{settleType}" type="hidden">
                    <input id="contractId" name="contractId" th:value="*{contract.id}" type="hidden">
                    <input class="form-control" type="text" disabled="disabled" th:value="*{contract.name}">
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-8">
                <label class="col-sm-2 control-label">负责人：</label>
                <div class="col-sm-3">
                    <input class="form-control" type="text" disabled="disabled" th:value="*{contract.leader}">
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-8">
                <label class="col-sm-2 control-label">甲方名称：</label>
                <div class="col-sm-5">
                    <input class="form-control" type="text" disabled="disabled" th:value="*{contract.buyers}">
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-8">
                <label class="col-sm-2 control-label">乙方名称：</label>
                <div class="col-sm-5">
                    <input class="form-control" type="text" disabled="disabled" th:value="*{contract.sellers}">
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-8">
                <label class="col-sm-2 control-label">合同期限：</label>
                <div class="col-sm-5">
                    <input class="form-control" type="text" disabled="disabled"
                           th:value="${#dates.format(contract.startDate, 'yyyy-MM-dd')}"
                           style="float: left;width: 49%;">
                    <div style="float: left;width: 2%;">~</div>
                    <input class="form-control" type="text" disabled="disabled"
                           th:value="${#dates.format(contract.endDate, 'yyyy-MM-dd')}"
                           style="float: left;width: 49%;">
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-8">
                <label class="col-sm-2 control-label">合同金额：</label>
                <div class="col-sm-5">
                    <input class="form-control" type="text" disabled="disabled" th:value="*{contract.amount}"
                           style="width: 40%;float: left;">
                    <div th:switch="${contract.payMode}">
                        <div th:case="'1'">元</div>
                        <div th:case="'2'">元</div>
                        <div th:case="'3'">人/月</div>
                        <div th:case="'4'">%</div>
                        <div th:case="'5'">%</div>
                        <div th:case="*"/>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-8">
                <label class="col-sm-2 control-label">付款方式：</label>
                <div class="col-sm-3">
                    <input class="form-control" type="text" disabled="disabled"
                           th:value="*{@dict.getLabel('cnt_pay_mode',contract.payMode)}">
                </div>
            </div>
        </div>
        <h4 class="form-header h4" th:if="${settleType!='0'}">收款计划</h4>
        <div class="form-group settlePlan-baseLine" th:if="${settleType!='0'}" th:each="planInfo:${planList}">
            <div class="col-md-3">
                <label class="col-sm-3 control-label">收款时间：</label>
                <div class="col-sm-7">
                    <div class="input-group date">
                        <input class="form-control" type="text" disabled="disabled"
                               th:value="${#dates.format(planInfo.settleDate, 'yyyy-MM-dd')}">
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <label class="col-sm-3 control-label">[[${settleType == "0" ? "计划金额：" :
                    "确认金额："}]]</label>
                <div class="col-sm-7">
                    <input class="form-control" type="number" disabled="disabled" th:value="*{planInfo.amount}">
                </div>
            </div>
            <div class="col-md-3">
                <label class="col-sm-3 control-label">备注：</label>
                <div class="col-sm-7">
                    <textarea type="text" class="form-control" disabled="disabled"
                              th:text="*{planInfo.remark}"></textarea>
                </div>
            </div>
            <div class="col-md-3">
                <label class="col-sm-3 control-label">是否提示：</label>
                <div class="col-sm-7">
                    <i class="fa text-info fa-2x"
                       th:classappend="${planInfo.warnFlag == '0' ? 'fa-toggle-off' : 'fa-toggle-on'}"
                       th:settleId="*{planInfo.id}" th:warnFlag="*{planInfo.warnFlag == '0' ? '0' : '1'}"
                       onclick="editWarnFlag(this);"></i>
                </div>
            </div>
        </div>
        <h4 class="form-header h4">[[${settleType == "0" ? "已添加的收款计划" : "已添加的确认收款"}]]</h4>
        <div class="form-group settlement-info-line" th:each="settlement:${settlements}">
            <div class="col-md-3">
                <label class="col-sm-3 control-label">收款时间：</label>
                <div class="col-sm-7">
                    <div class="input-group date">
                        <input class="form-control" type="text" disabled="disabled"
                               th:value="${#dates.format(settlement.settleDate, 'yyyy-MM-dd')}">
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <label class="col-sm-3 control-label">[[${settleType == "0" ? "计划金额：" :
                    "确认金额："}]]</label>
                <div class="col-sm-7">
                    <input class="form-control" type="number" disabled="disabled" th:value="*{settlement.amount}">
                </div>
            </div>
            <div class="col-md-3">
                <label class="col-sm-3 control-label">备注：</label>
                <div class="col-sm-7">
                    <textarea type="text" class="form-control" disabled="disabled"
                              th:text="*{settlement.remark}"></textarea>
                </div>
            </div>
            <div class="col-md-3">
                <button type="button" class="btn btn-sm btn-danger" onclick="delSettle(this);"
                        th:settleId="*{settlement.id}"><i
                        class="fa fa-remove"></i>删除
                </button>
            </div>
        </div>
        <h4 class="form-header h4">[[${settleType == "0" ? "收款计划" : "确认收款"}]]</h4>
        <div class="form-group settlement-line">
            <div class="col-md-3">
                <label class="col-sm-5 control-label is-required">收款时间：</label>
                <div class="col-sm-7">
                    <div class="input-group date">
                        <input name="settleDate" class="form-control settleDate" placeholder="yyyy-MM-dd"
                               type="text"
                               required>
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    </div>
                </div>
            </div>
            <div class="col-md-9">
                <label class="col-sm-2 control-label is-required">[[${settleType == "0" ? "计划金额：" :
                    "确认金额："}]]</label>
                <div class="col-sm-3">
                    <input name="amount" class="form-control" type="number" required>
                </div>
                <label class="col-sm-1 control-label">备注：</label>
                <div class="col-sm-4">
                    <textarea type="text" name="remark" class="form-control" placeholder="请输入备注"></textarea>
                </div>
                <button type="button" class="btn btn-sm btn-danger" onclick="removeSettle(this)"><i
                        class="fa fa-remove"></i> 删除
                </button>
            </div>
        </div>
    </form>
</div>
<div class="col-sm-12" th:if="${settleType!='0'}">
    <div class="pull-right" style="color: red;padding: 20px;">
        确认保存收款前，请勾选不在需要提醒的计划。
    </div>
</div>
<div class="col-sm-12">
    <div class="pull-left">
        <button type="button" class="btn btn-sm btn-success" onclick="addHandler()"><i class="fa fa-plus"></i>
            [[${settleType == "0" ? "增加收款计划" : "增加确认收款"}]]
        </button>
    </div>
    <div class="pull-right">
        <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i> 保 存
        </button>&nbsp;
        <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i> 关 闭
        </button>
    </div>
</div>
<div id="settlePlanBase" hidden="hidden">
    <div class="col-md-3">
        <label class="col-sm-3 control-label">收款时间：</label>
        <div class="col-sm-7">
            <div class="input-group date">
                <input class="form-control planDate" type="text" disabled="disabled">
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <label class="col-sm-3 control-label">计划金额：</label>
        <div class="col-sm-7">
            <input class="form-control planAmount" type="number" disabled="disabled">
        </div>
    </div>
    <div class="col-md-3">
        <label class="col-sm-3 control-label">备注：</label>
        <div class="col-sm-7">
            <textarea type="text" class="form-control planRemark" disabled="disabled"></textarea>
        </div>
    </div>
    <div class="col-md-3">
        <label class="col-sm-3 control-label">是否提示：</label>
        <div class="col-sm-7">
            <i class="fa text-info fa-2x planWarnFlag" settleId="00000000-0000-0000-0000-000000000000" warnFlag="0"
               onclick="editWarnFlag(this);"></i>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<script th:inline="javascript">
    var prefix = ctx + "system/settlement";
    $("#form-settlement-edit").validate({
        focusCleanup: true,
        rules: {
            costDay: {
                required: true,
                number: true
            }
        }
    });

    function submitHandler() {
        var val = $('#contractId').val();
        if (val == undefined || val == "" || val == "00000000-0000-0000-0000-000000000000") {
            alert("请选择一个合同");
            return
        }
        if ($.validate.form()) {
            $.operate.saveTab(prefix + "/add", $('#form-settlement-edit').serialize(), changeSuccussHandler);
        }
    }

    function changeSuccussHandler(result) {
        if (result.code == web_status.SUCCESS) {
            var topWindow = $(window.parent.document);
            var currentId = $('.page-tabs-content', topWindow).find('.active').attr('data-panel');
            var $contentWindow = $('.RuoYi_iframe[data-id="' + currentId + '"]', topWindow)[0].contentWindow;
            $.modal.closeTab();
            $contentWindow.$.table.refresh();
            $contentWindow.$.modal.alertSuccess("保存成功");
        }
    }

    function addHandler() {
        $(".settlement-line:last").after($(".settlement-line:last").prop("outerHTML"));
        $(".settlement-line:last").find("textarea[name='remark']").val('');
        $(".settlement-line:last").find('.settleDate').datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });
        $("#form-settlement-edit").validate({
            focusCleanup: true,
            rules: {
                amount: {
                    required: true,
                    number: true
                }
            }
        });
    }

    function removeSettle(o) {
        if ($(".settlement-line").length < 2) {
            alert("至少有一条记录");
            return;
        }
        $(o).parent().parent().remove();
    }

    function editWarnFlag(e) {
        var flag = $(e)
        var warnFlag = flag.attr("warnFlag");
        var id = flag.attr("settleId");
        flag.removeClass("fa-toggle-off");
        flag.removeClass("fa-toggle-on");
        if (warnFlag == "0") {
            flag.addClass("fa-toggle-on");
            warnFlag = "1";
        } else {
            flag.addClass("fa-toggle-off");
            warnFlag = "0";
        }
        flag.attr("warnFlag", warnFlag);
        var params = {id: id, warnFlag: warnFlag};
        $.ajax({
            type: 'post',
            url: prefix + '/editWarnFlag',
            data: JSON.stringify(params),
            contentType: "application/json;charset=utf-8",
            success: function (e) {

            }
        });
    }

    function delSettle(e) {
        $.modal.confirm("确认删除该条记录么？", function () {
            var id = $(e).attr('settleId');
            $(e).parent().parent().remove();
            $.ajax({
                type: 'post',
                url: prefix + '/remove',
                data: id,
                dataType: 'json',
                contentType: "application/json;charset=utf-8",
                success: function (e) {

                }
            });
        });
    }

    $(".settleDate").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });
</script>
</body>
</html>