<template>
  <div class="event-center">
    <!-- 左侧年月日导航 -->
    <div class="year-month-nav">
      <dv-border-box-12>
        <div class="nav-header">事件记录时间</div>
        
        <!-- 年份列表 - 一级菜单 -->
        <div class="year-list">
          <div 
            v-for="year in years" 
            :key="year" 
            class="year-item"
            :class="{ active: selectedYear === year }"
            @click="toggleYear(year)"
          >
            <div class="item-content">
              {{ year }}年
              <span class="arrow-icon" v-if="selectedYear === year">▼</span>
              <span class="arrow-icon" v-else>▲</span>
            </div>
            
            <!-- 月份列表 - 二级菜单 -->
            <div class="month-list" v-if="selectedYear === year">
              <div 
                v-for="month in months" 
                :key="month" 
                class="month-item"
                :class="{ active: selectedMonth === month }"
                @click.stop="toggleMonth(month)"
              >
                <div class="item-content">
                  {{ month }}月
                  <span class="arrow-icon" v-if="selectedMonth === month">▼</span>
                  <span class="arrow-icon" v-else>▲</span>
                </div>
                
                <!-- 日期列表 - 三级菜单 -->
                <div class="day-list" v-if="selectedMonth === month">
                  <div 
                    v-for="day in days" 
                    :key="day" 
                    class="day-item"
                    :class="{ active: selectedDay === day }"
                    @click.stop="selectDay(day)"
                  >
                    <div class="item-content">
                      {{ day }}日
                      <span class="check-icon" v-if="selectedDay === day">✓</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </dv-border-box-12>
    </div>
    
    <!-- 右侧数据列表 -->
    <div class="event-list">
      <dv-border-box-8>
        <div class="search-bar">
          <input 
            type="text" 
            v-model="searchText" 
            placeholder="请输入" 
            class="search-input" 
          />
        </div>
        <div class="table-container">
          <table class="event-table">
            <thead>
              <tr>
                <th v-for="col in columns" :key="col.key">{{ col.title }}</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(event, index) in filteredEvents" :key="index">
                <td>{{ event.time }}</td>
                <td>{{ event.name }}</td>
                <td>{{ event.algorithm }}</td>
                <td>{{ event.deviceId }}</td>
                <td>{{ event.ip }}</td>
                <td>
                  <span class="status-tag" :class="event.status">
                    {{ statusText[event.status] }}
                  </span>
                </td>
                <td>
                  <button class="action-btn view" @click="viewDetail(event)">查看</button>
                  <button class="action-btn delete" @click="deleteEvent(event)">删除</button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </dv-border-box-8>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

// 时间选择数据
const selectedYear = ref('2025')
const selectedMonth = ref('7')
const selectedDay = ref('10')
const years = ref(['2025', '2024', '2023', '2022', '2021', '2020'])
const months = ref(['12', '11', '10', '9', '8','7', '6', '5', '4', '3', '2', '1'])
const days = ref(['10', '9', '8', '7', '6','10', '9', '8', '7', '6'])

// 搜索和表格数据
const searchText = ref('')
const columns = ref([
  { key: 'time', title: '时间' },
  { key: 'name', title: '事件名称' },
  { key: 'algorithm', title: '算法任务' },
  { key: 'deviceId', title: '设备ID' },
  { key: 'ip', title: 'IP地址' },
  { key: 'status', title: '事件状态' },
  { key: 'actions', title: '操作' }
])

const events = ref([
  {
    time: '14:45:26',
    name: '目标检测',
    algorithm: '靠泊、登轮',
    deviceId: 'VIDEO_214IOISHEK454',
    ip: '192.268.0.1',
    status: 'pending'
  },
  {
    time: '13:30:15',
    name: '暴力行为识别',
    algorithm: '异常行为检测',
    deviceId: 'VIDEO_315IOISHEK455',
    ip: '192.268.0.2',
    status: 'processed'
  },
  {
    time: '11:20:45',
    name: '越界检测',
    algorithm: '区域入侵检测',
    deviceId: 'VIDEO_516IOISHEK456',
    ip: '192.268.0.3',
    status: 'ignored'
  }
])

const statusText = {
  pending: '待处理',
  processed: '已处理',
  ignored: '已忽略'
}

// 计算属性
const filteredEvents = computed(() => {
  return events.value.filter(event => 
    event.name.includes(searchText.value) || 
    event.algorithm.includes(searchText.value) ||
    event.deviceId.includes(searchText.value)
  )
})

// 方法
const toggleYear = (year) => {
  if (selectedYear.value === year) {
    selectedYear.value = ''
    selectedMonth.value = ''
    selectedDay.value = ''
  } else {
    selectedYear.value = year
    selectedMonth.value = ''
    selectedDay.value = ''
  }
}

const toggleMonth = (month) => {
  if (selectedMonth.value === month) {
    selectedMonth.value = ''
    selectedDay.value = ''
  } else {
    selectedMonth.value = month
    selectedDay.value = ''
  }
}

const selectDay = (day) => {
  selectedDay.value = day
}

const viewDetail = (event) => {
  console.log('查看事件:', event)
}

const deleteEvent = (event) => {
  console.log('删除事件:', event)
}
</script>

