@using IwbZero.ToolCommon.StringModel
@using WeApp.Helpers
@model WeApp.Views.Shared.Camp.SelectCampModel
@{
    string url = Model.PageUrl.Ew("/"), camps = Model.CampSelect,title = Model.PageTitle;
    bool hasGroup = Model.HasGroup;
}
<!-- TABLE  SELECTCAMP  START-->
<style>
    body {
        --mc: #11998e;
    }

    .body {
        background: #fff;
        display: flex;
        flex-direction: column;
        height: 100vh;
        width: 100vw;
        box-sizing: padding-box;
        padding: 0px;
        background: url('../../../Content/Image/Stu/select-bg.png') no-repeat top;
        background-size: 100% 35%;
    }

    .title-box {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        position: relative;
        height: 40%;
    }

        .title-box .title {
            color: #fff;
            font-size: 40px;
            font-weight: 600;
            letter-spacing: 5px;
            margin-bottom: 100px;
        }

    .logo {
        position: absolute;
        top: 20px;
        left: 20px;
        width: 300px;
        height: 90px;
        background-image: url('../../../Content/Image/Stu/gwLogo.png');
        background-size: 100% 100%;
    }

    .form-box {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60%;
    }

        .form-box form {
            width: 400px;
            margin-top: -15%;
        }

    .input-group {
        margin-bottom: 15px;
    }

        .input-group .input-group-addon {
            width: 45px;
            height: 40px;
            background: var(--mc);
            padding: 8px 10px 12px;
        }

            .input-group .input-group-addon img {
                width: 100%;
                height: 100%;
            }
    .input-group select {
        width: calc(100% - 45px)
    }
    .form-box .select2-container--default .select2-selection--single {
        border: 1px solid var(--mc);
        border-radius: 0px;
        background: #f5f5f5;
        height: 40px;
        outline: none;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: var(--mc);
    }

    .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[aria-selected]:hover {
        background-color: var(--mc);
        color: #eee;
        outline: none;
    }

    .select2-container--default .select2-results__option[aria-selected=true] {
        background-color: var(--mc);
        color: #fff;
    }
    .select2-search {
        display: none;
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        background-color: var(--mc);
        height: 40px;
    }
        .select2-container--default .select2-selection--single .select2-selection__arrow b {
            border-color: #fff transparent transparent transparent;
        }
    .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
        border-color: transparent transparent #fff transparent;
    }
    .btn-box {
        text-align: center;
    }

    .btn-box .btn {
        color: #fff;
        width: 150px;
        font-size: 18px!important;
        background: var(--mc);
    }
    .btn-box .btn:hover {
        background-image: linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.1))
    }
    @@media(min-device-width: 1025px) {
        .title-box .title {
            font-size: 60px;
            letter-spacing: 10px;
        }

        .logo {
            top: 30px;
            left: 30px;
            width: 500px;
            height: 150px;
        }
    }
</style>
<div class="body">

    <div class="title-box">
        <div class="logo"></div>
        <div class="title">选择演练培训营</div>
    </div>
    <div class="form-box">
        <form>
            <div class="input-group">
                <span class="input-group-addon" for="camp">
                    <img src="~/Content/Image/Stu/camp.png" />
                </span>
                <select id="camp" class="form-control" style="">
                    @(Html.Raw(camps))
                </select>
            </div>
            @*<div class="form-group">

                <select id="camp" class="form-control" style="width: 100%">
                    @(Html.Raw(camps))
                </select>
            </div>*@
            @if (hasGroup)
            {
                <div class="input-group">
                    <span class="input-group-addon" for="camp-group">
                        <img src="~/Content/Image/Stu/group.png" />
                    </span>
                    <select id="camp-group" class="form-control" style="">
                        <option value="">请选择培训营分组</option>
                    </select>
                </div>
            }
            <div class="btn-box">
                <button class="btn" type="button" onclick="Go()">确定</button>
            </div>
        </form>

    </div>
</div>

@using (Html.BeginScripts())
{
<script>
    function Go() {
        var no = $("#camp").val();
        if (no) {
            @if (hasGroup)
            {
                <text>
            var groupNo = $("#camp-group").val();
            if (groupNo) {
                window.location.href = '@(url)' + groupNo ;
            } else {
                abp.message.warn("请选择一个分组！");
            }
                </text>
            }
            else
            {
                <text>
                    window.location.href = '@(url)' + no;
                </text>
            }

        } else {
            abp.message.warn("请选择一个培训营！");
        }
    }

    $(function () {
        //document.title = '@(title)' + document.title;
        $("#camp").select2();
        @if (hasGroup)
        {
            <text>
        $("#camp-group").select2();
        var campNo = "";
        $("#camp").on('change',function() {
            var no = $("#camp").val();
            if (no && campNo != no) {
                campNo = no;
                $.iwbAjax4({
                    url: abp.appUrl + 'Query/GetCampGroupSelectStr?no='+no,
                    success: function(res) {
                        $("#camp-group").html(res).select2();
                    }
                });
            }
        });
            </text>
        }
    });
</script>
}
<!-- TABLE  SELECTCAMP  END-->