layui.use(['table','util'], function () {
    var TaskId = $.getUrlVar("TaskId");
    var table = layui.table;
    setTimeout(function () {
        //系统列表
        var tableIns = table.render({
            elem: '#RecordList',
            url: '../../ashx/OaAttendanceRecordHandler.ashx',
            where: { Action: 'AttendanceRecordListByTaskID', TaskID: TaskId },
            cellMinWidth: 95,
            height: "full-125",
            id: "TaskListTable",
            cols: [[
                { field: 'USERS_NAME', title: '考勤人员', minWidth: 60, align: "center", rowspan: 2 },
                { title: '上午上班', align: "center", colspan: 4 },
                { title: '上午下班', align: "center", colspan: 4 },
                { title: '下午上班', align: "center", colspan: 4 },
                { title: '下午下班', align: "center", colspan: 4 }
            ], [
                {
                    field: 'UP_REPORT_TIME', title: '打卡时间', minWidth: 60, align: "center", templet: function (d) {
                        if (d.UP_REPORT_TIME) {
                            return layui.util.toDateString(d.UP_REPORT_TIME, 'yyyy-MM-dd HH:mm:ss');
                        } else { return "" }
                    }
                },
                {
                    field: 'UP_STATE', title: '状态', minWidth: 60, align: "center", templet: function (d) {
                        if (d.UP_STATE == "0") {
                            return ' <span class="layui-badge layui-bg-gray">未打卡</span>';
                        } else if (d.UP_STATE == "1") {
                            return ' <span class="layui-badge layui-bg-green">正常打卡</span>';
                        } else if (d.UP_STATE == "2") {
                            return ' <span class="layui-badge layui-bg-orange">迟到打卡</span>';
                        } else if (d.UP_STATE == "3") {
                            return ' <span class="layui-badge layui-bg-blue">外勤打卡</span>';
                        } else {
                            return ' ';
                        }
                    }
                },
                {
                    field: 'UP_PHOTO', title: '照片', minWidth: 60, align: "center", templet: function (d) {
                        if (d.UP_PHOTO) {
                            //return ' <img src="' + d.UP_PHOTO + '" style="width: 160px;height: 80px;"/>';
                            return "<a onclick='previewImg(\"" + d.UP_PHOTO + "\")' style='color:#ffffff;'>查看照片</a>";
                        } else {
                            return ' ';
                        }
                    }
                },
                { field: 'UP_REMARKS', title: '备注', minWidth: 60, align: "center" },
                {
                    field: 'DOWN_REPORT_TIME', title: '打卡时间', minWidth: 60, align: "center", templet: function (d) {
                        if (d.DOWN_REPORT_TIME) {
                            return layui.util.toDateString(d.DOWN_REPORT_TIME, 'yyyy-MM-dd HH:mm:ss');
                        } else { return "" }
                    }
                },
                {
                    field: 'DOWN_STATE', title: '状态', minWidth: 60, align: "center", templet: function (d) {
                        if (d.DOWN_STATE == "0") {
                            return ' <span class="layui-badge layui-bg-gray">未打卡</span>';
                        } else if (d.DOWN_STATE == "1") {
                            return ' <span class="layui-badge layui-bg-green">正常打卡</span>';
                        } else if (d.DOWN_STATE == "2") {
                            return ' <span class="layui-badge layui-bg-orange">迟到打卡</span>';
                        } else if (d.DOWN_STATE == "3") {
                            return ' <span class="layui-badge layui-bg-blue">外勤打卡</span>';
                        } else {
                            return ' ';
                        }
                    }
                },
                {
                    field: 'DOWN_PHOTO', title: '照片', minWidth: 60, align: "center", templet: function (d) {
                        if (d.DOWN_PHOTO) {
                            //return ' <img src="' + d.DOWN_PHOTO + '" style="width: 160px;height: 80px;"/>';
                            return "<a onclick='previewImg(\"" + d.DOWN_PHOTO + "\")' style='color:#ffffff;'>查看照片</a>";
                        } else {
                            return ' ';
                        }
                    }
                },
                { field: 'DOWN_REMARKS', title: '备注', minWidth: 60, align: "center" },

                {
                    field: 'UP_REPORT_TIME2', title: '打卡时间', minWidth: 60, align: "center", templet: function (d) {
                        if (d.UP_REPORT_TIME2) {
                            return layui.util.toDateString(d.UP_REPORT_TIME2, 'yyyy-MM-dd HH:mm:ss');
                        } else { return "" }
                    }
                },
                {
                    field: 'UP_STATE2', title: '状态', minWidth: 60, align: "center", templet: function (d) {
                        if (d.UP_STATE2 == "0") {
                            return ' <span class="layui-badge layui-bg-gray">未打卡</span>';
                        } else if (d.UP_STATE2 == "1") {
                            return ' <span class="layui-badge layui-bg-green">正常打卡</span>';
                        } else if (d.UP_STATE2 == "2") {
                            return ' <span class="layui-badge layui-bg-orange">迟到打卡</span>';
                        } else if (d.UP_STATE2 == "3") {
                            return ' <span class="layui-badge layui-bg-blue">外勤打卡</span>';
                        } else {
                            return ' ';
                        }
                    }
                },
                {
                    field: 'UP_PHOTO2', title: '照片', minWidth: 60, align: "center", templet: function (d) {
                        if (d.UP_PHOTO2) {
                            //return ' <img src="' + d.UP_PHOTO2 + '" style="width: 160px;height: 80px;"/>';
                            return "<a onclick='previewImg(\"" + d.UP_PHOTO2 + "\")' style='color:#ffffff;'>查看照片</a>";
                        } else {
                            return ' ';
                        }
                    }
                },
                { field: 'UP_REMARKS2', title: '备注', minWidth: 60, align: "center" },
                {
                    field: 'DOWN_REPORT_TIME2', title: '打卡时间', minWidth: 60, align: "center", templet: function (d) {
                        if (d.DOWN_REPORT_TIME2) {
                            return layui.util.toDateString(d.DOWN_REPORT_TIME2, 'yyyy-MM-dd HH:mm:ss');
                        } else { return "" }
                    }
                },
                {
                    field: 'DOWN_STATE2', title: '状态', minWidth: 60, align: "center", templet: function (d) {
                        if (d.DOWN_STATE2 == "0") {
                            return ' <span class="layui-badge layui-bg-gray">未打卡</span>';
                        } else if (d.DOWN_STATE2 == "1") {
                            return ' <span class="layui-badge layui-bg-green">正常打卡</span>';
                        } else if (d.DOWN_STATE2 == "2") {
                            return ' <span class="layui-badge layui-bg-orange">迟到打卡</span>';
                        } else if (d.DOWN_STATE2 == "3") {
                            return ' <span class="layui-badge layui-bg-blue">外勤打卡</span>';
                        } else if (d.DOWN_STATE2 == "4") {
                            return ' <span class="layui-badge layui-bg-red">加班打卡</span>';
                        }else {
                            return ' ';
                        }
                    }
                },
                {
                    field: 'DOWN_PHOTO2', title: '照片', minWidth: 60, align: "center", templet: function (d) {
                        if (d.DOWN_PHOTO2) {
                            //return ' <img src="' + d.DOWN_PHOTO2 + '" style="width: 160px;height: 80px;"/>';
                            return "<a onclick='previewImg(\"" + d.DOWN_PHOTO2 + "\")' style='color:#ffffff;'>查看照片</a>";
                        } else {
                            return ' ';
                        }
                    }
                },
                { field: 'DOWN_REMARKS2', title: '备注', minWidth: 60, align: "center" },
            ]]
        });
    }, 1000);

    previewImg = function (obj) {
        var imgHtml = "<img src='" + obj + "' width='100%' height='100%'/>";
        //弹出层
        layer.open({
            type: 1,
            shade: 0.8,
            offset: 'auto',
            area: [400 + 'px', 600 + 'px'],
            shadeClose: true,
            scrollbar: false,
            title: "图片预览",
            content: imgHtml,
            cancel: function () {

            }
        });
    }
})