{$layout}

{$var "header"}
<!-- world map -->
<link rel="stylesheet" type="text/css" href="/_/@default/dashboard/boards/waf.css" media="all" />
<script type="text/javascript" src="/js/antd/g2plot.min.js" type="module"></script>
<script type="text/javascript" src="/js/echarts/echarts.min.js"></script>
<script type="text/javascript" src="/js/world.js"></script>
<script type="text/javascript" src="/js/world-countries-map.js"></script>
{$end}

{$template "menu"}

<div class="dashboard-container">
  <!-- 加载中 -->
  <div class="loading-wrapper" v-if="isLoading">
      <div class="ui message loading">
          <div class="ui active inline loader small"></div>  &nbsp; {{t('waf_数据加载中_f09b')}}...
      </div>
  </div>

  <div class="dashboard-content" v-if="!isLoading">
    <!-- 统计数据卡片区域 -->
    <div class="stats-card-grid">
      <div class="stat-card" @click="goToLogs('dailyBlocks')">
        <div class="stat-icon red">
          <i class="pi pi-shield"></i>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{board.countDailyBlocks}}</div>
          <div class="stat-label">{{t('waf_今日拦截_c50a')}}</div>
        </div>
      </div>
      
      <div class="stat-card" @click="goToLogs('dailyCaptcha')">
        <div class="stat-icon yellow">
          <i class="pi pi-check-square"></i>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{board.countDailyCaptcha}}</div>
          <div class="stat-label">{{t('waf_今日验证码验证_9c67')}}</div>
        </div>
      </div>
      
      <div class="stat-card" @click="goToLogs('dailyLogs')">
        <div class="stat-icon blue">
          <i class="pi pi-book"></i>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{board.countDailyLogs}}</div>
          <div class="stat-label">{{t('waf_今日记录_d7f1')}}</div>
        </div>
      </div>
      
      <div class="stat-card" @click="goToLogs('weeklyBlocks')">
        <div class="stat-icon purple">
          <i class="pi pi-chart-line"></i>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{board.countWeeklyBlocks}}</div>
          <div class="stat-label">{{t('waf_本周拦截_3d14')}}</div>
        </div>
      </div>
    </div>

    <!-- 图表展示区域 -->
    <div class="charts-section">
      <div class="chart-container map">
        <div class="chart-card">
          <div class="card-header">
            <h4>{{t('waf_攻击地域分布_5149')}}</h4>
            <a href="/servers/logs?hasWAF=1" class="more-link"><i class="pi pi-arrow-right"></i></a>
          </div>
          <div class="chart-content map-content" v-if="!isLoading">
            <traffic-map-box :v-stats="topCountryStats" :v-is-attack="true"></traffic-map-box>
          </div>
        </div>
      </div>
      
      <div class="chart-container">
        <div class="chart-card">
          <div class="card-header">
            <h4>{{t('waf_最新拦截记录_7df2')}}</h4>
            <a href="/servers/logs?hasWAF=1" class="more-link"><i class="pi pi-arrow-right"></i></a>
          </div>
          <div class="chart-content" v-if="accessLogs.length > 0">
            <div class="access-log-container">
              <table class="ui table selectable">
                <tr v-for="accessLog in accessLogs" :key="accessLog.requestId">
                  <td><http-access-log-box :v-access-log="accessLog"></http-access-log-box></td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
      
      <div class="chart-container">
        <div class="chart-card">
          <div class="card-header">
            <h4>{{t('waf_攻击趋势_8363')}}</h4>
          </div>
          <div class="chart-content">
            <div class="ui menu text legend-menu">
              <a href="" class="item" :class="{active: requestsTab == 'hourly'}" @click.prevent="selectRequestsTab('hourly')">24{{t('waf_小时趋势_55ad')}}</a>
              <a href="" class="item" :class="{active: requestsTab == 'daily'}" @click.prevent="selectRequestsTab('daily')">15{{t('waf_天趋势_e980')}}</a>
              <div class="legend">
                <span class="legend-item"><i class="circle" style="background: #F39494"></i>{{t('waf_拦截_320c')}}</span>
                <span class="legend-item"><i class="circle" style="background: #FBD88A"></i>{{t('waf_验证码_983f')}}</span>
                <span class="legend-item"><i class="circle" style="background: #879BD7"></i>{{t('waf_记录_620b')}}</span>
              </div>
            </div>
            <div class="chart-box" id="hourly-chart" v-show="requestsTab == 'hourly'"></div>
            <div class="chart-box" id="daily-chart" v-show="requestsTab == 'daily'"></div>
          </div>
        </div>
      </div>
      
      <div class="chart-container">
        <div class="chart-card">
          <div class="card-header">
            <h4>{{t('waf_拦截类型分布_0515')}}</h4>
          </div>
          <div class="chart-content">
            <div class="chart-box" id="group-chart"></div>
          </div>
        </div>
      </div>
      
      <div class="chart-container">
        <div class="chart-card">
          <div class="card-header">
            <h4>{{t('waf_域名拦截排行_b72c')}}<span>（24{{t('waf_小时_2de0')}}）</span></h4>
          </div>
          <div class="chart-content">
            <div class="chart-box" id="top-domains-chart"></div>
          </div>
        </div>
      </div>
      
      <div class="chart-container">
        <div class="chart-card">
          <div class="card-header">
            <h4>{{t('waf_节点拦截排行_3ab7')}}<span>（24{{t('waf_小时_2de0')}}）</span></h4>
          </div>
          <div class="chart-content">
            <div class="chart-box" id="top-nodes-chart"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>