@using WePlatform.Configuration
@using WePlatform.Authorization
@using WePlatform.Views.Shared.Modals
@using WePlatform.Views.Shared.SearchForm
@using WePlatform.Views.Shared.Table

@{
    ViewBag.Title = "知识信息引导库管理";
    string activeMenu = PermissionNames.PagesResourceMgGuideMgKnowledgeMg; //The menu item will be active for this page.
    ViewBag.ActiveMenu = activeMenu;
    string plans = ViewBag.Plan;
    var searchForm = new SearchFormViewModel(new List<SearchItem>()
    {
        new SearchItem("name", "知识名称"),
    });

    var table = new TableViewModel(IwbConsts.ApiAppUrl + "Knowledge/GetAll", activeMenu, searchForm)
    .SetFields(new List<FieldItem>()
    {
        new FieldItem("id", "编码"),
        new FieldItem("name", "知识名称"),
        new FieldItem("description", "知识详情"),
            });
}
@section css{
    <style>
        .tree {
            color: inherit;
        }
    </style>
}

@Html.Partial("Table/_Table", table)

@section modal{
    <!--Main Modal-->

    @{
        var input = new ModalBodyViewModel(new List<Input>()
{
            new InputHide("id"),
            new Input("name", "知识名称").SetNotRequired(),
            new InputTextarea("description", "知识详情").SetNotRequired(),
        });
    }
    <section>
        <div class="modal fade show" id="modal" tabindex="-1" aria-modal="true">
            <div class="modal-dialog modal-lg" style="margin-top: 190.5px;">
                <div class="modal-content">
                    @Html.Partial("Modals/_ModalHeader", new ModalHeaderViewModel("知识信息"))
                    <div class="modal-body" style="padding: 0">

                        <form class="form-horizontal " id="form" novalidate="novalidate" style="padding: 0">
                            <div class="card card-primary card-outline card-outline-tabs" style="margin-bottom: 0; border-top: 0; ">
                                <div class="card-header p-0 border-bottom-0">
                                    <ul class="nav nav-tabs" id="knowledge-tab" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link active" id="tab-base" data-toggle="pill" href="#tab-content-base" role="tab">基础信息</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" id="tab-role" data-toggle="pill" href="#tab-content-plan" role="tab">应急预案</a>
                                        </li>
                                    </ul>
                                </div>

                                <div class="card-body">
                                    <div class="tab-content" id="custom-tabs-four-tabContent">

                                        <div class="tab-pane fade show active" id="tab-content-base" role="tabpanel">
                                            @Html.Partial("Modals/_ModalInput", input)
                                        </div>

                                        <div class="tab-pane fade" id="tab-content-plan" role="tabpanel">
                                            <div class="dynamic-box" style="margin: 0 10px;">
                                                <div class="row iwb-dynamic-box">
                                                    <div class="dynamic-label col-sm-10">
                                                        <label class="iwb-label">应急预案</label>
                                                    </div>
                                                    <div class="dynamic-control col-sm-2">
                                                        <label class="iwb-label">增加/删除</label>
                                                    </div>
                                                </div>

                                                <div class="row iwb-dynamic-box">
                                                    <div class="col-sm-10">
                                                        <div class="input-group input-group-sm">
                                                            <select class="form-control tree" id="plan" name="plan" style="width: 100%">
                                                                @(Html.Raw(plans))
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-2">
                                                        <button class="btn btn-sm btn-block btn-add" type="button" onclick="AddDynamicBox(this)">增加</button>
                                                    </div>
                                                </div>
                                            </div>


                                        </div>

                                       

                                    </div>
                                </div>
                            </div>


                        </form>
                    </div>
                    @Html.Partial("Modals/_ModalFooter", "0")

                </div>
            </div>
        </div>
    </section>

}

@section scripts
{
    <script type="text/javascript">
        var $table;
        $(function () {
            // $('#tab-content-plan .iwb-dynamic-box .form-control[name="plan"]').select2tree();
            $table = LoadTable();
            var funs = window.iwbfuns || { none: function () { console.log("No type"); } };
            funs["btnCreate"] = function () {
                Reset();
                BtnCreate({
                    data: { id: "" },
                    dataFun: GetKnowledgeData,
                    select2tree: 'plan'
                });
            }
            funs["btnUpdate"] = function () {
                var row = $table.bootstrapTable("getSelections")[0];
                if (row) {
                    Reset();
                    BtnUpdate({
                        disabled: "",
                        dataFun: GetKnowledgeData,
                        select2tree: 'plan',
                        shownAfter: function () {
                            ParsePlans(row.plans);
                        }
                    });
                }

            };
        });

        function GetKnowledgeData() {
            var data = $.formSerialize($('#modal form'));
            var plans = [];
            $('#modal #tab-content-plan .iwb-dynamic-box').find('.form-control[name="plan"]').each(
                function () {
                    var v = $(this).val();
                    if (v && plans.indexOf(v) == -1) {
                        plans.push(v);
                    }
                });
            data.plans = plans;
            console.log(data);
            return data;
        }

        function ParsePlans(nos) {
            if (!nos) {
                return;
            }
           // var noArr = nos.split(",");
            for (var i = 0; i < nos.length; i++) {
                var no = nos[i];
                var $that = i === 0 ? $('#modal #tab-content-plan .iwb-dynamic-box').eq(1) : AddDynamicBox($('#modal #tab-content-plan .iwb-dynamic-box').eq(1).find('.btn-add'));
                $that.find('.form-control[name="plan"]').val(no).select2tree();

            }
        }
        function Reset() {
            $('#modal .iwb-dynamic-box-delete').remove();
            $('#knowledge-tab li').eq(0).find('a').tab('show');
        }

    </script>


    <!--格式化-->
    <script id="formatter-script" type="text/javascript">
        function TypeFormatter(v) {
            var name = $('#hid-type option[value="' + v + '"]').text();
            switch (v) {
                case 0:
                    return '<span class="label label-danger">' + name + '</span>';
                default:
                    return '<span class="label label-info">' + name + '</span>';
            }
        }
    </script>
}


<section style="display: none">
    <select id="hid-type">
        <option value=""></option>
    </select>

    @*@Html.DropDownList("hid-type", type)*@
</section>