@model AMESCoreStudio.WebApi.DTO.AMES.RPT004ViewDto
@using Microsoft.AspNetCore.Mvc.Localization
@inject IViewLocalizer Localizer

@{
    ViewData["Title"] = @Localizer["LineHeadDashboard"];
    Layout = "~/Views/Shared/_AMESLayout.cshtml";
}

<style>
    .layui-form-label {
        width: auto;
    }

    .spanUnitClass {
        font-size: 20pt;
        display: inline;
    }

    .spanMasterTitleClass {
        color: #11E1DF;
        background-color: #262626;
        font-size: 5vmin;
        font-weight: bold;
        padding: 5px;
    }

    .spanDetailTitleClass {
        color: #fff900;
        background-color: #262626;
        font-size: 5vmin;
        font-weight: bold;
        padding: 5px;
    }

    .spanDetailNumberClass {
        font-size: 9vmin;
        font-weight: bold;
        padding: 10px;
        margin: 10px 0px;
    }

    .Col {
        background-color: #7ebd36;
        font-size: 9vmin;
        font-weight: bold;
        height: 50vh;
        margin: 10px;
        display: flow-root;
    }

    .ColValue {
        display: flex;
        align-items: center;
        height: 30vh;
        font-size: 20vmin;
        color: #000000;
    }

    .Link-bottom {
        border-bottom: solid #000000 1px;
        margin: 10% 0 0 0;
    }

    .Link-right {
        border-right: solid #FFFFFF 1px;
        margin-bottom: 10px;
    }
</style>

<div class="layui-card">
    <form id="rpt004Form" enctype="multipart/form-data" method="post" asp-action="RPT004" class="layui-form">
        <div class="layui-card-body" style="background-color:#000000">
            <div class="layui-row">
                <div class="layui-col-md12 layui-form-item spanMasterTitleClass" style="margin-top:5px;">
                    <div class="layui-inline">
                        <label class="layui-form-label">@Localizer["ProductionProcess"]</label>
                        <div class="layui-input-inline" style=" color: #000000;font-size: 3vmin;">
                            <select id="unit" lay-filter="unit" lay-verify="required" lay-submit asp-for="unitNo" asp-items="@ViewBag.FactoryUnitList">
                            </select>
                        </div>
                        <label class="layui-form-label">@Localizer["ProductionLine"]</label>
                        <div class="layui-input-inline" style=" color: #000000;font-size: 3vmin;">
                            <select id="lineId" lay-filter="lineId" lay-verify="required" lay-submit asp-for="lineId">
                            </select>
                        </div>
                        <button class="layui-btn" lay-submit lay-filter="querysubmit">
                            @Localizer["Query"]
                        </button>
                    </div>
                </div>
            </div>
            <div class="layui-row" style="text-align: center;">
                <div class="layui-col-md12 spanDetailTitleClass">
                    <div class="layui-col-md5">
                        <label class="layui-form-label">@Localizer["WipNo"]</label>
                        <label class="layui-form-label" style="text-align: left; color: #FFFFFF">@Model.wipNo</label>
                    </div>
                    <div class="layui-col-md4">
                        <label class="layui-form-label">@Localizer["ItemNo"]</label>
                        <label class="layui-form-label" style="text-align: left; color: #FFFFFF">@Model.product</label>
                    </div>
                    <div class="layui-col-md3">
                        <label class="layui-form-label">@Localizer["PlanQty"]</label>
                        <label class="layui-form-label" style="text-align: left; color: #FFFFFF">@Model.wipNoQty pcs</label>
                    </div>
                </div>
            </div>
            <div class="layui-row" style="text-align: center;">
                <div class="layui-col-md12 spanDetailTitleClass">
                    <div class="layui-col-md6">
                        <label class="layui-form-label">@Localizer["StartTime"]</label>
                        <label class="layui-form-label" style="text-align: left; color: #FFFFFF">@Model.wipNoStrDate</label>
                    </div>
                    <div class="layui-col-md6">
                        <label class="layui-form-label">@Localizer["CurrentTime"]</label>
                        <label class="layui-form-label" style="text-align: left; color: #FFFFFF">@DateTime.Now.ToString("yyyy/MM/dd HH:mm")</label>
                    </div>
                </div>
            </div>
            <div class="layui-row" style="text-align: center;">
                <div class="layui-col-md12 spanDetailTitleClass">
                    <div class="layui-col-md4">
                        <label class="layui-form-label">@Localizer["StandardWorkingHours"]</label>
                        <label class="layui-form-label" style="text-align: left; color: #FFFFFF">@Model.workTime min</label>
                    </div>
                    <div class="layui-col-md4">
                        <label class="layui-form-label">@Localizer["TotalInput"]</label>
                        <label class="layui-form-label" style="text-align: left; color: #FFFFFF">@Model.cumulativeQty pcs</label>
                    </div>
                    <div class="layui-col-md4">
                        <label class="layui-form-label">@Localizer["Station"]</label>
                        <label class="layui-form-label" style="text-align: left; color: #FFFFFF">@Model.stationName</label>
                    </div>
                </div>
            </div>
            <div class="layui-row" style="text-align: center;background-color: #262626;">
                <div class="layui-col-md4">
                    <div class="layui-row Col">
                        <div class="layui-col-md12">
                            <div class="grid-demo" style="color: #000000;margin:10% 0 0 0;">
                                <p style="line-height:0.9">@Localizer["ExpectedInputQuantity"]</p>
                                <div class="Link-bottom"></div>
                            </div>
                        </div>
                        <div class="layui-col-md12 ColValue">
                            <div class="layui-col-md12">
                                <span>@Model.requiredQty</span>
                                <p class="spanUnitClass">pcs</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-row Col">
                        <div class="layui-col-md12 ">
                            <div style="color: #000000;margin:10% 0 0 0;">
                                <p style="line-height:0.9">@Localizer["ActualInputQuantity"]</p>
                                <div class="Link-bottom"></div>
                            </div>
                        </div>
                        <div class="layui-col-md12 ColValue">
                            <div class="layui-col-md12">
                                <spen>@Model.actualQty</spen>
                                <p class="spanUnitClass">pcs</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-row Col">
                        <div class="layui-col-md12">
                            <div class="grid-demo" style="color: #000000;margin:10% 0 0 0;">
                                <p style="line-height:0.9">@Localizer["ProductionEfficiency"]</p>
                                <div class="Link-bottom"></div>
                            </div>
                        </div>
                        <div class="layui-col-md12 ColValue">
                            <div class="layui-col-md12">
                                <spen>@Model.efficiency</spen>
                                <p class="spanUnitClass">%</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
