<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('导出项目统计')"/>
    <th:block th:include="include :: select2-css"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <style>
        .day {
            color: #000000;
        }
    </style>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li>
                            <label>
                                统计：
                            </label>
                            <label class="radio-box">
                                <input type="radio" name="sumType" value="project-sum"/> 项目
                            </label>
                            <label class="radio-box">
                                <input type="radio" name="sumType" value="user-sum"/> 人员
                            </label>
                        </li>
                        <li id="user-sum">
                            <label>成员：</label>
                            <select id="userId" name="userId" class="form-control m-b">
                                <option value="">--请选择--</option>
                                <option th:each="user : ${users}" th:text="${user.userName}"
                                        th:value="${user.userId}"></option>
                            </select>
                        </li>
                        <li id="project-sum">
                            <label>项目：</label>
                            <select id="projectId" name="projectId" class="form-control m-b">
                                <option value="">--请选择--</option>
                                <option th:each="project : ${projects}" th:text="${project.name}"
                                        th:value="${project.id}"></option>
                            </select>
                        </li>

                        <li>
                            <label>起始日期：</label>
                            <input type="text" class="input-sm form-control" id="datetimepicker-startTime"
                                   placeholder="请选择起始日期" name="startDate" th:value="${startDate}" autocomplete="off"
                                   required/>
                        </li>
                        <li>
                            <label>结束日期：</label>
                            <input type="text" class="input-sm form-control" id="datetimepicker-endTime"
                                   placeholder="请选择结束日期" name="endDate" th:value="${endDate}" autocomplete="off"
                                   required/>
                        </li>
                        <li>
                            <!--                            <button type="button" class="btn btn-sm btn-warning" onclick="changeweek(-1)"><i-->
                            <!--                                    class="fa fa-backward"></i> 上一周-->
                            <!--                            </button>-->
                            <!--                            <button type="button" class="btn btn-sm btn-danger" onclick="changeweek(0)"><i-->
                            <!--                                    class="fa fa-eject"></i> 本周-->
                            <!--                            </button>-->
                            <!--                            <button type="button" class="btn btn-sm btn-warning" onclick="changeweek(1)"><i-->
                            <!--                                    class="fa fa-forward"></i> 下一周-->
                            <!--                            </button>-->
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="exportExcel(false);"><i
                                    class="fa fa-search"></i>&nbsp;明细导出</a>

                            <!--                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset();resetTime();"><i-->
                            <!--                                    class="fa fa-refresh"></i>&nbsp;重置</a>-->
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="exportExcel(true);"
                               shiro:hasPermission="system:cost:exportPostCost"><i
                                    class="fa fa-search"></i>&nbsp;成本导出</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
    </div>
    <div style="display: none" id="download"></div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: select2-js"/>
<th:block th:include="include :: datetimepicker-js"/>
<script th:inline="javascript">
    var prefix = ctx + "system/cost";
    var sumType = "";
    $(document).ready(function () {
        $("input[name='sumType']").on("ifChecked", function (event) { //ifCreated 事件应该在插件初始化之前绑定
            // alert(event.type + ' callback');
            changeType(event.currentTarget.value);
        });
        $("input[name='sumType'][value='project-sum']").iCheck('check');
    });

    function changeType(value) {
        //var radio = $("input[name='sumType'][checked='checked']");
        $("#project-sum").hide();
        $("#user-sum").hide();
        sumType = value;
        $("#" + sumType).show();
    }

    function exportExcel(withCost) {
        if (sumType == undefined || sumType == "") {
            return $.modal.alertWarning("请选择统计");
        }
        var queryId = $("#" + (sumType == "user-sum" ? "userId" : "projectId")).val();
        if (queryId == undefined || queryId == "") {
            return $.modal.alertWarning("请选择一个" + (sumType == "user-sum" ? "成员" : "项目"));
        }
        var startDate = $("#datetimepicker-startTime").val();
        var endDate = $("#datetimepicker-endTime").val();
        if (startDate == undefined || startDate == "" || endDate == undefined || endDate == "") {
            return $.modal.alertWarning("请选择一个时间区间");
        }
        var sd = new Date(startDate);
        var ed = new Date(endDate);
        if (sd >= ed) {
            return $.modal.alertWarning("起始日期必须小于结束日期");
        }
        var data = {};
        data.sumType = sumType;
        data.queryId = queryId;
        data.startDate = startDate;
        data.endDate = endDate;
        data.withCost = withCost;
        $.post(prefix + "/downLoadExcel", data, function (result) {
            if (result.code == web_status.SUCCESS) {
                window.location.href = ctx + "common/download?fileName=" + encodeURI(result.msg) + "&delete=" + true;
            } else if (result.code == web_status.WARNING) {
                $.modal.alertWarning(result.msg)
            } else {
                $.modal.alertError(result.msg);
            }
            $.modal.closeLoading();
        });
    }

    $("#datetimepicker-startTime").datetimepicker({
        format: 'yyyy-mm-dd',
        minView: "month",
        todayBtn: true,
        autoclose: true,
        weekStart: 1,
        endDate: new Date(),
        daysOfWeekDisabled: [0, 1, 2, 3, 4, 5]
    }).on('changeDate', function (event) {
        event.preventDefault();
        event.stopPropagation();
        resetTime();
    });

    $("#datetimepicker-endTime").datetimepicker({
        format: 'yyyy-mm-dd',
        minView: "month",
        todayBtn: true,
        yesterdayBtn: true,
        autoclose: true,
        weekStart: 1,
        startDate: [[${startDate}]],
        endDate: new Date(),
        daysOfWeekDisabled: [0, 1, 2, 3, 4, 6]
    }).on('changeDate', function (event) {
        event.preventDefault();
        event.stopPropagation();
        resetTime();
    });

    function resetTime() {
        $('#datetimepicker-endTime').datetimepicker('setStartDate', $("#datetimepicker-startTime").val());
        $("#datetimepicker-startTime").datetimepicker('setEndDate', $("#datetimepicker-endTime").val());
    }

    function changeweek(week) {
        $.ajax({
            url: prefix + "/changeweek?week=" + week + "&date=" + $("#datetimepicker-endTime").val(),
            type: "POST",
            success: function (result) {
                $("#datetimepicker-endTime").val(result[1]);
                $("#datetimepicker-startTime").val(result[0]);
                resetTime();
            }
        });
    }
</script>
</body>
</html>