@using YLErp.Modules.CalcPriceShowConfigModule
@{
    ViewBag.Title = "计算指标显示配置";
    Layout = "~/Views/Shared/_InfoLayout.cshtml";
    var allCalcQuota = CalcPriceShowConfigService.GetAllCalcQuota();
    var defaultQuota = CalcPriceShowConfigService.GetDefaultCalcQuota();

    var pageObj = new
    {
        AllCalcQuota = allCalcQuota,
        DefaultQuota = defaultQuota
    };
}

@section CSS{
    <link href="~/Style/Public/jquery.dad.css?v=1" rel="stylesheet" />
    <style>
        .autobreak {
            white-space: normal !important;
            line-height: 18px !important;
        }

        .edit-panel {
            margin-top: 20px;
            width: 80%;
        }

            .edit-panel .title {
                height: 50px;
                padding-left: 10px;
                padding-top: 10px;
            }

                .edit-panel .title h5 {
                    color: #027DB4;
                    font-size: 16px;
                    width: 200px;
                    float: left;
                }

                .edit-panel .title .button-group {
                    width: 160px;
                    float: right;
                }

        .button-group button.color-white {
            width: 70px;
            height: 30px;
            line-height:20px;
            border-color: red !important;
            color: red !important;
            background-color: white !important;
            margin-right: 10px;
        }


        .input-range {
            height: 50px;
            padding-left: 10px;
        }

            .input-range input {
                margin-left: 10px;
            }

        .check-table {
            border: 1px solid #ddd;
            width: 500px;
            background-color: white;
            margin-left: 10px;
        }

        .left-header {
            border-right: 1px solid #ddd;
            background-color: #D7D7D7;
            text-align: center;
            width: 130px;
        }

        .right-content {
            padding: 10px;
        }

        .quata-table {
            width: 100%;
        }

            .quata-table thead tr td {
                background-color: #F2F2F2;
                height: 30px;
                text-align: center;
                font-weight: bold;
            }


            .quata-table tbody tr td {
                height: 30px;
            }

                .quata-table tbody tr td:first-child {
                    border: 1px solid #B8E2F5;
                    background-color: #D7E7EE;
                    color: #1486B9;
                    font-weight: bold;
                    text-align: center;
                    width: 60%;
                }

                .quata-table tbody tr td:last-child {
                    border: 1px solid #EDEDED;
                    background-color: white;
                    text-align: center;
                }

                .quata-table tbody tr td:first-child img {
                    width: 20px;
                    float: right;
                }

        .ui-widget-content a.link-btn {
            color: #E86676;
            margin-right: 10px;
            text-decoration: underline;
        }

        .ui-widget-content a.color-black {
            color: black;
        }

        .quota-context .quota-item {
            height: auto;
            display: inline-block;
            border: 1px solid #AEDFF7;
            border-radius:4px;
            background-color: #D7E7EE;
            padding-left: 5px;
            padding-right: 5px;
            line-height: 28px;
            text-align: center;
            margin-right: 5px;
            color: #3E9BC4;
        }

        .enable-tag {
            height: auto;
            display: inline-block;
            border: 1px solid #E2C8CB;
            border-radius:4px;
            background-color: #F6E3E5;
            padding-left: 4px;
            padding-right: 4px;
            line-height: 18px;
            text-align: center;
            margin-right: 5px;
            color: #863A43;
            margin-left: 10px;
            font-size: 10px;
        }

        .check-item{
            height:30px;
            width:348px;
            line-height:29px;
        }

            .check-item .check-item-text{
                width:50%;
                float:left;
                border-bottom: 1px solid #B8E2F5;
                background-color: #D7E7EE;
                color: #1486B9;
                font-weight: bold;
                text-align: center;
            }

                .check-item .check-item-text span.hasimg{
                    margin-left: 30px;
                }

            .check-item .check-item-checkbox {
                width: 50%;
                float: right;
                text-align:center;
                border-bottom: 1px solid #EDEDED;
                background-color: white;
            }
            .check-item .check-item-text img{
                width: 20px;
                float: right;
                margin-top: 4px;
                margin-right: 10px;
            }

        .check-title{
            height:30px;
            line-height:30px;
        }

        .check-title span{
            display:block;
            width:50%;
            float:left;
            text-align:center;
            background-color: #F2F2F2;
            font-weight: bold;
        }
    </style>
}

    @section JS{
    <script>
        const pageObj = @Json.Serialize(pageObj);
    </script>
    <script src="~/Scripts/app/basic/jquery.dad.min.js?v=@HtmlUtil.JsVersion"></script>
    <script src="~/Scripts/app/calcpriceshow/templeteset.js?v=@HtmlUtil.JsVersion"></script>
}

    <div style="background-color:white;">
        <div style="margin-right:10px;width:765px;">
            @Html.Raw(JqGridSimple.OutTable())

        </div>

        <div style="margin-left:1rem;margin-top:10px;">

            <button type="button" class="btn btn-primary" onclick="AddTemplate()">新增模板</button>
            <div class="edit-panel" style="display:none;background-color: #f5f5f5;padding-bottom:10px;">
                <div class="title">
                    <h5>模板配置</h5>
                    <div class="button-group"><button class="btn btn-primary color-white" onclick="SaveTemplate();">保存</button><button class="btn btn-primary color-white" onclick="CloseEditPanel()">关闭</button> </div>

                </div>
                <div class="input-range">
                    <span>模板名称</span><input type="text" id="templateName" />
                    <input type="hidden" id="hidId" value="0" />
                    <input type="checkbox" id="templateIsEnable" /><span>应用模板配置</span>
                </div>
                <table class="check-table">
                    <tr>
                        <td class="left-header">计算指标</td>
                        <td class="right-content">
                            @*<table class="quata-table">
                                <thead>
                                    <tr>
                                        <td style="padding-right: 20px;"><span>指标</span></td>
                                        <td>是否显示</td>
                                    </tr>
                                </thead>
                                <tbody class="dadbody">

                                @foreach (var quta in allCalcQuota)
                                {
                                    <tr class="item dads-children dad-draggable-area">
                                        <td>
                                            <span>@quta.Name</span>
                                            @if (!string.IsNullOrEmpty(quta.Tip))
                                            {
                                                <img src="/Images/help.png" title="@quta.Tip">
                                            }
                                        </td>
                                        <td><input type="checkbox" class="js-quta-check" data-name="@quta.Name" /></td>
                                    </tr>
                                }
                            </tbody>
                        </table>*@

                        <div class="check-title">
                            <span>指标</span>
                            <span>是否显示</span>
                        </div>
                        <div class="dad-container jq33">
                            @*@foreach (var quta in allCalcQuota)
                            {
                                <div class="item check-item">
                                    <div class="check-item-text">
                                        <span class="@(!string.IsNullOrEmpty(quta.Tip)?"hasimg":"")">@quta.Name</span>
                                        @if (!string.IsNullOrEmpty(quta.Tip))
                                        {
                                            <img src="/Images/help.png" title="@quta.Tip">
                                        }
                                    </div> 
                                    <div class="check-item-checkbox">
                                        <input type="checkbox" class="js-quta-check" data-name="@quta.Name" />
                                    </div>
                                </div>
                            }*@
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>

</div>