@section Scripts {
    <script type="text/javascript">
        layui.use(['form', 'laydate'], function () {
            var form = layui.form

            form.on('select(unit)', function (data) {
                getUnitLineList(data.value);
            });
        });

        $(document).ready(function () {
            getUnitLineList($("#unit").val());

            var efficiency = @Model.efficiency;
            // 無生產效率
            if (efficiency == 0) {
                $(".Col").css("background-color", "#919191");
            }
            // 小於90 紅色
            else if (efficiency <= 90) {
                $(".Col").css("background-color", "#ff0000");
            }
            // 90 ~ 93 橘色
            else if (efficiency > 90 && efficiency <= 93) {
                $(".Col").css("background-color", "#ffb900");
            }
            // 大於93 綠色
            else if (efficiency > 93) {
                $(".Col").css("background-color", "#7ebd36");
            }
        });


        function getUnitLineList(data) {
            $.ajax(
                {
                    url: "@Url.Action("GetUnitLineJson", "BAS")",
                    dataType: 'json',
                    data: { "unit_no": $("#unit").val() },
                    type: 'post',
                    success: function (result) {
                        $("#lineId").empty();//清空下拉框的值
                        $.each(result.data, function (index, item) {
                            $("#lineId").append($("<option>").text(item.text).val(item.value));
                        });
                        $("#lineId").val(@Model.lineId);
                        layui.form.render("select");//重新渲染 固定写法
                    },
                    error: function (result) {
                        hg.msghide('連線失敗！');
                    }
                });
        };

        // 自動提交
        function autoSubmitForm() {
            document.getElementById('rpt004Form').submit();
        }

        // 每30秒執行autoSubmitForm
        setInterval(autoSubmitForm, 30000);
    </script>
}