{extend name="Hustbe/common/base" /}
{block name="title"}控制台{/block}
{block name="main"}
<main class="content">
    <link rel="stylesheet" type="text/css" href="{$TemplateStatic}/css/user.css">
    <div id="content-container" class="container">
        <div class="row">
            <div class="col-md-3">
                <div class="sidenav">
                    <!-- 引入用户中心菜单 -->
                    {include file="Hustbe/common/user_menu"}
                </div>
            </div>
            <style>
                .statusInfo span {
                    background: #6FCE7F;
                    display: inline-block;
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                    margin-right: 8px;
                }

                .host-body {
                    cursor: pointer;
                    padding: 10px 0px 20px 0px;
                    border-top: 8px solid #373D41;
                    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
                }

                .host-body:hover {
                    border-top: 8px solid #00C1DE;
                }

                .hostName {
                    border-bottom: 1px solid #eee;
                    padding-bottom: 5px;
                }

                #myHost {
                    margin-bottom: 10px;
                }
                .notice{
                    white-space:nowrap;
                    overflow: hidden;
                    text-overflow:ellipsis;
                }
            </style>
            <div class="col-md-9">
                <div class="panel panel-default panel-page">
                    <div class="panel-heading">
                        <h2>主机列表</h2>
                    </div>
                    <div class="panel-body p-0">
                        <ul id="myHost" class="nav nav-tabs">
                            {notempty name="$bt_hostList"}<li class="active"><a href="#btapnel"
                                    data-toggle="tab">宝塔主机</a></li>{/notempty}
                            {notempty name="$ep_hostList"}<li><a href="#epanel" data-toggle="tab">康乐主机</a></li>{/notempty}
                            {notempty name="$customizeList"}<li><a href="#customize" data-toggle="tab">其他商品</a></li>{/notempty}
                        </ul>

                        <div id="myHostContent" class="tab-content">
                            {notempty name="$bt_hostList"}
                            <div class="tab-pane fade in" id="btapnel">
                                {volist name="bt_hostList" id="host" empty="无"}
                                <a href="{:url('index/console/info',['id'=>$host.id])}">
                                    <div class="col-xs-12 col-sm-12 col-md-6">
                                        <div class="panel">
                                            <div class="panel-body host-body">
                                                <div class="hostInfo">
                                                    <div class="col-xs-12 col-sm-12 col-md-12 hostName">
                                                        <div class="text-left col-md-6">
                                                            {$host.vhost_bt.bt_name|default="空"}</div>
                                                        <div class="text-right col-md-6">{$host.type}</div>
                                                    </div>
                                                    <div class="hostConfig">
                                                        <div class="col-xs-12 col-sm-6 col-md-6">
                                                            空间：{$host.vhost_bt.site_max|default="无限制"}
                                                        </div>
                                                        <div class="col-xs-12 col-sm-6 col-md-6">
                                                            数据库：{$host.vhost_sql.sql_max|default="无限制"}
                                                        </div>
                                                        <div class="col-xs-12 col-sm-6 col-md-6">
                                                            流量：{$host.vhost_bt.flow_max|default="无限制"}
                                                        </div>
                                                        <div class="col-xs-12 col-sm-6 col-md-6">
                                                            环境：{$host.vhost_bt.server_os|default="空"}
                                                        </div>
                                                        <div class="col-xs-12 col-sm-12 col-md-12">
                                                            商品名：{$host.ware.name|default="无"}
                                                        </div>
                                                        <div class="col-xs-12 col-sm-12 col-md-12">
                                                            到期时间：{$host.endtime|date="Y-m-d H:i",###}
                                                        </div>
                                                        <div class="col-xs-12 col-sm-12 col-md-12 notice">
                                                            备注：{$host.notice|htmlentities}
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="hostStatus">
                                                    <div class="col-xs-6 col-sm-6 col-md-6">
                                                        <div class="statusInfo">
                                                            {if $host.endtime>time()}
                                                            
                                                            {switch name="host.status"}
                                                                {case value="normal"}<span
                                                                    style="background: #6FCE7F"></span> 正常{/case}
                                                                {case value="hidden"}<span
                                                                    style="background: rgb(236, 207, 43)"></span> 停用{/case}
                                                                {case value="locked"}<span
                                                                    style="background: rgb(255, 0, 0)"></span> 锁定{/case}
                                                                {default /}{:__($host.status)}
                                                            {/switch}
                                                            
                                                            {else/}
                                                            <span style="background: rgb(255, 0, 0)"></span>
                                                            已过期
                                                            {/if}
                                                        </div>
                                                    </div>
                                                    <div class="col-xs-6 col-sm-6 col-md-6 text-right">
                                                        <div class="statusInfo">详情</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                                {/volist}
                            </div>
                            {/notempty}
                            {notempty name="$ep_hostList"}
                            <div class="tab-pane fade" id="epanel">
                                {volist name="ep_hostList" id="host" empty="无"}
                                <a href="{:url('index/console/info',['id'=>$host.id])}">
                                    <div class="col-xs-12 col-sm-12 col-md-6">
                                        <div class="panel">
                                            <div class="panel-body host-body">
                                                <div class="hostInfo">
                                                    <div class="col-xs-12 col-sm-12 col-md-12 hostName">
                                                        <div class="text-left col-md-6">{$host.username}</div>
                                                        <div class="text-right col-md-6">{$host.type}</div>
                                                    </div>
                                                    <div class="hostConfig">
                                                        <div class="col-xs-12 col-sm-12 col-md-12">
                                                            <p>到期时间：{$host.endtime|date="Y-m-d H:i",###}</p>
                                                        </div>
                                                        <div class="col-xs-12 col-sm-12 col-md-12 notice">
                                                            备注：{$host.notice|htmlentities}
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="hostStatus">
                                                    <div class="col-xs-6 col-sm-6 col-md-6">
                                                        <div class="statusInfo">
                                                            {if $host.endtime>time()}

                                                            {switch name="host.status"}
                                                            {case value="normal"}<span
                                                                style="background: #6FCE7F"></span> 正常{/case}
                                                            {case value="hidden"}<span
                                                                style="background: rgb(236, 207, 43)"></span> 停用{/case}
                                                            {case value="locked"}<span
                                                                style="background: rgb(255, 0, 0)"></span> 锁定{/case}
                                                            {default /}{:__($host.status)}
                                                            {/switch}

                                                            {else/}
                                                            <span style="background: rgb(255, 0, 0)"></span>
                                                            已过期
                                                            {/if}
                                                        </div>
                                                    </div>
                                                    <div class="col-xs-6 col-sm-6 col-md-6 text-right">
                                                        <div class="statusInfo">详情</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                                {/volist}
                            </div>
                            {/notempty}
                            {notempty name="$customizeList"}
                            <div class="tab-pane fade" id="customize">
                                {volist name="customizeList" id="cust" empty="无"}
                                <a href="{:url('index/console/cust_info',['id'=>$cust.id])}">
                                    <div class="col-xs-12 col-sm-12 col-md-6">
                                        <div class="panel">
                                            <div class="panel-body host-body">
                                                <div class="hostInfo">
                                                    <div class="col-xs-12 col-sm-12 col-md-12 hostName">
                                                        <div class="text-left col-md-6">User：{$cust.username}</div>
                                                    </div>
                                                    <div class="hostConfig">
                                                        <div class="col-xs-12 col-sm-12 col-md-12">
                                                            <p>IP：{$cust.ip_address|default="无"}</p>
                                                        </div>
                                                        <div class="col-xs-12 col-sm-12 col-md-12">
                                                            <p>到期时间：{$cust.endtime|date="Y-m-d H:i",###}
                                                            </p>
                                                            
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="hostStatus">
                                                    <div class="col-xs-6 col-sm-6 col-md-6">
                                                        <div class="statusInfo">
                                                            {if $cust.endtime>time()}

                                                            {switch name="cust.status"}
                                                            {case value="normal"}<span
                                                                style="background: #6FCE7F"></span> 正常{/case}
                                                            {case value="hidden"}<span
                                                                style="background: rgb(236, 207, 43)"></span> 停用{/case}
                                                            {case value="locked"}<span
                                                                style="background: rgb(255, 0, 0)"></span> 锁定{/case}
                                                            {default /}{:__($cust.status)}
                                                            {/switch}

                                                            {else/}
                                                            <span style="background: rgb(255, 0, 0)"></span>
                                                            已过期
                                                            {/if}
                                                        </div>
                                                    </div>
                                                    <div class="col-xs-6 col-sm-6 col-md-6 text-right">
                                                        <div class="statusInfo">详情</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                                {/volist}
                            </div>
                            {/notempty}
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    </div>
</main>
{/block}