cfc/cfc-frontend/pages/guide/training-plans/index.vue

<template>
  <view class="container">
    <view class="header">
      <text class="title">训练方案</text>
      <view class="header-actions">
        <view class="btn-secondary" @click="showChildPicker">
          <text class="btn-secondary-text">筛选孩子</text>
        </view>
        <view class="btn-primary" @click="goToCreate">
          <text class="btn-primary-text">+ 新建方案</text>
        </view>
      </view>
    </view>

    <view class="child-filter-bar" v-if="selectedChildId">
      <text class="filter-label">当前: {{ selectedChildName || '孩子' }}</text>
      <view class="filter-clear" @click="clearChildFilter">
        <text class="filter-clear-text">清除</text>
      </view>
    </view>

    <view class="plan-list" v-if="plans.length > 0">
      <view class="plan-card" v-for="plan in plans" :key="plan.id" @click="goToDetail(plan.id)">
        <view class="plan-header">
          <text class="plan-title">{{ plan.title || '未命名方案' }}</text>
          <text class="plan-status" :class="'status-' + plan.status">{{ statusText(plan.status) }}</text>
        </view>
        <view class="plan-meta" v-if="plan.childId">
          <text class="meta-text">孩子ID: {{ plan.childId }}</text>
          <text class="meta-date">{{ formatDate(plan.createdAt) }}</text>
        </view>
        <view class="plan-desc" v-if="plan.description">{{ plan.description }}</view>
        <view class="plan-actions" @click.stop>
          <view class="action-btn outline" v-if="plan.status === 'draft'" @click="goToDetail(plan.id)">
            <text>编辑</text>
          </view>
          <view class="action-btn outline" v-if="plan.status === 'published'" @click="goToBoard(plan.id)">
            <text>执行看板</text>
          </view>
          <view class="action-btn danger" v-if="plan.status === 'draft'" @click="confirmDelete(plan.id)">
            <text>删除</text>
          </view>
          <view class="action-btn primary" v-if="plan.status === 'draft'" @click="handleDeploy(plan.id)">
            <text>下发</text>
          </view>
        </view>
      </view>
    </view>

    <view class="empty" v-else>
      <text class="empty-icon">&#x1F3EB;</text>
      <text class="empty-title">暂无训练方案</text>
      <text class="empty-desc">为绑定家庭创建认知训练方案，或从推荐结果自动生成</text>
      <view class="empty-btns">
        <view class="btn-secondary" @click="showGenerateDialog">
          <text class="btn-secondary-text">从推荐生成</text>
        </view>
        <view class="btn-primary" @click="goToCreate">
          <text class="btn-primary-text">新建方案</text>
        </view>
      </view>
    </view>

    <!-- 生成方案弹窗 -->
    <view class="modal-mask" v-if="showGenerate" @click="showGenerate = false">
      <view class="modal-card" @click.stop>
        <text class="modal-title">从推荐结果生成方案</text>
        <text class="modal-desc">将根据该孩子最新的认知评估结果，自动生成针对性训练方案</text>
        <view class="modal-child-list">
          <view class="modal-child-item" v-for="child in bindedChildren" :key="child.id"
            @click="generateFromRec(child.id)">
            <text class="modal-child-name">{{ child.name || '孩子' + child.id }}</text>
            <text class="modal-child-id">ID: {{ child.id }}</text>
          </view>
          <view class="empty-small" v-if="bindedChildren.length === 0">
            <text class="empty-small-text">暂无可用孩子，请先绑定家庭</text>
          </view>
        </view>
        <view class="modal-footer">
          <view class="btn-cancel" @click="showGenerate = false">
            <text>取消</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 孩子选择器弹窗 -->
    <view class="modal-mask" v-if="showPicker" @click="showPicker = false">
      <view class="modal-card" @click.stop>
        <text class="modal-title">选择孩子</text>
        <view class="modal-child-list">
          <view class="modal-child-item" v-for="child in bindedChildren" :key="child.id"
            @click="selectChild(child.id, child.name)">
            <text class="modal-child-name">{{ child.name || '孩子' + child.id }}</text>
            <text class="modal-child-id">ID: {{ child.id }}</text>
          </view>
          <view class="modal-child-item" @click="selectChild(null, '全部')">
            <text class="modal-child-name">全部</text>
          </view>
        </view>
        <view class="modal-footer">
          <view class="btn-cancel" @click="showPicker = false">
            <text>取消</text>
          </view>
        </view>
      </view>
    </view>

    <view class="loading" v-if="loading">
      <text class="loading-text">加载中...</text>
    </view>
  </view>