<style scoped>
.event-center {
  display: flex;
  height: 85vh;
  background: #0a1d3c;
}

/* 左侧年月日导航 */
.year-month-nav {
  width: 300px;
  padding: 15px;
  
  .nav-header {
    padding: 15px;
    font-size: 16px;
    color: #7cd0ff;
    text-align: center;
  }
  
  /* 一级菜单 - 年份 */
  .year-list {
    width: 90%;
    margin: 0 auto;
    .year-item {
      margin-bottom: 5px; 
      > .item-content {
        border: 1px solid #09d2ff;
        padding: 8px 15px;
        color: rgba(124, 208, 255, 0.8);
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 4px;
        
        &:hover, .active & {
          color: white;
          background: rgba(124, 208, 255, 0.2);
        }
        
        .arrow-icon {
          font-size: 12px;
        }
      }
      
      /* 二级菜单 - 月份 */
      .month-list {
        margin-left: 20px;
        /* border-left: 1px solid rgba(124, 208, 255, 0.2); */
        padding-left: 15px;
        max-height: 400px;
        overflow-y: auto;
        scrollbar-width: none; /* Firefox */
        &::-webkit-scrollbar {
          display: none; /* Chrome/Safari */
        }
        .month-item {
          margin-bottom: 5px;
          
          .item-content {
            padding: 8px 15px;
            color: rgba(124, 208, 255, 0.8);
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            
            &:hover, .active & {
              color: white;
              /* background: rgba(124, 208, 255, 0.2); */
            }
            
            .check-icon {
              color: #00ffc0;
            }
          }
          
          /* 三级菜单 - 日期 */
          .day-list {
            margin-left: 20px;
            /* border-left: 1px solid rgba(124, 208, 255, 0.2); */
            padding-left: 15px;
            max-height: 300px;
            overflow-y: auto;
            scrollbar-width: none; /* Firefox */
            &::-webkit-scrollbar {
              display: none; /* Chrome/Safari */
            }
            
            .day-item {
              margin-bottom: 5px;
              
              .item-content {
                padding: 8px 15px;
                color: rgba(124, 208, 255, 0.8);
                cursor: pointer;
                display: flex;
                justify-content: space-between;
                align-items: center;
                
                &:hover, &.active {
                  color: white;
                  background: rgba(124, 208, 255, 0.2);
                }
                
                .check-icon {
                  color: #00ffc0;
                }
              }
            }
          }
        }
      }
    }
  }
}

/* 右侧数据列表 */
.event-list {
  flex: 1;
  padding: 15px;
  .search-bar {
    position: relative;
    padding: 15px;
    width: 300px;
    
    .search-input {
      width: 100%;
      padding: 8px 40px 8px 12px;
      background: rgba(16, 42, 87, 0.6);
      border: 1px solid #7cd0ff;
      border-radius: 4px;
      color: white;
      font-size: 14px;
      
      &::placeholder {
        color: rgba(124, 208, 255, 0.5);
      }
    }
    
    &::after {
      content: "🔍";
      position: absolute;
      right: 25px;
      top: 50%;
      transform: translateY(-50%);
      color: #7cd0ff;
      pointer-events: none;
    }
  }
  
  .table-container {
    height: calc(100% - 60px);
    overflow-y: auto;
    scrollbar-width: none;
    
    &::-webkit-scrollbar {
      display: none;
    }
  }
  
  .event-table {
    width: 98%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0 auto;
    border: 1px solid #7cd0ff;
    font-size: 14px;
    th {
      position: sticky;
      top: 0;
      padding: 6px 10px;
      text-align: center;
      background-color: rgba(16, 42, 87, 0.8);
      color: #fff;
      font-weight: 500;
      border-bottom: 1px solid #7cd0ff;
      border-right: 1px solid rgba(124, 208, 255, 0.3); 
      &:last-child {
        border-right: none;
      }
    }
    
    td {
      padding: 12px 15px;
      color: white;
      border-bottom: 1px solid rgba(124, 208, 255, 0.2);
      border-right: 1px solid rgba(124, 208, 255, 0.1);
      text-align: center;
      &:last-child {
        border-right: none;
      }
    }
    
    tr {
      &:hover {
        background: rgba(124, 208, 255, 0.05);
      }
      
      &:last-child td {
        border-bottom: none;
      }
    }
    
    .status-tag {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 12px;
      
      &.pending {
        background: #ff4d4f;
      }
      
      &.processed {
        background: #00ffc0;
        color: #0a1d3c;
      }
      
      &.ignored {
        background: #888;
      }
    }
    
    .action-btn {
      padding: 4px 10px;
      margin-right: 8px;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.3s;
      border: none;
      font-size: 12px;
      
      &.view {
        background: linear-gradient(to right, #3a7bd5, #00d2ff);
        color: white;
        
        &:hover {
          background: linear-gradient(to right, #2c5fb3, #00b7e1);
        }
      }
      
      &.delete {
        background: linear-gradient(to right, #ff416c, #ff4b2b);
        color: white;
        
        &:hover {
          background: linear-gradient(to right, #e0355c, #e03d26);
        }
      }
    }
  }
}
</style>