@{
    Layout = "~/Views/Shared/Layout/_Layout.Play.cshtml";
    ViewBag.PageId = "start";
    ViewBag.Title = "创建演练";
}
<style>
    .header {
        width: 100%;
        font-size: 24px;
        font-weight: 600;
        padding: 8px 20px;
        color: #008b8b;
        border-bottom: 3px solid #008b8b;
        margin-bottom: 10px;
    }

    .no-data {
        display: flex;
        color: #ff4500;
        font-size: 26px;
        font-weight: 600;
        width: 100%;
        height: 150px;
        justify-content: center;
        align-items: center;
    }

    .tool-box {
        padding: 0 0 5px;
        display: flex;
        width: 100%;
    }

    .tool-box span {
        text-align: center;
        width: 50%;
        padding: 5px;
        cursor: pointer;
        background: #000000;
        background: rgba(0,0,0,0.3);
        border: 1px solid #ddd;
    }

    .tool-box span:hover {
        background: #000000;
        background: rgba(0,0,0,0.4);
    }
</style>
<div style="padding: 15px 30px;">
    <div class="row">
        <div class="header">可用培训营</div>
    </div>
    <div class="row" id="use-camp">

    </div>
    <div class="row">
        <div class="header">等待加入的演练</div>
    </div>
    <div class="row" id="join-camp">

    </div>
</div>


@section scripts
{
    <script>
        $(function () {
            GetCanUseCamp();
            GetCanJoinCamp();
        });

        function GetCanUseCamp() {
            $.iwbAjax4({
                url: abp.appUrl + 'Query/QueryCanUseCamp',
                success: function (res) {
                    CanUseCampFormatter(res);
                }
            });
        }

        function GetCanJoinCamp() {
            $.iwbAjax4({
                url: abp.appUrl + 'Query/QueryCanJoinCamp',
                success: function (res) {
                    CanJoinCampFormatter(res);
                }
            });
        }



        function CanUseCampFormatter(data) {
            var str = '';
            if (data && data.length) {
                data.forEach(function (v) {
                    str += CampFormatter(v, 1);
                });
            }
            if (str) {
                $('#use-camp').html(str);
            } else {
                $('#use-camp').html('<div class="no-data">暂无可用培训营</div>');
            }
        }
        function CanJoinCampFormatter(data) {
            var str = '';
            if (data && data.length) {
                data.forEach(function (v) {
                    str += CampFormatter(v, 2);
                });
            }
            if (str) {
                $('#join-camp').html(str);
            } else {
                $('#join-camp').html('<div class="no-data">暂无可用培训营</div>');
            }
        }

        function CampFormatter(data, type) {
            var str = '';
            if (data) {
                var style = "danger", icon = "fas fa-lock", per = 100, title = type == 1 ? "创建演练" : "加入演练";
                if (type == 1) {
                    style = "info";
                    icon = "far fa-star";
                } else {
                    if (data.isPublic) {
                        style = "success";
                        icon = "fas fa-unlock";
                    }
                }
                str += '<div class="col-md-3">';
                str += '<div class="info-box bg-{0}" style="flex-direction: column;padding:0px">'.format(style);
                str += '<div class="ribbon-wrapper"><div class="ribbon bg-success">{0}分钟</div></div>'.format(
                    data.maxTrainingMinute);
                str += '<div style="display: flex;flex-direction: row;padding:5px 0 0;">';
                str += '<span class="info-box-icon"><i class="{0}"></i></span>'.format(icon);

                str += '<div class="info-box-content">';
                str += data.name?'<span class="info-box-text">演练名称：{0}</span>'.format(data.name):'';
                str += '<span class="info-box-text">培训营：{0}</span>'.format(data.campName);
                //if (type != 1) {
                //    var min = 0;
                //    str += '<span class="info-box-number">已演练 {0} 分钟</span>'.format(min);
                //}
                str += '<div class="progress"><div class="progress-bar" style="width: {0}%"></div></div>'.format(per);
                str += '<span class="progress-description">{0}</span>'.format(data.packageName);


                str += '</div>';
                str += '</div>';
                str += '<div class="tool-box" ><span onclick="Detail(\'{1}\',{2})">查看详情</span><span onclick="CreatePlay(\'{1}\',{2})">{0}</span></div>'.format(title, data.id, type);
                str += '</div>';

                str += '</div>';

            }
            return str;
        }
    </script>


    <script>
        function Detail(id, type) {
            if (type == 1) {
                window.open("/play/detail/" + id, "_blank");
            } else {
                window.open("/play/detailByPlay/" + id, "_blank");
            }
        }

        function CreatePlay(id, type) {
            if (type == 1) {
                window.open("/play/create/" + id, "_blank");
            } else  {
                window.open("/play/ready/" + id, "_blank");
            }
        }
    </script>
}