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

@{
    ViewBag.Title = "电话提问维护";
    string activeMenu = PermissionNames.PagesBasicMgPhoneQuestionMg; //The menu item will be active for this page.
    ViewBag.ActiveMenu = activeMenu;
    string answerType = ViewBag.AnswerType;
    var searchForm = new SearchFormViewModel(new List<SearchItem>()
    {
    }, "search-form", false);

    var table = new TableViewModel(IwbConsts.ApiAppUrl + "PhoneQuestion/GetAll", activeMenu, searchForm)
    .SetFields(new List<FieldItem>()
    {
        new FieldItem("name", "简称"),
        new FieldItem("content", "内容"),
                //new FieldItem("type", ""),
                //new FieldItem("tag", "标签"),
            });
    var input = new ModalBodyViewModel(new List<Input>()
{
        new InputHide("id"),
        new Input("name", "简称").SetNotRequired(),
        new InputTextarea("content", "提问内容").SetNotRequired(),
        //new InputNumber("type", "").SetNotRequired(),
        //new Input("tag", "标签").SetNotRequired(),
    });

}
@section css{

}

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

@section modal{
    <!--Main Modal-->
    <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" 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" data-toggle="pill" href="#tab-content-base2" role="tab">配置答案</a>
                                        </li>
                                    </ul>
                                </div>

                                <div class="card-body">
                                    <div class="tab-content" id="scene-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-base2" role="tabpanel">
                                            <div class="iwb-dynamic-box" style="padding: 10px 0;margin: 10px 0;border: 1px solid #11998e;border-radius: 8px;">
                                                <input name="a_id" type="hidden" value="">
                                                <div class="form-group row">
                                                    <label class=" iwb-label iwb-label-sm iwb-label-required">答案内容</label>
                                                    <div class="">
                                                        <div class="input-group input-group-sm ">
                                                            <textarea rows="2" class="form-control required" name="a_content" placeholder="请输入内容..." value="" style="" aria-required="true"></textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group row">
                                                    <label class=" iwb-label iwb-label-sm iwb-label-required">关键字</label>
                                                    <div class="">
                                                        <div class="input-group input-group-sm ">
                                                            <input class="form-control required" name="a_keywords" type="text" placeholder="请输入关键字..." style="" aria-required="true">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group row">
                                                    <label class=" iwb-label iwb-label-sm iwb-label-required">答案类型</label>
                                                    <div style="width: 65%;">
                                                        <div class="input-group input-group-sm ">
                                                            <select class="form-control required" name="a_type" placeholder="请选择答案类型..." value="" style="width:100%" tabindex="-1">
                                                                @Html.Raw(answerType)
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div style="width: 20%;padding-left: 15px">
                                                        <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 () {
            $table = LoadTable();
            var funs = window.iwbfuns || { none: function () { console.log("No type"); } };
            funs["btnCreate"] = function () {
                $('.iwb-dynamic-box-delete').remove();
                $('#tab-base').tab('show');
                BtnCreate({ data: { id: "" }, dataFun: GetSaveData });
            }
            funs["btnUpdate"] = function (url) {
                $('.iwb-dynamic-box-delete').remove();
                $('#tab-base').tab('show');
                var row = $table.bootstrapTable("getSelections")[0];
                if (row) {
                    var no = row.id;
                    BtnUpdate({
                        url: url,
                        dataFun: GetSaveData,
                        disabled: "",
                        shownAfter: function () {
                            $.iwbAjax5({
                                url: abp.appUrl + "query/GetQuestionAnswers?no=" + no,
                                success: function (res) {
                                    if (res && res.length) {
                                        for (var i = 0; i < res.length; i++) {
                                            var answer = res[i];
                                            var $that = i === 0 ? $('#tab-content-base2 .iwb-dynamic-box').eq(0) : AddDynamicBox($('#tab-content-base2 .iwb-dynamic-box').eq(0).find('.btn-add'));
                                            $that.find('input[name="a_id"]').val(answer.id);
                                            $that.find('.form-control[name="a_content"]').val(answer.content);
                                            $that.find('.form-control[name="a_keywords"]').val(answer.keywords);
                                            $that.find('.form-control[name="a_type"]').val(answer.type).select2();
                                        }
                                    }
                                }
                            });
                        }
                    }, row);
                }
            };
        });

        function GetSaveData() {
            var data = {};
            data.id = $("#modal #id").val();
            data.name = $("#modal #name").val();
            data.content = $("#modal #content").val();
            data.answers = [];
            $('#tab-content-base2 .iwb-dynamic-box').each(function () {
                var $this = $(this);
                data.answers.push({
                    id: $this.find('input[name="a_id"]').val(),
                    content: $this.find('.form-control[name="a_content"]').val(),
                    keywords: $this.find('.form-control[name="a_keywords"]').val(),
                    type: $this.find('.form-control[name="a_type"]').val()
                });
            });
            return data;
        }
    </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>