@model TradeAccumulatorChangeModel

@{
    ViewBag.Title = "累计期权换月";
    Layout = "~/Views/Shared/_InfoLayout.cshtml";
}
@section JS{
    <script type="text/javascript">
        const page = @Json.Serialize(Model);
    </script>
    <script src="~/front/calendar?v=@(HtmlUtil.JsVersion)"></script>
    <script src="~/Scripts/fast/fastVue.components.js?v=@HtmlUtil.JsVersion"></script>
    <script src="~/Scripts/app/tradeHelper.js?v=@HtmlUtil.JsVersion"></script>
    <script src="~/Scripts/app/trade/AccumulatorChange.js?v=@(HtmlUtil.JsVersion)"></script>
}

<div id="pageVue">

    <div class="yc-panel" v-if="canEdit">
        <div class="row">
            <div class="col">
                <label>换月日期</label>
                <vue-datepicker name="ValueDate" class="text-box" :mindate="TradeDate" :maxdate="ValueDate" v-model="ChangeData.ValueDate" v-on:input="changeValueDate" />
            </div>
            <div class="col">
                <label>标的代码</label>
                <input type="text" id="UnderlyingCode" name="UnderlyingCode" v-model="ChangeData.UnderlyingCode" />
            </div>
            <div class="col"></div>
        </div>
        <div class="row mt-3">
            <div class="col">
                <label>执行价格</label>
                <vue-number-input name="Strike" v-model="ChangeData.Strike" v-bind:format="inputFormatStrike"></vue-number-input>
            </div>
            <div class="col">
                <label>障碍价格</label>
                <vue-number-input name="Barrier" v-model="ChangeData.KOBarrier" v-on:input="changeKOBarrier" v-bind:format="inputFormatStrike"></vue-number-input>
            </div>
            <div class="col">
                <label>观察频率</label>
                <a href="javascript:;" class="ml-2" title="设置观察日" v-on:click="setObservationDates('#KO')" tabindex="-1">
                    <i class="fa fa-pencil-square"></i>
                </a>
            </div>
        </div>
        <div class="mt-3" v-show="ChangeData.HasObCheck">
            <label class="ml-4"><input type="checkbox" v-model="removeChecks" />&nbsp;删除从{{ChangeData.ValueDate}}到{{ChangeData.NextDate}}之间的累计收益记录，已经转远期的远期交易需要手工删除</label>
        </div>
        <div class="mt-3 text-danger">{{editWarningTips}}</div>
        <div class="row mt-3">
            <div class="col"></div>
            <div class="col">
                <button type="button" class="btn btn-primary" v-on:click="saveChangeData">保存</button>
            </div>
            <div class="col"></div>
        </div>
    </div>

    <div class="yc-panel">
        <div class="mb-2">
            <strong>换月记录</strong>
        </div>
        <table class="table table-bordered">
            <colgroup>
                <col span="1" width="100" />
                <col span="1" width="100" />
                <col span="1" width="100" />
                <col span="1" width="100" />
                <col span="1" width="100" />
                <col span="1" width="200" />
            </colgroup>
            <thead>
                <tr>
                    <th>换月日期</th>
                    <th>标的代码</th>
                    <th>执行价</th>
                    <th>障碍价格</th>
                    <th>观察频率</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in HisDataList">
                    <td>{{item.ValueDate}}</td>
                    <td>{{item.UnderlyingCode}}</td>
                    <td>{{formatStrike(item.Strike)}}</td>
                    <td>{{formatStrike(item.KOBarrier)}}</td>
                    <td><button type="button" class="btn btn-primary" v-on:click="showObservationDates(item)">查看</button></td>
                    <td>
                        <div v-if="canEdit&&item.ValueDate!==TradeDate">
                            <button type="button" class="btn btn-primary" v-on:click="editData(item)">修改</button>
                            <button type="button" class="btn btn-primary" v-on:click="removeData(item)">删除</button>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="modal" tabindex="-1" id="modalKOObservationShow">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{KOObservationShow.date}}&emsp;观察频率</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <table class="table table-hover">
                        <thead>
                            <tr v-if="KOObservationShow.flag===4">
                                <th>观察日</th>
                                <th>结算日</th>
                                <th>障碍价格</th>
                            </tr>
                            <tr v-else>
                                <th>观察日</th>
                                <th>障碍价格</th>
                            </tr>
                        </thead>
                        <tbody>
                            <template v-if="KOObservationShow.flag===4">
                                <tr v-for="item in KOObservationShow.list">
                                    <td>{{item.obdate}}</td>
                                    <td>{{item.stdate}}</td>
                                    <td>{{item.barrier}}</td>
                                </tr>
                            </template>
                            <template v-else>
                                <tr v-for="item in KOObservationShow.list">
                                    <td>{{item.obdate}}</td>
                                    <td>{{item.barrier}}</td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

</div>