<template>
    <el-form :inline="true" :model="formInline" style="display: flex; width: 100%;">
        <div style="display: flex; gap: 16px;">
            <el-form-item label="状态:">
                <el-select v-model="formInline.status" placeholder="状态" clearable style="width: 120px;">
                    <el-option v-for="(item, key) in statusMap" :key="key" :label="item.label" :value="key" />
                </el-select>
            </el-form-item>
            <el-form-item label="级别:">
                <el-select v-model="formInline.alarmLevel" placeholder="级别" clearable style="width: 120px;">
                    <el-option v-for="(item, key) in alarmLevelMap" :key="key" :label="item.label" :value="key" />
                </el-select>
            </el-form-item>
            <el-form-item label="类别:">
                <el-select v-model="formInline.alarmType" placeholder="类别" clearable style="width: 120px;">
                    <el-option v-for="item in alarmTypeList" :key="item" :label="item" :value="item" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="default" @click="clearFilters">清除筛选</el-button>
            </el-form-item>
        </div>
        <div style="margin-left: auto;">
            <el-form-item label="排序:">
                <el-select v-model="formInline.region" placeholder="排序" clearable style="width: 120px;">
                    <el-option label="Zone one" value="shanghai" />
                    <el-option label="Zone two" value="beijing" />
                </el-select>
            </el-form-item>
        </div>
    </el-form>
    <el-table
      v-loading="loading"
      :data="listData"
      border
      style="width: 100%"
    >
        <el-table-column label="报警时间" align="center" prop="time" />
        <el-table-column label="设备名称" align="center" prop="toolname" />
        <el-table-column label="报警类型" align="center" prop="alarmType" />
        <el-table-column label="报警级别" align="center" prop="alarmLevel">
            <template #default="scope">
                <el-tag :type="alarmLevelMap[scope.row.alarmLevel].type">{{
                    alarmLevelMap[scope.row.alarmLevel].label }}</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="状态" align="center" prop="status">
            <template #default="scope">
                <el-tag :type="statusMap[scope.row.status].type">{{ statusMap[scope.row.status].label }}</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="负责人" align="center" prop="manager" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
            <template #default="scope">
                <div style="display: flex;align-items: center;">
                    <el-button link type="primary" :icon="View">查看</el-button>
                    <div v-if="scope.row.status == 1"
                        style="color: #43CF7C;margin-left: 5px; display: flex; align-items: center;">
                        <el-icon style="margin-right: 4px; font-size: 14px;">
                            <CircleCheckFilled />
                        </el-icon>
                        <span style="font-size: 13px;">已处理</span>
                    </div>
                    <el-button link type="success" v-else :icon="Opportunity">处理</el-button>
                </div>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination-wrapper">
        <div class="pagination-info">
            显示第 {{ (currentPage - 1) * pageSize + 1 }} 到第
            {{ Math.min(currentPage * pageSize, total) }} 条，共 {{ total }} 条记录
        </div>
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[5, 10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          background
        />
    </div>
</template>
<script setup>
import { View, CircleCheckFilled, Opportunity } from '@element-plus/icons-vue'
import { ref, computed, reactive } from 'vue'
import { ElMessage } from 'element-plus'

// 定义props
const props = defineProps({
  alarmRecords: {
    type: Array,
    default: () => []
  }
});

// 分页数据 - 设置为第1页，一页显示5条
const currentPage = ref(1);
const pageSize = ref(5);
const total = ref(props.alarmRecords.length); // 使用传入的数据长度
const formInline = reactive({})
const loading = ref(false);

// 使用props中的数据而不是本地虚拟数据
const fullData = props.alarmRecords;

// 状态映射
const statusMap = {
    1: {
        label: "已处理",
        type: "success"
    },
    2: {
        label: "未处理",
        type: "danger"
    },
    3: {
        label: "处理中",
        type: "primary"
    }
}

// 报警级别映射
const alarmLevelMap = {
    1: {
        label: "紧急",
        type: "danger"
    },
    2: {
        label: "重要",
        type: "warning"
    },
    3: {
        label: "一般",
        type: "info"
    }
}

// 报警类型列表
const alarmTypeList = computed(() => {
    const types = [...new Set(fullData.map(item => item.alarmType))];
    return types;
});

// 计算当前页显示的数据（包含筛选功能）
const listData = computed(() => {
    // 先进行筛选
    let filteredData = fullData.filter(item => {
        // 状态筛选
        if (formInline.status !== undefined && formInline.status !== null && formInline.status !== '') {
            if (item.status !== parseInt(formInline.status)) {
                return false;
            }
        }
        // 级别筛选
        if (formInline.alarmLevel !== undefined && formInline.alarmLevel !== null && formInline.alarmLevel !== '') {
            if (item.alarmLevel !== parseInt(formInline.alarmLevel)) {
                return false;
            }
        }
        // 类别筛选
        if (formInline.alarmType !== undefined && formInline.alarmType !== null && formInline.alarmType !== '') {
            if (item.alarmType !== formInline.alarmType) {
                return false;
            }
        }
        return true;
    });
    
    // 更新总条数
    total.value = filteredData.length;
    
    // 然后进行分页
    const startIndex = (currentPage.value - 1) * pageSize.value;
    const endIndex = startIndex + pageSize.value;
    return filteredData.slice(startIndex, endIndex);
});

// 清除筛选条件
const clearFilters = () => {
    // 清除所有筛选条件
    Object.keys(formInline).forEach(key => {
        if (key !== 'region') { // 保留排序功能
            delete formInline[key];
        }
    });
    // 重置到第一页
    currentPage.value = 1;
    // 显示提示信息
    ElMessage.success('筛选条件已清除');
};
// 分页处理函数
const handleSizeChange = (size) => {
    pageSize.value = size;
    currentPage.value = 1; // 切换每页显示条数时重置到第一页
    // 模拟数据加载效果
    loading.value = true;
    setTimeout(() => {
        loading.value = false;
    }, 300);
};

const handleCurrentChange = (current) => {
    currentPage.value = current;
    // 模拟数据加载效果
    loading.value = true;
    setTimeout(() => {
        loading.value = false;
    }, 300);
};
</script>
<style scoped lang="scss">
.pagination-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid #f5f5f5;
}

.pagination-info {
  color: #8c8c8c;
  font-size: 14px;
}
</style>
