@using WeApp.TrainingCampGroup.Dto
@{
    Layout = "~/Views/Shared/Layout/_Layout.Spec.cshtml";
    string campName = ViewBag.CampName;
    ViewBag.Title = "GIS(" + campName + ")";
   
}
<style>
    body {
        background: #f5f5f5;
    }

    .slide {
        color: rgb(81, 106, 248)
    }

    .tab-content-box {
        width: 100vw;
        max-width: 1300px;
        margin: 0 auto;
        height: 100vh;
        overflow: auto;
        background: #000;
        position: relative;
    }

    #carousel {
        position: static;
        width: 100%;
        cursor: pointer;
    }


    .tab-content-box .carousel-control {
        width: 80px;
        background: #4c4c4c;
    }


    .tab-content-box  .carousel-indicators {
        left: 80px;
        /*text-align: left;*/
    }


    .tab-content-box .carousel-indicators li {
        display: none;
        margin-left: 5px;
    }
    .tab-box, .tab-box ul, .tab-box li {
        float: left;
    }

    .tab-box {
        margin-top: 20px;
        margin-left: 5px;
        width: 150px;
        position: absolute;
    }

    .tab-box ul, .tab-box li {
        width: 100%;
        line-height: 37px;
    }

    .nav-tabs {
        border-bottom: none;
    }

    .nav-tabs > li > a {
        font-size: 15px;
        color: #678CEB;
        border-radius: 0 35px 35px 0;
        border: 1px solid #678CEB;
        padding: 8px 15px;
    }

    .nav > li > a:hover, .nav > li > a:active, .nav > li > a:focus {
        color: #eee;
        background: #678CEB;
        border-color: #678CEB;
    }

    .nav-tabs > li > a.active, .nav-tabs > li > a.active:focus, .nav-tabs > li > a.active:hover {
        cursor: default;
        color: #eee;
        border: 1px solid rgb(81, 106, 248);
        background: rgb(81, 106, 248);
        cursor: none;
    }
    .path-box {
        height: 100vh;
        background: transparent;
        margin: 0 auto;

    }
    .path-box .carousel .carousel-inner {
        height: auto;
        max-width: 550px;
    }
    .tab-content-box .carousel-item, .tab-content-box .item {
        max-width: 550px;
        margin: 0 auto;
    }
    .tab-box-border {
        position: absolute;
        width: 100%;
        max-width: 570px;
        height: 100%;
        border: 2px dashed #f00;
        border-top: none;
        border-bottom: none;
        top: 0;
        left: calc(50% - 285px);
        margin: 0 auto;
        cursor: none;
        z-index: 1;
    }
    .gis {
        height: 100vh;
    }
</style>
<div class="" style="min-width: 100vw; min-height: 100vh;">
    <div class="tab-box" style="z-index: 1000">
        <ul id="info-tab" class="nav nav-tabs" role="tablist" style="float: left">
            <li role="presentation" style="float: left"><a href="#t0" role="tab" class="active" data-toggle="tab">Start</a></li>
            <li role="presentation" class="" style="float: left"><a href="#t1" role="tab" data-toggle="tab">Running Path</a></li>
            <li role="presentation" class="" style="float: left"><a href="#t2" role="tab" data-toggle="tab">Gis</a></li>

        </ul>

    </div>
    <div id="info-content" class="tab-content">
        <div class="tab-box-border"></div>

        <div id="t0" role="tabpanel" class="tab-pane active">
            <div class="tab-content-box">
                <div class="title">

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

        <div id="t1" role="tabpanel" class="tab-pane" style="position: relative">
            <div class="tab-content-box">
                <div id="group-path-box"></div>
            </div>
        </div>

        <div id="t2" role="tabpanel" class="tab-pane">
            <div class="tab-content-box" style="position: relative">
                <div class="gis item" id="container"></div>
            </div>

        </div>


    </div>


</div>

@section scripts{
    <script src="https://webapi.amap.com/maps?v=1.4.10&key=4a93c6fbce674fbb621275fa23804d93&plugin=AMap.PolyEditor"></script>
    <script src="~/Content/Js/scene-path.js"></script>
    <script>
        $(function () {
            ScenePath();
            setInterval(ScenePath, 1000 * 30);
        });
    </script>
    <script id="path">
        function ScenePath() {
            $.iwbAjax5({
                url: abp.appUrl + 'Query/GetCampRunningInfos?no=@(ViewBag.CampNo)',
                success: function(res) {
                    var str = FormatterScenePath(res);
                    $('#group-path-box').html(str);
                }
            });
        }
    </script>
    <script id="gis">
        var map = new AMap.Map('container',
            {
                resizeEnable: true,
                zoom: 12,
                center: [121.527209, 31.228674]
            });
        AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.OverView'],
            function () {
                map.addControl(new AMap.ToolBar());
                map.addControl(new AMap.Scale());
                map.addControl(new AMap.OverView({ isOpen: true }));

            }
        );
    </script>
    <script>
        



    </script>
}