@{
    ViewBag.Title = "Import";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<style type="text/css">
    body{
        overflow-y:scroll;
    }
    .layui-body{
        overflow-y:scroll;
    }
</style>

<div class="x-body">
    <div class="layui-form">
        <div class="layui-form-item">
            <div class="layui-inline">
                <input type="text" name="startDate" id="startDate" lay-verify="date" placeholder="yyyy-MM-dd" class="layui-input">
            </div>
            <div class="layui-inline">
                <input type="text" name="endDate" id="endDate" lay-verify="date" placeholder="yyyy-MM-dd" class="layui-input">
            </div>
            <div class="layui-inline">
                <select id="paytype" name="paytype">
                    <option value="6">微信支付当天</option>
                    <option value="5">微信支付历史</option>
                    <option value="1">支付宝</option>
                </select>
            </div>
            <div class="layui-inline">
                <button type="button" class="layui-btn layui-btn-normal" id="choose">选择文件</button>
                <button type="button" class="layui-btn" id="import">上传</button>
                @*<button type="button" class="layui-btn" lay-event="save" id="save" style="display:none;">提交</button>*@
            </div>
        </div>
    </div>

    <table class="layui-hide" id="tabl1" lay-filter="tabl1"></table>
    <table class="layui-hide" id="tabl2" lay-filter="tabl2"></table>
</div>


<script>
    layui.use(['upload', 'table', 'laydate'], function () {
        var form = layer = layui.layer
            , upload = layui.upload
            , table = layui.table
            , $ = layui.jquery
            , laydate = layui.laydate;

        laydate.render({ elem: '#startDate', value: '@DateTime.Now.ToString("yyyy-MM-dd")' });
        laydate.render({ elem: '#endDate', value: '@DateTime.Now.ToString("yyyy-MM-dd")' });

        //var excelData = [];
        var column = [
            { field: 'PayNo', title: '流水号', style: "mso-number-format:'\@@';", width: '20%' }
            , { field: 'PayPrice', title: '支付金额' }
            //, { field: 'PayName', title: '付款人姓名' }
            //, { field: 'PayDate', title: '支付时间' }
            //, { field: 'PayNoExcel', title: 'Excel流水号' }
            , { field: 'PayPriceExcel', title: 'Excel支付金额' }
            //, { field: 'PayAccountExcel', title: 'Excel付款账号' }
            //, { field: 'PayNameExcel', title: 'Excel付款人姓名' }
            , { field: 'PayDateExcel', title: 'Excel支付时间' }
            , { field: 'OrderId', title: '订单号' }
            , { field: 'Status', title: '状态', templet: function (res) { if (res.Status == "正常") return "<span style='color:green'>" + res.Status + "</span>"; else return "<span style='color:red'>" + res.Status + "</span>"; } }
        ];

        var column2 = [
            { field: 'PayNo', title: '流水号', style: "mso-number-format:'\@@';" }
            //, { field: 'PayPrice', title: '支付金额' }
            //, { field: 'PayName', title: '付款人姓名' }
            //, { field: 'PayDate', title: '支付时间' }
            //, { field: 'PayNoExcel', title: 'Excel流水号' }
            , { field: 'PayPriceExcel', title: 'Excel支付金额' }
            //, { field: 'OrderId', title: '订单号' }
            //, { field: 'OutOrderId', title: '第三方订单号' }
            //, { field: 'PayAccountExcel', title: 'Excel付款账号' }
            //, { field: 'PayNameExcel', title: 'Excel付款人姓名' }
            , { field: 'PayDateExcel', title: 'Excel支付时间' }
        ];

        //var column3 = [
        //    { field: 'OrderId', title: '订单号' }
        //    , { field: 'PayNo', title: '流水号', style: "mso-number-format:'\@@';" }
        //    , { field: 'PayPrice', title: '支付金额' }
        //    , { field: 'PayName', title: '付款人姓名' }
        //    , { field: 'PayDate', title: '支付时间' }
        //];

        upload.render({ //允许上传的文件后缀
            elem: '#choose'
            , url: '/OrderPay/Import'
            , accept: 'file' //普通文件
            , exts: 'xls|xlsx|csv' //只允许上传压缩文件
            , size: 100000 //限制文件大小，单位 KB
            , auto: false
            , bindAction: '#import'
            , before: function (obj) {
                layer.load();
                this.data = { startDate: $("#startDate").val(), endDate: $("#endDate").val(), paytype: $("#paytype").val() }
            }
            , done: function (res) {
                //console.log(res)
                layer.closeAll('loading');
                if (res.code == 0) {
                    //excelData = res.data;
                    table.render({
                        id: 'orderpaydiff',//列表别名ID
                        elem: '#tabl1',//表ID
                        toolbar: '<div>匹配到数据</div>',
                        defaultToolbar: ['filter', 'exports'],
                        page: false,
                        limit: Number.MAX_VALUE,
                        cols: [column],
                        data: res.data,
                        //done: function () {
                        //    table.resize('orderpaydiff');
                        //}
                    });

                    table.render({
                        id: 'manyorderpay',//列表别名ID
                        elem: '#tabl2',//表ID
                        toolbar: '<div>未匹配到数据</div>',
                        defaultToolbar: ['filter', 'exports'],
                        page: false,
                        limit: Number.MAX_VALUE,
                        cols: [column2],
                        data: res.data2,
                        //done: function () {
                        //    table.resize('manyorderpay');
                        //}
                    });

                    //table.render({
                    //    id: 'manyorderpay',//列表别名ID
                    //    elem: '#tabl3',//表ID
                    //    toolbar: '<div>未匹配到的记录，请跟分部确认</div>',
                    //    defaultToolbar: ['filter', 'exports'],
                    //    cols: [column3],
                    //    data: res.data3
                    //});

                    //$("#save").show();
                }
            }
            , error: function () {
                layer.closeAll('loading');
            }
        });

        //$("#save").click(function () {
        //    var checkStatus = table.checkStatus('orderpaydiff');

        //    layui.each(checkStatus.data, function (i, j) {
        //        layui.each(excelData, function (m, n) {
        //            if (n.Id == j.Id) {
        //                excelData.splice(m, 1);
        //            }
        //        });
        //    });

        //    console.log(checkStatus.data.length);
        //    if (checkStatus.data.length <= 0) {
        //        layer.alert("请选择要提交的数据！");
        //        return;
        //    }

        //    $.r_post('/OrderPay/BatchAudit', { orders: checkStatus.data }, function (res) {
        //        table.render({
        //            id: 'orderpaydiff',
        //            elem: '#tabl1',
        //            toolbar: true,
        //            defaultToolbar: ['filter', 'exports'],
        //            cols: [column],
        //            data: excelData
        //        });
        //        if (res.code == 0 && res.count > 0) {
        //            layer.alert("数据处理完成，但有数据未处理！");
        //            table.render({
        //                id: 'errororderpay',//列表别名ID
        //                elem: '#tabl4',//表ID
        //                toolbar: '<div>未处理或处理未能完成数据</div>',
        //                defaultToolbar: ['filter', 'exports'],
        //                cols: [column2],
        //                data: res.data
        //            });
        //        }
        //        else {
        //            layer.alert("数据处理完成。。。");
        //        }
        //    });

        //});

    });

</script>