<#assign base=request.contextPath />
<#import "../common/defaultLayout.ftl" as defaultLayout>
<@defaultLayout.layout>
    <link rel="stylesheet" href="../assets/css/amazeui.switch.css"/>
    <div class="admin-content">
        <div class="am-cf am-padding" style="padding:1rem 1.6rem 1.6rem 1rem;margin:0px;">
            <!--  padding:1px 2px 3px 4px;上、右、下,和左   -->
            <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">项目管理</strong> /
                <small>PMO项目执行进度管理</small>
            </div>
        </div>
        <div class="am-g">
            <div class="am-u-sm-12">
                <form class="am-form" id="listForm" action="${base}/monthlySettle/list" method="POST">
                    <input type="hidden" id="keywords" name="keywords" value='${keywords!""}'/>
                    <table class="am-table am-table-bordered am-table-radius table-main" style="padding:0;">
                        <tbody>
                        <tr>
                            <th class="am-text-middle">项目编号</th>
                            <td>
                                <div class="am-u-sm-10">
                                    <input type="text" id="projectNo" class="am-form-field am-input-sm" maxlength="50"
                                           value="${projectNo!}"/>
                                </div>
                            </td>
                            <th class="am-text-middle">项目名称</th>
                            <td>
                                <div class="am-u-sm-10">
                                    <input type="text" id="name" class="am-form-field am-input-sm" maxlength="50"
                                           value="${name!}"/>
                                </div>
                            </td>
                            <th class="am-text-middle">最终业主</th>
                            <td>
                                <div class="am-u-sm-10">
                                    <input type="text" id="owner" class="am-form-field am-input-sm" maxlength="50"
                                           value="${owner!}"/>
                                </div>
                            </td>
                            <th class="am-text-middle">合同方</th>
                            <td>
                                <div class="am-u-sm-10">
                                    <input type="text" id="contractParty" class="am-form-field am-input-sm" maxlength="50"
                                           value="${contractParty!}"/>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <th class="am-text-middle">合同编号</th>
                            <td>
                                <div class="am-u-sm-10">
                                    <input type="text" id="contractNo" class="am-form-field am-input-sm" maxlength="100"
                                           value="${contractNo!}"/>
                                </div>
                            </td>
                            <th class="am-text-middle">项目类型</th>
                            <td>
                                <div class="am-u-sm-10">
                                    <input type="text" id="projectType" class="am-form-field am-input-sm" maxlength="50"
                                           value="${projectType!}"/>
                                </div>
                            </td>
                            <th class="am-text-middle">销售经理</th>
                            <td>
                                <div class="am-u-sm-10">
                                    <input type="text" id="saleManager" class="am-form-field am-input-sm" maxlength="50"
                                           value="${saleManager!}"/>
                                </div>
                            </td>
                            <th class="am-text-middle">项目经理</th>
                            <td>
                                <div class="am-u-sm-10">
                                    <input type="text" id="projectManager" class="am-form-field am-input-sm" maxlength="50"
                                           value="${projectManager!}"/>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <th class="am-text-middle">超期天数</th>
                            <td>
                                <div class="am-u-sm-10">
                                    <input type="text" id="timeOutDay" class="am-form-field am-input-sm" maxlength="20"
                                           value="${timeOutDay!}"/>
                                </div>
                            </td>
                            <th class="am-text-middle">实际收款时间</th>
                            <td>
                                <div class="am-u-sm-10">
                                    <div class="am-form am-form-inline">
                                        <div class="am-form-group am-form-icon">
                                            <i class="am-icon-calendar"></i>
                                            <input type="text" class="am-form-field am-input-sm" id="startTime" readonly
                                                   value="${startTime!}" placeholder="开始日期" data-am-datepicker>
                                        </div>
                                        <div class="am-form-group">至</div>
                                        <div class="am-form-group am-form-icon">
                                            <i class="am-icon-calendar"></i>
                                            <input type="text" class="am-form-field am-input-sm" id="endTime" readonly
                                                   value="${endTime!}"
                                                   placeholder="结束日期" data-am-datepicker>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <th class="am-text-middle">合同签订时间</th>
                            <td>
                                <div class="am-u-sm-10">
                                    <div class="am-form am-form-inline">
                                        <div class="am-form-group am-form-icon">
                                            <i class="am-icon-calendar"></i>
                                            <input type="text" class="am-form-field am-input-sm" id="contractStartTime" readonly
                                                   value="${contractStartTime!}" placeholder="开始日期" data-am-datepicker>
                                        </div>
                                        <div class="am-form-group">至</div>
                                        <div class="am-form-group am-form-icon">
                                            <i class="am-icon-calendar"></i>
                                            <input type="text" class="am-form-field am-input-sm" id="contractEndTime" readonly
                                                   value="${contractEndTime!}"
                                                   placeholder="结束日期" data-am-datepicker>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td colspan="2">
                                <div align='right'>
                                    <button type="button" class="am-btn am-btn-default am-btn-sm am-text-secondary"
                                            id="submit-btn" onclick="sub_function('query')">搜索
                                    </button>
                                    <@shiro.hasPermission name="MONTHLY_SETTLE_EXPORT">
                                    <button type="button" class="am-btn am-btn-default am-btn-sm am-text-secondary"
                                            id="submit-btn-export" onclick="sub_function('export')">导出
                                    </button>
                                    </@shiro.hasPermission>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </form>
            </div>
            <div class="am-u-sm-12 am-u-md-12" style="padding:0 1.6rem 1.6rem 1rem;margin:0;">
                <div class="am-btn-toolbar" style="padding-left:.5rem;">
                    <div class="am-btn-group am-btn-group-xs">
                        <@shiro.hasPermission name="MONTHLY_SETTLE_IMPORT">
                        <div class="am-btn-group am-btn-group-xs am-form-file">
                            <button type="button" id="importAccount" onclick="windows()" class="am-btn am-btn-default"><span
                                        class="am-icon-archive"></span> 批量导入
                            </button>
                        </div>
                        <button type="button" class="am-btn am-btn-default"
                                onclick="location.href='${base}/monthlySettle/template'">
                            <span class="am-icon-archive"></span> 导入模板下载
                        </button>
                        </@shiro.hasPermission>
                    </div>
                </div>
            </div>
        </div>

        <div class="am-g">
            <div class="am-u-sm-12">
                <div class="am-scrollable-horizontal">
                    <table class="am-table am-table-striped am-table-hover table-main">
                        <thead>
                        <tr class="am-text-nowrap">
                            <th class="table-title">项目编号</th>
                            <th class="table-title">项目名称</th>
                            <th class="table-title">项目类型</th>
                            <th class="table-title">合同编号</th>
                            <th class="table-title">合同方</th>
                            <th class="table-title">合同金额</th>
                            <th class="table-title">合同签订时间</th>
                            <th class="table-title">最终业主</th>
                            <th class="table-title">累计已收款</th>
                            <th class="table-title">已采购累计付款</th>
                            <th class="table-title">已采购累计未付款</th>
                            <th class="table-title">超期垫资金额</th>
                            <th class="table-title">销售累计开票金额</th>
                            <th class="table-title">销售经理</th>
                            <th class="table-title">项目经理</th>
                            <th class="table-title">收款节点</th>
                            <th class="table-title">收款要求时间</th>
                            <th class="table-title">收款金额</th>
                            <th class="table-title">实际收款时间</th>
                            <th class="table-title">实际收款金额</th>
                            <th class="table-title">实际欠收金额</th>
                            <th class="table-title">到货证明</th>
                            <th class="table-title">项目风险预警</th>
                            <th class="table-title">未收金额</th>
                            <th class="table-title">已收金额</th>
                            <th class="table-title">超期天数</th>
                            <th class="table-title">验收报告时间</th>
                        </tr>
                        </thead>
                        <tbody>
                        <#list  pager.list as list>
                            <tr>
                                <td>${list.projectNo!}</td>
                                <td class="huanhang"><a style="cursor: pointer;text-decoration:none" onclick="location.href='${base}/monthlySettle/info?id=${list.id}'">${list.projectName!}</a></td>
                                <td>${list.projectType!}</td>
                                <td>${list.contractNo!}</td>
                                <td>${list.contractParty!}</td>
                                <td>${Utils.format(list.contractAmount, "0.00")}</td>
                                <td>${(list.contractSignTime?string("yyyy-MM-dd"))!}</td>
                                <td>${list.owner!}</td>
                                <td>${Utils.format(list.totalCollect, "0.00")}</td>
                                <td>${Utils.format(list.totalPurchasedPaid, "0.00")}</td>
                                <td>${Utils.format(list.totalPurchasedUnpaid, "0.00")}</td>
                                <td>${Utils.format(list.timeOutAmount, "0.00")}</td>
                                <td>${Utils.format(list.totalBillAmount, "0.00")}</td>
                                <td>${list.saleManager!}</td>
                                <td>${list.projectManager!}</td>
                                <td>${list.collectPoint!}</td>
                                <td>${(list.collectRequiredTime?string("yyyy-MM-dd"))!}</td>
                                <td>${Utils.format(list.collectAmount, "0.00")}</td>
                                <td>${(list.collectActualTime?string("yyyy-MM-dd"))!}</td>
                                <td>${Utils.format(list.collectActualAmount, "0.00")}</td>
                                <td>${Utils.format(list.uncollectActualAmount, "0.00")}</td>
                                <td>${list.productCertificate!}</td>
                                <td>${list.riskWarning!}</td>
                                <td>${Utils.format(list.uncalColAmount, "0.00")}</td>
                                <td>${Utils.format(list.calColAmount, "0.00")}</td>
                                <td>${list.timeOutDay!}</td>
                                <td>${(list.inspectionReportTime?string("yyyy-MM-dd"))!}</td>
                            </tr>
                        </#list>
                        </tbody>
                    </table>
                </div>
                <div class="am-cf">
                    <!-- 分页 -->
                    <#if (pager.list)?exists && (pager.list?size>0) >
                        <div class="am-fr">
                            <#include "../common/common_pager.ftl">
                        </div>
                    <#else>
                        <div class="am-kai" align="center">
                            <h3>没有找到任何记录!</h3>
                        </div>
                    </#if>
                </div>

            </div>
        </div>


        <footer class="admin-content-footer">
            <hr>
        </footer>
    </div>
