@model TradeEditViewModel

@{
    ViewBag.Title = "交易信息 | 编辑";
    Layout = "~/Views/Shared/_InfoLayout.cshtml";
    var assetunits = JsDataModel.GetAssetUnits(CurUser);
    var isUseApproval = ViewBag.isUseApproval ?? false;
    var pageObj = new
    {
        assetunits = assetunits,
        traders = JsDataModel.GetTraders(assetunits),
        variety = ViewBag.variety,
        tradeIds = ViewBag.TradeIds,
        structureTypes = ViewBag.StructureTypeMap.Keys,
        PropertyMap = ViewBag.StructureTypeMap
    };
    var isCheck = (bool)ViewBag.IsCheck;
}

@section CSS{
    <link href="~/Style/Css/settag.css?v=@(HtmlUtil.JsVersion)" rel="stylesheet" />
    <style>
        #tradeEditGroupForm .form-group {
            float: left;
        }

        .customPanel {
            background: #CDE0E6;
            height: 100%;
            display: table;
            width: 100%;
        }
    </style>
}

@section JS{
    <script src="@HtmlUtil.BasicDataJs("品种", "客户", "簿记", "交易员")"></script>
    <script src="~/front/calendar?v=@(HtmlUtil.JsVersion)"></script>
    <script src="~/Scripts/app/tradeHelper.js?v=@HtmlUtil.JsVersion"></script>
    <script type="text/javascript">
        const pageVue = @Json.Serialize(Model);
        const pageObj = @Json.Serialize(pageObj);
    </script>
    <script src="~/Scripts/app/pricing/tradePricing.js?v=@HtmlUtil.JsVersion"></script>
    <script src="~/Scripts/app/trade/tradeEditGroup.js?v=@HtmlUtil.JsVersion"></script>
    <script src="~/Scripts/app/trade/settag.js?v=@HtmlUtil.JsVersion" type="text/javascript"></script>
    <script type="text/javascript">
        const HasEditTagPermission = @Json.Serialize(CurUser.系统管理.标签编辑权限);
    </script>
}

