@{
    Layout = "~/Views/Shared/_AMESLayout.cshtml";
}

<style>
    .TR_Item_Sstyle {
        width: 60px;
        text-align: center;
        font-weight: bold;
        color: #FFFFF2;
        background-color: #2B2B2B;
    }

    .TD_Data_Sstyle {
        width: 60px;
        text-align: center;
        font-weight: bold;
    }

    .TD_Data_Rate_Sstyle {
        width: 60px;
        text-align: right;
        font-weight: bold;
        padding: 5px 5px 5px 5px
    }
</style>
<script src="~/Highcharts-7.1.2/highcharts.js"></script>
<script src="~/Highcharts-7.1.2/modules/exporting.js"></script>
<script src="~/Highcharts-7.1.2/modules/export-data.js"></script>

<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 id="pieChart" style="width: 100%; height: 300px; margin: 0 auto"></div>
        <div id="divChart" style="width: 100%; height: 300px; margin: 0 auto"></div>
        <input type="hidden" id="param_list" value="@ViewData["ParamList"]" />
        @Html.Raw(ViewData["DayDataList"])
    </div>
</div>

@section Scripts {
    @{ await Html.RenderPartialAsync("_ValidationScriptsPartial");
        await Html.RenderPartialAsync("_FileinputScriptsPartial"); }

<script type="text/javascript">
        $(document).ready(function () {

            $.ajax({
                type: "Post",
                url: '/RPT/GetExceptionTime4RPT001D?id=' + param_list.value,
                contentType: "application/json; charset=utf-8",
                dataType: 'json',
                success: function (response) {
                    var errorData = new Array();
                    var idx = 0;
                    $.each(response, function (i, item) {
                        errorData[idx] = new Array();
                        errorData[idx][0] = item["exceptionNo"];
                        errorData[idx][1] = item["exceptionTime"];
                        idx = idx + 1;
                    });

                    Highcharts.chart('pieChart', {
                        chart: {
                            type: 'pie'
                        },
                        title: {
                            text: '@ViewBag.Title2'
                        },
                        subtitle: {
                            text: ''
                        },
                        plotOptions: {
                            pie: {
                                allowPointSelect: true,
                                cursor: 'pointer',
                                dataLabels: {
                                    enabled: false
                                },
                                showInLegend: true
                            }
                        },
                        series: [{
                            type: 'pie',
                            name: '數值',
                            data: errorData
                        }]
                    });
                },
                error: function () {
                    alert("查無異常工時統計資料!");
                    $("#pieChart").empty();
                }
            });

            $.ajax({
                type: "Post",
                url: '/RPT/GetDayData4RPT001D?id=' + param_list.value,
                contentType: "application/json; charset=utf-8",
                dataType: 'json',
                success: function (response) {
                    var idx = 0;
                    var xAxisData = new Array();
                    var yieldData = new Array();
                    $.each(response, function (i, item) {
                        yieldData[idx] = item["yield"];
                        xAxisData[idx] = item["day"];
                        idx = idx + 1;
                    });

                    Highcharts.chart('divChart', {
                        title: {
                            text: '@ViewBag.Title2'
                        },
                        subtitle: {
                            text: ''
                        },
                        xAxis: {
                            categories: xAxisData
                        },
                        yAxis: {
                            title: {
                                text: '@ViewBag.Title2'
                            }
                        },
                        plotOptions: {
                            line: {
                                dataLabels: {
                                    enabled: true
                                },
                                enableMouseTracking: false
                            }
                        },
                        series: [{
                            type: 'column',
                            name: '日期',
                            data: yieldData
                        },
                        {
                            type: 'line',
                            name: '數值',
                            data: yieldData
                        }]
                    });
                },
                error: function () {
                    alert("查無資料!");
                    $("#divChart").empty();
                }
            });
        });

</script>


}