@{
    ViewData["Title"] = "每日工時資料維護";
    Layout = "~/Views/Shared/_AMESLayout.cshtml";
}

<style type="text/css">
    .layui-table-main .layui-table-cell {
        /*height: auto !important;*/
        white-space: normal;
    }

    .layui-table img {
        max-width: 60px;
        max-height: 28px;
    }

    .layui-tree-main {
        cursor: pointer;
        padding-right: 10px;
        float: left;
        border-width: 1px;
        border-style: solid;
        border-color: #e6e6e6;
        margin: 10px 0;
    }
</style>


<div class="layui-card">
    <div class="layui-card-header">
        <div class="layui-form">
            <div class="layui-form-item">
                <div class="layui-inline"><i class="fa fa-file-text-o fa-fw"></i> @ViewBag.Title</div>
            </div>
        </div>
    </div>
    <div class="layui-card-body">
        <div class="layui-form">
            <div class="layui-row">
                <div class="layui-form-item">
                    <div class="layui-col-sm4">
                        <div class="layui-inline">
                            @*<label class="layui-form-label">廠區:</label>*@
                            <input type="checkbox" id="check_factoryNo" title="廠區" />
                            <div class="layui-input-inline" style="width:100px">
                                <select style="width:90px;" lay-filter="factoryNo" lay-submit id="factoryNo" name="factoryNo" asp-items="@ViewBag.FactoryList">
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-sm4">
                        <div class="layui-inline">
                            @*<label class="layui-form-label">製程:</label>*@
                            <input type="checkbox" id="check_unitNo" lay-filter="cUnitNo" name="cUnitNo" title="製程" />
                            <div class="layui-input-inline" style="width:100px">
                                <select style="width:90px;" lay-filter="unitNo" lay-submit id="unitNo" name="unitNo" asp-items="@ViewBag.FactoryUnit">
                                    <option value="">N/A</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-sm4">
                        <div class="layui-inline">
                            @*<label class="layui-form-label">線別:</label>*@
                            <input type="checkbox" id="check_lineID" title="線別" />
                            <div class="layui-input-inline" style="width:150px">
                                <select name="lineID" id="lineID" lay-filter="lineID" asp-items="@ViewBag.LineList" disabled>
                                    <option value="">N/A</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-form-item">
                    <div class="layui-col-sm4">
                        <div class="layui-inline">
                            @*<label class="layui-form-label">工作類別:</label>*@
                            <input type="checkbox" id="check_classNo" class="layui-form-label" title="出勤班別" />
                            <div class="layui-input-inline" style="width:150px">
                                <select name="classNo" id="classNo" lay-filter="classNo" asp-items="@ViewBag.ClassList">
                                    <option value="">N/A</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-sm4">
                        <div class="layui-inline">
                            @*<label class="layui-form-label">站別:</label>*@
                            <input type="checkbox" id="check_stationID" class="layui-form-label" title="站別" />
                            <div class="layui-input-inline" style="width:150px">
                                <select name="stationID" id="stationID" lay-filter="stationID" asp-items="@ViewBag.StationList">
                                    <option value="">N/A</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-sm4">
                        <div class="layui-inline">
                            @*<label class="layui-form-label">工號:</label>*@
                            <input type="checkbox" id="check_userNo" class="layui-form-label" title="工號" />
                            <div class="layui-input-inline" style="width:150px">
                                <input id="userNo" name="userNo" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
          @*  <div class="layui-row">
                <div class="layui-form-item">
                    <div class="layui-col-sm4">
                        <div class="layui-inline">
                            <input type="checkbox" id="check_deptID" class="layui-form-label" title="部門" />
                            <div class="layui-input-inline" style="width:150px">
                                <select name="deptID" id="deptID" lay-filter="deptID" asp-items="@ViewBag.DeptList">
                                    <option value="">N/A</option>
                                </select>
                            </div>
                        </div>
                    </div>                    
                </div>
            </div>*@
            <div class="layui-row">
                <div class="layui-form-item">
                    <div class="layui-col-sm7">
                        <div class="layui-inline">
                            <label class="layui-form-label">出勤日期:</label>
                            <div class="layui-input-inline" style="width:150px">
                                <input id="dateStr" name="dateStr" autocomplete="off" class="layui-input" readonly="">
                            </div>
                            <div class="layui-form-mid">~</div>
                            <div class="layui-input-inline" style="width:150px">
                                <input id="dateEnd" name="dateEnd" autocomplete="off" class="layui-input" readonly="">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-sm1">
                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn layui-btn-sm layui-btn-normal" id="querysubmit" lay-filter="querysubmit">
                                <i class="layui-icon layui-icon-sm">&#xe615;</i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <table class="layui-hide" id="query" lay-filter="query"></table>
    </div>
