cfc/cfc-web/src/views/teacher/TeacherFamilies.vue

<template>
  <div class="teacher-families admin-page">
    <!-- 页面标题区 -->
    <div class="page-header">
      <div class="header-left">
        <h2 class="page-title">我的家庭</h2>
        <span class="page-desc">管理您服务家庭的信息和任务</span>
      </div>
      <div class="header-actions">
      </div>
    </div>

    <!-- 统计卡片 -->
    <el-row :gutter="24" class="stats-row">
      <el-col :span="6">
        <div class="stat-card">
          <div class="stat-icon blue">
            <i class="el-icon-user-solid"></i>
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ stats.total }}</div>
            <div class="stat-label">总家庭数</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-card">
          <div class="stat-icon green">
            <i class="el-icon-circle-check"></i>
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ stats.active }}</div>
            <div class="stat-label">服务中</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-card">
          <div class="stat-icon orange">
            <i class="el-icon-user"></i>
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ stats.children }}</div>
            <div class="stat-label">孩子总数</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-card">
          <div class="stat-icon purple">
            <i class="el-icon-s-data"></i>
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ stats.avgCompletion }}%</div>
            <div class="stat-label">平均完成率</div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 搜索筛选 -->
    <el-card class="filter-card">
      <el-row :gutter="16">
        <el-col :span="8">
          <el-input placeholder="搜索家庭名称或ID" v-model="searchKeyword" prefix-icon="el-icon-search" clearable>
          </el-input>
        </el-col>
        <el-col :span="6">
          <el-select placeholder="服务状态" v-model="filterStatus" clearable>
            <el-option label="服务中" value="active"></el-option>
            <el-option label="已暂停" value="inactive"></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-select placeholder="服务类型" v-model="filterServiceType" clearable>
            <el-option label="基础服务" value="basic"></el-option>
            <el-option label="高级服务" value="premium"></el-option>
          </el-select>
        </el-col>
      </el-row>
    </el-card>

    <!-- 家庭列表 -->
    <el-card class="table-card">
        <el-table :data="filteredFamilies" stripe style="width: 100%;" v-loading="loading" :max-height="tableHeight">
        <el-table-column label="家庭信息" min-width="200">
          <template slot-scope="scope">
            <div class="family-cell">
              <div class="family-avatar">
                <i class="el-icon-house"></i>
              </div>
              <div class="family-detail">
                <div class="family-name">{{ scope.row.familyName || '家庭' + scope.row.familyId }}</div>
                <div class="family-id">ID: {{ scope.row.familyId }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="serviceType" label="服务类型" width="120">
          <template slot-scope="scope">
            <el-tag size="small" :type="scope.row.serviceType === 'premium' ? 'warning' : ''" effect="plain">
              {{ scope.row.serviceType === 'premium' ? '高级服务' : '基础服务' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="servicePrice" label="服务价格" width="120">
          <template slot-scope="scope">
            <span class="price">{{ formatPriceWithSymbol(scope.row.servicePrice) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="childrenCount" label="孩子数" width="80">
          <template slot-scope="scope">
            <span class="children-count">{{ scope.row.childrenCount || 0 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="taskCompletionRate" label="任务完成率" width="150">
          <template slot-scope="scope">
            <div class="completion-cell">
              <el-progress :percentage="scope.row.taskCompletionRate || 0" :color="getCompletionColor(scope.row.taskCompletionRate || 0)" :show-text="false" style="width: 80px"></el-progress>
              <span class="completion-text">{{ scope.row.taskCompletionRate || 0 }}%</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === 'active' ? 'success' : 'info'" effect="dark" size="small">
              {{ scope.row.status === 'active' ? '服务中' : '已暂停' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="boundAt" label="绑定时间" width="160"></el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template slot-scope="{ row }">
            <el-button size="mini" type="primary" @click="handleEdit(row)">编辑</el-button>
            <el-dropdown trigger="hover" @command="(cmd) => handleActionCmd(row, cmd)">
              <el-button size="mini">
                更多<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="view" icon="el-icon-view">查看详情</el-dropdown-item>
                <el-dropdown-item command="message" icon="el-icon-chat-dot-round">发消息</el-dropdown-item>
                <el-dropdown-item command="delete" icon="el-icon-delete">删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
        </el-table>
    </el-card>

    <!-- 家庭详情抽屉 -->
    <el-drawer :visible.sync="drawerVisible" :title="(currentFamily && currentFamily.familyName) || '家庭详情'" size="500px" direction="rtl">
      <div class="drawer-content" v-if="currentFamily">
        <el-divider content-position="left">基本信息</el-divider>
        <div class="detail-row">
          <span class="detail-label">家庭ID</span>
          <span class="detail-value">{{ currentFamily.familyId }}</span>
        </div>
        <div class="detail-row">
          <span class="detail-label">家庭名称</span>
          <span class="detail-value">{{ currentFamily.familyName || '-' }}</span>
        </div>
        <div class="detail-row">
          <span class="detail-label">服务类型</span>
          <span class="detail-value">{{ currentFamily.serviceType === 'premium' ? '高级服务' : '基础服务' }}</span>
        </div>
        <div class="detail-row">
          <span class="detail-label">服务价格</span>
          <span class="detail-value price">{{ formatPriceWithSymbol(currentFamily.servicePrice) }}</span>
        </div>
        <div class="detail-row">
          <span class="detail-label">绑定时间</span>
          <span class="detail-value">{{ currentFamily.boundAt }}</span>
        </div>

        <el-divider content-position="left">成员信息</el-divider>
        <div class="member-list">
          <div class="member-item" v-for="child in currentFamily.children || []" :key="child.id">
            <div class="member-avatar">
              <i class="el-icon-user"></i>
            </div>
            <div class="member-info">
              <div class="member-name">{{ child.nickname || '孩子' + child.id }}</div>
              <div class="member-meta">
                <span>{{ child.age || 0 }}岁</span>
              </div>
            </div>
            <div class="member-stats">
              <span class="points">{{ child.totalPoints || 0 }}积分</span>
            </div>
          </div>
          <div v-if="!currentFamily.children || currentFamily.children.length === 0" class="no-members">
            暂无成员信息
          </div>
        </div>

        <el-divider content-position="left">任务概况</el-divider>
        <el-row :gutter="12" class="task-stats">
          <el-col :span="8">
            <div class="task-stat-item">
              <div class="task-stat-value" style="color: #3B82F6">{{ currentFamily.todayTasks || 0 }}</div>
              <div class="task-stat-label">今日任务</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="task-stat-item">
              <div class="task-stat-value" style="color: #10B981">{{ currentFamily.completedTasks || 0 }}</div>
              <div class="task-stat-label">已完成</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="task-stat-item">
              <div class="task-stat-value" style="color: #F59E0B">{{ currentFamily.pendingTasks || 0 }}</div>
              <div class="task-stat-label">待完成</div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { getBoundFamilies } from '@/api/guide'

export default {
  name: 'TeacherFamilies',
  data() {
    return {
      families: [],
      searchKeyword: '',
      filterStatus: '',
      filterServiceType: '',
      drawerVisible: false,
      currentFamily: null,
      loading: false
    }
  },
  computed: {
    tableHeight() {
      return window.innerHeight - 300
    },
    stats() {
      return {
        total: this.families.length,
        active: this.families.filter(f => f.status === 'active').length,
        children: this.families.reduce((sum, f) => sum + (f.childrenCount || 0), 0),
        avgCompletion: this.families.length > 0
          ? Math.round(this.families.reduce((sum, f) => sum + (f.taskCompletionRate || 0), 0) / this.families.length)
          : 0
      }
    },
    filteredFamilies() {
      return this.families.filter(f => {
        if (this.searchKeyword) {
          const kw = this.searchKeyword.toLowerCase()
          const matchName = (f.familyName || '').toLowerCase().includes(kw)
          const matchId = String(f.familyId).includes(kw)
          if (!matchName && !matchId) return false
        }
        if (this.filterStatus && f.status !== this.filterStatus) return false
        if (this.filterServiceType && f.serviceType !== this.filterServiceType) return false
        return true
      })
    }
  },
  created() {
    this.loadFamilies()
  },
  methods: {
    async loadFamilies() {
      this.loading = true
      try {
        const res = await getBoundFamilies()
        if (res.data) {
          this.families = res.data
        }
      } catch (e) {
        console.error(e)
      } finally {
        this.loading = false
      }
    },
    handleView(row) {
      this.currentFamily = row
      this.drawerVisible = true
    },
    handleMessage(row) {
      this.$router.push({ path: '/teacher-messages', query: { familyId: row.familyId } })
    },
    handleEdit(row) {
      this.handleView(row)
    },
    handleActionCmd(row, cmd) {
      switch (cmd) {
        case 'view': this.handleView(row); break
        case 'edit': this.handleEdit(row); break
        case 'message': this.handleMessage(row); break
        case 'delete': this.$confirm('确认删除该家庭吗？', '提示', { type: 'warning' }).then(() => {}).catch(() => {}); break
      }
    },

    getCompletionColor(rate) {
      if (rate >= 80) return '#10B981'
      if (rate >= 50) return '#F59E0B'
      return '#EF4444'
    }
  }
}
</script>

<style scoped>
.teacher-families {
  padding: 24px;
  background: #F0F7FF;
  min-height: calc(100vh - 120px);
}

/* 页面标题 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

.page-title {
  font-size: 24px;
  font-weight: 700;
  color: #1E293B;
  margin: 0 0 4px 0;
}

.page-desc {
  font-size: 14px;
  color: #64748B;
}

.primary-btn {
  background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
  border: none;
  padding: 12px 24px;
  border-radius: 10px;
  font-weight: 500;
}

.primary-btn:hover {
  background: linear-gradient(135deg, #2563EB 0%, #3B82F6 100%);
}

/* 统计卡片 */
.stats-row {
  margin-bottom: 24px;
}

.stat-card {
  display: flex;
  align-items: center;
  padding: 20px 24px;
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(59, 130, 246, 0.08);
}

.stat-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  font-size: 22px;
  color: #FFFFFF;
}

.stat-icon.blue {
  background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
}

.stat-icon.green {
  background: linear-gradient(135deg, #10B981 0%, #34D399 100%);
}

.stat-icon.orange {
  background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%);
}

.stat-icon.purple {
  background: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%);
}

.stat-value {
  font-size: 28px;
  font-weight: 700;
  color: #1E293B;
}

.stat-label {
  font-size: 14px;
  color: #64748B;
  margin-top: 2px;
}

/* 筛选卡片 */
.filter-card {
  border-radius: 16px;
  margin-bottom: 24px;
  border: none;
  box-shadow: 0 2px 12px rgba(59, 130, 246, 0.06);
}

/* 表格卡片 */
.table-card {
  border-radius: 16px;
  border: none;
  box-shadow: 0 2px 12px rgba(59, 130, 246, 0.06);
}

.family-cell {
  display: flex;
  align-items: center;
}

.family-avatar {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  margin-right: 12px;
  font-size: 16px;
}

.family-name {
  font-weight: 600;
  font-size: 15px;
  color: #1E293B;
}

.family-id {
  font-size: 12px;
  color: #94A3B8;
  margin-top: 2px;
}

.price {
  font-weight: 600;
  color: #F59E0B;
}

.children-count {
  font-weight: 600;
  color: #3B82F6;
}

.completion-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.completion-text {
  font-size: 13px;
  font-weight: 600;
  color: #64748B;
  width: 35px;
}

/* 抽屉样式 */
.drawer-content {
  padding: 0 24px;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #F1F5F9;
}

.detail-label {
  color: #64748B;
  font-size: 14px;
}

.detail-value {
  color: #1E293B;
  font-size: 14px;
  font-weight: 500;
}

.member-list {
  margin-top: 12px;
}

.member-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #F1F5F9;
}

.member-avatar {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #FF6B9D 0%, #FF8C6B 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  margin-right: 12px;
}

.member-name {
  font-weight: 600;
  color: #1E293B;
}

.member-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 13px;
  color: #64748B;
}

.member-stats {
  margin-left: auto;
}

.points {
  font-weight: 600;
  color: #F59E0B;
}

.no-members {
  text-align: center;
  padding: 24px;
  color: #94A3B8;
}

.task-stats {
  margin-top: 12px;
}

.task-stat-item {
  text-align: center;
  padding: 16px;
  background: #F8FAFC;
  border-radius: 12px;
}

.task-stat-value {
  font-size: 24px;
  font-weight: 700;
}

.task-stat-label {
  font-size: 12px;
  color: #64748B;
  margin-top: 4px;
}
</style>