@using IwbZero.IwbDataQuery
@using IwbZero.ToolCommon.StringModel
@using WeEngine.Enum
@using WeOnlineApp.Configuration
@using WeOnlineApp.Authorization
@using WeOnlineApp.Views.Shared.Modals
@using WeOnlineApp.Views.Shared.SearchForm
@using WeOnlineApp.Views.Shared.Table

@{
    ViewBag.Title = "课程信息";
    string activeMenu = PermissionNames.PagesTrainMgCampMg; //The menu item will be active for this page.
    ViewBag.ActiveMenu = activeMenu;
    string state = ViewBag.State, subjectType = ViewBag.SubjectType,
        variableType = IwbDataType.GetDataTypeSelectStr();
    var searchForm = new SearchFormViewModel(new List<SearchItem>()
{
        new SearchItem("name","课程名称"),
        new SearchItem("organizer","主办单位"),
        new SearchItem("campState","课程状态",FieldType.I).SetSelectItem(state),
    });

    var table = new TableViewModel(IwbConsts.ApiAppUrl + "Camp/GetAll", activeMenu, searchForm)
    .SetFields(new List<FieldItem>()
    {
        new FieldItem("name", "课程名称"),
        new FieldItem("packageName", "方案包名称"),
        new FieldItem("subjectType", "课程类型","SubjectTypeFormatter"),
        new FieldItem("organizer", "主办单位"),
        new FieldItem("contactInfo", "联系方式"),
        new FieldItem("roundScore", "每轮总分"),
        new FieldItem("subjectPoint", "课程积分"),
        new FieldItem("startDate", "有效时间","StartDateFormatter"),
        new FieldItem("maxTrainingMinute", "最大演练时长","MinuteFormatter"),
        new FieldItem("campState", "课程状态","StateFormatter"),
                //new FieldItem("", "操作","ActionFormatter"),
            });
}
@section css{

}

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

