@using WeOnlineApp.Helpers
@using WeOnlineApp.TrainingCamp.Dto

@{
    Layout = "~/Views/Shared/Layout/_Layout.Play.cshtml";
    ViewBag.PageId = "start";
    CampDto camp = ViewBag.Camp;
    ViewBag.Title = $"{camp.Name}—预演学习";
    camp.CampState = 3;
}
@Html.Partial("~/Views/Play/_BoxBaseStyle.cshtml")
    <style>
        .box .box-header .back-btn {
            right: 40px;
        }

        .camp-detail {
            width: 100%;
            height: 100% !important;
        }

        .step-flow {
            display: flex;
            flex-direction: row;
            width: 100%;
            height: 100%;
            justify-content: center;
            align-items: center;
            color: var(--mainColor);
            font-size: 14px;
        }

        .step-box {
            display: flex;
            flex-direction: row;
        }

        .step-body-1 {
            position: relative;
        }

        .step-body-2 {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }


        .op-title {
            margin-bottom: 5px;
            font-weight: 600;
            font-size: 16px;
            color: var(--mainColor);
            text-align: center;
            width: 100%;
            border-bottom: 2px solid;
        }

        .step-body-1 .op-title {
            text-align: center;
            position: absolute;
            width: 100%;
            top: -30px;
        }


        .step-flow .step-link {
            display: block;
            padding: 1rem .5rem 1rem 1.5em;
            cursor: pointer;
            white-space: nowrap;
        }
        .step-item.last .step-link {
            padding-right: 1.5rem;
        }
        .step-flow .step-item {
            position: relative;
            background: var(--mainBgColor2);
        }

        .step-flow .step-item:not(.last):after {
            content: " ";
            width: 10px;
            height: 100%;
            background: var(--mainBgColor2);
            clip-path: polygon(0 0, 100% 50%, 0 100%);
            position: absolute;
            left: calc(100% - 1px);
            top: 0;
            z-index: 1;
            border: transparent;
        }

                .step-flow .step-item.active:after,
                .step-flow .step-item:hover:after {
                    background: linear-gradient(#02595a, #02595a);
                }

                .step-flow .step-item.active .step-link,
                .step-flow .step-item:hover .step-link {
                    display: inline-flex;
                    color: #fff;
                    background: linear-gradient(#02595a, #02595a);
                }

            .step-flow .caret-shadow {
                background: var(--mainColor);
                clip-path: polygon(0 0, 100% 50%, 0 100%);
                filter: blur(16px);
                content: " ";
                width: 16px;
                height: 130%;
                position: absolute;
                left: 100%;
                top: -15%;
                z-index: 1;
            }
    </style>
<div class="row">
    <div class="col-sm-12">
        <div class="row" style="height: calc(100vh - 340px);margin-bottom: 20px; ">
            <div class="col-sm-3" style="height: 100%;">
                @Html.Partial("~/Views/Play/_CampDetail.cshtml", camp)
            </div>
            <div class="col-sm-9" style="height: 100%;">
                <div class="box" style="height: 100%;">
                    <div class="box-header">
                        <span>@(camp.Name) — 预演学习</span>
                        <div class="back-btn">
                            <button type="button" class="btn  btn-outline-success btn-sm mr-3" style="width: 80px;" onclick="SubjectCreate()">选择课程</button>
                            <button type="button" class="btn  btn-outline-light btn-sm" style="width: 80px;" onclick="Back()">返回课程</button>
                        </div>
                    </div>
                    <div class="box-body" style="padding: 20px;">
                        <div id="study-box" style="margin: 0 auto;">@(Html.Raw(camp.StudyContent))</div>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
    <div class="col-sm-12">
        <div class="box" style="height: 300px">
            <div class="box-header">演练操作步骤</div>
            <div class="box-body" id="step-flow">
                <div class="step-flow" style="transform: scaleX(0.9)">
                    <div class="step-box">
                        <div class="step-item active">
                            <a class="step-link disabled">1 选择课程</a>
                            <span class="caret-shadow">&nbsp;</span>
                        </div>
                        <div class="step-item">
                            <a class="step-link disabled">2 创建演练&nbsp;<i class="iconfont icon-playcircle" title="查看视频"></i></a>
                            <span class="caret-shadow">&nbsp;</span>
                        </div>
                    </div>
                    <div class="step-box" >
                        <div class="step-body-1">
                            <div class="op-title">团队模式</div>
                            <div class="step-box">
                                <div class="step-item ">
                                    <a class="step-link disabled">3.1 邀请成员加入&nbsp;<i class="iconfont icon-playcircle" title="查看视频"></i></a>
                                    <span class="caret-shadow">&nbsp;</span>
                                </div>
                                <div class="step-item ">
                                    <a class="step-link disabled">3.2 成员选择角色&nbsp;<i class="iconfont icon-playcircle" title="查看视频"></i></a>
                                    <span class="caret-shadow">&nbsp;</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="step-box">
                        <div class="step-item ">
                            <a class="step-link disabled">4 开始演练</a>
                            <span class="caret-shadow">&nbsp;</span>
                        </div>
                        <div class="step-item">
                            <a class="step-link disabled">5 系统推送情景</a>
                            <span class="caret-shadow">&nbsp;</span>
                        </div>
                        <div class="step-item">
                            <a class="step-link disabled">6 选择一个情景&nbsp;<i class="iconfont icon-playcircle" title="查看视频"></i></a>
                            <span class="caret-shadow">&nbsp;</span>
                        </div>
                    </div>
                    <div class="step-box">
                        <div class="step-body-2">
                            <div class="op-title">单人模式</div>
                            <div class="step-box" style="margin-bottom: 30px;">
                                <div class="step-item ">
                                    <a class="step-link disabled">7 直接提交并下达处理指令</a>
                                    <span class="caret-shadow">&nbsp;</span>
                                </div>
                            </div>
                            <div class="op-title">团队模式</div>
                            <div class="step-box">
                                <div class="step-item ">
                                    <a class="step-link disabled">7.1 成员发布指令&nbsp;<i class="iconfont icon-playcircle" title="查看视频"></i></a>
                                    <span class="caret-shadow">&nbsp;</span>
                                </div>
                                <div class="step-item ">
                                    <a class="step-link disabled">7.2 房主下达指令&nbsp;<i class="iconfont icon-playcircle" title="查看视频"></i></a>
                                    <span class="caret-shadow">&nbsp;</span>
                                </div>

                            </div>

                        </div>
                    </div>
                    <div class="step-box">
                        <div class="step-item">
                            <a class="step-link disabled">8 处理下阶段情景&nbsp;<i class="iconfont icon-playcircle" title="查看视频"></i></a>
                            <span class="caret-shadow">&nbsp;</span>
                        </div>
                        <div class="step-item">
                            <a class="step-link disabled">9 重复5-8步至演练完成</a>
                            <span class="caret-shadow">&nbsp;</span>
                        </div>
                        <div class="step-item last">
                            <a class="step-link disabled">10 查看评估报告&nbsp;<i class="iconfont icon-playcircle" title="查看视频"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@using (Html.BeginScripts())
{
<script>
    $(function () {
        $('.step-flow .step-item').on('click',
            function () {
                $('.step-flow .active').removeClass('active');
                $(this).addClass('active');
            });
            OverlayScrollbar($('#study-box'));
        });
        function SubjectCreate() {
            window.location.href = "@Url.Action("Create","Play")/@(camp.Id)";
        }
        function Back() {
            window.location.href = "@Url.Action("PlayList","Play")";
        }
</script>
}