<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-primary">
              <IconThermometer :size="24" stroke="1.5" />
            </div>
            <div class="stats-info">
              <div class="stats-title">平均温度</div>
              <div class="stats-value">24.2°C</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">
              <IconDroplet :size="24" stroke="1.5" />
            </div>
            <div class="stats-info">
              <div class="stats-title">平均湿度</div>
              <div class="stats-value">46%</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-green">
              <IconPlug :size="24" stroke="1.5" />
            </div>
            <div class="stats-info">
              <div class="stats-title">总功耗</div>
              <div class="stats-value">156 kW</div>
              <div class="stats-desc">PUE 1.45</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-purple">
              <IconAirConditioning :size="24" stroke="1.5" />
            </div>
            <div class="stats-info">
              <div class="stats-title">空调状态</div>
              <div class="stats-value">3/4</div>
              <div class="stats-desc">1台维护中</div>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row> -->

    <!-- 环境概览 -->
    <!-- <a-row :gutter="16" class="chart-row">
      <a-col :xs="24" :lg="8">
        <a-card title="温湿度趋势" :bordered="false">
          <template #extra>
            <a-space>
              <span class="legend-item">
                <span class="legend-dot legend-dot-1"></span>
                <span>温度°C</span>
              </span>
              <span class="legend-item">
                <span class="legend-dot legend-dot-2"></span>
                <span>湿度%</span>
              </span>
            </a-space>
          </template>
          <div class="chart-container">
            <Chart :options="tempChartOptions" height="280px" />
          </div>
        </a-card>
      </a-col>
      <a-col :xs="24" :lg="8">
        <a-card title="UPS状态" :bordered="false">
          <template #extra>
            <span class="text-muted">不间断电源系统</span>
          </template>
          <div class="ups-list">
            <div v-for="ups in upsList" :key="ups.name" class="ups-item">
              <div class="ups-icon">
                <IconCircleCheck :size="24" stroke="1.5" class="battery-icon" />
              </div>
              <div class="ups-info">
                <div class="ups-header">
                  <span class="ups-name">{{ ups.name }}</span>
                  <a-tag color="green">在线</a-tag>
                </div>
                <div class="ups-details">
                  <span>负载: {{ ups.load }}</span>
                  <span>电池: {{ ups.battery }}</span>
                  <span>后备: {{ ups.backup }}</span>
                </div>
                <div class="ups-progress">
                  <a-progress
                    :percent="ups.loadPercent"
                    :stroke-width="8"
                    :show-text="false"
                    color="#165DFF"
                  />
                </div>
              </div>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :xs="24" :lg="8">
        <a-card title="精密空调" :bordered="false">
          <template #extra>
            <span class="text-muted">制冷系统状态</span>
          </template>
          <div class="ac-list">
            <div v-for="ac in acList" :key="ac.name" class="ac-item">
              <div class="ac-left">
                <IconAirConditioning :size="16" stroke="1.5" :class="['ac-icon', { 'ac-icon-offline': ac.status === 'offline' }]" />
                <span class="ac-name">{{ ac.name }}</span>
              </div>
              <div class="ac-right">
                <span class="ac-temp">{{ ac.temp }}</span>
                <span class="ac-humidity">{{ ac.humidity }}</span>
                <a-tag :color="ac.status === 'online' ? 'green' : 'gray'">{{ ac.mode }}</a-tag>
              </div>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row> -->

    <!-- 电力分布 -->
    <!-- <a-row :gutter="16" class="power-row">
      <a-col :xs="24" :sm="12" :lg="6">
        <a-card class="power-card" :bordered="false">
          <div class="power-header">
            <div class="power-icon power-icon-primary">
              <IconPlug :size="20" stroke="1.5" />
            </div>
            <div class="power-info">
              <div class="power-title">A路市电</div>
              <div class="power-desc">主供电</div>
            </div>
          </div>
          <div class="power-stats">
            <div class="power-stat-item">
              <span class="power-stat-label">电压</span>
              <span class="power-stat-value text-success">380V</span>
            </div>
            <div class="power-stat-item">
              <span class="power-stat-label">电流</span>
              <span class="power-stat-value">245A</span>
            </div>
            <div class="power-stat-item">
              <span class="power-stat-label">功率</span>
              <span class="power-stat-value">82 kW</span>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="12" :lg="6">
        <a-card class="power-card" :bordered="false">
          <div class="power-header">
            <div class="power-icon power-icon-primary">
              <IconPlug :size="20" stroke="1.5" />
            </div>
            <div class="power-info">
              <div class="power-title">B路市电</div>
              <div class="power-desc">备用供电</div>
            </div>
          </div>
          <div class="power-stats">
            <div class="power-stat-item">
              <span class="power-stat-label">电压</span>
              <span class="power-stat-value text-success">380V</span>
            </div>
            <div class="power-stat-item">
              <span class="power-stat-label">电流</span>
              <span class="power-stat-value">218A</span>
            </div>
            <div class="power-stat-item">
              <span class="power-stat-label">功率</span>
              <span class="power-stat-value">74 kW</span>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="12" :lg="6">
        <a-card class="power-card" :bordered="false">
          <div class="power-header">
            <div class="power-icon power-icon-success">
              <IconBolt :size="20" stroke="1.5" />
            </div>
            <div class="power-info">
              <div class="power-title">发电机</div>
              <div class="power-desc">备用电源</div>
            </div>
          </div>
          <div class="power-stats">
            <div class="power-stat-item">
              <span class="power-stat-label">状态</span>
              <a-tag color="green">待机</a-tag>
            </div>
            <div class="power-stat-item">
              <span class="power-stat-label">燃油</span>
              <span class="power-stat-value">95%</span>
            </div>
            <div class="power-stat-item">
              <span class="power-stat-label">上次测试</span>
              <span class="power-stat-value">3天前</span>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="12" :lg="6">
        <a-card class="power-card" :bordered="false">
          <div class="power-header">
            <div class="power-icon power-icon-primary">
              <IconChartBar :size="20" stroke="1.5" />
            </div>
            <div class="power-info">
              <div class="power-title">能效统计</div>
              <div class="power-desc">本月数据</div>
            </div>
          </div>
          <div class="power-stats">
            <div class="power-stat-item">
              <span class="power-stat-label">PUE</span>
              <span class="power-stat-value text-success">1.45</span>
            </div>
            <div class="power-stat-item">
              <span class="power-stat-label">月耗电</span>
              <span class="power-stat-value">112,000 kWh</span>
            </div>
            <div class="power-stat-item">
              <span class="power-stat-label">碳排放</span>
              <span class="power-stat-value">78.4 吨</span>
            </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="UPS">UPS</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 {
  IconThermometer,
  IconDroplet,
  IconPlug,
  IconAirConditioning,
  IconCircleCheck,
  IconBolt,
  IconChartBar,
} from '@tabler/icons-vue'
import Chart from '@/components/chart/index.vue'
import type { TableColumnData } from '@arco-design/web-vue/es/table/interface'

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

