<template>
  <div class="container">
    <!-- 统计卡片 -->
    <a-row :gutter="16" class="stats-row">
      <a-col :xs="24" :sm="12" :lg="6">
        <a-card class="stats-card" :bordered="false">
          <div class="stats-content">
            <div class="stats-icon stats-icon-danger">
              <icon-fire />
            </div>
            <div class="stats-info">
              <div class="stats-title">消防系统</div>
              <div class="stats-value">正常</div>
              <div class="stats-desc">12 个探测器在线</div>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="12" :lg="6">
        <a-card class="stats-card" :bordered="false">
          <div class="stats-content">
            <div class="stats-icon stats-icon-primary">
              <icon-lock />
            </div>
            <div class="stats-info">
              <div class="stats-title">门禁系统</div>
              <div class="stats-value">8/8</div>
              <div class="stats-desc text-success">全部在线</div>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="12" :lg="6">
        <a-card class="stats-card" :bordered="false">
          <div class="stats-content">
            <div class="stats-icon stats-icon-cyan">
              <icon-thunderbolt />
            </div>
            <div class="stats-info">
              <div class="stats-title">漏水检测</div>
              <div class="stats-value">1</div>
              <div class="stats-desc text-warning">需要关注</div>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="12" :lg="6">
        <a-card class="stats-card" :bordered="false">
          <div class="stats-content">
            <div class="stats-icon stats-icon-success">
              <icon-cloud />
            </div>
            <div class="stats-info">
              <div class="stats-title">气体检测</div>
              <div class="stats-value">正常</div>
              <div class="stats-desc text-success">所有区域安全</div>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>

    <!-- 安全概览 -->
    <a-row :gutter="16" class="overview-row">
      <a-col :xs="24" :lg="8">
        <a-card title="消防系统状态" :bordered="false">
          <template #extra>
            <a-tag color="green">正常</a-tag>
          </template>
          <div class="fire-list">
            <div v-for="item in fireSystemList" :key="item.name" class="fire-item">
              <div class="fire-icon">
                <icon-fire v-if="item.icon === 'IconFire'" />
                <icon-notification v-else-if="item.icon === 'IconNotification'" />
                <icon-cloud v-else-if="item.icon === 'IconCloud'" />
              </div>
              <div class="fire-info">
                <div class="fire-name">{{ item.name }}</div>
                <div class="fire-desc">{{ item.desc }}</div>
              </div>
              <icon-check-circle class="fire-status" />
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :xs="24" :lg="8">
        <a-card title="门禁出入记录" :bordered="false">
          <template #extra>
            <a-link>查看全部</a-link>
          </template>
          <div class="access-list">
            <div v-for="(log, index) in accessLogs" :key="index" class="access-item">
              <div class="access-left">
                <div class="access-user">{{ log.user }} - {{ log.action }}</div>
                <div class="access-location">{{ log.location }}</div>
              </div>
              <div class="access-right">
                <div class="access-time">{{ log.time }}</div>
                <a-tag :color="getStatusColor(log.status)" size="small">
                  {{ getStatusText(log.status) }}
                </a-tag>
              </div>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :xs="24" :lg="8">
        <a-card title="告警记录" :bordered="false">
          <template #extra>
            <a-tag color="orangered">1 条待处理</a-tag>
          </template>
          <div class="alarm-list">
            <div class="alarm-item alarm-item-warning">
              <div class="alarm-header">
                <div class="alarm-content">
                  <div class="alarm-title">漏水检测告警</div>
                  <div class="alarm-desc">机房A-空调下方检测到微量水汽</div>
                </div>
                <span class="alarm-time">5分钟前</span>
              </div>
              <div class="alarm-actions">
                <a-button type="primary" size="small" status="warning">处理</a-button>
                <a-button size="small">忽略</a-button>
              </div>
            </div>
            <div class="alarm-item alarm-item-muted">
              <div class="alarm-header">
                <div class="alarm-content">
                  <div class="alarm-title text-muted">门禁异常</div>
                  <div class="alarm-desc">王五刷卡失败 - 已处理</div>
                </div>
                <span class="alarm-time">1小时前</span>
              </div>
            </div>
            <div class="alarm-item alarm-item-muted">
              <div class="alarm-header">
                <div class="alarm-content">
                  <div class="alarm-title text-muted">设备巡检</div>
                  <div class="alarm-desc">消防系统月度巡检完成</div>
                </div>
                <span class="alarm-time">2小时前</span>
              </div>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>

    <!-- 区域状态 -->
    <a-row :gutter="16" class="area-row">
      <a-col v-for="area in areaStatusList" :key="area.name" :xs="24" :sm="12" :lg="6">
        <a-card class="area-card" :bordered="false">
          <div class="area-header">
            <span class="area-name">{{ area.name }}</span>
            <icon-camera class="area-camera" />
          </div>
          <div class="area-status-list">
            <div class="area-status-item">
              <span class="area-status-label">消防</span>
              <a-tag :color="getStatusColor('success')" size="small">{{ area.fire }}</a-tag>
            </div>
            <div class="area-status-item">
              <span class="area-status-label">门禁</span>
              <a-tag :color="area.access === '关闭' ? 'green' : 'orange'" size="small">{{ area.access }}</a-tag>
            </div>
            <div class="area-status-item">
              <span class="area-status-label">漏水</span>
              <a-tag :color="area.water === '正常' ? 'green' : 'orange'" size="small">{{ area.water }}</a-tag>
            </div>
            <div class="area-status-item">
              <span class="area-status-label">气体</span>
              <a-tag :color="getStatusColor('success')" size="small">{{ area.gas }}</a-tag>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>

    <!-- 设备列表 -->
    <a-card title="设备列表" :bordered="false">
      <template #extra>
        <a-select v-model="selectedType" placeholder="全部类型" style="width: 150px">
          <a-option value="">全部类型</a-option>
          <a-option value="消防">消防</a-option>
          <a-option value="门禁">门禁</a-option>
          <a-option value="漏水">漏水</a-option>
          <a-option value="气体">气体</a-option>
        </a-select>
      </template>
      <a-table :data="filteredDevices" :columns="columns" :loading="loading" :pagination="false" row-key="name">
        <!-- 状态列 -->
        <template #status="{ record }">
          <a-tag :color="getStatusColor(record.statusValue)" bordered>
            {{ record.statusText }}
          </a-tag>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue'