</div>

@section Scripts{
    <script type="text/javascript">
        layui.use(['form', 'layer', 'laydate'], function () {
            form = layui.form;
            laydate = layui.laydate;


            var d = new Date();
            $("#dateStr").val(d.getFullYear().toString() + "-" + (d.getMonth() + 1).toString().padStart(2, '0') + "-" + (d.getDate() - 1).toString().padStart(2, '0'));
            laydate.render({
                elem: '#dateStr'
                , trigger: 'click'
                , format: 'yyyy-MM-dd'
                , theme: 'grid'
                , isInitValue: true
                , ready: function (date) {
                   // $("#dateStrh").val($("#dateStrh").val());
                }
                , change: function (value, date, endDate) {
                    $("#dateStrh").val(value);
                }
                , done: function (value, date, endDate) {
                    $("#dateStrh").val(value);
                }
            });
            laydate.render({
                elem: '#dateEnd'
                , trigger: 'click'
                , format: 'yyyy-MM-dd'
                , theme: 'grid'
                , value: new Date()
                , isInitValue: true
                , ready: function (date) {
                    //$("#dateEndh").val(value);
                    //console.log(date.y);//  得到初始化的日期时间对象
                }
                , change: function (value, date, endDate) {
                    $("#dateEndh").val(value);
                    console.log('value='+value); //得到日期生成的值,如:2017-08-18
                    console.log('date=' +date); //得到日期时间对象:{ipt>
                }
                , done: function (value, date, endDate) {
                    $("#dateEndh").val(value);
                }
            });
            form.on('checkbox(cUnitNo)', function (data) {
                console.log('cUnitNo');
                check("#check_unitNo");
            });

            form.on('select(unitNo)', function (data) {
                var data = $("#unitNo").val();
                //console.info(data);
                getLineInfoes(data);
            });

        });
        //监听表单提交事件
        hg.form.onsubmit('querysubmit', function (data) {
            hg.msghide("重新載入資料..");

           table && table.reload(data);
        });
        ////搜索
        $('#querysubmit').click(function () {
            console.log('#btnSearch');
            var sd = $("#dateStr").val();
            var ed = $("#dateEnd").val();
            console.log(sd);
            console.log(ed);
            if (sd && ed) {
                hg.msghide("刷新数据!");
                tt();
            }
            else {
                alert("請填寫查詢時間!!!!");
            }
            return false;
        
        });

        var tableCols = [[
            {
                field: 'powerID',
                width: 100,
                title: '#',
                sort: true
            },
          @*  {
                field: 'u',
                width: 100,
                title: '部門',
                templet: function (d) {
                    var tt = "";
                    console.info(d);
                    console.info(d.u);
                    if (d.u == null) {
                        tt = "N/A";
                    }
                    else {
                        $.ajax({
                            url: "/SYS/GetDeptInfoes",
                            dataType: 'json',
                            contentType: "application/json",
                            type: 'get',
                            success: function (result) {
                                if (result.data) {
                                    var count = 0;
                                    $.each(result.data, function (index, item) {
                                        if (item.deptID == d.deptID) {
                                            tt = item.deptName;
                                            count = count + 1;
                                        }
                                    });
                                    if (count == 1) {
                                        tt = tt;
                                    }
                                    else {
                                        tt = "";
                                    }
                                }                                
                            }
                        });

                    }
                    return tt
                }
            },*@
            {
                field: 'unitNo',
                title: '制程代碼',
                width: 100,
                sort: true
            },
            {
                field: 'userNo',
                title: '員工工號',
                width: 100,
                sort: true
            },
            {
                field: 'userName',
                title: '員工名稱',
                width: 100,
                sort: true
            },
            {
                field: 'ovarH',
                title: '正常加班(H)',
                width: 100
            },
            {
                field: 'preparRestH',
                title: '預加/補班(H)',
                width: 100
            },
            {
                field: 'factRestH',
                title: '實際調休(H)',
                width: 100
            },
            {
                field: 'leaveH',
                title: '請假(H)',
                width: 100,
            },
            {
                field: 'breakTime',
                title: '休息時間(Min)'
            },
            {
                field: 'factWorkH',
                title: '實際出勤時數(H)',
                width: 100,
                
            },
            {
                field: 'powerDate',
                title: '出勤日期',
                width: 100,
                templet: '<div>{{ layui.util.toDateString(d.powerDate, "yyyy/MM/dd") }}</div>'
            },
            {
                field: 'right',
                width: 200,
                title: '操作',
                align: 'center',
                fixed: 'right',
                templet: function (d) {
                    return '<a class="layui-btn layui-btn-normal layui-btn-xs layui-icon layui-icon-edit" lay-event="edit">修改</a> <a class="layui-btn layui-btn-danger layui-btn-xs layui-icon layui-icon-delete" lay-event="del">删除</a>'
                }
            }]
        ];
        //通过行tool编辑,lay-event="edit"
        function edit(obj) {
            if (obj.data.powerID) {
                hg.open('修改每日工時資料', '/WHS/WHS006U/' + obj.data.powerID, 480, 480);
            }
        }
        //通过行tool删除,lay-event="del"
        function del(obj) {
            if (obj.data.powerID) {
                hg.confirm("每日工時:" + obj.data.userNo + "-" + obj.data.userName+",確定要删除嗎?", function () {
                    $.ajax({
                        url: '/WHS/WHS006D',
                        data: { id: obj.data.powerID },
                        type: 'POST',
                        success: function (data) {
                            if (data.success) {
                                obj.del(); //只删本地数据
                                hg.msghide("删除成功!");
                            }
                            else {
                                hg.msg(data.msg);
                            }
                        },
                        error: function () {
                            hg.msg("网络请求失败!");
                        }
                    });
                });
            }
        }
        var toolbar = [{
            text: '新增',
            layuiicon: '&#xe608;',
            class: 'layui-btn-normal',
            handler: function () {
                hg.open('新增每日工時資料', '/WHS/WHS006C', 480, 480);

            }
        }
        ];
        var table;
        $(function () {
            // 在這撰寫javascript程式碼
            tt();
            //check("#check_unitNo");
        });
        function tt() {
            //console.log("tt");
            //基本数据表格
            var fNO = "", uNO = "", lID = "", cID = "", sID = "", usNO = "", dID="";

             if ($("#check_factoryNo").prop("checked"))
                fNO = $("#factoryNo").val();
             if ($("#check_unitNo").prop("checked"))
                uNO = $("#unitNo").val();
             if ($("#check_lineID").prop("checked"))
                lID = $("#lineID").val();
             if ($("#check_classNo").prop("checked"))
                cID = $("#classNo").val();
             if ($("#check_stationID").prop("checked"))
                sID = $("#stationID").val();
             if ($("#check_userNo").prop("checked"))
                usNO = $("#userNo").val();
            if ($("#check_deptID").prop("checked"))
                dID = lID;
   
            table = hg.table.datatable('query', '每日工時資料維護', '/WHS/GetWorkManPowersByQuery?'
                + 'fid=' + fNO + '&uid=' + uNO + '&lid=' + lID + '&cID=' + cID + '&sID=' + sID + '&uNo=' + usNO + '&sd='+ $("#dateStr").val() + '&ed='+ $("#dateEnd").val()
              // + 'factoryid=' + fNO + '&unitid=' + uNO + '&lineid=' + lID + '&classID=' + cID + '&stationID=' + sID + '&userNo=' + usNO + '&sd=' + $("#dateStr").val() + '&edate=' + $("#dateEnd").val()
                , {}, tableCols, toolbar, true, 'full-100', ['filter', 'print', 'exports']);
        };


        function check(str) {
            if ($(str).prop("checked")) {
                //alert("選中");
                $('#lineID').removeAttr("disabled");
                form.render();
            } else {

                //alert("沒有選中");
                $('#lineID').attr("disabled", "disabled");
                $('select[name=lineID]').attr("disabled", true);
                form.render();
            };
        };

        //利用ajax將資料傳到後端,來獲取到對應下拉框選項而出現的值
        function getLineInfoes(data) {
            $.ajax({
                url: "/BAS/GetLineInfoByUnit",
                dataType: 'json',
                data: { id: data },
                contentType: "application/json",
                type: 'get',
                success: function (result) {
                    if (result.data) {
                        $("#lineID").empty();//清空下拉框的值
                        $('#lineID').append(new Option("N/A", ""));// 下拉選單裡新增元素
                        $.each(result.data, function (index, item) {
                            $('#lineID').append(new Option(item.lineDesc, item.lineID));// 下拉選單裡新增元素
                        });
                    }
                    else {
                        $("#lineID").empty();//清空下拉框的值
                        $('#lineID').append(new Option("無選項", ""));// 下拉選單裡新增元素
                    }
                    layui.form.render("select");//重新渲染 固定寫法
                }
            });
        };
                                                                                       
    </script>
}