</template>

<script>
import { getTrainingPlanList, generatePlanFromRecommendations, deployTrainingPlan, deleteTrainingPlan } from '../../../utils/api.js'
import { getGuideBindedChildren } from '../../../utils/api.js'

export default {
  data() {
    return {
      plans: [],
      bindedChildren: [],
      selectedChildId: null,
      selectedChildName: null,
      showGenerate: false,
      showPicker: false,
      loading: false
    }
  },
  onShow() {
    this.loadPlans()
    this.loadBindedChildren()
  },
  methods: {
    loadPlans() {
      var self = this
      self.loading = true
      getTrainingPlanList(self.selectedChildId).then(function(res) {
        self.loading = false
        if (res.code === 200) {
          self.plans = res.data || []
        }
      }).catch(function() {
        self.loading = false
      })
    },
    loadBindedChildren() {
      var self = this
      getGuideBindedChildren().then(function(res) {
        if (res.code === 200) {
          self.bindedChildren = res.data || []
        }
      }).catch(function() {})
    },
    goToDetail(planId) {
      uni.navigateTo({ url: '/pages/guide/training-plans/detail?planId=' + planId })
    },
    goToBoard(planId) {
      uni.navigateTo({ url: '/pages/guide/training-plans/detail?planId=' + planId + '&mode=board' })
    },
    goToCreate() {
      uni.navigateTo({ url: '/pages/guide/training-plans/detail?planId=0' })
    },
    showChildPicker() {
      this.showPicker = true
    },
    clearChildFilter() {
      this.selectedChildId = null
      this.selectedChildName = null
      this.loadPlans()
    },
    selectChild(childId, childName) {
      this.selectedChildId = childId
      this.selectedChildName = childName
      this.showPicker = false
      this.loadPlans()
    },
    showGenerateDialog() {
      this.showGenerate = true
    },
    generateFromRec(childId) {
      var self = this
      uni.showModal({
        title: '确认生成',
        content: '将根据该孩子的评估结果自动生成训练方案，是否继续？',
        success: function(res) {
          if (res.confirm) {
            self.showGenerate = false
            uni.showLoading({ title: '生成中...' })
            generatePlanFromRecommendations(childId).then(function(res) {
              uni.hideLoading()
              if (res.code === 200 && res.data) {
                uni.showToast({ title: '生成成功', icon: 'success' })
                self.loadPlans()
                setTimeout(function() {
                  self.goToDetail(res.data)
                }, 1000)
              } else {
                uni.showToast({ title: res.message || '生成失败', icon: 'none' })
              }
            }).catch(function() {
              uni.hideLoading()
              uni.showToast({ title: '网络异常', icon: 'none' })
            })
          }
        }
      })
    },
    handleDeploy(planId) {
      var self = this
      uni.showModal({
        title: '确认下发',
        content: '确定下发此方案？将一次性创建所有训练任务。',
        success: function(res) {
          if (res.confirm) {
            uni.showLoading({ title: '下发中...' })
            deployTrainingPlan(planId).then(function(res) {
              uni.hideLoading()
              if (res.code === 200) {
                uni.showToast({ title: '下发成功', icon: 'success' })
                self.loadPlans()
              } else {
                uni.showToast({ title: res.message || '下发失败', icon: 'none' })
              }
            }).catch(function() {
              uni.hideLoading()
              uni.showToast({ title: '网络异常', icon: 'none' })
            })
          }
        }
      })
    },
    confirmDelete(planId) {
      var self = this
      uni.showModal({
        title: '确认删除',
        content: '删除后无法恢复，是否确定删除？',
        success: function(res) {
          if (res.confirm) {
            deleteTrainingPlan(planId).then(function(res) {
              if (res.code === 200) {
                uni.showToast({ title: '删除成功', icon: 'success' })
                self.loadPlans()
              } else {
                uni.showToast({ title: res.message || '删除失败', icon: 'none' })
              }
            }).catch(function() {
              uni.showToast({ title: '网络异常', icon: 'none' })
            })
          }
        }
      })
    },
    statusText(status) {
      var map = { draft: '草稿', published: '已下发', completed: '已完成' }
      return map[status] || status || '草稿'
    },
    formatDate(dateStr) {
      if (!dateStr) return ''
      var d = new Date(dateStr)
      var y = d.getFullYear()
      var m = ('0' + (d.getMonth() + 1)).slice(-2)
      var day = ('0' + d.getDate()).slice(-2)
      return y + '-' + m + '-' + day
    }
  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: #f5f7fa;
  padding-bottom: 40rpx;
}

.header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  background: #fff;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.header-actions {
  display: flex;
  flex-direction: row;
  gap: 16rpx;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea, #764ba2);
  padding: 12rpx 28rpx;
  border-radius: 32rpx;
}

