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

<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="12%">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 <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="10%">MTD Dev.</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="12%">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="10%">MTD Dev.</th>
                                <th width="20%">Remarks</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(monthModuleTypeDto, index) in monthModuleTypeDtos">
                                <td>{{ index + 1 }}</td>
                                <td>{{ monthModuleTypeDto.moduleType }}</td>
                                <td>
                                    @*<span v-for="line in monthModuleTypeDto.lines" class="label"
                                          style="color:#ffc039; margin-left:2px" v-on:click="jump(line.id, line.floor, line.line)">
                                        {{ line.line }} line <br />
                                    </span>*@
                                    <span v-for="line in monthModuleTypeDto.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">
                                                {{ monthModuleTypeDto.planCapacity + monthModuleTypeDto.lastModuleCapacity }}
                                            </span>
                                            <span class="label label-success badge">
                                                {{ monthModuleTypeDto.capacity }}
                                            </span>
                                            <span class="label label-default badge">
                                                {{ (monthModuleTypeDto.capacity > (monthModuleTypeDto.planCapacity + monthModuleTypeDto.lastModuleCapacity) ) ? 0 
                                                    : (monthModuleTypeDto.capacity - monthModuleTypeDto.planCapacity - monthModuleTypeDto.lastModuleCapacity) }}
                                            </span>
                                        </small>
                                    </div>
                                    <div class="progress xs">
                                        <div class="progress-bar progress-bar-green" v-bind:style="{ width: monthModuleTypeDto.reach + '%'}"></div>
                                    </div>
                                </td>
                                <td>
                                    <a style="color:#ffc039;" @* target="_blank" :href=monthModuleTypeDto.href *@ >
                                        {{ monthModuleTypeDto.difference }}
                                    </a>
                                </td>
                                <td>
                                    <textarea :id="'textarea'+index" class="form-control"
                                              style="background-color: #001529; border: 0px; color:#ffc039;resize:vertical"
                                        rows="4" placeholder="...">{{ monthModuleTypeDto.remark }}</textarea>
                                    
                                    <div style="text-align:left; padding-top: 5px; padding-left: 2px;">
                                        @* <a class="btn btn-sm btn-default" v-on:click="updateRemark('textarea'+index)"> <i class="fa fa-edit"> 编辑</i></a> *@
                                        <a class="btn btn-sm btn-default" v-on:click="updateRemark('textarea'+index, monthModuleTypeDto.id, monthModuleTypeDto.year, monthModuleTypeDto.month)">
                                            <i class="fa fa-save"> 保存</i></a>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

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