// UPS数据
const upsList = ref([
  {
    name: 'UPS-01',
    load: '62%',
    loadPercent: 62,
    battery: '100%',
    backup: '45分钟',
  },
  {
    name: 'UPS-02',
    load: '58%',
    loadPercent: 58,
    battery: '100%',
    backup: '52分钟',
  },
])

// 空调数据
const acList = ref([
  { name: '空调-01', status: 'online', temp: '22°C', humidity: '45%', mode: '制冷' },
  { name: '空调-02', status: 'offline', temp: '-', humidity: '-', mode: '维护' },
  { name: '空调-03', status: 'online', temp: '21°C', humidity: '46%', mode: '制冷' },
  { name: '空调-04', status: 'online', temp: '22°C', humidity: '44%', mode: '待机' },
])

// 表格列配置
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: 'threshold',
    width: 120,
  },
  {
    title: '趋势/备注',
    dataIndex: 'trend',
    width: 150,
  },
]

// 设备数据
const environmentDevices = ref([
  {
    name: '机房A-温度传感器-01',
    type: '温度',
    location: '机柜A1-顶部',
    statusValue: 'success',
    statusText: '正常',
    value: '23.5°C',
    threshold: '18-28°C',
    trend: '+0.2°C/h',
  },
  {
    name: '机房A-温度传感器-02',
    type: '温度',
    location: '机柜A2-顶部',
    statusValue: 'warning',
    statusText: '偏高',
    value: '27.8°C',
    threshold: '18-28°C',
    trend: '+0.5°C/h',
  },
  {
    name: '机房A-湿度传感器-01',
    type: '湿度',
    location: '机柜A1-中部',
    statusValue: 'success',
    statusText: '正常',
    value: '45%',
    threshold: '40-60%',
    trend: '稳定',
  },
  {
    name: 'UPS-01',
    type: 'UPS',
    location: '机房A-配电间',
    statusValue: 'online',
    statusText: '在线',
    value: '负载 62%',
    threshold: '< 80%',
    trend: '电池 100%',
  },
  {
    name: 'UPS-02',
    type: 'UPS',
    location: '机房B-配电间',
    statusValue: 'online',
    statusText: '在线',
    value: '负载 58%',
    threshold: '< 80%',
    trend: '电池 100%',
  },
  {
    name: '精密空调-01',
    type: '空调',
    location: '机房A-西侧',
    statusValue: 'online',
    statusText: '在线',
    value: '制冷中',
    threshold: '-',
    trend: '送风 22°C',
  },
  {
    name: '精密空调-02',
    type: '空调',
    location: '机房A-东侧',
    statusValue: 'offline',
    statusText: '维护',
    value: '-',
    threshold: '-',
    trend: '-',
  },
  {
    name: 'PDU-01',
    type: '配电',
    location: '机柜A1',
    statusValue: 'success',
    statusText: '正常',
    value: '12.5 kW',
    threshold: '< 20 kW',
    trend: '电流 18.2A',
  },
])

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

