<template>
    <div class="model">
        <!-- 标题栏 -->
        <el-row :gutter="24">
            <el-col :span="12">
                <TitleComponent title="报警分析与管理" subtitle="实时监控光伏报警信息，高效处理运维任务" />
            </el-col>
            <!-- 外层col：控制整体宽度并右对齐，同时作为flex容器 -->
            <el-col :span="12" style="display: flex; justify-content: flex-end; align-items: center;">
                <el-col :span="7">
                    <el-input placeholder="搜索报警信息">
                        <template #prefix>
                            <el-icon>
                                <Search />
                            </el-icon>
                        </template>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary">
                        导出数据
                        <el-icon class="el-icon--right">
                            <UploadFilled />
                        </el-icon>
                    </el-button>
                </el-col>
            </el-col>
        </el-row>
        <!-- 数据展示-->
        <el-row :gutter="24">
            <el-col :span="16">
                <el-card style="height: 100%;">
                    <div style="height: 100%;">
                        <Data :dashboardData="dashboardData" :chartData="chartData" />
                    </div>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card style="height: 100%;">
                    <div style="height: 100%;">
                        <Pie :alarmTypeData="alarmTypeData" />
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <!-- 状态表 -->
        <el-row style="margin-top: 20px;">
            <el-col :span="24">
                <el-card>
                    <TitleComponent title="报警记录" :fontLevel="2" />
                    <status style="width: 100%;" :alarmRecords="alarmRecords" />
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import TitleComponent from '@/components/TitleComponent/index.vue';
import Status from '@/views/pvSystem/alarmAnalysis/components/status.vue'
import Pie from '@/views/pvSystem/alarmAnalysis/components/pie.vue';
import Data from '@/views/pvSystem/alarmAnalysis/components/data.vue';

// Mock数据
const dashboardData = ref({
  todayAlarmTotal: 25,
  unhandledAlarms: 8,
  handledAlarms: 16,
  avgProcessTime: '42分钟',
  updates: {
    todayAlarmTotal: { value: '4.2%', type: 'up' },
    unhandledAlarms: { value: '5%', type: 'down' },
    handledAlarms: { value: '8%', type: 'up' },
    avgProcessTime: { value: '10%', type: 'down' }
  }
});

const chartData = ref({
  alarmCount: [150, 230, 224, 218, 135, 147, 260],
  processEfficiency: [85, 88, 90, 87, 89, 91, 89],
  dates: ['04/21', '04/22', '04/23', '04/24', '04/25', '04/26', '04/27'],
  totals: {
    alarmCount: 56,
    processEfficiency: '89%'
  },
  dailyChanges: {
    alarmCount: { value: '0.9%', type: 'up' },
    processEfficiency: { value: '0.9%', type: 'down' }
  }
});

const alarmTypeData = ref([
  { value: 25, name: '逆变器故障', itemStyle: { color: '#F94144' } },
  { value: 20, name: '组串异常', itemStyle: { color: '#F3722C' } },
  { value: 15, name: '通讯中断', itemStyle: { color: '#00BAAD' } },
  { value: 15, name: '汇流箱报警', itemStyle: { color: '#186DF5' } }
]);

