<template>
  <div class="project-container">
    <!-- 页面头部 -->
    <header class="project-header">
      <div class="header-left">
        <h1 class="project-title">个人项目管理</h1>
      </div>
      <div class="header-right">
        <div class="user-info">
          <span class="user-label">姓名:</span>
          <span class="user-name">{{ $route.query.name || $route.query.assignee || '未指派' }}</span>
        </div>
      </div>
    </header>

    <!-- 主要内容区域 -->
    <main class="project-main">
      <!-- 左侧搜索和统计区域 -->
      <div class="left-panel">
        <!-- 搜索区域 -->
        <div class="search-section">
          <div class="search-input-group">
            <el-input v-model="searchInput" placeholder="搜索项目或模块" prefix-icon="el-icon-search" @keyup.enter.native="handleSearch" />
            <el-button type="primary" class="search-button" @click="handleSearch">搜索</el-button>
            <el-button type="default" @click="resetSearch" v-if="searchInput">重置</el-button>
          </div>
        </div>

        <!-- 统计卡片区域 -->
        <div class="stats-section">
          <h3 class="section-title">项目概览</h3>
          <div class="stats-cards">
            <!-- 未完成模块卡片 -->
            <div class="stat-card">
              <div class="stat-icon warning-icon">
                <svg-icon icon-class="warning" />
              </div>
              <div class="stat-content">
                <div class="stat-label">未完成模块</div>
                <div class="stat-value">{{ pendingModulesCount }}</div>
              </div>
            </div>

            <!-- 正在进行项目卡片 -->
            <div class="stat-card">
              <div class="stat-icon operation-icon">
                <svg-icon icon-class="s-operation" />
              </div>
              <div class="stat-content">
                <div class="stat-label">正在进行模块</div>
                <div class="stat-value">{{ ongoingProjectsCount }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧项目表格区域 -->
      <div class="right-panel">
        <div class="table-section">
          <el-tabs type="border-card" class="project-tabs">
            <el-tab-pane label="全部项目">
              <el-table
                :data="displayedAll"
                stripe
                style="width: 100%"
                v-loading="loading"
                element-loading-text="加载中...">
                <el-table-column prop="projectName" label="项目名称" width="200" />
                <el-table-column prop="moduleName" label="模块名称" width="180" />
                <el-table-column prop="status" label="状态" width="100">
                  <template slot-scope="scope">
                    <el-tag :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="startDate" label="开始日期" width="120" />
                <el-table-column prop="endDate" label="预计完成" width="120" />
                <el-table-column label="进度" width="120">
                  <template slot-scope="scope">
                    <el-progress :percentage="scope.row.progress" :status="getProgressStatus(scope.row.progress)" stroke-width="6" />
                  </template>
                </el-table-column>
                <!-- <el-table-column label="操作" width="120" fixed="right">
                  <template slot-scope="scope">
                    <el-button size="small" type="text" @click="viewDetail(scope.row)">查看</el-button>
                  </template> -->
                <!-- </el-table-column> -->
              </el-table>
            </el-tab-pane>

            <el-tab-pane label="已完成">
              <el-table
                :data="completedProjects"
                stripe
                style="width: 100%">
                <el-table-column prop="projectName" label="项目名称" width="200" />
                <el-table-column prop="moduleName" label="模块名称" width="180" />
                <el-table-column prop="status" label="状态" width="100" />
                <el-table-column prop="startDate" label="开始日期" width="120" />
                <el-table-column prop="endDate" label="完成日期" width="120" />
                <!-- <el-table-column label="操作" width="120" fixed="right">
                  <template slot-scope="scope">
                    <el-button size="small" type="text" @click="viewDetail(scope.row)">查看</el-button>
                  </template>
                </el-table-column> -->
              </el-table>
            </el-tab-pane>

            <el-tab-pane label="未完成">
              <el-table
                :data="pendingProjects"
                stripe
                style="width: 100%">
                <el-table-column prop="projectName" label="项目名称" width="200" />
                <el-table-column prop="moduleName" label="模块名称" width="180" />
                <el-table-column prop="status" label="状态" width="100" />
                <el-table-column prop="startDate" label="开始日期" width="120" />
                <el-table-column prop="endDate" label="截止日期" width="120" />
                <el-table-column label="进度" width="120">
                  <template slot-scope="scope">
                    <el-progress :percentage="scope.row.progress" stroke-width="6" />
                  </template>
                </el-table-column>
                <!-- <el-table-column label="操作" width="120" fixed="right">
                  <template slot-scope="scope">
                    <el-button size="small" type="text" @click="viewDetail(scope.row)">查看</el-button>
                  </template>
                </el-table-column> -->
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import { listModule } from '@/api/project/module'
export default {
  name: 'UserProject',
  data() {
    return {
      searchInput: '',
      loading: false,
      allProjects: [],
      displayedAll: [],
      pendingModulesCount: 0,
      ongoingProjectsCount: 0
    }
  },
  computed: {
    // 已完成项目
    completedProjects() {
      return this.displayedAll.filter(project => project.status === '已完成');
    },
    // 未完成项目
    pendingProjects() {
      return this.displayedAll.filter(project => project.status !== '已完成');
    }
  },
  mounted() {
    this.loadMyModules().then(() => {
      this.updateDisplayed();
    });
  },
  methods: {
    async loadMyModules() {
      try {
        this.loading = true;
        const assignee = this.$route.query.assignee || this.$route.query.name || '';
        const res = await listModule({ assignee, pageNum: 1, pageSize: 9999 }); // 确保分页获取所有
        const rows = (res && res.rows) ? res.rows : [];
        this.allProjects = rows.map(r => ({
          projectName: r.projectName || '',
          moduleName: r.moduleName,
          status: this.mapModuleStatus(r.status),
          startDate: r.createTime ? r.createTime.split(' ')[0] : '', // 格式化日期
          endDate: r.finishTime ? r.finishTime.split(' ')[0] : r.deadline ? r.deadline.split(' ')[0] : '',
          progress: this.estimateProgress(r.status)
        }));
        this.pendingModulesCount = rows.filter(r => r.status !== '2').length;
        this.ongoingProjectsCount = rows.filter(r => r.status === '1').length;
      } catch(e) {
        this.$message.error('加载个人模块数据失败');
      } finally {
        this.loading = false;
      }
    },
    mapModuleStatus(code) {
      if (code === '2') return '已完成';
      if (code === '1') return '进行中';
      return '未开始';
    },
    estimateProgress(code) {
      if (code === '2') return 100;
      if (code === '1') return 60;
      return 0;
    },
    // 获取状态对应的标签类型
    getStatusType(status) {
      switch (status) {
        case '已完成':
          return 'success';
        case '进行中':
          return 'primary';
        case '未开始':
          return 'warning';
        default:
          return 'info';
      }
    },
    // 获取进度条状态
    getProgressStatus(progress) {
      if (progress === 100) return 'success';
      if (progress > 60) return 'primary';
      if (progress > 30) return 'warning';
      return '';
    },
    // 查看项目详情
    viewDetail(project) {
      this.$message(`查看 ${project.projectName} - ${project.moduleName} 的详情`);
      // 这里可以添加跳转到详情页的逻辑
    },
    // 搜索功能
    updateDisplayed() {
      const keyword = this.searchInput.toLowerCase().trim();
      if (!keyword) {
        this.displayedAll = [...this.allProjects];
      } else {
        this.displayedAll = this.allProjects.filter(p => 
          (p.projectName && p.projectName.toLowerCase().includes(keyword)) || 
          (p.moduleName && p.moduleName.toLowerCase().includes(keyword))
        );
      }
      // 新增：基于过滤后数据重新计算统计
      this.pendingModulesCount = this.displayedAll.filter(p => p.status !== '已完成').length;
      this.ongoingProjectsCount = this.displayedAll.filter(p => p.status === '进行中').length;
    },
    handleSearch() {
      this.updateDisplayed(); // 无需 loading 因为是客户端过滤
    },
    resetSearch() {
      this.searchInput = '';
      this.updateDisplayed();
    }
  }
}
</script>

<style lang="scss" scoped>
.project-container {
  min-height: 100vh;
  background-color: #f5f7fa;
  display: flex;
  flex-direction: column;
}

/* 页面头部样式 */
.project-header {
  background-color: #3c86e7;
  color: white;
  padding: 16px 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.project-title {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
}

.user-info {
  display: flex;
  align-items: center;
  font-size: 16px;
}

.user-label {
  margin-right: 8px;
}

.user-name {
  font-weight: 500;
}

/* 主要内容区域 */
.project-main {
  flex: 1;
  display: flex;
  padding: 24px;
  gap: 24px;
}

/* 左侧面板 */
.left-panel {
  width: 320px;
  flex-shrink: 0;
}

/* 右侧面板 */
.right-panel {
  flex: 1;
  min-width: 0;
}

/* 搜索区域 */
.search-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  margin-bottom: 20px;
}

.search-input-group {
  display: flex;
  gap: 12px;
}

.search-input-group .el-input {
  flex: 1;
}

.search-button {
  white-space: nowrap;
}

/* 统计区域 */
.stats-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.section-title {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 500;
  color: #333;
}

.stats-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stat-card {
  display: flex;
  align-items: center;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.stat-card:hover {
  background: #e9ecef;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-right: 16px;
}

.warning-icon {
  background: #fff3cd;
  color: #ff9800;
}

.operation-icon {
  background: #e6ccff;
  color: #9c27b0;
}

.stat-content {
  flex: 1;
}

.stat-label {
  font-size: 14px;
  color: #666;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

/* 表格区域 */
.table-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.project-tabs {
  width: 100%;
}

.project-tabs .el-tabs__header {
  margin-bottom: 20px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .project-main {
    flex-direction: column;
  }

  .left-panel {
    width: 100%;
  }

  .stats-cards {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .stat-card {
    flex: 1;
    min-width: calc(50% - 6px);
  }
}

@media (max-width: 768px) {
  .project-header {
    padding: 12px 16px;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }

  .project-title {
    font-size: 20px;
  }

  .project-main {
    padding: 16px;
  }

  .search-input-group {
    flex-direction: column;
  }

  .stats-cards {
    flex-direction: column;
  }

  .stat-card {
    min-width: 100%;
  }
}
</style>
