<template>
  <div class="detail-form-container">
    <!-- 标题栏 -->
    <div class="form-header">
      <h2 class="form-title">运行参数详情表</h2>
      <div class="header-actions">
        <el-input v-model="searchKeyword" placeholder="搜索参数" prefix-icon="el-icon-search" class="search-input" />
        <el-button type="primary" class="filter-btn" @click="showFilterDialog = !showFilterDialog">
          <img src="/src/assets/demo/shaixuan.png" alt="筛选" class="btn-icon">
          筛选
        </el-button>
        <el-button type="primary" class="export-btn" @click="handleExport">
          <img src="/src/assets/demo/upload.png" alt="导出" class="btn-icon">
          导出
        </el-button>
      </div>
    </div>

    <!-- 表格内容 -->
    <div class="table-wrapper">
      <el-table v-loading="loading" :data="processedTableData" style="width: 100%" border>
        <el-table-column prop="time" label="时间" align="center" />
        <el-table-column prop="irradiance" label="辐照度(W/㎡)" align="center" />
        <el-table-column prop="powerGeneration" label="发电量(KWH)" align="center" />
        <el-table-column prop="efficiency" label="效率(%)" align="center" />
        <el-table-column prop="moduleTemperature" label="组件温度(℃)" align="center" />
        <el-table-column prop="inverterTemperature" label="逆变器温度(℃)" align="center" />
        <el-table-column prop="status" label="状态" align="center">
          <template #default="scope">
            <el-tag :type="getStatusTagType(scope.row.status)" v-if="['success', 'warning', 'info', 'primary', 'danger'].includes(getStatusTagType(scope.row.status))">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <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="[10, 20, 50, 100]"
        layout="prev, pager, next" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
  </div>

  <!-- 筛选对话框 -->
  <el-dialog v-model="showFilterDialog" title="筛选条件" width="30%">
    <div class="filter-content">
      <div class="filter-item">
        <span class="filter-label">设备状态：</span>
        <el-checkbox-group v-model="selectedStatus" class="filter-checkbox-group">
          <el-checkbox v-for="option in statusOptions" :key="option.value" :label="option.value">
            {{ option.label }}
          </el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="resetFilter">重置</el-button>
        <el-button type="primary" @click="handleFilter">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { ElMessage, ElDialog, ElCheckboxGroup, ElCheckbox, ElButton } from 'element-plus';

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

// 搜索关键词
const searchKeyword = ref('');

// 表格加载状态
const loading = ref(false);

// 分页数据 - 设置为第2页，共200条记录（20页）
const currentPage = ref(2);
const pageSize = ref(10);
const total = ref(200); // 模拟总条数，20页

// 筛选相关
const showFilterDialog = ref(false);
const selectedStatus = ref<string[]>([]);
const statusOptions = [
  { label: '正常', value: '正常' },
  { label: '停机', value: '停机' }
];

// 筛选按钮点击处理
const handleFilter = () => {
  // 筛选逻辑已在processedTableData计算属性中实现
  showFilterDialog.value = false;
};

// 重置筛选
const resetFilter = () => {
  selectedStatus.value = [];
};



// 计算表格数据（模拟分页、搜索和筛选）
const processedTableData = computed(() => {
  let filteredData = [...props.tableData];

  // 搜索逻辑
  if (searchKeyword.value) {
    filteredData = filteredData.filter(item => {
      return Object.values(item).some(val =>
        String(val).includes(searchKeyword.value)
      );
    });
  }

  // 状态筛选逻辑
  if (selectedStatus.value.length > 0) {
    filteredData = filteredData.filter(item =>
      selectedStatus.value.includes(item.status)
    );
  }

  // 模拟分页逻辑
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return filteredData.slice(start, end);
});

// 根据状态获取标签类型
const getStatusTagType = (status: string) => {
  switch (status) {
    case '正常':
      return 'success';
    case '停机':
      return 'info';
    default:
      return 'default';
  }
};

// 分页大小变化处理
const handleSizeChange = (size) => {
  pageSize.value = size;
  // 实际应用中这里应该重新获取数据
  ElMessage.info(`每页显示 ${size} 条`);
};

// 当前页变化处理
const handleCurrentChange = (current) => {
  currentPage.value = current;
  // 实际应用中这里应该重新获取数据
};

// 导出功能
const handleExport = () => {
  ElMessage.success('导出成功');
  // 实际应用中这里应该实现真实的导出逻辑
};

// 初始化数据
onMounted(() => {
  // 模拟加载数据
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
  }, 500);
});
</script>

<style scoped>
.detail-form-container {
  width: 100%;
  min-width: 0;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  padding: 20px;
  box-sizing: border-box;
}

.form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f5f5f5;
}

.form-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.search-input {
  width: 200px;
}

.filter-btn {
  margin-right: 10px;
}

.btn-icon {
  width: 16px;
  height: 16px;
  margin-right: 5px;
  vertical-align: middle;
}

.table-wrapper {
  margin-bottom: 20px;
}

/* 筛选对话框样式 */
.filter-content {
  padding: 10px 0;
}

.filter-item {
  margin-bottom: 20px;
}

.filter-label {
  display: inline-block;
  width: 80px;
  text-align: right;
  margin-right: 10px;
}

.filter-checkbox-group {
  display: inline-block;
  vertical-align: middle;
}

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

/* 适配不同屏幕尺寸 */
@media (max-width: 1200px) {
  .header-actions {
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  .detail-form-container {
    padding: 10px;
  }

  .form-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .header-actions {
    width: 100%;
  }

  .search-input {
    width: 100%;
  }

  .pagination-wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* 确保表格在小屏幕上可以水平滚动 */
.table-wrapper {
  overflow-x: auto;
  margin-bottom: 20px;
}
</style>