import { IconFire, IconLock, IconThunderbolt, IconCloud, IconCheckCircle, IconCamera, IconNotification } from '@arco-design/web-vue/es/icon'
import type { TableColumnData } from '@arco-design/web-vue/es/table/interface'

// 加载状态
const loading = ref(false)
const selectedType = ref('')

// 消防系统列表
const fireSystemList = ref([
  { name: '烟感探测器', desc: '8 个设备全部正常', icon: 'IconFire' },
  { name: '温感探测器', desc: '4 个设备全部正常', icon: 'IconFire' },
  { name: '报警系统', desc: '待机状态', icon: 'IconNotification' },
  { name: '气体灭火', desc: '药剂充足 100%', icon: 'IconCloud' },
])

// 出入记录
const accessLogs = ref([
  { time: '14:32:15', user: '张三', action: '刷卡进入', location: '机房A-主入口', status: 'success' },
  { time: '14:28:45', user: '李四', action: '刷卡进入', location: '机房B-主入口', status: 'success' },
  { time: '14:15:20', user: '王五', action: '刷卡失败', location: '机房A-主入口', status: 'error' },
  { time: '13:58:30', user: '张三', action: '刷卡离开', location: '机房A-主入口', status: 'success' },
  { time: '13:45:10', user: '系统', action: '自动解锁', location: '机房A-应急出口', status: 'warning' },
])

