<template>
  <div class="access-warning-container">
    <!-- 顶部统计 -->
    <el-row :gutter="20" class="mb-20">
      <el-col :span="6">
        <vab-card shadow="hover" class="stat-card">
          <div class="stat-icon bg-danger">
            <vab-icon icon="alarm-warning-fill" />
          </div>
          <div class="stat-info">
            <div class="stat-value">24</div>
            <div class="stat-label">今日预警总数</div>
          </div>
        </vab-card>
      </el-col>
      <el-col :span="6">
        <vab-card shadow="hover" class="stat-card">
          <div class="stat-icon bg-warning">
            <vab-icon icon="moon-line" />
          </div>
          <div class="stat-info">
            <div class="stat-value">15</div>
            <div class="stat-label">晚归人员 (23:00后)</div>
          </div>
        </vab-card>
      </el-col>
      <el-col :span="6">
        <vab-card shadow="hover" class="stat-card">
          <div class="stat-icon bg-orange">
            <vab-icon icon="hotel-bed-line" />
          </div>
          <div class="stat-info">
            <div class="stat-value">6</div>
            <div class="stat-label">未归人员 (24小时)</div>
          </div>
        </vab-card>
      </el-col>
      <el-col :span="6">
        <vab-card shadow="hover" class="stat-card">
          <div class="stat-icon bg-info">
            <vab-icon icon="footprint-line" />
          </div>
          <div class="stat-info">
            <div class="stat-value">3</div>
            <div class="stat-label">长期未出 (3天+)</div>
          </div>
        </vab-card>
      </el-col>
    </el-row>

    <!-- 图表与列表布局 -->
    <el-row :gutter="20">
      <el-col :span="16">
        <vab-card title="实时预警监控">
          <template #header>
            <div class="card-header">
              <vab-icon icon="broadcast-line" class="mr-5" />
              <span>实时预警列表</span>
              <el-tag type="danger" effect="dark" class="ml-10 animate-pulse">实时监控中</el-tag>
            </div>
          </template>
          
          <vab-query-form>
            <vab-query-form-left-panel>
              <el-form :inline="true" :model="queryForm" @submit.prevent>
                <el-form-item label="预警类型">
                  <el-select v-model="queryForm.type" placeholder="全部" clearable style="width: 120px">
                    <el-option label="晚归" value="late" />
                    <el-option label="未归" value="absent" />
                    <el-option label="长期未出" value="inactive" />
                  </el-select>
                </el-form-item>
                <el-form-item label="学生">
                  <el-input v-model="queryForm.keyword" placeholder="姓名/学号" clearable style="width: 150px" />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="handleQuery"> <vab-icon icon="search-line" /> 查询</el-button>
                </el-form-item>
              </el-form>
            </vab-query-form-left-panel>
          </vab-query-form>

          <el-table v-loading="loading" :data="tableData" border stripe style="height: calc(100vh - 400px);">
            <el-table-column prop="studentName" label="学生姓名" width="100" />
            <el-table-column prop="roomName" label="宿舍" width="120" />
            <el-table-column prop="type" label="预警类型" width="100">
              <template #default="{ row }">
                <el-tag :type="getWarningType(row.type).tag" effect="dark">
                  {{ getWarningType(row.type).label }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="lastRecord" label="最近通行记录" min-width="180">
              <template #default="{ row }">
                <div v-if="row.lastRecord">
                  <vab-icon icon="time-line" class="mr-5 text-gray" />
                  {{ row.lastRecord }}
                  <span class="ml-5 text-xs text-gray">({{ row.direction }})</span>
                </div>
                <div v-else class="text-gray">无记录</div>
              </template>
            </el-table-column>
            <el-table-column prop="duration" label="异常时长" width="120">
              <template #default="{ row }">
                <span class="text-danger font-bold">{{ row.duration }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="处理状态" width="100">
              <template #default="{ row }">
                <el-tag :type="row.status === 'pending' ? 'danger' : 'success'" size="small">
                  {{ row.status === 'pending' ? '待处理' : '已处理' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="180" fixed="right">
              <template #default="{ row }">
                <el-button v-if="row.status === 'pending'" type="primary" size="small" @click="handleProcess(row)"> <vab-icon icon="check-line" /> 处理</el-button>
                <el-button v-if="row.status === 'pending'" type="info" size="small" @click="handleIgnore(row)"> <vab-icon icon="close-line" /> 忽略</el-button>
                <span v-else class="text-gray text-xs">处理人: {{ row.operator }}</span>
              </template>
            </el-table-column>
          </el-table>
        </vab-card>
      </el-col>

      <el-col :span="8" style="height: calc(100vh - 400px);">
        <!-- 趋势图 -->
        <vab-card class="mb-20" title="七日预警趋势">
          <vab-chart :style="{ height: '240px' }" :option="chartOption" />
        </vab-card>
        
        <!-- 重点关注列表 -->
        <vab-card title="重点关注名单 (需辅导员介入)">
          <div class="focus-list">
            <div v-for="item in focusList" :key="item.id" class="focus-item">
              <el-avatar :size="40" shape="square" :src="item.avatar">{{ item.name.charAt(0) }}</el-avatar>
              <div class="info">
                <div class="name-row">
                  <span class="name">{{ item.name }}</span>
                  <el-tag size="small" type="danger">{{ item.warningCount }}次预警</el-tag>
                </div>
                <div class="desc">{{ item.college }} · {{ item.major }}</div>
              </div>
              <el-button type="text" icon="phone-line"> <vab-icon icon="phone-line" /> 联系</el-button>
            </div>
          </div>
        </vab-card>
      </el-col>
    </el-row>

    <!-- 处理弹窗 -->
    <warning-process-dialog ref="processDialogRef" @success="handleProcessSuccess" />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

import WarningProcessDialog from './components/WarningProcessDialog.vue'

defineOptions({
  name: 'AccessWarning',
})

// --- Data ---
const queryForm = reactive({
  type: '',
  keyword: '',
})

const loading = ref(false)
const tableData = ref([])
const processDialogRef = ref()

// Mock Focus List
const focusList = [
  { id: 1, name: '梁健', avatar: '', college: 'ZJUI', major: '电子工程', warningCount: 5 },
  { id: 2, name: '苑国波', avatar: '', college: 'ZJE', major: '生物医学', warningCount: 3 },
  { id: 3, name: '王应哲', avatar: '', college: 'ZIBS', major: '金融科技', warningCount: 3 },
]

// Mock Chart Option
const chartOption = ref({
  grid: { top: '10%', left: '2%', right: '2%', bottom: '2%', containLabel: true },
  tooltip: { trigger: 'axis' },
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    axisLine: { lineStyle: { color: '#999' } },
  },
  yAxis: {
    type: 'value',
    splitLine: { lineStyle: { color: '#eee' } },
  },
  series: [
    {
      name: '晚归',
      type: 'line',
      smooth: true,
      data: [12, 15, 8, 20, 18, 25, 15],
      itemStyle: { color: '#e6a23c' },
      areaStyle: { color: 'rgba(230, 162, 60, 0.1)' }
    },
    {
      name: '未归',
      type: 'line',
      smooth: true,
      data: [2, 5, 3, 4, 6, 8, 6],
      itemStyle: { color: '#f56c6c' },
      areaStyle: { color: 'rgba(245, 108, 108, 0.1)' }
    }
  ]
})

// --- Helpers ---
const getWarningType = (type) => {
  const map = {
    late: { label: '晚归', tag: 'warning' },
    absent: { label: '未归', tag: 'danger' },
    inactive: { label: '长期未出', tag: 'info' },
  }
  return map[type] || { label: '未知', tag: '' }
}

// --- Methods ---
const generateMockData = () => {
  return [
    {
      id: 1,
      studentName: '梁健',
      roomName: '一号书院 302',
      type: 'late',
      lastRecord: '2026-01-22 23:45:12',
      direction: '进门',
      duration: '迟到45分',
      status: 'pending',
      description: '超过规定时间(23:00)返回公寓'
    },
    {
      id: 2,
      studentName: '鲁永波',
      roomName: '三号书院 501',
      type: 'absent',
      lastRecord: '2026-01-21 08:30:00',
      direction: '出门',
      duration: '未归36h',
      status: 'pending',
      description: '超过24小时未有进门记录'
    },
    {
      id: 3,
      studentName: '王应哲',
      roomName: '二号书院 105',
      type: 'inactive',
      lastRecord: '2026-01-20 18:00:00',
      direction: '进门',
      duration: '未出72h',
      status: 'pending',
      description: '连续3天未有出门记录'
    },
    {
      id: 4,
      studentName: '杨勇捷',
      roomName: '一号书院 201',
      type: 'late',
      lastRecord: '2026-01-22 23:15:00',
      direction: '进门',
      duration: '迟到15分',
      status: 'processed',
      operator: '管理员A',
      description: '超过规定时间(23:00)返回公寓'
    }
  ]
}

const handleQuery = () => {
  loading.value = true
  setTimeout(() => {
    tableData.value = generateMockData()
    loading.value = false
  }, 500)
}

const handleProcess = (row) => {
  processDialogRef.value.open(row)
}

const handleProcessSuccess = ({ id }) => {
  const item = tableData.value.find(i => i.id === id)
  if (item) {
    item.status = 'processed'
    item.operator = '我'
  }
}

const handleIgnore = (row) => {
  ElMessage.info('已忽略该预警')
  const item = tableData.value.find(i => i.id === row.id)
  if (item) {
    item.status = 'processed'
    item.operator = '系统自动'
  }
}

onMounted(() => {
  handleQuery()
})
</script>

<style lang="scss" scoped>
.access-warning-container {
  .mb-20 { margin-bottom: 20px; }
  .mr-5 { margin-right: 5px; }
  .ml-5 { margin-left: 5px; }
  .ml-10 { margin-left: 10px; }
  .text-gray { color: #909399; }
  .text-xs { font-size: 12px; }
  .text-danger { color: var(--el-color-danger); }
  .font-bold { font-weight: bold; }

  // 脉冲动画
  .animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .5; }
  }

  .stat-card {
    :deep(.el-card__body) {
      display: flex;
      align-items: center;
      padding: 20px;
    }

    .stat-icon {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 15px;
      font-size: 24px;
      color: #fff;
      &.bg-danger { background: #f56c6c; }
      &.bg-warning { background: #e6a23c; }
      &.bg-orange { background: #ff9900; }
      &.bg-info { background: #909399; }
    }

    .stat-info {
      .stat-value { font-size: 24px; font-weight: bold; color: #303133; }
      .stat-label { font-size: 12px; color: #909399; margin-top: 5px; }
    }
  }

  .focus-list {
    .focus-item {
      display: flex;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid #f0f0f0;

      &:last-child { border-bottom: none; }

      .info {
        flex: 1;
        margin-left: 12px;
        
        .name-row {
          display: flex;
          align-items: center;
          gap: 8px;
          .name { font-weight: bold; font-size: 14px; }
        }
        
        .desc {
          font-size: 12px;
          color: #999;
          margin-top: 4px;
        }
      }
    }
  }
}
</style>
