@using DataCacheProvider = YLErp.Modules.DataCacheProvider;
@model SyntheticUnderlyingDto
@{
    ViewBag.Title = "组合标的设置";
    Layout = "~/Views/Shared/_InfoLayout.cshtml";
    ViewData[(Model.UpDownLimit ?? "%").EndsWith("%") ? "百分比" : "绝对值"] = "selected";
    string syntheticUnderlyingName = ViewBag.syntheticUnderlyingName;
}
@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>
}

@if (ViewData["canEdit"] != null && CurUser.基础参数管理.标的资产编辑)
{
    <div class="yc-panel" style="">
        <a href="@Url.Action("SyntheticUnderlyingEdit")?syntheticUnderlyingName=@syntheticUnderlyingName" class="btn btn-primary">修改</a>
        <button type="button" class="btn btn-primary" onclick="removeData()">删除</button>
        <button type="button" class="btn btn-secondary" onclick="layer.closeMe()">关闭</button>
    </div>
}

<div class="yc-panel" id="topVue">

    <h2>
        标的名称-
        <input style="font-size:1rem;" type="text" value="@(Model.UnderlyingName)" readonly />
        <small style="font-size:1rem">(@(Model.UnderlyingTipsInfo))</small>
    </h2>

    <div id="syntheticCont" class="d-flex">
        <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>
        @{
            var coefficients = new[] { Model.Coefficient1, Model.Coefficient2, Model.Coefficient3, Model.Coefficient4 };
            var index = 1;
            foreach (var item in Model.UnderlyingList)
            {
                <div class="yt-item-main">
                    <div class="pitem">S@(index++)</div>
                    <!--组合系数-->
                    <div class="pitem">@(coefficients[index-2])</div>
                    <!--资产类型-->
                    <div class="pitem" style="display:none">@(item.UnderlyingInstrumentTypeCn)</div>
                    <!--品种名称-->
                    <div class="pitem">
                        @(DataCacheProvider.GetVarietyDataSource().GetData(item.UnderlyingTypeId)?.VarietyName)
                    </div>
                    <!--标的代码-->
                    <div class="pitem">@(item.UnderlyingCode)</div>
                    <!--标的价格-->
                    <div class="pitem">@(item.Price)</div>
                    <!--合约乘数-->
                    <div class="pitem">@(item.ContractSize)</div>
                    <!--标的到期日-->
                    <div class="pitem">@(item.MaturityDate?.OtcFormatDate())</div>
                </div>
            }
        }
    </div>
    <div class="mt-4"></div>
    <table class="table table-bordered table-edit2">
        <tr>
            <th style="width:80px;">常数</th>
            <th style="width:100px;">合约乘数</th>
            <th style="width:110px;">波动率变化</th>
            <th style="width:110px;">预付金比例</th>
            <th style="width:200px;">涨跌停板幅度</th>
            @if (CurUser.基础参数管理.标的资产编辑)
            {
                <th style="width:100px;"></th>
            }
        </tr>
        <tr>
            <td>@(Model.Constant)</td>
            <td>@(Model.ContractSize)</td>
            <td>
                <input id="VolatilityRate" type="text" value="@(Model.VolatilityRate)" autocomplete="off" style="width:80px;" />
            </td>
            <td>
                <input id="MarginRate" type="text" value="@(Model.MarginRate?.ToString("P2"))" autocomplete="off" style="width: 80px;" />
            </td>
            <td style="width: 200px">
                <input id="UpDownLimit" type="text" value="@(Model.UpDownLimit)" autocomplete="off" style="width: 80px;" />
                <select id="UpDownLimitType" style="width:75px;" onchange='changeUpDownLimitType()'>
                    <option value="百分比" @ViewData["百分比"]>百分比</option>
                    <option value="绝对值" @ViewData["绝对值"]>绝对值</option>
                </select>
            </td>
            @if (CurUser.基础参数管理.标的资产编辑)
            {
                <td>
                    <button type="button" class="btn btn-primary" onclick="saveData()">保存</button>
                </td>
            }
        </tr>
    </table>
</div>

@section JS
{
    <script>

        var _UpDownLimitCtrl, _MarginRateCtrl;

        $(function () {
            FastVue.numberInput('VolatilityRate', { append: '%', precision: 2, negative: false });
            _MarginRateCtrl = FastVue.numberInput('MarginRate', { append: '%', precision: 2, negative: false });
            changeUpDownLimitType();
        });

        function changeUpDownLimitType() {
            if (!_UpDownLimitCtrl) {
                _UpDownLimitCtrl = FastVue.numberInput('UpDownLimit');
            } else {
                $('#UpDownLimit').val('');
            }
            let options = { append: $('#UpDownLimitType').val() === '百分比' ? '%' : '', precision: 2, negative: false };
            _UpDownLimitCtrl.setOptions(options);
        }

        function saveData() {

            let data = {
                UnderlyingCode: '@(Model.Name)',
                MarginRate: _MarginRateCtrl.getValue(),
                VolatilityRate: _.trim($('#VolatilityRate').val()),
                UpDownLimit: _.trim($('#UpDownLimit').val()),
            };

            if (!data.VolatilityRate) {
                return main.message("波动率变化不能为空");
            }

            if (!data.UpDownLimit) {
                return main.message("涨跌停幅度不能为空");
            }

            main.post("/SyntheticUnderlying/SyntheticUnderlyingViewSave", data);
        }

        function removeData() {
            main.confirmV2("确认要删除吗?").done(function () {
                main.post("/SyntheticUnderlying/SyntheticUnderlyingViewRemove?syntheticUnderlyingName=@syntheticUnderlyingName").done(function () {
                    layer.closeMe('reloadData', "删除成功!");
                });
            });
        }

    </script>
}