// 区域状态
const areaStatusList = ref([
  { name: '机房A', fire: '正常', access: '关闭', water: '正常', gas: '正常' },
  { name: '机房B', fire: '正常', access: '关闭', water: '正常', gas: '正常' },
  { name: '配电间', fire: '正常', access: '关闭', water: '正常', gas: '正常' },
  { name: 'UPS室', fire: '正常', access: '开启', water: '告警', gas: '正常' },
])

// 表格列配置
const columns: TableColumnData[] = [
  {
    title: '设备名称',
    dataIndex: 'name',
    width: 200,
  },
  {
    title: '类型',
    dataIndex: 'type',
    width: 100,
  },
  {
    title: '位置',
    dataIndex: 'location',
    width: 150,
  },
  {
    title: '状态',
    dataIndex: 'status',
    slotName: 'status',
    width: 100,
    align: 'center',
  },
  {
    title: '当前值',
    dataIndex: 'value',
    width: 120,
  },
  {
    title: '最后检查',
    dataIndex: 'lastCheck',
    width: 120,
  },
  {
    title: '电池',
    dataIndex: 'battery',
    width: 100,
  },
]

// 设备数据
const safetyDevices = ref([
  {
    name: '烟感探测器-A01',
    type: '消防',
    location: '机房A-顶部',
    statusValue: 'success',
    statusText: '正常',
    value: '正常',
    lastCheck: '5分钟前',
    battery: '100%',
  },
  {
    name: '烟感探测器-A02',
    type: '消防',
    location: '机房A-走廊',
    statusValue: 'success',
    statusText: '正常',
    value: '正常',
    lastCheck: '5分钟前',
    battery: '95%',
  },
  {
    name: '温感探测器-A01',
    type: '消防',
    location: '机房A-配电间',
    statusValue: 'success',
    statusText: '正常',
    value: '32°C',
    lastCheck: '5分钟前',
    battery: '-',
  },
  {
    name: '门禁-A01',
    type: '门禁',
    location: '机房A-主入口',
    statusValue: 'online',
    statusText: '在线',
    value: '关闭',
    lastCheck: '实时',
    battery: '-',
  },
  {
    name: '门禁-A02',
    type: '门禁',
    location: '机房A-应急出口',
    statusValue: 'online',
    statusText: '在线',
    value: '关闭',
    lastCheck: '实时',
    battery: '-',
  },
  {
    name: '漏水检测-A01',
    type: '漏水',
    location: '机房A-地板下',
    statusValue: 'success',
    statusText: '正常',
    value: '正常',
    lastCheck: '1分钟前',
    battery: '-',
  },
  {
    name: '漏水检测-A02',
    type: '漏水',
    location: '机房A-空调下方',
    statusValue: 'warning',
    statusText: '检测中',
    value: '微量水汽',
    lastCheck: '1分钟前',
    battery: '-',
  },
  {
    name: '气体检测-A01',
    type: '气体',
    location: '机房A-UPS区域',
    statusValue: 'success',
    statusText: '正常',
    value: '正常',
    lastCheck: '10分钟前',
    battery: '88%',
  },
])

// 过滤后的设备列表
const filteredDevices = computed(() => {
  if (!selectedType.value) {
    return safetyDevices.value
  }
  return safetyDevices.value.filter((device) => device.type === selectedType.value)
})

// 获取状态颜色
const getStatusColor = (status: string) => {
  const colorMap: Record<string, string> = {
    online: 'green',
    offline: 'gray',
    warning: 'orange',
    success: 'green',
    error: 'red',
  }
  return colorMap[status] || 'gray'
}

// 获取状态文本
const getStatusText = (status: string) => {
  const textMap: Record<string, string> = {
    success: '成功',
    error: '失败',
    warning: '警告',
  }
  return textMap[status] || status
}

// 获取数据
const fetchData = async () => {
  // TODO: 从API获取数据
  loading.value = false
}

// 初始化
onMounted(() => {
  fetchData()
})
</script>

<script lang="ts">
export default {
  name: 'SafetyMonitor',
}
</script>

