@model SyntheticUnderlyingDto
@{
    ViewBag.Title = "组合标的设置";
    Layout = "~/Views/Shared/_InfoLayout.cshtml";
    ViewData[(Model.UpDownLimit ?? "%").EndsWith("%") ? "百分比" : "绝对值"] = "selected";
    var pageObj = new
    {
        isHuaAn = PS.Config.Company == CompanyEnum.华安
    };
}
@section CSS{
    <style>
        .yt-title-main {
            width: 140px;
            min-width: 140px;
            color: #fff;
            text-align: center;
            position: relative;
        }

            .yt-title-main > div {
                background: #4b545c;
                cursor: default;
                height: 27px;
                padding: 0px;
                line-height: 26px;
                border-top: 1px solid #ddd;
                border-right: 1px solid #ddd;
                text-align: center;
                white-space: nowrap;
            }

        .yt-item-main {
            width: 180px;
            vertical-align: top;
        }

            .yt-item-main > div {
                background-color: white;
                height: 27px;
                padding: 0;
                padding-bottom: 1px;
                line-height: 25px;
                border-top: 1px solid #ddd;
                border-right: 1px solid #ddd;
                text-align: center;
                white-space: nowrap;
                position: relative;
                color: #333;
            }

                .yt-item-main > div:last-child {
                    border-bottom: 1px solid #ddd;
                }

            .yt-item-main select, .yt-item-main input, .yt-item-main .dropdown button {
                font-size: 1rem;
                background-color: white;
                height: 25px;
                width: 100% !important;
                padding: 0;
                margin: 0;
                border: 0;
                text-align: center;
                color: #333;
            }

                .yt-item-main input[type=number] {
                    padding-left: 1rem;
                }

                .yt-item-main input:focus {
                    border: 0;
                    outline: 0;
                    box-shadow: none;
                    -webkit-box-shadow: none;
                }

                .yt-item-main input[readonly] {
                    background-color: #fff !important;
                }

                .yt-item-main input[disabled], .yt-item-main input[disabled] + * {
                    background-color: #f0f8ff !important;
                }

        .table-edit2 {
            max-width: 800px;
        }

            .table-edit2 input {
                max-width: 120px;
            }

            .table-edit2 select {
                margin: 0;
            }
    </style>
}
@section JS
{
    <script>
        const pageModel = @Json.Serialize(Model);
        const pageData = @Json.Serialize(pageObj);
    </script>
    <script src="@HtmlUtil.BasicDataJs("品种")"></script>
    <script src="~/Scripts/app/tradeHelper.js?t=@(HtmlUtil.JsVersion)"></script>
    <script src="~/Scripts/app/underlying/SyntheticUnderlyingEdit.js?t=@(HtmlUtil.JsVersion)"></script>
    <script>
        var _initFlag = 0;
        var oldUnderlyingCodes = [];
        $(function () {
            for (var i = 1; i <= 4; i++) {
                if (_.trim(pageModel["UnderlyingCode" + i])) {
                    _initFlag++;
                    var code = pageModel["UnderlyingCode" + i];
                    oldUnderlyingCodes.push(code);
                    itemManager.addItem({
                        UnderlyingId: pageModel["UnderlyingId" + i],
                        UnderlyingCode: code,
                        Coefficient: _.toString(pageModel["Coefficient" + i]) || "1",
                        Price: '', ContractSize: '', MaturityDate: '', InstrumentType: 'CommodityFutures', VarietyName: ''
                    });
                }
            }
        });
    </script>
}

<div class="yc-panel">

    <h2>
        标的名称-
        <input style="font-size:1rem;" type="text" id="UnderlyingCodeName" title="填写别名" value="@(Model.UnderlyingName)" />
    </h2>

    <div class="addNew">
        <button type="button" class="btn btn-primary" id="btnAdd" onclick="itemManager.addItem()">新增标的</button>
    </div>

    <div id="syntheticCont" class="d-flex mt-2">
        <div class="yt-title-main">
            <div class="ptitle">组合序号</div>
            <div class="ptitle">组合系数</div>
            <div class="ptitle" style="display:none">标的类型</div>
            <div class="ptitle">标的品种</div>
            <div class="ptitle">标的代码</div>
            <div class="ptitle">标的价格</div>
            <div class="ptitle">合约乘数</div>
            <div class="ptitle">标的到期日</div>
        </div>
    </div>

    <div class="mt-4"></div>

    <table class="table table-bordered table-edit2">
        <colgroup>
            <col span="4" width="150" />
        </colgroup>
        <tr>
            <th>常数</th>
            <th>合约乘数</th>
            <th>波动率变化</th>
            <th>预付金比例</th>
            <th>涨跌停板幅度</th>
        </tr>
        <tr>
            <td>
                <input type="number" step="0.01" id="Constant" autocomplete="off" value="@(Model.Constant)" />
            </td>
            <td>
                <input type="number" step="0.01" id="ContractSize" autocomplete="off" value="@(Model.ContractSize)" />
            </td>
            <td>
                <input id="VolatilityRate" type="text" autocomplete="off" value="@(Model.VolatilityRate)" />
            </td>
            <td>
                <input id="MarginRate" type="text" autocomplete="off" value="@(Model.MarginRate?.ToString("P2"))" />
            </td>
            <td>
                <input id="UpDownLimit" type="text" autocomplete="off" value="@(Model.UpDownLimit)" />
                <select id="UpDownLimitType" style="width:75px;" onchange='vue2.changeUpDownLimitType()'>
                    <option value="百分比" @ViewData["百分比"]>百分比</option>
                    <option value="绝对值" @ViewData["绝对值"]>绝对值</option>
                </select>
            </td>
        </tr>
    </table>

</div>

<div class="yc-panel" style="padding-left:30%;">
    <button type="button" class="btn btn-primary" onclick="sumbitHandler.saveData()">保存</button>
    <button type="button" class="btn btn-secondary" onclick="layer.closeMe()">取消</button>
</div>

<template id="syntheticItemTPL1">
    <div class="yt-item-main">
        <div class="pitem">
            <span>S{{index}}</span>
            <a href="javascript:;" v-on:click="remove"><i class="fa fa-remove"></i></a>
        </div>
        <!--组合系数-->
        <div class="pitem">
            <input type="text" name="Coefficient" v-bind:id="'Coefficient_'+id" v-model="viewData.Coefficient" />
        </div>
        <!--资产类型-->
        <div class="pitem" style="display:none">
            <select v-model="viewData.InstrumentType" v-on:change="changeInstrumentType">
                @foreach (var item in ConsGlobal.InstrumentType.SelectItems())
                {
                    <option value="@(item.Value)">@(item.Text)</option>
                }
            </select>
        </div>
        <!--品种名称-->
        <div class="pitem">
            <input type="text" class="pitem-variety" v-model="viewData.VarietyName" v-bind:id="'Variety_'+id" />
        </div>
        <!--标的代码-->
        <div class="pitem">
            <input type="text" class="pitem-underlying" v-model="viewData.UnderlyingCode" v-bind:id="'UnderlyingCode_'+id" />
        </div>
        <!--标的价格-->
        <div class="pitem">{{viewData.Price}}</div>
        <!--合约乘数-->
        <div class="pitem">{{viewData.ContractSize}}</div>
        <!--标的到期日-->
        <div class="pitem">{{viewData.MaturityDate}}</div>
    </div>
</template>