{$layout}
{$template "../user_menu"}

<columns-grid>
    <div class="ui column" v-if="uiConfig.showTrafficCharts">
        <h4>{{t('users_user_servers@本月总流量')}}</h4>
        <div class="value"><bytes-var :v-bytes="dashboard.monthlyTrafficBytes"></bytes-var></div>
    </div>

    <div class="ui column" v-if="uiConfig.showBandwidthCharts">
        <h4>{{t('users_user_servers@本月带宽峰值')}}</h4>
        <div class="value"><bits-var :v-bits="dashboard.monthlyPeekBandwidthBits"></bits-var></div>
    </div>

    <div class="ui column" v-if="uiConfig.showTrafficCharts">
        <h4>{{t('users_user_servers@今日流量')}}</h4>
        <div class="value"><bytes-var :v-bytes="dashboard.dailyTrafficBytes"></bytes-var></div>
    </div>

    <div class="ui column" v-if="uiConfig.showBandwidthCharts">
        <h4>{{t('users_user_servers@今日带宽峰值')}}</h4>
        <div class="value"><bits-var :v-bits="dashboard.dailyPeekBandwidthBits"></bits-var></div>
    </div>
</columns-grid>

<b-empty v-if="servers.length == 0">{{t('users_user_servers@当前用户下暂时还没有网站')}}</b-empty>

<!-- 使用 b-table 替换 table -->
<b-table
    v-if="servers.length > 0"
    :columns="columns"
    :data-source="servers"
    :row-key="'id'"
    size="middle"
    :scroll="{ x: 1200 }"
>
    <!-- 网站名称 Slot -->
    <template slot="serverNameSlot" slot-scope="{ text, record }">
         <!-- 使用 div 包裹以应用 less 中的样式 -->
         <div class="server-name-td">
            <a :href="'/servers/server?serverId=' + record.id"><keyword :v-word="keyword">{{record.name}}</keyword></a>  &nbsp; <a :href="'/servers/server/settings?serverId=' + record.id" :title="t('users_user_servers@设置')"><i class="icon setting grey"></i></a>
            <div style="margin-top:0.4em">
                <grey-label>{{record.serverTypeName}}</grey-label>
            </div>
        </div>
    </template>

    <template slot="clusterSlot" slot-scope="{ text, record }">
        {{record.cluster.name}}
    </template>

    <!-- 域名 Slot -->
    <template slot="domainSlot" slot-scope="{ text, record }">
         <span v-if="record.firstServerName.length > 0">
            <keyword :v-word="keyword">{{record.firstServerName}}</keyword>
            <span v-if="record.countServerNames > 1">{{t('users_user_servers@等')}}{{record.countServerNames}}{{t('users_user_servers@个域名')}} <popup-icon :href="'/servers/serverNamesPopup?serverId=' + record.id" height="20em"></popup-icon></span>
        </span>
        <span v-else class="disabled">-</span>

        <!-- 审核中 -->
        <div v-if="record.isAuditing" style="margin-top: 0.5em">
            <a class="ui label basic tiny red" :title="t('users_user_servers@点击跳到审核页面')" :href="'/servers/server/settings/serverNames?serverId=' + record.id">{{t('users_user_servers@审核中')}}<span class="small grey" v-if="record.auditingTime.length > 0">（{{record.auditingTime}}）</span> &nbsp;<i class="icon long arrow right alternate"></i></a>
        </div>

        <!-- 审核失败 -->
        <div v-if="!record.auditingIsOk" style="margin-top: 0.5em">
            <a class="ui label basic tiny red" :title="t('users_user_servers@点击跳到审核页面')" :href="'/servers/server/settings/serverNames?serverId=' + record.id">{{t('users_user_servers@审核不通过')}} &nbsp;<i class="icon long arrow right alternate"></i></a>
        </div>
    </template>

    <!-- bandwidthTitle -->
    <template slot="bandwidthTitle">
        {{t('users_user_servers@下行带宽')}}<tip-icon :content="t('users_user_servers@最近5分钟峰值带宽，每5分钟更新一次')"></tip-icon><sort-arrow name="trafficOutOrder"></sort-arrow>
    </template>
    <!-- 端口 Slot -->
    <template slot="portSlot" slot-scope="{ text, record }">
         <span v-if="record.ports.length == 0">-</span>
        <div v-for="port in record.ports">
            <tiny-basic-label><keyword :v-word="keyword">{{port.portRange}}</keyword><span class="small">（{{port.protocol}}）</span></tiny-basic-label>
        </div>
    </template>

     <!-- 下行带宽 Slot -->
    <template slot="bandwidthSlot" slot-scope="{ text, record }">
         <span v-if="record.bandwidthBits > 0" class="bandwidth-span"><bits-var :v-bits="record.bandwidthBits"></bits-var></span>
        <span class="disabled" v-else>-</span>
    </template>

    <!-- 状态 Slot -->
    <template slot="statusSlot" slot-scope="{ text, record }">
        <div v-if="!checkDNS">
            <label-on :v-is-on="record.isOn"></label-on>
        </div>
        <div v-else>
            <span v-if="!record.isOn" class="grey">{{t('users_user_servers@停用中')}}</span>
            <span v-else-if="record.status.isOk" class="green">{{t('users_user_servers@正常')}}</span>
            <span v-else-if="record.status.message.length == 0">{{t('users_user_servers@检查中')}}</span>
            <span v-else class="red">{{record.status.message}}
                <tip-icon :content="record.status.todo"></tip-icon>
            </span>
        </div>
    </template>

     <!-- 操作 Slot -->
    <template slot="actionSlot" slot-scope="{ text, record }">
         <a :href="'/servers/server?serverId=' + record.id">{{t('users_user_servers@详情')}}</a> &nbsp;
        <a :href="'/servers/server/settings?serverId=' + record.id">{{t('users_user_servers@设置')}}</a>
    </template>

</b-table>

<page-box></page-box>