</@defaultLayout.layout>
<script type="text/javascript" src="../common/js/jquery.ajaxfileupload.js"></script>
<script src="../common/jQuery-File-Upload/js/vendor/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../common/jQuery-File-Upload/js/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="../common/jQuery-File-Upload/js/jquery.fileupload.js"></script>
<script src="../common/jQuery-File-Upload/js/jquery.fileupload-process.js"></script>
<script src="../common/jQuery-File-Upload/js/jquery.fileupload-validate.js"></script>
<script src="../assets/js/amazeui.switch.js"></script>
<script src="${base}/layui/layui.js"></script>
<script type="text/javascript">
    layui.use('laydate', function(){
        var laydate = layui.laydate;

        laydate.render({
            elem: '#time',
            type: 'month',
            btns: ['confirm'],
            trigger: 'click',
            ready: function(date){
                console.log(date);
            }
        });
    });

    function windows() {
        layui.use('layer', function(){
            var layer = layui.layer;
            var html = '<input type="text" name="layTime" id="layTime" class="form-control layer-date" readonly required value="${time!}">\n' +
                '<input id="doc-form-file" type="file" name="file" onChange="ajaxUploadFile(\'doc-form-file\',\'${base}/monthlySettle/batchImport\')">'
            layer.open({
                type: 1,
                title: "选择导入时间",
                offset: '0px',
                id: 'layerDemo',
                content: html,
                area: ['400px', '400px'],
                success: function (layero, index) {
                    layui.laydate.render({
                        elem: "#layTime",
                        type: 'month',
                        btns: ['confirm'],
                        trigger: 'click',
                        ready: function(date){
                            console.log(date);
                        }
                    });
                }
            });
        });
    };

    function ajaxUploadFile(id, url) {
        var date = $("#layTime").val();
        console.log("date:" + date);
        $.ajaxFileUpload({
            url: url + '?date=' + date,
            secureuri: false,
            fileElementId: id,// file标签的id
            dataType: 'json',// 返回数据的类型
            success: function (data, status) {
                console.log("--------success---------" + data)
                if(data.status ==0) {
                    var list = data.data;
                    var content = '';
                    $.each(list, function (i, r) {
                        content += (i+1) + '、' + r + '<br>';
                    });
                    console.log('---> ' + content);
                    parent.layer.open({
                        title: '导入结果：' ,
                        content: data.msg + '<br><br>' + content
                    });
                }else{
                    parent.layer.msg(data.msg);
                }

                window.location.reload();
                $("#" + id).val("");
            },
            error: function (data, status, e) {
                console.log("--------error---------" + data)
                layer.alert("-----------------" + data);
                layer.alert(e);
                $("#" + id).val("");
            }
        });
    };

    function initSearch() {
        var keywordsObj = {};
        if ($("#projectNo").val())
            keywordsObj.projectNo = $("#projectNo").val();
        if ($("#name").val())
            keywordsObj.name = $("#name").val();
        if ($("#owner").val())
            keywordsObj.owner = $("#owner").val();
        if ($("#contractParty").val())
            keywordsObj.contractParty = $("#contractParty").val();
        if ($("#contractNo").val())
            keywordsObj.contractNo = $("#contractNo").val();
        if ($("#projectType").val())
            keywordsObj.projectType = $("#projectType").val();
        if ($("#saleManager").val())
            keywordsObj.saleManager = $("#saleManager").val();
        if ($("#projectManager").val())
            keywordsObj.projectManager = $("#projectManager").val();
        if ($("#timeOutDay").val())
            keywordsObj.timeOutDay = $("#timeOutDay").val();
        if ($("#contractStartTime").val())
            keywordsObj.contractStartTime = $("#contractStartTime").val();
        if ($("#contractEndTime").val())
            keywordsObj.contractEndTime = $("#contractEndTime").val();
        if ($("#startTime").val())
            keywordsObj.startTime = $("#startTime").val();
        if ($("#endTime").val())
            keywordsObj.endTime = $("#endTime").val();
        var keywords = "";
        if (!$.isEmptyObject(keywordsObj)) {
            keywords = JSON.stringify(keywordsObj);
        }
        $("#keywords").val(keywords);
    };

    var sub_function = function (type) {
        initSearch();
        if (type == 'export') {
            $("#listForm").attr("action", "${base}/monthlySettle/export");
        }
        if(type == 'query'){
            $("#listForm").attr("action", "${base}/monthlySettle/list");
        }
        $("#listForm").submit();
    };

</script>
