// 温湿度趋势图表配置
const tempChartOptions = ref({
  tooltip: {
    trigger: 'axis',
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
  },
  yAxis: [
    {
      type: 'value',
      name: '温度°C',
      position: 'left',
    },
    {
      type: 'value',
      name: '湿度%',
      position: 'right',
    },
  ],
  series: [
    {
      name: '温度',
      type: 'line',
      smooth: true,
      data: [22.5, 22.0, 23.5, 25.0, 26.5, 24.5, 23.0],
      areaStyle: {
        opacity: 0.1,
      },
      lineStyle: {
        width: 2,
        color: '#165DFF',
      },
      itemStyle: {
        color: '#165DFF',
      },
    },
    {
      name: '湿度',
      type: 'line',
      smooth: true,
      yAxisIndex: 1,
      data: [45, 44, 46, 48, 50, 47, 45],
      areaStyle: {
        opacity: 0.1,
      },
      lineStyle: {
        width: 2,
        color: '#14C9C9',
      },
      itemStyle: {
        color: '#14C9C9',
      },
    },
  ],
})

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

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

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

<script lang="ts">
export default {
  name: 'EnvironmentMonitor',
}
</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;

    &-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;
    }

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

    &-purple {
      background-color: rgba(114, 46, 209, 0.1);
      color: #722ed1;
    }
  }

  .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;
    margin-bottom: 4px;
  }

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

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

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

  :deep(.arco-card-body) {
    height: calc(100% - 57px);
    display: flex;
    flex-direction: column;
  }
}

.chart-container {
  height: 280px;
  flex: 1;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-text-3);
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;

  &-1 {
    background-color: #165dff;
  }

  &-2 {
    background-color: #14c9c9;
  }
}

.ups-list {
  padding: 8px 0;
  height: 280px;
  display: flex;
  flex-direction: column;
}

.ups-item {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;

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

.ups-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background-color: rgba(0, 180, 42, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;

  .battery-icon {
    font-size: 24px;
    color: rgb(var(--success-6));
  }
}

.ups-info {
  flex: 1;
}

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

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

.ups-details {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--color-text-3);
  margin-bottom: 8px;
}

.ups-progress {
  width: 100%;
}

.ac-list {
  padding: 8px 0;
  height: 280px;
  display: flex;
  flex-direction: column;
}

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

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

.ac-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ac-icon {
  font-size: 16px;
  color: rgb(var(--success-6));

  &.ac-icon-offline {
    color: var(--color-text-3);
  }
}

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

.ac-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ac-temp,
.ac-humidity {
  font-size: 12px;
  color: var(--color-text-3);
}

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

.power-card {
  height: 100%;

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

  .power-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
  }

  .power-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;

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

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

  .power-info {
    flex: 1;
  }

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

  .power-desc {
    font-size: 12px;
    color: var(--color-text-3);
  }

  .power-stats {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .power-stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .power-stat-label {
    font-size: 13px;
    color: var(--color-text-3);
  }

  .power-stat-value {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-1);
  }
}

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

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

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