@{
    ViewData["TitleController"] = "机种一览v1";
    ViewData["TitleAction"] = "";
    ViewData["TitleActionDescription"] = "机种一览v1";
    ViewData["Title"] = "机种一览v1";
}

<div id="app">
    <div class="col-md-12">
        <div class="box box-primary">
            <div class="box-body">
                <div id="homeTop" style="top: 50px; height: 80px;position: fixed; z-index: 8001; width: 1300px;background-color: #001529;">
                    <div class="col-lg-6">
                        <h2>
                            {{ month }}月机种一览
                            <small style="color:#FCC439">
                                ( {{ title }}, 截至：{{ statisticsTime }} )
                            </small>
                        </h2>
                    </div>
                    <div class="col-lg-6" style="top: 25px;">
                        <div class="col-lg-2">
                            <select id="selectMark" class="form-control" v-on:change="refresh()">
                                <option value="2F">2F</option>
                                <option value="1F">1F</option>
                            </select>
                        </div>
                        <div class="col-lg-3">
                            <select id="selectYear" class="form-control" v-on:change="refresh()">
                                @for (int i = 2023; i <= DateTime.Now.Year + 1; i++)
                                {
                                    <option value=@i>@i 年</option>
                                }
                            </select>
                        </div>
                        <div class="col-lg-2">
                            <select id="selectMonth" class="form-control" v-on:change="refresh()">
                                @for (int i = 1; i <= 12; i++)
                                {
                                    <option value=@i>@i 月</option>
                                }
                            </select>
                        </div>
                        <div class="col-lg-3">
                            <button type="button" class="btn btn-default" v-on:click="lastMonthClick()">
                                <span class="glyphicon glyphicon-chevron-left"></span>
                            </button>
                            <button type="button" class="btn btn-default" v-on:click="nextMonthClick()">
                                <span class="glyphicon glyphicon-chevron-right"></span>
                            </button>
                        </div>
                        <div class="col-lg-2">
                            <a class="btn btn-default" href="http://eyz2rp3.toc.eink.com/ERS/#/Home/IndexPage">
                                导航首页
                            </a>
                        </div>
                    </div>
                </div>
                <div id="homeTable1" style="top: 130px; position: fixed; z-index: 8000; height: 60px; width: 1300px;background-color: #001529;">
                    <table id="table1" class="table table-hover">
                        <thead>
                            <tr>
                                <th width="5%">No</th>
                                <th width="15%">
                                    Model
                                    <br />
                                    <div class="col-lg-12">
                                        <div class="col-lg-6">
                                            <select id="selectModelPrefix" class="form-control" v-on:change="onClickFilter()">
                                                <option v-for="modelPrefix in modelPrefixs">{{ modelPrefix }}</option>
                                            </select>
                                        </div>
                                        <div class="col-lg-6">
                                            @* <select id="selectModelSize" class="form-control" v-on:change="onClickFilter()">
                                                <option v-for="modelSize in modelSizes" :value="modelSize">{{ modelSize  }}</option>
                                            </select> *@
                                            <input id="selectModelSize" class="form-control" maxlength="3" v-on:input="onClickFilter()" />
                                        </div>
                                    </div>
                                </th>
                                <th width="10%">
                                    Line
                                    <br />
                                    <select id="selectLine" class="form-control" v-on:change="onClickFilter()">
                                        <option v-for="line in lines">{{ line }}</option>
                                    </select>
                                </th>
                                <th width="25%">
                                    <span class="pull-left">
                                        MPS
                                        <br />
                                        <button class="btn btn-default btn-sm" v-on:click="sort(4)">升序</button>
                                        <button class="btn btn-default btn-sm" v-on:click="sort(3)">降序</button>
                                    </span>
                                    <small class="pull-right">
                                        <span class="label label-primary badge">
                                            Planned <br />
                                            {{ totals[0] }}
                                        </span> 
                                        <span class="label label-success badge">
                                            Actual <br />
                                            {{ totals[1] }}
                                        </span>
                                        <span class="label label-default badge">
                                            Remainder <br />
                                            {{ totals[2] }}
                                        </span>
                                    </small>
                                </th>
                                <th width="15%">
                                    MTD Dev.
                                    <br />
                                    <button class="btn btn-default btn-sm" v-on:click="sort(2)">升序</button>
                                    <button class="btn btn-default btn-sm" v-on:click="sort(1)">降序</button>
                                </th>
                                <th width="20%">Remarks</th>
                            </tr>
                        </thead>
                    </table>
                </div>
                <div id="homeTable2" style="padding-top: 60px; width: 1300px">
                    <table id="table1" class="table table-hover">
                        <thead>
                            <tr>
                                <th width="5%">No</th>
                                <th width="10%">Model</th>
                                <th width="10%">Line</th>
                                <th width="30%">
                                    <span class="pull-left">MPS</span>
                                    <small class="pull-right">
                                        <span class="label label-primary badge">
                                            Planned
                                        </span>
                                        <span class="label label-success badge">
                                            Actual
                                        </span>
                                        <span class="label label-default badge">
                                            Remainder
                                        </span>
                                    </small>
                                </th>
                                <th width="15%">MTD Dev.<br/>
                                    <button class="btn btn-default btn-sm">默认</button>
                                    <button class="btn btn-default btn-sm">升序</button>
                                    <button class="btn btn-default btn-sm">降序</button>
                                </th>
                                <th width="20%">Remarks</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(v1, index) in v1s">
                                <td v-on:click="onHref(v1.href)">
                                    <span>
                                        {{ index + 1 }}
                                    </span>
                                </td>
                                <td v-on:click="onHref(v1.href)">
                                    <span v-for="model in v1.models" >
                                        {{ model }} <br />
                                    </span>
                                </td>
                                <td>
                                    <span v-for="line in v1.lines"
                                          style="color:#ffc039;">
                                        {{ line.line }} line <br />
                                    </span>
                                </td>
                                <td>
                                    <div class="clearfix">
                                        <span class="pull-left">MPS</span>
                                        <small class="pull-right">
                                            <span class="label label-primary badge">
                                                {{ v1.planCapacity + v1.lastModuleCapacity }}
                                            </span>
                                            <span class="label label-success badge">
                                                {{ v1.capacity }}
                                            </span>
                                            <span class="label label-default badge">
                                                {{ (v1.capacity > (v1.planCapacity + v1.lastModuleCapacity) ) ? 0
                                                : (v1.capacity - v1.planCapacity - v1.lastModuleCapacity) }}
                                            </span>
                                        </small>
                                    </div>
                                    <div class="progress xs">
                                        <div class="progress-bar progress-bar-green" v-bind:style="{ width: v1.reach + '%'}"></div>
                                    </div>
                                </td>
                                <td v-on:click="onHref(v1.href)">
                                    <a style="color:#ffc039;" @* target="_blank" *@ @* :href=v1.href *@>
                                        {{ v1.difference }}
                                    </a>
                                </td>
                                <td>
                                    <textarea class="form-control"
                                              style="background-color: #001529; border: 0px; color:#ffc039;resize:vertical"
                                              rows="4" placeholder="..." disabled>{{ v1.remarks }}</textarea>
                                </td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr>
                                <td width="15%" colspan="2">Total</td>
                                <td width="15%"></td>
                                <td width="25%"></td>
                                <td width="15%">
                                    <span>Advance: {{ diffs[0] }}</span> <br />
                                    <span>Delay: {{ diffs[1] }}</span> <br />
                                    <span>Difference: {{ diffs[2] }}</span>
                                </td>
                                <td width="20%"></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@section footer{
    <script src="~/js/home/home-v1.js" asp-append-version="true"></script>
}