@{
    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-sm3">
                        <div class="layui-inline">
                            <label class="layui-form-label">產品別:</label>
                            <div class="layui-input-inline">
                                <select id="productType" lay-filter="productType" lay-verify="required" lay-submit asp-items="@ViewBag.ProductTypeList">
                                    <option value="0">全部</option>
                                </select>
                            </div>
                            <input id="productTypeNo" type="hidden" name="productTypeNo" value="0" />
                        </div>
                    </div>
                    <div class="layui-col-sm3">
                        <div class="layui-inline">
                            <label class="layui-form-label">測試類別:</label>
                            <div class="layui-input-inline">
                                <select id="testType" lay-filter="testType" lay-verify="required" lay-submit asp-items="@ViewBag.TestTypeList">
                                    <option value="*">全部</option>
                                </select>
                            </div>
                            <input id="testTypeNo" type="hidden" name="testTypeNo" value="*" />
                        </div>
                    </div>
                    <div class="layui-col-sm3">
                        <div class="layui-inline">
                            <label class="layui-form-label">生產單位:</label>
                            <div class="layui-input-inline">
                                <select id="unit" lay-filter="unit" lay-verify="required" lay-submit asp-items="@ViewBag.UnitList">
                                    <option value="*">全部</option>
                                </select>
                            </div>
                            <input id="unitNo" type="hidden" name="unitNo" value="*" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-form-item">
                    <div class="layui-col-sm3">
                        <div class="layui-inline">
                            <label class="layui-form-label">線別:</label>
                            <div class="layui-input-inline">
                                <select id="line" lay-filter="line" lay-verify="required" lay-submit asp-items="@ViewBag.LineList">
                                    <option value="0">全部</option>
                                </select>
                            </div>
                            <input id="lineID" type="hidden" name="lineID" value="0" />
                        </div>
                    </div>
                    <div class="layui-col-sm3">
                        <div class="layui-inline">
                            <label class="layui-form-label">站別:</label>
                            <div class="layui-input-inline">
                                <select id="station" lay-filter="station" lay-verify="required" lay-submit asp-items="@ViewBag.StationList">
                                    <option value="0">全部</option>
                                </select>
                            </div>
                            <input id="stationID" type="hidden" name="stationID" value="0" />
                        </div>
                    </div>
                    <div class="layui-col-sm3">
                        <div class="layui-inline">
                            <label class="layui-form-label">工單號碼:</label>
                            <div class="layui-input-inline" style="width:150px">
                                <input id="wipNO" name="wipNo" autocomplete="off" class="layui-input" placeholder="請輸入工單號碼">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-sm3">
                        <div class="layui-inline">
                            <label class="layui-form-label">料號:</label>
                            <div class="layui-input-inline" style="width:150px">
                                <input id="itemNO" name="itemNo" autocomplete="off" class="layui-input" placeholder="請輸入料號">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-form-item">
                    <div class="layui-col-sm3">
                        <div class="layui-inline">
                            <label class="layui-form-label">機種:</label>
                            <div class="layui-input-inline" style="width:150px">
                                <input id="modelNO" name="modelNo" autocomplete="off" class="layui-input" placeholder="請輸入機種">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-sm3">
                        <div class="layui-inline">
                            <label class="layui-form-label">維修組件料號:</label>
                            <div class="layui-input-inline" style="width:150px">
                                <input id="itemPN" name="itemPn" autocomplete="off" class="layui-input" placeholder="請輸入維修組件料號">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-sm5">
                        <div class="layui-inline">
                            <label class="layui-form-label">維修日期:</label>
                            <div class="layui-input-inline" style="width:150px">
                                <input id="dateStart" name="dateStart" 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" lay-submit 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 class="layui-inline">
            <button type="button" id="btnChart1" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon">&#xe68a;</i>不良代碼統計</button>
            <button type="button" id="btnChart2" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon">&#xe68a;</i>維修代碼統計</button>
            <button type="button" id="btnChart3" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon">&#xe68a;</i>維修位置統計</button>
            <button type="button" id="btnChart4" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon">&#xe68a;</i>責任單位統計</button>
            <button type="button" id="btnExport" class="layui-btn layui-btn-normal layui-btn-sm"><i class="fa fa-file-excel-o"></i>導出全部數據</button>
        </div>
    </div>
</div>

@section Scripts{
    <script type="text/javascript">
        layui.config({
            base: '../lib/layui_ext/',
        }).extend({
            excel: 'excel',
        });
    </script>
    <script type="text/javascript">

        function formatJSONDate(jsonDate) {
            if (jsonDate == null) {
                return "";
            }
            else {
                var date = eval(jsonDate.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"));
                var myDate = new Date(date);
                var yy = myDate.getFullYear();
                var mm = (myDate.getMonth() + 1 < 10 ? '0' : '') + (myDate.getMonth() + 1);
                var dd = (myDate.getDate() < 10 ? '0' : '') + myDate.getDate();
                var h = (myDate.getHours() < 10 ? '0' : '') + myDate.getHours();
                var m = (myDate.getMinutes() < 10 ? '0' : '') + myDate.getMinutes();
                var s = (myDate.getSeconds() < 10 ? '0' : '') + myDate.getSeconds();
                //mm + "/" + dd + " " +
                //var output = yy + "-" + mm + "-" + dd + " " + h + ":" + m + ":" + s;
                var output = yy + mm + dd + h + m + s;
                // myDate.getHours() + ":" + myDate.getMinutes() + ":" + myDate.getSeconds();
                return output;
            }
        }

        function getLineInfoList(data)
        {
            $.ajax(
                {
                    url: '@Url.Action("GetUnitLineJson", "REP")',
                    dataType: 'json',
                    data: { "unit_no": $("#unit").val() },
                    type: 'post',
                    success: function (result) {
                        console.info(result.data);
                        $("#line").empty();//清空下拉框的值
                        $.each(result.data, function (index, item) {
                            $("#line").append($("<option>").text(item.text).val(item.value))
                        });
                        $("#line option:eq(1)").attr("selected", 'selected'); //默认选择第一个选项
                        layui.form.render("select");//重新渲染 固定写法
                    },
                    error: function (result) {
                        alert(result);
                    }
                });
        };

        function getStationList(data)
        {
            $.ajax(
                {
                    url: '@Url.Action("GetUnitStationJson", "REP")',
                    dataType: 'json',
                    data: { "unit_no": $("#unit").val() },
                    type: 'post',
                    success: function (result) {
                        console.info(result.data);
                        $("#station").empty();//清空下拉框的值
                        $.each(result.data, function (index, item) {
                            $("#station").append($("<option>").text(item.text).val(item.value))
                        });
                        $("#station option:eq(1)").attr("selected", 'selected'); //默认选择第一个选项
                        layui.form.render("select");//重新渲染 固定写法
                    },
                    error: function (result) {
                        alert(result);
                    }
                });
        };

        layui.use(['jquery', 'excel', 'layer'], function () {
            var $ = layui.jquery;
            var layer = layui.layer;
            var excel = layui.excel;

            $('#btnExport').on('click', function () {
                
                $.ajax({
                    url: '@Url.Action("REP012Query", "REP")',
                    dataType: 'json',
                    success(res) {
                        var data = res.data;
                        data = excel.filterExportData(data, [
                            'unitNO',
                            'lineDesc',
                            'createDate',
                            'month',
                            'weekOfYearISO',
                            'stationName',
                            'wipNO',
                            'planQTY',
                            'barcodeNo',
                            'modelNO',
                            'itemNO',
                            'semiItemNo',
                            'oldPartNo',
                            'newPartNo',
                            'ngNo',
                            'ngReasonDesc',
                            'locationNo',
                            'changeMaterial',
                            'repairNo',
                            'rmaReasonDesc',
                            'repairType2',
                            'memo',
                            'repairDesc',
                            'ngType2',
                            'rrDesc',
                            'userNo',
                            'userName',
                            'replyDate',
                            'testDate',
                            'testUserNo',
                            'testUserName',
                            'testTypeName',
                            'qaTypeName',
                            'ngReasonDescEn',
                            'partNo',
                            'pinNo',
                            'reelNo',
                            'dateCode',
                            'vendorCode',
                            'replyReason',
                            'replyMeasure',
                            'replyUserNo',
                            'replyUserName'
                        ]);

                        data.unshift({
                            unitNO: "製程單位", lineDesc: "線別", createDate: "維修時間", month: "月份", weekOfYearISO: "第幾週", stationName: "站別", wipNO: "工單號碼", planQTY: "數量", barcodeNo: "條碼", modelNO: "機種", itemNO: "料號", semiItemNo: "半成品料號", oldPartNo: "舊料號", newPartNo: "新料號",
                            ngNo: "不良代碼", ngReasonDesc: "不良描述", locationNo: "維修位置", changeMaterial: "更換零件", repairNo: "維修原因", rmaReasonDesc: "維修原因描述", repairType2: "維修類別", memo: "維修備註", repairDesc: "維修描述",
                            ngType2: "不良類別", rrDesc: "不良責任類別", userNo: "維修工號", userName: "維修人員", replyDate: "回覆時間", testDate: "測試時間", testUserNo: "測試工號", testUserName: "測試人員"
                            , testTypeName: "測試類別", qaTypeName: "QA類別", ngReasonDescEn: "英文不良描述", partNo: "零件料號", pinNo: "腳位", reelNo: "料卷號"
                            , dateCode: "日期碼", vendorCode: "供應商代碼", replyReason: "回覆原因"
                            , replyMeasure: "回覆對策", replyUserNo: "回覆工號", replyUserName: "回覆人員"
                        });

                        var timestart = Date.now();
                        excel.downloadExcel(data, '維修數據' + formatJSONDate(Date.now().toString()), 'xlsx');
                        var timeend = Date.now();

                        var spent = (timeend - timestart) / 1000;
                        layer.alert('導出全部數據耗時 ' + spent + ' s');
                    }
                    , error() {
                        layer.alert('導出全部數據失敗');
                    }
                });
            });
        });

        layui.use(['form', 'layer', 'laydate'], function () {
            form = layui.form;
            laydate = layui.laydate;
            laydate.render({
                elem: '#dateStart'
                , trigger: 'click'
                , format: 'yyyy/MM/dd'
                , theme: 'grid'
            });

            laydate.render({
                elem: '#dateEnd'
                , trigger: 'click'
                , format: 'yyyy/MM/dd'
                , theme: 'grid'
            });

            form.on('select(productType)', function (data)
            {
                $("#productTypeNo").val(data.value);

            });

            form.on('select(testType)', function (data) {
                $("#testTypeNo").val(data.value);

            });


            form.on('select(unit)', function (data) {
                $("#unitNo").val(data.value);

                getLineInfoList(data.value);

                getStationList(data.value);
            });

            form.on('select(line)', function (data) {
                $("#lineID").val(data.value);

            });

            form.on('select(station)', function (data) {
                $("#stationID").val(data.value);

            });

        });

        $('#btnChart1').click(function ()
        {
            var param = productTypeNo.value + '_' + testTypeNo.value + '_' + unitNo.value + '_' + lineID.value + '_' + stationID.value + '_' + wipNO.value + '_' + itemNO.value + '_' + dateStart.value + '_' + dateEnd.value + '_' + modelNO.value + '_' + itemPN.value;
            hg.open('不良代碼統計', '/REP/REP012A/' + param, 800, 600);
        });

        $('#btnChart2').click(function () {
            var param = productTypeNo.value + '_' + testTypeNo.value + '_' + unitNo.value + '_' + lineID.value + '_' + stationID.value + '_' + wipNO.value + '_' + itemNO.value + '_' + dateStart.value + '_' + dateEnd.value + '_' + modelNO.value + '_' + itemPN.value;
            hg.open('維修代碼統計', '/REP/REP012B/' + param, 800, 600);
        });

        $('#btnChart3').click(function () {
            var param = productTypeNo.value + '_' + testTypeNo.value + '_' + unitNo.value + '_' + lineID.value + '_' + stationID.value + '_' + wipNO.value + '_' + itemNO.value + '_' + dateStart.value + '_' + dateEnd.value + '_' + modelNO.value + '_' + itemPN.value;
            hg.open('維修位置統計', '/REP/REP012C/' + param, 800, 600);
        });

        $('#btnChart4').click(function () {
            var param = productTypeNo.value + '_' + testTypeNo.value + '_' + unitNo.value + '_' + lineID.value + '_' + stationID.value + '_' + wipNO.value + '_' + itemNO.value + '_' + dateStart.value + '_' + dateEnd.value + '_' + modelNO.value + '_' + itemPN.value;
            hg.open('責任單位統計', '/REP/REP012D/' + param, 800, 600);
        });

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

        var tableCols = [[
            {
                field: 'unitNO',
                width: 80,
                title: '製程',
                sort: true
            },
            {
                field: 'lineDesc',
                width: 80,
                title: '線別',
                sort: true
            },
            {
                field: 'stationName',
                width: 80,
                title: '站別',
                sort: true
            },
            {
                field: 'wipNO',
                width: 160,
                title: '工單號碼',
                sort: true
            },
            {
                field: 'itemNO',
                title: '料號',
                width: 160,
                sort: true
            },
            {
                field: 'barcodeNo',
                title: '條碼',
                width: 160,
                sort: true
            },
            {
                field: 'typeNo',
                title: '測試類別',
                width: 100,
                sort: true
            },
            {
                field: 'reasonNo',
                title: '不良代碼',
                width: 100,
                sort: true
            },
            {
                field: 'ngReasonDesc',
                title: '不良描述',
                width: 120,
                sort: true
            },
            {
                field: 'repairNo',
                title: '維修代碼',
                width: 100,
                sort: true
            },
            {
                field: 'rmaReasonDesc',
                title: '維修原因描述',
                sort: true
            },
            {
                field: 'locationNo',
                title: '維修位置',
                width: 100,
                sort: true
            },
            {
                field: 'rrDesc',
                title: '責任單位',
                width: 100,
                sort: true
            },
            {
                field: 'createDate',
                title: '維修日期',
                width: 120,
                templet: '<div>{{ layui.util.toDateString(d.createDate, "yyyy/MM/dd") }}</div>'
            }]
        ];

        //var param = productTypeNo.value + '_' + testTypeNo.value + '_' + unitNo.value + '_' + lineID.value + '_' + stationID.value + '_' + wipNO.value + '_' + itemNO.value + '_' + dateStart.value + '_' + dateEnd.value;

        //基本数据表格
        var table = hg.table.datatable('query', '維修資料統計', '/REP/REP012Query', {}, tableCols, toolbar, true, 'full-100', ['filter', 'print', 'exports']);

    </script>
}