@model SetObservationViewModel
@{
    ViewBag.Title = "设置观察价格";
    Layout = "~/Views/Shared/_InfoLayout.cshtml";
    var tradeModel = Model.trade;
    tradeModel.SettlementAmount = null;
}
@section CSS{
    <style type="text/css">
        .btn {
            border: none
        }
    </style>
}
@section JS
{
    <script>
        var pageModel =@Json.Serialize(Model);
    </script>
    <script src="~/Scripts/app/trade/setObservationPrice.js?v=@(HtmlUtil.JsVersion)"></script>
}
<div id="vueDiv" class="yc-panel">
    <div class="row">

        <div class="form-group col-6">
            <label class="formlabel">标的代码</label>
            <input class="text-box" v-model="trade.UnderlyingCode" readonly="readonly" type="text" />
        </div>

        <div class="form-group col-6">
            <label class="formlabel">持仓数量</label>
            <input class="text-box" v-model="trade.TradeAmount" readonly="readonly" type="text" />
        </div>

        <!--障碍期权-->
        <template v-if="trade.TradeType == '障碍期权'">
            <div class="form-group col-6">
                <label class="formlabel">障碍类型</label>
                <input class="text-box" v-model="trade.trade_barrier_option.BarrierType" readonly="readonly" type="text" />
            </div>
            <div class="form-group col-6" v-if="trade.trade_barrier_option.BarrierType != '双障碍敲入' && trade.trade_barrier_option.BarrierType != '双障碍敲出'">
                <label class="formlabel">障碍价格</label>
                <input class="text-box" v-model="trade.trade_barrier_option.BarrierPrice" readonly="readonly" type="text" />
            </div>
            <div class="form-group col-6" v-if="(trade.trade_barrier_option.BarrierType == '双障碍敲入' || trade.trade_barrier_option.BarrierType == '双障碍敲出')">
                <label class="formlabel">低障碍价格</label>
                <input class="text-box" v-model="trade.trade_barrier_option.BarrierPrice" readonly="readonly" type="text" />
            </div>
            <div class="form-group col-6" v-if="(trade.trade_barrier_option.BarrierType == '双障碍敲入' || trade.trade_barrier_option.BarrierType == '双障碍敲出')">
                <label class="formlabel">高障碍价格</label>
                <input class="text-box" v-model="trade.trade_barrier_option.UpperBarrierPrice" readonly="readonly" type="text" />
            </div>
        </template>

        <!--双鲨期权-->
        <template v-if="trade.TradeType == '双鲨期权'">
            <div class="form-group col-6">
                <label class="formlabel">低障碍价格</label>
                <input class="text-box" v-model="trade.trade_double_sharkfin_option.BarrierLow" readonly="readonly" type="text" />
            </div>
            <div class="form-group col-6">
                <label class="formlabel">高障碍价格</label>
                <input class="text-box" v-model="trade.trade_double_sharkfin_option.BarrierHigh" readonly="readonly" type="text" />
            </div>
        </template>

        <!--区间累积期权-->
        <template v-if="trade.TradeType == '区间累积期权'">
            <div class="form-group col-6">
                <label class="formlabel">区间下限</label>
                <input class="text-box" v-model="trade.trade_rangeaccrual.LowerRange" readonly="readonly" type="text" />
            </div>
            <div class="form-group col-6">
                <label class="formlabel">区间上限</label>
                <input class="text-box" v-model="trade.trade_rangeaccrual.UpperRange" readonly="readonly" type="text" />
            </div>
        </template>

        <!--雪球期权-->
        <template v-if="trade.TradeType == '雪球期权'">
            <div class="form-group col-6">
                <label class="formlabel">敲出障碍价格</label>
                <input class="text-box" v-model="checkResult.KOBarrier" readonly="readonly" type="text" />
            </div>
            <div class="form-group col-6">
                <label class="formlabel">敲入障碍价格</label>
                <input class="text-box" v-model="trade.trade_snowball.KIBarrier" readonly="readonly" type="text" />
            </div>
        </template>

        <!--凤凰期权-->
        <template v-if="trade.TradeType == '凤凰期权'">
            <div class="form-group col-6">
                <label class="formlabel">敲出障碍价格</label>
                <input class="text-box" v-model="checkResult.KOBarrier" readonly="readonly" type="text" />
            </div>
            <div class="form-group col-6">
                <label class="formlabel">敲入障碍价格</label>
                <input class="text-box" v-model="trade.trade_autocall.KIBarrier" readonly="readonly" type="text" />
            </div>
            <div class="form-group col-6">
                <label class="formlabel">派息障碍价格</label>
                <input class="text-box" v-model="trade.trade_autocall.CouponBarrier" readonly="readonly" type="text" />
            </div>
        </template>

        <!--气囊结构-->
        <div class="form-group col-6" v-if="trade.TradeType == '气囊结构'">
            <label class="formlabel">障碍价格</label>
            <input class="text-box" v-model="trade.trade_airbag.Barrier" readonly="readonly" type="text" />
        </div>

        <!--累计期权-->
        <template v-if="trade.TradeType == '累计期权'">
            <div class="form-group col-6">
                <label class="formlabel">敲出障碍价格</label>
                <input class="text-box" v-model="checkResult.KOBarrier" readonly="readonly" type="text" />
            </div>
        </template>

        <!--观察日期-->
        <div class="form-group col-6">
            <label class="formlabel">观察日期</label>
            <input class="text-box" id="ObservationDate" v-on:change="checkObservation" v-model="SetObservationDate" type="text" />
            <span style="color:red; float: initial; margin-top: 8px; margin-right: -30px;" v-show="!checkResult.IsObservationDay">非观察日</span>
        </div>

        <div class="form-group col-6">
            <label class="formlabel">标的价格</label>
            <input class="text-box" v-model="SetObservationPrice" v-on:change="checkObservation" type="number" min="0" />
            <a href="javascript:void(0)" v-on:click="refreshUnderlyingPrice">
                <span title="使用系统标的价格" class="glyphicon glyphicon-refresh"></span>
            </a>
        </div>

        <!--观察前状态-->
        <div class="form-group col-6" v-if="ShowPreObStatus">
            <label class="formlabel">观察前状态</label>
            <input class="text-box" v-model="PreObStatus" readonly="readonly" type="text" />
        </div>

        <!--结算金额-->
        <div class="form-group col-6" v-if="trade.TradeType == '雪球期权'||trade.TradeType=='凤凰期权'">
            <label class="formlabel">结算金额</label>
            <input class="text-box" v-model="trade.SettlementAmount" type="number" />
            <a href="javascript:void(0)" v-on:click="GetSettleMentAmount">
                <span title="" class="glyphicon glyphicon-refresh"></span>
            </a>
        </div>

        <div class="form-group col-6">
            <label class="formlabel">观察后状态</label>
            <input class="text-box" v-model="trade.KnockInOutStatusObservation" readonly="readonly" type="text" />
        </div>

        <div class="form-group col-6" v-if="trade.TradeType == '区间累积期权'">
            <label class="formlabel">观察后区间收益</label>
            <input class="text-box" v-model="checkResult.rangeacc_BonusObservation" readonly="readonly" type="text" />
        </div>

        <!--雪球期权-->
        <template v-if="trade.TradeType == '雪球期权'">
            <div class="form-group col-6" v-if="trade.trade_snowball.UseOptionPayoffAtKO">
                <label class="formlabel">敲出期权行权价</label>
                <input class="text-box" v-model="trade.ActualStrike" readonly="readonly" type="text" />
            </div>

            <div class="form-group col-6" v-if="trade.trade_snowball.UseOptionPayoffAtKO">
                <label class="formlabel">敲出期权行权价2</label>
                <input class="text-box" v-model="trade.trade_snowball.SpreadStrikeAtKO" readonly="readonly" type="text" />
            </div>

            <div class="form-group col-6" v-if="trade.trade_snowball.UseOptionPayoffAtKO">
                <label class="formlabel">交割金额</label>
                <input class="text-box" v-model="checkResult.snowball_ExerciseMoneyAtKO" readonly="readonly" type="text" />
            </div>
        </template>

        <template v-if="trade.TradeType == '凤凰期权'">
            <div class="form-group col-6">
                <label class="formlabel">当前周期是否计息</label>
                <input class="text-box" v-model="checkResult.autocall_NeedCoupon" readonly="readonly" type="text" />
            </div>
        </template>

        <template v-if="trade.TradeType == '累计期权'">
            <div class="form-group col-6">
                <label class="formlabel">结算数量</label>
                <input class="text-box" v-model="checkResult.PaymentNotional" readonly="readonly" type="text" />
            </div>
            <div class="form-group col-6">
                <label class="formlabel">结算金额</label>
                <input class="text-box" v-model="checkResult.PaymentAmount" readonly="readonly" type="text" />
            </div>
        </template>

        @*<div>
                <table class="table table-client mt-4">
                    <thead>
                        <tr>
                            <th>操作</th>
                            <th>交易编号</th>
                            <th>期权类型</th>
                            <th>持仓数量</th>
                            <th>持仓名义本金</th>

                            <th>敲出障碍价格</th>
                            <th>敲入障碍价格</th>
                            <th>观察前状态</th>
                            <th>观察后状态</th>
                            <th>结算金额</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in TradeChilds">
                            <td> <button class="btn btn-primary btn-sm mr-2" type="button" v-on:click="starttradeView(item.EncryptId)">查看</button></td>
                            <td>{{item.TradeNumber}}</td>
                            <td>{{item.TradeType}}</td>
                            <td>{{item.TradeAmount}}</td>
                            <td>{{item.StockEqvNotional}}</td>

                            <td>{{item.StockEqvNotional}}</td>
                            <td>{{item.StockEqvNotional}}</td>
                            <td>{{item.StockEqvNotional}}</td>
                            <td>{{item.StockEqvNotional}}</td>
                            <td>{{item.StockEqvNotional}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>*@
        <div class="form-group col-12" v-if="trade.TradeType=='凤凰期权'">
            <span style="color: red;">备注："结算金额"不包含保底收益，如果发生敲出或到期事件，"结算金额"将汇总保底收益后计入客户的资金账户</span>
        </div>
    </div>
    <div class="clearfix"></div>
    <hr />
    <div class="form-group text-center" style="margin-top: 20px">
        <input type="button" class="btn btn-primary" value="确认" v-on:click="submit" style="margin-left: 45px;" />
        <input type="button" class="btn btn-primary" value="关闭" onclick="layer.closeMe()" />
    </div>
</div>