.btn-primary:active { opacity: 0.8; }

.btn-primary-text {
  color: #fff;
  font-size: 26rpx;
  font-weight: 500;
}

.btn-secondary {
  background: #f0f0f0;
  padding: 12rpx 28rpx;
  border-radius: 32rpx;
}

.btn-secondary:active { opacity: 0.8; }

.btn-secondary-text {
  color: #666;
  font-size: 26rpx;
}

.child-filter-bar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 30rpx;
  background: #eef2ff;
}

.filter-label {
  font-size: 26rpx;
  color: #667eea;
}

.filter-clear {
  padding: 4rpx 16rpx;
  background: #fff;
  border-radius: 16rpx;
}

.filter-clear-text {
  font-size: 24rpx;
  color: #999;
}

.plan-list {
  padding: 20rpx 30rpx;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.plan-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 28rpx;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.05);
}

.plan-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12rpx;
}

.plan-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  flex: 1;
}

.plan-status {
  font-size: 22rpx;
  padding: 4rpx 16rpx;
  border-radius: 16rpx;
  margin-left: 16rpx;
}

.status-draft {
  background: #f3f4f6;
  color: #666;
}

.status-published {
  background: #dbeafe;
  color: #2563eb;
}

.status-completed {
  background: #d1fae5;
  color: #059669;
}

.plan-meta {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 8rpx;
}

.meta-text, .meta-date {
  font-size: 24rpx;
  color: #999;
}

.plan-desc {
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
  margin-bottom: 16rpx;
}

.plan-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12rpx;
  margin-top: 16rpx;
  border-top: 1rpx solid #f0f0f0;
  padding-top: 16rpx;
}

.action-btn {
  padding: 10rpx 24rpx;
  border-radius: 24rpx;
  font-size: 24rpx;
}

.action-btn:active { opacity: 0.7; }

.action-btn.outline {
  background: #f9fafb;
  color: #374151;
  border: 1rpx solid #e5e7eb;
}

.action-btn.primary {
  background: #667eea;
  color: #fff;
}

.action-btn.danger {
  background: #fee2e2;
  color: #dc2626;
}

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 120rpx 40rpx 80rpx;
}

.empty-icon {
  font-size: 100rpx;
  margin-bottom: 20rpx;
}

.empty-title {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 12rpx;
}

.empty-desc {
  font-size: 26rpx;
  color: #999;
  text-align: center;
  line-height: 1.6;
  margin-bottom: 40rpx;
}

.empty-btns {
  display: flex;
  flex-direction: row;
  gap: 16rpx;
}

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80rpx;
}

.loading-text {
  font-size: 28rpx;
  color: #999;
}

/* 弹窗 */
.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-card {
  background: #fff;
  border-radius: 24rpx;
  padding: 40rpx;
  width: 600rpx;
  max-height: 70vh;
  overflow-y: auto;
}

.modal-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 12rpx;
}

.modal-desc {
  font-size: 26rpx;
  color: #888;
  display: block;
  margin-bottom: 24rpx;
  line-height: 1.5;
}

.modal-child-list {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
  margin-bottom: 24rpx;
}

.modal-child-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  background: #f9fafb;
  border-radius: 12rpx;
}

.modal-child-item:active {
  background: #eef2ff;
}

.modal-child-name {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.modal-child-id {
  font-size: 24rpx;
  color: #999;
}

.empty-small {
  padding: 24rpx 0;
  text-align: center;
}

.empty-small-text {
  font-size: 26rpx;
  color: #999;
}

.modal-footer {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.btn-cancel {
  padding: 16rpx 48rpx;
  background: #f3f4f6;
  border-radius: 32rpx;
}

.btn-cancel:active { opacity: 0.7; }

.btn-cancel text {
  font-size: 28rpx;
  color: #666;
}
</style>