<!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-add">
        <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">
                    <select id="contractId" name="contractId" class="form-control m-b" onchange="selectContract(this);"
                            required>
                        <option value="00000000-0000-0000-0000-000000000000">--请选择--</option>
                        <option th:each="contract : ${contracts}" th:text="${contract.name}" th:value="${contract.id}"
                                th:leader="${contract.leader}" th:buyers="${contract.buyers}"
                                th:sellers="${contract.sellers}"
                                th:startDate="${#dates.format(contract.startDate, 'yyyy-MM-dd')}"
                                th:endDate="${#dates.format(contract.endDate, 'yyyy-MM-dd')}"
                                th:amount="${contract.amount}"
                                th:payMode="${@dict.getLabel('cnt_pay_mode',contract.payMode)}"
                                th:selected="${contract.id == contractId ? true : false}"></option>
                    </select>
                </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 id="leader" class="form-control" type="text" disabled="disabled">
                </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 id="buyers" class="form-control" type="text" disabled="disabled">
                </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 id="sellers" class="form-control" type="text" disabled="disabled">
                </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 id="startDate" class="form-control" type="text" disabled="disabled"
                           style="float: left;width: 49%;">
                    <div style="float: left;width: 2%;">~</div>
                    <input id="endDate" class="form-control" type="text" disabled="disabled"
                           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 id="amount" class="form-control" type="text" disabled="disabled"
                           style="width: 40%;float: left;">元
                </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 id="payMode" class="form-control" type="text" disabled="disabled">
                </div>
            </div>
        </div>
        <h4 class="form-header h4" th:if="${settleType!='0'}">收款计划</h4>
        <div class="form-group settlePlan-baseLine" th:if="${settleType!='0'}">
        </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">[[${settleType == "0" ? "计划金额：" :
            "确认金额："}]]</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-add").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-add').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-add").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 selectContract(e) {
        try {
            var opt = $(e.options[e.selectedIndex]);
            var arr = ["leader", "buyers", "sellers", "startDate", "endDate", "amount", "payMode"];
            var l = arr.length;
            for (var i = 0; i < l; i++) {
                var key = arr[i];
                var value = opt.attr(key);
                $('#' + key).val(value != undefined ? value : "");
            }
        } catch (e) {

        }
        loadPlan();
    }

    function loadPlan() {
        var settleType = $("#settleType").val();
        var cntId = $('#contractId').val();
        if (settleType == 0) {
            return;
        }
        $(".settlement-planLine").each(function () {
            this.remove();
        });
        var params = {contractId: cntId, settleType: '0'};
        $.ajax({
            type: 'post',
            url: prefix + '/querysettlelist',
            data: JSON.stringify(params),
            contentType: "application/json;charset=utf-8",
            success: function (e) {
                if (e.code != web_status.SUCCESS) {
                    return;
                }
                var baseHTML = $("#settlePlanBase").html();
                var len = e.data.length;
                for (var i = 0; i < len; i++) {
                    var pLine = $(".settlement-planLine");
                    var div = $('<div>');
                    div.addClass("form-group");
                    div.addClass("settlement-planLine");
                    div.html(baseHTML);
                    div.find('.planDate').val(e.data[i].settleDate);
                    div.find('.planAmount').val(e.data[i].amount);
                    div.find('.planRemark').val(e.data[i].remark);
                    var warnFlag = div.find('.planWarnFlag');
                    var flag = e.data[i].warnFlag;
                    warnFlag.addClass((flag == undefined || flag == "" || flag == "1") ? "fa-toggle-on" : "fa-toggle-off");
                    warnFlag.attr("settleId", e.data[i].id);
                    warnFlag.attr("warnFlag",flag);
                    if (pLine.length < 1) {
                        $(".settlePlan-baseLine").after(div);
                    } else {
                        $(".settlement-planLine:last").after(div);
                    }
                }
            }
        });
    }

    $(".settleDate").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });


    $(function () {
        var sel = $('#contractId');
        if (sel.val() != "00000000-0000-0000-0000-000000000000") {
            sel.change();
        }
    })

</script>
</body>
</html>