@using YLErp.Commons
@using YLErp.Web.Areas.Admin.Models

@model OtcFormatViewModel

@{
    ViewData["Title"] = "OtcFormat配置";

    var pageObj = new
    {
        AjaxSaveUrl = Url.Action("AjaxSaveOtcFormat")
    };
}

@section heads{
    <style>
        .btn-primary { min-width: 100px; }
        .opt-title-dev { width: 120px; line-height: 32px; }
        .opt-input-dev { width: 150px; margin-right: 20px; }
        .opt-input-dev input { text-align: center; }
        .opt-check-dev { line-height: 35px; }
        .opt-check-dev > label { margin-right: 35px; }
        .opt-check-dev input { margin-right: 5px; }
    </style>
}

<div class="card">
    <div class="card-header">
        <h4 class="card-title">OtcFormat配置</h4>
    </div>
    <div class="card-body" id="configCont">

        @foreach (var item in Model.SelectItems)
        {
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">@(item.Text)</h4>
                </div>
                <div class="card-body otcformat" data-pname="@(item.Value)">
                    @foreach (var item2 in item.SelectItems)
                    {
                        var opt = (OtcFormatOption)item2.Tag;
                        <form class="row mb-4 opt-item-div" data-pname="@(item2.Value)">
                            <div class="col-auto opt-title-dev">
                                @(item2.Text):
                            </div>
                            <div class="col-auto opt-input-dev">
                                <input type="number" class="form-control" min="0" step="1" max="6" name="precision" value="@(opt.precision)" />
                            </div>
                            <div class="col opt-check-dev">
                                <label><input type="checkbox" name="rounded" value="true" @(opt.rounded ? "checked" : "") />四舍五入</label>
                                <label><input type="checkbox" name="grouping" value="true" @(opt.grouping ? "checked" : "") />千分位分组</label>
                                <input type="hidden" name="rounded" value="false" />
                                <input type="hidden" name="grouping" value="false" />
                            </div>
                        </form>
                    }
                </div>
            </div>
        }

        <div class="offset-3 mt-5">
            <button type="button" class="btn btn-primary" onclick="saveConfig()">保存</button>
        </div>
    </div>
</div>

@section scripts{

    <script>

        const page = @Json.Serialize(pageObj);

        function saveConfig() {
            let postData = {};
            $('.otcformat').each(function () {
                let item = {};
                $(this).find('form').each(function () {
                    item[$(this).data("pname")] = $(this).serializeObject();
                });
                postData[$(this).data("pname")] = item;
            });
            main.post(page.AjaxSaveUrl, postData).done(function (resp) {
                main.alert("保存成功");
            });
        }
    </script>
}