<style scoped lang="less">
.container {
  padding: 16px;
}

.stats-row {
  margin-bottom: 16px;
}

.stats-card {
  height: 100%;

  :deep(.arco-card-body) {
    padding: 16px;
  }

  .stats-content {
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }

  .stats-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;

    &-danger {
      background-color: rgba(245, 63, 63, 0.1);
      color: rgb(var(--danger-6));
    }

    &-primary {
      background-color: rgba(22, 93, 255, 0.1);
      color: rgb(var(--primary-6));
    }

    &-cyan {
      background-color: rgba(20, 201, 201, 0.1);
      color: #14c9c9;
    }

    &-success {
      background-color: rgba(0, 180, 42, 0.1);
      color: rgb(var(--success-6));
    }
  }

  .stats-info {
    flex: 1;
  }

  .stats-title {
    font-size: 14px;
    color: var(--color-text-3);
    margin-bottom: 4px;
  }

  .stats-value {
    font-size: 24px;
    font-weight: 600;
    color: var(--color-text-1);
    line-height: 1.2;
  }

  .stats-desc {
    font-size: 12px;
    color: var(--color-text-3);
    margin-top: 4px;
  }
}

.text-success {
  color: rgb(var(--success-6));
}

.text-warning {
  color: rgb(var(--warning-6));
}

.text-muted {
  color: var(--color-text-3);
}

.overview-row {
  margin-bottom: 16px;

  :deep(.arco-card) {
    height: 100%;
  }

  :deep(.arco-card-body) {
    height: 280px;
    overflow-y: auto;
  }
}

.fire-list {
  .fire-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border-1);

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

    &:first-child {
      padding-top: 0;
    }
  }

  .fire-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-color: rgba(0, 180, 42, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(var(--success-6));
    font-size: 20px;
  }

  .fire-info {
    flex: 1;
  }

  .fire-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-1);
  }

  .fire-desc {
    font-size: 12px;
    color: var(--color-text-3);
    margin-top: 2px;
  }

  .fire-status {
    color: rgb(var(--success-6));
    font-size: 20px;
  }
}

.access-list {
  .access-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border-1);

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

    &:first-child {
      padding-top: 0;
    }
  }

  .access-left {
    flex: 1;
  }

  .access-user {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-1);
  }

  .access-location {
    font-size: 12px;
    color: var(--color-text-3);
    margin-top: 2px;
  }

  .access-right {
    text-align: right;
  }

  .access-time {
    font-size: 12px;
    color: var(--color-text-3);
    margin-bottom: 4px;
  }
}

.alarm-list {
  .alarm-item {
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 12px;

    &:last-child {
      margin-bottom: 0;
    }

    &.alarm-item-warning {
      background-color: rgba(255, 125, 0, 0.05);
      border-left: 3px solid rgb(var(--warning-6));

      .alarm-title {
        color: rgb(var(--warning-6));
      }
    }

    &.alarm-item-muted {
      background-color: var(--color-fill-1);
      border-left: 3px solid var(--color-border-2);
    }
  }

  .alarm-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  .alarm-content {
    flex: 1;
  }

  .alarm-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-1);
  }

  .alarm-desc {
    font-size: 12px;
    color: var(--color-text-3);
    margin-top: 2px;
  }

  .alarm-time {
    font-size: 12px;
    color: var(--color-text-3);
    white-space: nowrap;
    margin-left: 12px;
  }

  .alarm-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
  }
}

.area-row {
  margin-bottom: 16px;
}

.area-card {
  height: 100%;

  :deep(.arco-card-body) {
    padding: 16px;
  }

  .area-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
  }

  .area-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-1);
  }

  .area-camera {
    color: var(--color-text-3);
    font-size: 16px;
  }

  .area-status-list {
    .area-status-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 6px 0;
    }

    .area-status-label {
      font-size: 12px;
      color: var(--color-text-3);
    }
  }
}
</style>