const alarmRecords = ref([
  { time: "2025-10-15 08:30:22", toolname: '逆变器 INV-001', alarmType: "逆变器过温保护", alarmLevel: 1, status: 1, manager: "张工程师" },
  { time: "2025-10-15 09:15:45", toolname: '逆变器 INV-001', alarmType: "逆变器过温保护", alarmLevel: 2, status: 1, manager: "李工程师" },
  { time: "2025-10-15 10:42:18", toolname: '逆变器 INV-001', alarmType: "逆变器过温保护", alarmLevel: 3, status: 2, manager: "王工程师" },
  { time: "2025-10-15 11:20:33", toolname: '逆变器 INV-001', alarmType: "逆变器过温保护", alarmLevel: 1, status: 2, manager: "赵工程师" },
  { time: "2025-10-15 13:55:09", toolname: '逆变器 INV-001', alarmType: "逆变器过温保护", alarmLevel: 2, status: 3, manager: "孙工程师" },
  { time: "2025-10-15 14:30:56", toolname: '逆变器 INV-002', alarmType: "通讯中断", alarmLevel: 1, status: 3, manager: "周工程师" },
  { time: "2025-10-15 15:20:12", toolname: '逆变器 INV-002', alarmType: "通讯中断", alarmLevel: 2, status: 3, manager: "吴工程师" },
  { time: "2025-10-15 16:05:47", toolname: '逆变器 INV-002', alarmType: "通讯中断", alarmLevel: 1, status: 3, manager: "郑工程师" },
  { time: "2025-10-15 17:30:29", toolname: '逆变器 INV-002', alarmType: "通讯中断", alarmLevel: 2, status: 3, manager: "钱工程师" },
  { time: "2025-10-15 18:15:54", toolname: '逆变器 INV-002', alarmType: "通讯中断", alarmLevel: 1, status: 3, manager: "冯工程师" },
  { time: "2025-10-16 08:30:22", toolname: '汇流箱 HLB-001', alarmType: "组串异常", alarmLevel: 1, status: 1, manager: "陈工程师" },
  { time: "2025-10-16 09:15:45", toolname: '汇流箱 HLB-001', alarmType: "组串异常", alarmLevel: 2, status: 1, manager: "卫工程师" },
  { time: "2025-10-16 10:42:18", toolname: '汇流箱 HLB-001', alarmType: "组串异常", alarmLevel: 3, status: 2, manager: "蒋工程师" },
  { time: "2025-10-16 11:20:33", toolname: '汇流箱 HLB-001', alarmType: "组串异常", alarmLevel: 1, status: 2, manager: "沈工程师" },
  { time: "2025-10-16 13:55:09", toolname: '汇流箱 HLB-001', alarmType: "组串异常", alarmLevel: 2, status: 3, manager: "韩工程师" },
  { time: "2025-10-16 14:30:56", toolname: '汇流箱 HLB-002', alarmType: "过压保护", alarmLevel: 1, status: 3, manager: "杨工程师" },
  { time: "2025-10-16 15:20:12", toolname: '汇流箱 HLB-002', alarmType: "过压保护", alarmLevel: 2, status: 3, manager: "朱工程师" },
  { time: "2025-10-16 16:05:47", toolname: '汇流箱 HLB-002', alarmType: "过压保护", alarmLevel: 1, status: 3, manager: "秦工程师" },
  { time: "2025-10-16 17:30:29", toolname: '汇流箱 HLB-002', alarmType: "过压保护", alarmLevel: 2, status: 3, manager: "尤工程师" },
  { time: "2025-10-16 18:15:54", toolname: '汇流箱 HLB-002', alarmType: "过压保护", alarmLevel: 1, status: 3, manager: "许工程师" },
  { time: "2025-10-17 08:30:22", toolname: '配电柜 PD-001', alarmType: "电流异常", alarmLevel: 1, status: 1, manager: "何工程师" },
  { time: "2025-10-17 09:15:45", toolname: '配电柜 PD-001', alarmType: "电流异常", alarmLevel: 2, status: 1, manager: "吕工程师" },
  { time: "2025-10-17 10:42:18", toolname: '配电柜 PD-001', alarmType: "电流异常", alarmLevel: 3, status: 2, manager: "施工程师" },
  { time: "2025-10-17 11:20:33", toolname: '配电柜 PD-001', alarmType: "电流异常", alarmLevel: 1, status: 2, manager: "张工程师" },
  { time: "2025-10-17 13:55:09", toolname: '配电柜 PD-001', alarmType: "电流异常", alarmLevel: 2, status: 3, manager: "孔工程师" },
  { time: "2025-10-17 14:30:56", toolname: '配电柜 PD-002', alarmType: "电压异常", alarmLevel: 1, status: 3, manager: "曹工程师" },
  { time: "2025-10-17 15:20:12", toolname: '配电柜 PD-002', alarmType: "电压异常", alarmLevel: 2, status: 3, manager: "严工程师" },
  { time: "2025-10-17 16:05:47", toolname: '配电柜 PD-002', alarmType: "电压异常", alarmLevel: 1, status: 3, manager: "华工程师" },
  { time: "2025-10-17 17:30:29", toolname: '配电柜 PD-002', alarmType: "电压异常", alarmLevel: 2, status: 3, manager: "金工程师" },
  { time: "2025-10-17 18:15:54", toolname: '配电柜 PD-002', alarmType: "电压异常", alarmLevel: 1, status: 3, manager: "魏工程师" },
  { time: "2025-10-18 08:30:22", toolname: '环境监测仪 EM-001', alarmType: "温度过高", alarmLevel: 1, status: 1, manager: "陶工程师" },
  { time: "2025-10-18 09:15:45", toolname: '环境监测仪 EM-001', alarmType: "温度过高", alarmLevel: 2, status: 1, manager: "姜工程师" },
  { time: "2025-10-18 10:42:18", toolname: '环境监测仪 EM-001', alarmType: "温度过高", alarmLevel: 3, status: 2, manager: "戚工程师" },
  { time: "2025-10-18 11:20:33", toolname: '环境监测仪 EM-001', alarmType: "温度过高", alarmLevel: 1, status: 2, manager: "谢工程师" },
  { time: "2025-10-18 13:55:09", toolname: '环境监测仪 EM-001', alarmType: "温度过高", alarmLevel: 2, status: 3, manager: "邹工程师" },
  { time: "2025-10-18 14:30:56", toolname: '环境监测仪 EM-002', alarmType: "湿度异常", alarmLevel: 1, status: 3, manager: "喻工程师" },
  { time: "2025-10-18 15:20:12", toolname: '环境监测仪 EM-002', alarmType: "湿度异常", alarmLevel: 2, status: 3, manager: "柏工程师" },
  { time: "2025-10-18 16:05:47", toolname: '环境监测仪 EM-002', alarmType: "湿度异常", alarmLevel: 1, status: 3, manager: "水工程师" }
]);

// 模拟接口调用
const fetchAlarmData = async () => {
  try {
    // 模拟网络请求延迟
    await new Promise(resolve => setTimeout(resolve, 800));
    // 这里可以添加数据处理逻辑
    console.log('模拟API调用成功，数据已加载');
  } catch (error) {
    console.error('模拟API调用失败:', error);
  }
};

onMounted(() => {
  fetchAlarmData();
});
</script>
<style scoped lang="scss">
.model {
  padding: 20px 15px;
    background-color: rgba(242, 248, 252, 1);
}
</style>