@section modal{
    <!--Main Modal-->
    @{
        var input = new ModalBodyViewModel(new List<Input>()
        {
            new InputHide("id"),
            new InputHide("packageName", "方案包名称"),
            //new InputHide("startDate"),
            //new InputHide("endDate", "结束时间"),
            new Input("name", "课程名称"),
            new Input("packageNo", "方案包").SetSelectOptions(""),
            new Input("subjectType", "课程类别").SetSelectOptions(subjectType),
            new InputNumber("roundScore", "每轮总分").SetRange(100, 1000),
            new InputDate("useDate", "有效时间", @class: "iwb-date-range"),
            new InputNumber("maxTrainingMinute", "演练时长").SetMin(0).SetHelp("课程的最大演练时长，单位为 分钟。"),
            new InputNumber("subjectPoint", "课程积分").SetMin(1),
            new Input("organizer", "主办单位"),
            new Input("contactInfo", "联系方式").SetNotRequired(),
        });

        var input2 = new ModalBodyViewModel(new List<Input>()
{
            new InputTextarea("purposes", "演练目标").SetNotRequired(),
            new InputTextarea("description", "课程描述").SetNotRequired(),
        });
        var input3 = new ModalBodyViewModel(new List<Input>()
{
            new InputKindeditor("studyContent", "预演学习").SetLayout("col-sm-12","col-sm-12").SetNotRequired(),
        });

    }
    <!--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>
                                        <li class="nav-item">
                                            <a class="nav-link" data-toggle="pill" href="#tab-content-base3" 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">
                                            @Html.Partial("Modals/_ModalInput", input2)

                                        </div>

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

                                        </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 packageSettingStr =
                '<div style="margin: 0px 20px 10px;"><button type="button" class="btn btn-sm btn-block btn-success" id="package-btn" onclick="PackageSetting(\'{0}\')">方案包配置</button></div>';
            //$('#modal #useDate').iwbDate({
            //    applyEvent: function (e) {
            //        console.log(e);
            //    }
            //});

            $('#modal #packageNo').off('change.package').on('change.package',
                function() {
                    $('#modal #packageName').val('');
                    $('#modal #engineModelType').val('');
                    $('#modal #package-btn').remove();
                    _PackageSetting = null;
                    var packageNo = $('#modal #packageNo').val();
                    if (packageNo) {
                        GetPackageSetting(packageNo);
                        $('#modal #packageName').val($('#modal #packageNo option:selected').text());
                        $(this).closest('.form-group').after(packageSettingStr.format(packageNo));
                    }
                });
            var funs = window.iwbfuns || { none: function() { console.log("No type"); } };
            funs["btnCreate"] = function() {
                $('#modal #package-btn').remove();
                _PackageSetting = null;
                $('#tab-base').tab('show');
                $.iwbAjax4({
                    url: abp.appUrl + 'Camp/GetPackageSelectStr',
                    block: true,
                    success: function(res) {
                        $('#modal #packageNo').html(res).select2();
                        BtnCreate({
                            data: { id: "" },
                            select2tree:'subjectType',
                            dataFun: GetSaveData
                        });
                    }
                });
            }
            funs["btnUpdate"] = function() {
                var row = $table.bootstrapTable('getSelections')[0];
                $('#modal #package-btn').remove();
                if (row) {
                    if (row.campState == @(CampStateDefinition.New)) {
                        $('#tab-base').tab('show');
                        $('#modal #packageNo').closest('.form-group').after(packageSettingStr.format(row.packageNo));
                        _PackageSetting = null;
                        $.iwbAjax4({
                            url: abp.appUrl + 'Camp/GetPackageSelectStr',
                            block: true,
                            success: function(res) {
                                $('#modal #packageNo').html(res).select2();
                                $.iwbAjax4({
                                    url: abp.appUrl + 'Camp/GetDtoById?id='+row.id,
                                    block: true,
                                    success: function(res2) {
                                        var row1 = $.extend(true, {}, res2);
                                        row1.useDate = new Date(row1.startDate).format('yyyy-MM-dd') + " - " + new Date(row1.endDate).format('yyyy-MM-dd');
                                        BtnUpdate({
                                                disabled: "",
                                                select2tree:'subjectType',
                                                dataFun: GetSaveData,
                                                shownAfter: function() {
                                                    GetPackageSetting(row1.packageNo);
                                                }
                                            },
                                            row1);
                                    }
                                });
                            }
                        });

                    } else {
                        abp.message.warn("课程已激活不能再修改！");
                    }
                } else {
                    abp.message.warn(abp.localization.iwbZero('SelectRecordOperation'));
                }
            };
            funs["btnAttach"] = function() {
                var row = $table.bootstrapTable('getSelections')[0];
                if (row) {
                    $.iwbAjax1({
                        url: abp.appUrl + 'Camp/CheckAttach?no=' + row.id,
                        success: function(res) {
                            if (res) {
                                window.open(res, "_blank");
                            }
                        }
                    });
                } else {
                    abp.message.warn(abp.localization.iwbZero('SelectRecordOperation'));
                }

            }
            funs["btnTag"] = function(url) {
                var row = $table.bootstrapTable('getSelections')[0];
                if (row) {
                    $.iwbAjax4({
                        url: abp.appUrl + 'Camp/GetBehaviorTags?no=' + row.id,
                        success: function(res) {
                            if (res) {
                                TagModal(res, url);
                            }
                        },
                        error: function (error) {
                            if (error.details) {
                                return abp.message.error(error.details, error.message);
                            } else {
                                return abp.message.error(error.message || abp.ajax.defaultError.message);
                            }
                        }
                    });
                } else {
                    abp.message.warn(abp.localization.iwbZero('SelectRecordOperation'));
                }
            }
        });

        function GetSaveData() {
            _PackageSetting = _PackageSetting || {};
            var data = $.formSerialize($('#modal #form'));
            //data.roundScore = _PackageSetting.roundScore;
            data.assessRoleNames = _PackageSetting.assessRoleNames;
            data.assessAuto = _PackageSetting.assessAuto;
            data.variable = _PackageSetting.variable;

            var dateStr = $("#modal #useDate").val();
            var arr = dateStr.split(" - ");
            if (arr.length == 2) {
                data.startDate = arr[0];
                data.endDate = arr[1];
            }
            return data;
        }
    </script>

    <script id="PackageSetting-S">
        var _PackageSetting = null;

        function PackageSetting() {
            if (_PackageSetting) {
                PackageSettingModal(_PackageSetting);
            } else {
                abp.message.warn('未发现配置信息！');
            }
        }

        function GetPackageSetting(no) {
            var id = $('#modal #id').val() || 'none';
            $.iwbAjax4({
                url: abp.appUrl + 'camp/GetPackageSetting?id=' + id + '&packageNo=' + no,
                success: function(res) {
                    if (res) {
                        _PackageSetting = res;
                    }
                }
            });
        }

        function PackageSettingModal(data) {
            var $body = FormatterPackageSettingBody(data);
            $(document).iwbModal('create',
                {
                    modal: 'modal-package-setting',
                    modaltitle: "方案包配置",
                    modalBody: $body,
                    save: SavePackageSetting
                });
        }

        function FormatterPackageSettingBody(data) {
            var $form = $('<form>', { 'css': { 'padding': '10px' } });
            //$form.append(
            //    '<div class="form-group row"><label class=" iwb-label iwb-label-sm" for="roundScore">每轮总分</label><div class=""><div class="input-group input-group-sm "><input class="form-control number" id="roundScore" name="roundScore" type="text" placeholder="请输入每轮总分..." style="" aria-required="true"></div></div></div>');
            //if (data.roundScore) {
            //    $form.find('#roundScore').val(data.roundScore);
            //}
            $form.append(FormatterVariableBox(data.variable));
            $form.append(FormatterRoleBox(data.allRoles, data.assessRoleNames, data.assessAuto));
            return $form;
        }

        function FormatterRoleBox(allRoles, assessRoleNames) {
            var temp =
                '<label class="iwb-checkbox iwb-{3}"><input type="checkbox" id="role-{0}" data-role-no="{0}" data-role-name="{1}" name="assess-role{4}" value="{0}" {2}><span></span>{1}</label>';

            var $roleBox = $('<div>',
                { 'class': 'dynamic-box row', 'css': { 'margin': '10px', 'paddingBottom': '0' } });
            var roleArr = assessRoleNames ? assessRoleNames.split(',') : undefined;
            var modelType = $('#modal #engineModelType').val();
            if (allRoles) {
                allRoles.forEach(function(v) {
                    var checkedStr = "";
                    if (roleArr&&roleArr.length>0 && roleArr.indexOf(v.roleName) >= 0) {
                        checkedStr = "checked";
                    }
                    var $role = $('<div>', { 'class': 'col-sm-4' }).append(temp.format(v.roleName,
                        v.roleName + "(" + v.rolePer + "%)",
                        checkedStr,
                        'green',
                        ""));
                    if (modelType == @(ModelType.IndependentTeam.ToInt()) ||
                        modelType == @(ModelType.Independent.ToInt())) {
                        $role.on('click',
                            function(e) {
                                e.preventDefault();
                                e.stopPropagation();
                                var flag = $(this).find('input').is(':checked');
                                $(this).closest('.role-box').find('input').prop('checked', false);
                                $(this).find('input').prop('checked', !flag);
                            });
                    }
                    $roleBox.append($role);
                });
            }
            var $info = $('<div>',
                { 'class': 'iwb-info-box iwb-sm', 'id': 'role-box', 'css': { 'padding': '0 10px' } });
            $info.append('<div class="box-header">演练角色<small>(不配置即视为关闭关联角色)</small></div>');
            $info.append($roleBox);
            $info.append($('<div>',
                    {
                        'class': 'role-auto',
                        'css': { 'border': 'none', 'textAlign': 'right', 'marginRight': '0 30px 0 0' }
                    })
                //.append(temp.format('auto', '未考核角色自动满分', assessAuto != false ? "checked" : "", 'danger',"auto"))
            );
            return $info;
        }

        function FormatterVariableBox(variableStr) {
            if (!variableStr) {
                return '';
            }
            var label = '<div class="dynamic-label col-sm-{0}"><label class="iwb-label">{1}</label></div >',
                $box = $('<div>', { 'class': 'dynamic-box', 'css': { 'margin': '10px' } }),
                $box1 = $('<div>', { 'class': 'row iwb-dynamic-box' }),
                $box2 = $('<div>', { 'class': 'row iwb-dynamic-box' });
            $box1.append(label.format('4', '变量'))
                .append(label.format('4', '类型'))
                .append(label.format('4', '默认值'));
            $box2.append(
                '<div class="col-sm-4"><div class="input-group input-group-sm"><input class="form-control required" name="variableId" placeholder="请输入变量" style="width: 100%" /></div></div><div class="col-sm-4"><div class="input-group input-group-sm"><select class="form-control required" name="variableType" style="width: 100%">@(Html.Raw(variableType))</select></div></div><div class="col-sm-4"><div class="input-group input-group-sm"><input class="form-control required" name="defaultValue" placeholder="请输入默认值" style="width: 100%" /></div></div><div style="display:none"><button class="btn btn-sm btn-block btn-add" type="button" onclick="AddDynamicBox(this)">增加</button></div>');
            $box.append($box1).append($box2);
            var variableArr = variableStr.split(',');
            for (var i = 0; i < variableArr.length; i++) {
                var str = variableArr[i];
                var arr = str.split(':');
                var $that = i === 0
                    ? $box.find('.iwb-dynamic-box').eq(1)
                    : AddDynamicBox($box.find('.iwb-dynamic-box').eq(1).find('.btn-add'));
                $that.find('.form-control[name="variableId"]').val(arr[0]).prop('disabled', true);
                $that.find('.form-control[name="variableType"]').val(arr[1].toLocaleLowerCase() || "string").select2()
                    .prop('disabled', true);
                $that.find('.form-control[name="defaultValue"]').val(arr[2] || "");
            }
            var $info = $('<div>',
                { 'class': 'iwb-info-box iwb-sm', 'id': 'variable-box', 'css': { 'padding': '0 10px' } });
            $info.append('<div class="box-header">全局变量</div>');
            $info.append($box);
            return $info;
        }

        function SavePackageSetting() {
            var $modal = $('#modal-package-setting');
            _PackageSetting = _PackageSetting || {};
            //_PackageSetting.roundScore = $modal.find('#roundScore').val();

            var roleNameArr = [];
            $modal.find('#role-box input[name="assess-role"]:checked').each(function() {
                if ($(this).is(':checked')) {
                    var v = $(this).data('role-no');
                    if (roleNameArr.indexOf(v>-1)) {
                        roleNameArr.push(v);
                    }
                }
            });
            _PackageSetting.assessAuto = true; //$modal.find('#role-auto').is(':checked');
            _PackageSetting.assessRoleNames = roleNameArr.join(",");
            var variableStr = '';
            $modal.find('#variable-box').find('.iwb-dynamic-box').each(function() {
                var name = $(this).find('.form-control[name="variableId"]').val();
                if (name) {
                    var type = $(this).find('.form-control[name="variableType"]').val() || 'string';
                    var value = $(this).find('.form-control[name="defaultValue"]').val() || '';
                    variableStr += (variableStr == '' ? '' : ',') + '{0}:{1}:{2}'.format(name, type, value);
                }
            });
            _PackageSetting.variable = variableStr;
            $modal.modal('hide');
        }
    </script>

    <script id="tag-s">
        function TagModal(data, url) {
            var $body = FormatterTagBody(data);
            $(document).iwbModal('create',
                {
                    modal: 'modal-tag',
                    modaltitle: "筛选行为标签",
                    modalBody: $body,
                    save: function () {
                        SaveTag(url);
                    }
                });
        }

        function FormatterTagBody(data) {
            var $form = $('<form>', { 'css': { 'padding': '10px' } });
            $form.append('<input class="form-control" id="campNo" name="campNo" type="hidden">');
            $form.find("#campNo").val(data.campNo);
            var temp =
                '<label class="iwb-checkbox iwb-{3}"><input type="checkbox" id="tag-{0}" data-tag-no="{0}" name="tag" value="{0}" {2}><span></span>{1}</label>';

            var $tagBox = $('<div>', { 'class': 'dynamic-box row', 'css': { 'margin': '10px', 'paddingBottom': '0' } });
            var tagArr = data.behaviorTagNos ? data.behaviorTagNos.split(',') : undefined;
            if (data.allTags) {
                data.allTags.forEach(function (v) {
                    var checkedStr = "checked";
                    if (tagArr && tagArr.length > 0 && tagArr.indexOf(v.tagNo) < 0) {
                        checkedStr = "";
                    }
                    var $tag = $('<div>', { 'class': 'col-sm-3' })
                        .append(temp.format(v.tagNo, v.tagName, checkedStr, 'green'));
                    $tagBox.append($tag);
                });
            }
            var $info = $('<div>', { 'class': 'iwb-info-box iwb-sm', 'id': 'tag-box', 'css': { 'padding': '0 10px' } });
            $info.append('<div class="box-header">评估标签</div>');
            $info.append($tagBox);
            $form.append($info);
            return $form;
        }

        function SaveTag(url) {
            var $modal = $('#modal-tag'), data = { campNo: $modal.find('#campNo').val() };
            var tagNos = '';
            $modal.find('#tag-box input[name="tag"]:checked').each(function () {
                if ($(this).is(':checked')) {
                    tagNos += (tagNos === "" ? "" : ",") + $(this).data('tag-no');
                }
            });
            data.behaviorTagNos = tagNos;
            $.iwbAjax2({
                url: url,
                data: data,
                success: function () {
                    $modal.modal('hide');
                }
            });
        }
    </script>

    <!--格式化-->
    <script id="formatter-script" type="text/javascript">

        function ActiveCamp(id) {
            MsgConfirm("确定激活课程吗？激活后不能再修改！",
                "激活课程",
                function() {
                    $.iwbAjax1({
                        url: abp.appUrl + 'Camp/ChangeState',
                        data: { id: id, campState: @(CampStateDefinition.Active) },
                        success: function() {
                            RefreshTable($('#table'),true);
                        }
                    });
                });
        }

        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>';
            }
        }
        @*function StateFormatter(v) {
            var name = $('#hid-state option[value="' + v + '"]').text();
            switch (v) {
            case @(CampStateDefinition.Active):
                return '<span class="label label-success">' + name +'</span>';
            default:
                return '<span class="label label-info">' + name +'</span>';
            }
        }*@

        function StartDateFormatter(v, r, i) {
            var str = '';
            if (r.startDate && r.endDate) {
                str= '<span>{0}</span>'.format(DateFormatter(r.startDate, r, i, "startDate") +
                    " 至 " +
                    DateFormatter(r.endDate, r, i, "endDate"));

                if (new Date(r.endDate).getTime() + 24*60 *60*1000 < new Date().getTime()) {
                    str += '<span style="color:red">（已失效）</span>';
                } else if (new Date(r.startDate).getTime() > new Date().getTime()) {
                    str += '<span style="color:red">（未启动）</span>';
                }
            }
            return str;
        }

        function MinuteFormatter(v) {
            return v + "分钟";
        }

        function StateFormatter(v, r) {
            var temp = '<span class="table-action"  onclick="{1}" target="_blank">' + icon + '{0}</span>';
            var name = $('#hid-state option[value="' + v + '"]').text();
            switch (r.campState) {
            case @(CampStateDefinition.New):
                return temp.format("激活课程", "ActiveCamp('" + r.id + "')");
            case @(CampStateDefinition.Active):
                return '<span class="label label-success">' + name + '</span>';
            default:
                return '暂无操作';
            }
        }

        function SubjectTypeFormatter(v) {
            var name = $('#hid-subjectType option[value="' + v + '"]').text();
            return name;
        }
    </script>
}


<section style="display: none">
    <select id="hid-state">
        @Html.Raw(state)
    </select>
    <select id="hid-subjectType">
        @Html.Raw(subjectType)
    </select>

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