<div id="tradeEditGroupForm">
    <div class="modal-body">
        <div style="background-color: #F2F2F2; height: 15px; margin: unset;"></div>
        <div style="background-color: #F2F2F2; height: 225px; margin: unset;">
            <div class="form-group col-6">
                <label class="formlabel">交易日期</label>
                <vue-datepicker class="text-box form-input" name="TradeDate" v-model="trade.TradeDate" disabled />
            </div>
            <div class="form-group col-6">
                <label class="formlabel">到期日期</label>
                <vue-datepicker class="text-box form-input" name="ExerciseDate" v-model="trade.ExerciseDate" />
            </div>
            <div class="form-group col-6">
                <label class="formlabel">买卖方向</label>
                <select class="form-input" name="BuySell" v-model="trade.BuySell" v-on:change="changeBuySell()" v-bind:disabled="IsCheck">
                    <option>卖出</option>
                    <option>买入</option>
                </select>
            </div>
            <div class="form-group col-6">
                <label class="formlabel">成交方式</label>
                <select class="form-input" name="IsUsePremiumRate" v-model="trade.IsUsePremiumRate" v-bind:disabled="IsCheck">
                    <option :value="true">名义本金</option>
                    <option :value="false">成交数量</option>
                </select>
            </div>
            <div class="form-group col-6">
                <label class="formlabel">期初价格</label>
                <vue-number-input class="form-input" name="SpotPrice" v-model="trade.SpotPrice" v-bind:format="inputFormatSpot" disabled></vue-number-input>
            </div>
            <div class="form-group col-6">
                <label class="formlabel">成交数量</label>
                <vue-number-input class="form-input" name="TradeAmount" v-model="trade.TradeAmount" v-on:input="changeTradeAmount()" v-bind:format="inputFormatTradeAmount" v-bind:disabled="trade.IsUsePremiumRate"></vue-number-input>
            </div>
            <div class="form-group col-6">
                <label class="formlabel">名义本金</label>
                <vue-number-input class="form-input" name="StockEqvNotional" v-model="trade.StockEqvNotional" v-on:input="changeStockEqvNotional()" v-bind:format="inputFormatEqvNotional" v-bind:disabled="!trade.IsUsePremiumRate"></vue-number-input>
            </div>
            <div class="form-group col-6">
                <label class="formlabel">权利金</label>
                <template v-if="trade.IsUsePremiumRate">
                    <vue-number-input class="form-input" v-model="trade.PremiumRate" v-bind:format="inputFormatPremiumRate" disabled></vue-number-input>
                </template>
                <template v-else>
                    <vue-number-input class="form-input" v-model="trade.TradeSinglePrice" v-bind:format="inputFormatSinglePriceOnly" disabled></vue-number-input>
                </template>
            </div>
            <div class="form-group col-6">
                <label class="formlabel">交易总额</label>
                <vue-number-input class="form-input" name="TradePrice" v-model="trade.TradePrice" disabled></vue-number-input>
            </div>
            <div class="form-group col-6">
                <label class="formlabel">相对行权价</label>
                <select class="form-input" name="IsMoneynessOption" v-model="trade.IsMoneynessOption">
                    <option>是</option>
                    <option>否</option>
                </select>
            </div>
        </div>
        <div style="background-color: #CDE0E6; height: 15px; margin: unset;"></div>
        <div class="customPanel">
            <div class="form-group col-6">
                <label class="formlabel">结构类型</label>
                <select class="form-input" v-model="trade.StructureType" v-on:change="changeStrucTureType()" v-bind:disabled="IsCheck">
                    <option v-for="structureType in structureTypes">
                        {{ structureType }}
                    </option>
                </select>
            </div>
            <template v-if="trade.StructureType == '气囊结构'">
                <div class="form-group col-6">
                    <label class="formlabel">看涨看跌</label>
                    <select class="form-input" v-model="trade.OptionType" v-bind:disabled="IsCheck">
                        <option>看涨</option>
                        <option>看跌</option>
                    </select>
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">敲入价格</label>
                    <vue-number-input class="form-input" name="BarrierLow" v-model="trade.BarrierLow" v-bind:format="inputFormatStrike"></vue-number-input>
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">低执行价格</label>
                    <vue-number-input class="form-input" name="Strike" v-model="trade.Strike" v-bind:format="inputFormatStrike"></vue-number-input>
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">高执行价格</label>
                    <vue-number-input class="form-input" name="HighStrike" v-model="trade.HighStrike" v-bind:format="inputFormatStrike" v-bind:disabled="!trade.HasPayoffLimit"></vue-number-input>
                    <input type="checkbox" class="mr-1" name="HasPayoffLimit" v-model="trade.HasPayoffLimit">
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">未敲入参与率</label>
                    <vue-number-input class="form-input" name="NotKIParticipationRate" v-model="trade.NotKIParticipationRate" v-bind:format="inputFormatPercent"></vue-number-input>
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">上涨参与率</label>
                    <vue-number-input class="form-input" name="KIParticipationRate" v-model="trade.KIParticipationRate" v-bind:format="inputFormatPercent"></vue-number-input>
                </div>
            </template>
            <template v-else>
                <template v-for="(value,key,index) in PropertyMap">
                    <template v-if="key != '气囊结构'">
                        <div v-show="trade.StructureType == key">
                            <template v-for="(item,index) in value">
                                <div class="form-group col-6">
                                    <template v-if="item.isNew">
                                        <input type="text" class="form-input" style="width: 120px;" :name="item.ColumnName" v-model="item.ColumnName" v-on:change="changeOption()" />
                                    </template>
                                    <template v-else>
                                        <label  class="formlabel">{{item.ColumnName}}</label>
                                    </template>
                                    <template v-if="item.ColumnType == @((int)YLErp.Enums.StructureColumnTypeEnum.NUMBER)">
                                            <vue-number-input type="text" class="form-input" :name="item.ColumnName" v-model="item.ColumnDefaultValue" v-bind:format="customNumberFormat"></vue-number-input>
                                    </template>
                                    <template v-else-if="item.ColumnType == @((int)YLErp.Enums.StructureColumnTypeEnum.NUMBERP)">
                                        <vue-number-input type="text" class="form-input" :name="item.ColumnName" v-model="item.ColumnDefaultValue" v-bind:format="customNumberPercentFormat"></vue-number-input>
                                    </template>
                                    <template v-else-if="item.ColumnType == @((int)YLErp.Enums.StructureColumnTypeEnum.DATE)">
                                            <vue-datepicker class="text-box form-input" :name="item.ColumnName" v-model="item.ColumnDefaultValue" />
                                    </template>
                                    <template v-else-if="item.ColumnType == @((int)YLErp.Enums.StructureColumnTypeEnum.COMBO_BOX_SINGLE)">
                                        <select class="form-input" :name="item.ColumnName" v-model="item.ColumnDefaultValue" autocomplete="off">
                                            <option v-for="opt in item.ColumnOptions.split(',')" :value="opt" :key="opt">
                                                {{opt}}
                                            </option>
                                        </select>
                                    </template>
                                    <template v-else>
                                        @*YLErp.Enums.StructureColumnTypeEnum.TEXT*@
                                            <input type="text" class="form-input" :name="item.ColumnName" v-model="item.ColumnDefaultValue" />
                                    </template>
                                        <a class="fa fa-minus" style="margin-left: 10px;"  v-on:click="deleteProperty(index)" v-bind:disabled="IsCheck"></a>
                                </div>
                            </template>
                        </div>
                    </template>
                </template>
                <div class="form-group col-6" style="text-align: center;">
                    <button type="button" class="btn btn-primary btn-save"  v-on:click="addNewProperty()" v-bind:disabled="IsCheck">新增</button>
                </div>
            </template>
        </div>
        <div style="background-color: #F2F2F2; height: 15px; margin: unset;"></div>
        <div style="background-color: #F2F2F2; height: 180px;">
            <div style="margin-left: 15px;">
                <label class='formlabel'>交易备注</label>
                <textarea rows='3' v-model="trade.Comments" class="text-box h-auto text-left" style="width: 80%" v-bind:disabled="IsCheck"></textarea>
            </div>
            @if (CurUser.交易管理_交易标签调整权限&& !isCheck)
            {
                <div style="margin-left: 15px;margin-bottom:10px;margin-top:10px;">

                    <label class='formlabel'>标签</label>
                    <div class="tag-context" style="border: 1px solid #bbb;width:@(isCheck?"765px":"1052px");display:inline-block;line-height:36px;min-height:36px;background-color:white;">
                        @if (Model.Tags != null && Model.Tags.Any())
                        {
                            foreach (var tag in Model.Tags)
                            {
                                if (!isCheck)
                                {
                                    <span class="tag-item" data-id="@tag.Id" data-name="@tag.Name"><span class="tag-text" data-value="@tag.Id">@tag.Name</span><span class="tag-remove" onclick="DeleteTag('@tag.Name')">x</span></span>
                                }
                                else
                                {
                                    <span class="tag-item" data-id="@tag.Id" data-name="@tag.Name"><span class="tag-text" data-value="@tag.Id">@tag.Name</span></span>
                                }
                            }
                        }
                        @if (!isCheck)
                        {
                            <span class="tag-add">+</span>
                        }
                    </div>

                </div>
            }
            <div class="row" id="hidsearchtag" style="display:none;">
                <div class="tag-search">
                    <div class="keyword-div">

                    </div>
                    <div class="selectlist">

                    </div>
                </div>
            </div>
            <div id="hidhastags" style="display:none;">
                <ul>
                    @if (((List<sys_tag>)ViewBag.TagList) != null && ((List<sys_tag>)ViewBag.TagList).Any())
                    {
                        foreach (var tag in (List<sys_tag>)ViewBag.TagList)
                        {
                            <li data-id="@tag.id">@tag.Name</li>
                        }
                    }
                </ul>

                <span class="js-li-none-tip" style="display:none;">没有可选择的标签，可按Enter键新增</span>
            </div>
            <div class="form-group col-6">
                <label class="formlabel">计价币种</label>
                <input class="form-input" type="text" name="QuoteCurrency" id="QuoteCurrency" readonly />
            </div>
            <div class="form-group col-6" id="ExchangeRateDiv">
                <label class="formlabel">汇率</label>
                <input id="ExchangeRate" class="form-input" v-model="trade.MetaDic.ExchangeRate" name="ExchangeRate" type="text" v-bind:disabled="IsCheck" />
            </div>
            <div class="form-group col-6">
                <label class="formlabel">簿记账户</label>
                <input type="text" class="form-input" id="GroupAssetId" v-bind:disabled="IsCheck" />
            </div>
            <div class="form-group col-6">
                <label class="formlabel">交易员</label>
                <input type="text" class="form-input" id="GroupTraderId" v-bind:disabled="IsCheck" />
            </div>
            @if (Model.CanSelectClient || Model.IsCheck)
            {
                <div class="form-group col-6">
                    <label class="formlabel">交易对手方</label>
                    <input type="text" class="form-input" id="GroupClientId" name="ClientId" />
                </div>
            }
            else
            {
                <div class="form-group col-6">
                    <label class="formlabel">交易对手方</label>
                    <input id="ClientName" class="text-box" type="text" value="@(Model.Trade.ClientName)" readonly>
                </div>
            }
            <div class="form-group col-6">
                <label class="formlabel">交易编号</label>
                <input type="text" class="form-input" v-model="trade.TradeNumber" v-bind:disabled="IsCheck" />
            </div>

            @if (!PS.Config.ErpElement.SecuritiesEnvironment && !Model.IsCheck)
            {
                <div class="form-group col-6">
                    <label class="formlabel">中央对手方清算</label>
                    <select id="selIsCentralClearing" name="IsCentralClearing" v-model="trade.MetaDic.中央对手方清算">
                        <option value="N">否</option>
                        <option value="Y">是</option>
                        <option value="I">计划中央对手方清算</option>
                    </select>
                </div>

                <div class="form-group col-6">
                    <label class="formlabel">中央清算平台</label>
                    <select id="selCentralClearingPaltform" name="CentralClearingPaltform" v-model="trade.MetaDic.中央清算平台">
                        @foreach (var item in YLErp.BLL.DictionaryBLL.GetList("中央清算平台", true, "", true))
                        {
                            <option value="@item.Value">@item.Text</option>
                        }
                    </select>
                </div>
                <div class="form-group col-12">
                    <label class="formlabel">交易平台</label>
                    <select id="selTradingPaltform" name="TradingPaltform" v-model="trade.MetaDic.交易平台">
                        @foreach (var item in YLErp.BLL.DictionaryBLL.GetList("交易平台", true, "", true))
                        {
                            <option value="@item.Value">@item.Text</option>
                        }
                    </select>
                </div>
            }
        </div>
    </div>
    @if (isUseApproval)
    {
        <div class="text-center">
            <button class="btn btn-primary" type="button" v-on:click="submit('pass')">审批通过</button>
            <button class="btn btn-primary" type="button" v-on:click="submit('reject')">拒绝</button>
        </div>
    }
    else if (!Model.IsCheck)
    {
        <div class="text-center">
            <button class="btn btn-primary" type="button" v-on:click="saveTrade">保存</button>
            <button class="btn btn-primary" type="button" onclick="layer.closeMe()">关闭</button>
        </div>
    }
    else
    {
        <div class="text-center">
            <button class="btn btn-primary" type="button" v-on:click="checkTrade">复核</button>
            <button class="btn btn-primary" type="button" v-on:click="rejectTrade">拒绝</button>
            <button class="btn btn-primary" type="button" onclick="layer.closeMe()">关闭</button>
        </div>
    }
</div>