cfc/cfc-frontend/pages/tasks/tasks.vue

<template>
  <view class="container" :style="{ '--font-scale': fontScale }">
    <!-- 页头：当前账号 + 成员选择横向滚动条 -->
    <view class="page-header">
      <view class="header-account">
        <text class="account-label">当前账号</text>
        <text class="account-name">{{ selfMember ? selfMember.nickname : '我' }}</text>
      </view>
      <view class="header-tip">可查看家人的任务，仅能完成自己的</view>
      <!-- 成员选择（统一组件 MemberSelector：本人 + 各成员，同一用户只出现一次） -->
      <MemberSelector
        variant="minimal"
        embedded
        :members="familyMembers"
        :selected-member-id="selectedMemberId"
        :show-self="true"
        self-label="本人"
        :self-active="!selectedMemberId"
        @select="onMemberSelect" />
    </view>

    <!-- Tab 切换 -->
    <view class="tab-bar">
      <view class="tab-item" :class="{ active: activeTab === 'pending' }" @click="switchTab('pending')">
        <text class="tab-text">待接受</text>
        <text class="tab-badge" v-if="pendingTasks.length > 0">{{ pendingTasks.length }}</text>
      </view>
      <view class="tab-item" :class="{ active: activeTab === 'today' }" @click="switchTab('today')">
        <text class="tab-text">今日任务</text>
      </view>
      <view class="tab-item" :class="{ active: activeTab === 'created' }" @click="switchTab('created')">
        <text class="tab-text">我创建的</text>
      </view>
    </view>

    <!-- 待接受任务 -->
    <view class="task-list" v-if="activeTab === 'pending'">
      <view class="task-card" v-for="task in pendingTasks" :key="task.id">
        <view class="card-accent-line"></view>
        <view class="card-body">
          <view class="card-left">
            <view class="card-top-row">
              <text class="card-type-icon" v-if="task.category === '小游戏类'">🎮</text>
              <text class="card-type-icon" v-else-if="task.actionType === 'cart' || task.actionType === 'order'">🛒</text>
              <text class="card-type-icon" v-else-if="task.actionType === 'focus'">⏱️</text>
              <text class="card-type-icon" v-else-if="task.actionType === 'survey'">📝</text>
              <text class="card-type-icon" v-else-if="task.actionType === 'article'">📖</text>
              <text class="card-type-icon" v-else-if="task.actionType === 'activity'">🎯</text>
              <text class="card-type-icon" v-else-if="task.requireInput === 1">✍️</text>
              <text class="card-title">{{ task.title }}</text>
              <text class="member-pill" v-if="task.memberOnly === 1">会员</text>
            </view>
            <view class="card-meta">
              <text class="points-pill">+{{ task.points }} CF</text>
              <text class="meta-dot">·</text>
              <text class="card-creator">创建人：{{ task.creatorName || '家人' }}</text>
              <text class="meta-dot">·</text>
              <text class="card-deadline">截止 {{ formatTime(task.deadline) }}</text>
            </view>
          </view>
          <view class="card-actions">
            <button class="btn-accept" @click="acceptTask(task)">接受</button>
            <button class="btn-reject" @click="showRejectModal(task)">拒绝</button>
          </view>
        </view>
      </view>
      <view class="empty-state" v-if="!loading && pendingTasks.length === 0">
        <view class="empty-icon">📭</view>
        <text class="empty-main">暂无待接受任务</text>
        <text class="empty-sub">收到任务后会出现在这里</text>
      </view>
    </view>

    <!-- 今日任务 -->
    <view class="task-list" v-if="activeTab === 'today'">
      <view class="task-card" v-for="task in todayTasks" :key="task.id" :class="{ completed: task.status === 'completed', locked: task.status === 'locked' }" @click="onTaskCardTap(task)">
        <view class="card-accent-line" :class="'line-' + task.status"></view>
        <view class="card-body">
          <view class="card-left">
            <view class="card-top-row">
              <text class="card-type-icon" v-if="task.category === '小游戏类'">🎮</text>
              <text class="card-type-icon" v-else-if="task.actionType === 'cart' || task.actionType === 'order'">🛒</text>
              <text class="card-type-icon" v-else-if="task.actionType === 'focus'">⏱️</text>
              <text class="card-type-icon" v-else-if="task.actionType === 'survey'">📝</text>
              <text class="card-type-icon" v-else-if="task.actionType === 'article'">📖</text>
              <text class="card-type-icon" v-else-if="task.actionType === 'activity'">🎯</text>
              <text class="card-type-icon" v-else-if="task.requireInput === 1">✍️</text>
              <text class="card-title">{{ task.title }}</text>
              <text class="member-pill" v-if="task.memberOnly === 1">会员</text>
              <text class="src-pill" :class="task._sourceClass" v-if="task._sourceLabel">{{ task._sourceLabel }}</text>
            </view>
            <view class="card-meta">
              <text class="points-pill">+{{ task.points }} CF</text>
              <text class="meta-dot">·</text>
              <text class="card-deadline">截止 {{ formatTime(task.deadline) }}</text>
            </view>
            <!-- 进度型任务：展示进度条 -->
            <view class="progress-wrap" v-if="task.isDailyProgress === 1">
              <view class="progress-track">
                <view class="progress-fill" :style="{ width: getProgressPercent(task) + '%' }"></view>
              </view>
              <text class="progress-text">{{ task.progress || 0 }}/{{ task.targetValue || 1 }}</text>
            </view>
            <text v-if="task.status === 'locked'" class="lock-tip">🔒 需先完成前置任务后解锁</text>
          </view>
          <view class="card-right">
            <button v-if="task.status === 'pending' || task.status === 'in_progress'" class="btn-complete" @click.stop="handleTaskAction(task)">{{ getActionLabel(task) }}</button>
            <view v-else-if="task.status === 'completed'" class="badge badge-completed">已完成</view>
            <view v-else-if="task.status === 'pending_review'" class="badge badge-review">待审核</view>
            <view v-else class="badge badge-lock">🔒 未解锁</view>
          </view>
        </view>
      </view>
      <view class="empty-state" v-if="!loading && todayTasks.length === 0">
        <view class="empty-icon">✅</view>
        <text class="empty-main">今日任务已全部完成</text>
        <text class="empty-sub">继续保持，明天继续加油！</text>
      </view>
    </view>

    <!-- 我创建的任务 -->
    <view class="task-list" v-if="activeTab === 'created'">
      <view class="task-card" v-for="task in createdTasks" :key="task.id" @click="onTaskCardTap(task)">
        <view class="card-accent-line"></view>
        <view class="card-body card-body-row">
          <view class="card-left">
            <view class="card-top-row">
              <text class="card-type-icon" v-if="task.category === '小游戏类'">🎮</text>
              <text class="card-type-icon" v-else-if="task.actionType === 'cart' || task.actionType === 'order'">🛒</text>
              <text class="card-type-icon" v-else-if="task.actionType === 'focus'">⏱️</text>
              <text class="card-type-icon" v-else-if="task.actionType === 'survey'">📝</text>
              <text class="card-type-icon" v-else-if="task.actionType === 'article'">📖</text>
              <text class="card-type-icon" v-else-if="task.actionType === 'activity'">🎯</text>
              <text class="card-type-icon" v-else-if="task.requireInput === 1">✍️</text>
              <text class="card-title">{{ task.title }}</text>
              <text class="member-pill" v-if="task.memberOnly === 1">会员</text>
              <text class="src-pill" :class="task._sourceClass" v-if="task._sourceLabel">{{ task._sourceLabel }}</text>
            </view>
            <view class="card-meta">
              <text class="points-pill">+{{ task.points }} CF</text>
              <text class="meta-dot">·</text>
              <text class="card-assignee">{{ task.executorName || '未分配' }}</text>
              <text class="meta-dot">·</text>
              <text class="status-tag" :class="'status-' + task.status">{{ statusLabel(task.status) }}</text>
            </view>
          </view>
        </view>
      </view>
      <view class="empty-state" v-if="!loading && createdTasks.length === 0">
        <view class="empty-icon">📋</view>
        <text class="empty-main">暂无创建的任务</text>
        <text class="empty-sub">点击底部按钮创建新任务</text>
      </view>
    </view>

    <!-- 添加任务按钮 -->
    <button v-if="activeTab === 'today' && isParent" class="add-btn" @click="showAddModal = true">
      + 添加任务
    </button>
    <!-- 流程编排入口 -->
    <button v-if="activeTab === 'today' && isParent" class="orchestration-btn" @click="goToOrchestration">
      📋 流程编排
    </button>

    <!-- 拒绝确认弹窗 -->
    <view class="modal-mask" v-if="showRejectModalFlag" @click="showRejectModalFlag = false">
      <view class="modal" @click.stop>
        <view class="modal-title">确认拒绝</view>
        <view class="modal-content">
          <text>拒绝后，创建人对你的信任度和亲密度将各减1分，沟通质量各加1分。</text>
        </view>
        <view class="modal-btns">
          <button @click="showRejectModalFlag = false">取消</button>
          <button class="btn-primary" @click="confirmReject">确认拒绝</button>
        </view>
      </view>
    </view>

    <!-- 填写式完成弹窗 -->
    <view class="modal-mask" v-if="showInputModal" @click="closeInputModal">
      <view class="modal modal-large" @click.stop>
        <view class="modal-title">完成任务</view>
        <view class="modal-content">
          <text class="input-tip">{{ activeInputTask && activeInputTask.title }}</text>
          <textarea
            v-model="inputContent"
            class="input-textarea"
            placeholder="请填写完成内容（如：今天完成了...）"
            :maxlength="500"
          ></textarea>
        </view>
        <view class="modal-btns">
          <button @click="closeInputModal">取消</button>
          <button class="btn-primary" :disabled="!inputContent" @click="submitWithInput">提交完成</button>
        </view>
      </view>
    </view>

    <!-- 创建任务弹窗 -->
    <view class="modal-mask" v-if="showAddModal" @click="showAddModal = false">
      <view class="modal modal-large" @click.stop>
        <view class="modal-title">创建任务</view>

        <view class="form-item">
          <view class="form-label">任务标题 <text class="required">*</text></view>
          <input v-model="newTask.title" placeholder="请输入任务标题" />
        </view>

        <view class="form-item">
          <view class="form-label">任务内容</view>
          <textarea v-model="newTask.description" placeholder="请输入任务描述" class="textarea" />
        </view>

        <view class="form-item">
          <view class="form-label">类型 <text class="required">*</text></view>
          <picker mode="selector" :range="categories" @change="onCategoryChange">
            <view class="picker">{{ newTask.category || '请选择类型' }}</view>
          </picker>
        </view>

        <view class="form-item">
          <view class="form-label">积分 <text class="required">*</text></view>
          <input v-model="newTask.points" type="number" placeholder="1-10" />
        </view>

        <view class="form-item">
          <view class="form-label">截止时间 <text class="required">*</text></view>
          <picker mode="datetime" :value="newTask.deadline" @change="onDeadlineChange">
            <view class="picker">{{ newTask.deadline || '选择截止时间' }}</view>
          </picker>
        </view>

        <view class="form-item">
          <view class="form-label">分配给 <text class="required">*</text></view>
          <checkbox-group @change="onFamilyMemberSelectChange">
            <label v-for="member in familyMembers" :key="member.id" :class="{ 'label-checked': newTask.memberIds.includes(String(member.id)) }">
              <checkbox :value="String(member.id)" :checked="newTask.memberIds.includes(String(member.id))" />
              <text>{{ member.nickname }}</text>
            </label>
          </checkbox-group>
        </view>

        <view class="modal-btns">
          <button @click="showAddModal = false">取消</button>
          <button class="btn-primary" @click="createTask">创建</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getMyPendingTasks, acceptTask as acceptTaskApi, rejectTask as rejectTaskApi, getTodayTasks, completeTask as completeTaskApi, startTask as startTaskApi, createTask as createTaskApi, getFamilyMemberList, getMyMembership, reportAppEnter
} from '../../utils/api.js'
import { parseDate } from '../../utils/format.js'
import fontScaleMixin from '@/mixins/font-scale.js'
import MemberSelector from '@/components/MemberSelector.vue'
import { memberIdOf, normalizeMembers } from '@/utils/memberNormalize.js'

export default {
  mixins: [fontScaleMixin],
  components: { MemberSelector },
  data() {
    return {
      activeTab: 'today',
      loading: false,
      pendingTasks: [],
      todayTasks: [],
      createdTasks: [],
      isParent: false,
      isMember: false,
      selfMemberId: null,
      selectedMemberId: null,
      currentUserId: null,
      familyMembers: [],
      showAddModal: false,
      showRejectModalFlag: false,
      rejectTaskId: null,
      showInputModal: false,
      activeInputTask: null,
      inputContent: '',
      newTask: {
        title: '',
        description: '',
        category: '',
        points: 2,
        deadline: '',
        memberIds: []
      },
      categories: ['学习类', '生活类', '运动类', '其他']
    }
  },
  computed: {
    // 家庭列表中 isSelf=1 的成员即当前登录账号本人（后端按 userId 反查，不受切换视角影响）
    selfMember: function() {
      var members = this.familyMembers || []
      for (var i = 0; i < members.length; i++) {
        if (members[i] && members[i].isSelf) return members[i]
      }
      return null
    }
  },
  onLoad(options) {
    reportAppEnter('task');

    if (options && options.tab) {
      this.activeTab = options.tab
    }
    // 注意：不再支持通过 memberId 参数切换成员视角，任务列表只展示当前登录用户自己的任务
  },
  onShow() {
    const role = uni.getStorageSync('currentRole') || uni.getStorageSync('role') || 'parent'
    this.isParent = role === 'parent'
    this.currentUserId = uni.getStorageSync('userId')
    this.checkMembership()
    this.loadInitialData()
  },
  methods: {
    // 从家庭列表中解析「当前登录账号本人」的成员ID（isSelf 标记）
    // 解析不到时不传 memberId，由后端按 JWT 的 currentMemberId 兜底（始终是登录账号自己）
    resolveSelfMemberId() {
      var members = this.familyMembers || []
      for (var i = 0; i < members.length; i++) {
        if (members[i] && members[i].isSelf) {
          // 统一身份键：familyMemberId（family_members.id），不再用 userId
          // 注意：source='parent' 的本人（users 表家长账号，无 family_members 行）其 id/memberId 是
          // users.id，不属于 family_members 主键空间，直接把 users.id 当 memberId 传给 getTodayTasks
          // 会命中「恰好同 id」的其他家庭成员任务（默认列表显示成别人的任务）。
          // 与 onMemberSelect 的「本人」分支保持同一口径：置 null 交由后端 JWT currentMemberId 兜底。
          if (members[i].source === 'parent') {
            this.selfMemberId = null
          } else {
            this.selfMemberId = memberIdOf(members[i])
          }
          return
        }
      }
      this.selfMemberId = null
    },
    // 统一组件选中回调：member 已由 memberNormalize 规范化，携带 canonical memberId
    onMemberSelect(member) {
      if (!member) return
      // 选中「本人」统一走后端 JWT currentMemberId 兜底，与首页「我的任务」同口径：
      // · source='parent' 的本人（users 表主账号，无 family_members 行）其 id 是 users.id，
      //   不属于 family_members 主键空间，直接传会造成 task.family_member_id=users.id 误匹配他人任务
      // · source='family_member' 的本人传显式 id 与 JWT 解析同值，统一置 null 更稳（双击成员表头同步高亮）
      if (member.isSelf) {
        this.selectMember(null)
        return
      }
      this.selectMember(memberIdOf(member))
    },
    // 切换今日任务的查看成员：选中成员的任务列表（选中本人 → 传本人 canonical memberId）
    selectMember(memberId) {
      this.selectedMemberId = memberId || null
      this.activeTab = 'today'
      this.loadTodayTasks(this.selectedMemberId)
    },
    // 是否本人的任务：兜底防呆（列表本身已按归属过滤，防御脏数据/越权完成）
    isOwnTask(task) {
      if (!task) return true
      // 「本人」视图（未选中其他成员）：列表由后端按 JWT currentMemberId 过滤，均为本人任务
      if (this.selectedMemberId == null) return true
      // 查看其他成员视角：可解析 selfMemberId 时精确比对；
      // source='parent'（无 family_members 行）解析不出自身 memberId → 一律视为他人任务
      if (this.selfMemberId == null || task.familyMemberId == null) return false
      return String(this.selfMemberId) === String(task.familyMemberId)
    },
    // 方案来源标签装饰：加载后预计算（小程序模板禁止在 :class 内做方法调用）
    // 只有健康方案有小程序端详情页可跳转；'plan'/'training_plan' 仅打标签不跳转
    decorateSource(task) {
      if (!task) return task
      task._sourceLabel = ''
      task._sourceClass = ''
      task._sourceNavigable = false
      if (task.sourceType === 'health_plan') {
        task._sourceLabel = '健康方案'
        task._sourceClass = 'src-health-plan'
        task._sourceNavigable = true
      } else if (task.sourceType === 'plan') {
        task._sourceLabel = '任务方案'
        task._sourceClass = 'src-plan'
      } else if (task.sourceType === 'training_plan') {
        task._sourceLabel = '训练方案'
        task._sourceClass = 'src-training-plan'
      }
      return task
    },
    // 点击任务卡片：健康方案来源的任务跳转方案详情页
    onTaskCardTap(task) {
      if (!task || !task._sourceNavigable || !task.sourceId) return
      if (task.sourceType === 'health_plan') {
        uni.navigateTo({ url: '/pages/health/health-plan-summary?planId=' + task.sourceId })
      }
    },
    checkMembership() {
      getMyMembership().then(res => {
        const m = res.data || {}
        this.isMember = !!(m.levelCode && m.levelCode !== 'FREE')
      }).catch(() => {})
    },
    switchTab(tab) {
      this.activeTab = tab
      if (tab === 'pending') this.loadPendingTasks()
      else if (tab === 'today') this.loadTodayTasks()
      else if (tab === 'created') this.loadCreatedTasks()
    },
    goToOrchestration() {
      uni.navigateTo({ url: '/pages/orchestration/index' })
    },
    async loadInitialData() {
      this.loading = true
      try {
        const membersRes = await getFamilyMemberList({ visibleOnly: true })
        var raw = (membersRes && membersRes.data) || []
        // 前端防御层：按 user_id 折叠同用户多行，保证「本人」只出现一次
        var normalized = normalizeMembers(raw, { userId: this.currentUserId })
        this.familyMembers = Array.isArray(normalized) ? normalized : []
        this.resolveSelfMemberId()
        // 默认「本人」视图：不显式传 memberId，交由后端按 JWT currentMemberId 兜底，
        // 与首页「我的任务」完全同一口径（避免把 users.id（source='parent' 家长行）
        // 或重复 family_members 行的 id 误当过滤条件 → 拉到别人任务）
        this.loadTodayTasks()
        this.loadPendingTasks()
        this.loadCreatedTasks()
      } catch (e) {
        console.error('加载数据失败', e)
        this.familyMembers = []
      } finally {
        this.loading = false
      }
    },
    async loadPendingTasks() {
      try {
        // 只拉取本人收到的待接受任务（不传 memberId 时后端按 JWT 兜底）
        const res = await getMyPendingTasks(this.selfMemberId)
        this.pendingTasks = res.data || []
      } catch (e) {
        console.error('加载待接受任务失败', e)
      }
    },
    async loadTodayTasks(memberId) {
      var self = this
      try {
        // 选中成员 → 传该成员 memberId；选中本人 → 传 selfMemberId（后端亦按 JWT currentMemberId 兜底）
        var targetMemberId = arguments.length > 0 ? memberId : this.selectedMemberId
        const res = await getTodayTasks(targetMemberId)
        this.todayTasks = (res.data || []).map(function(t) { return self.decorateSource(t) })
      } catch (e) {
        console.error('加载今日任务失败', e)
      }
    },
    async loadCreatedTasks() {
      var self = this
      try {
        // 我创建的：家庭今日任务按 creatorId 过滤，只看当前登录用户创建的任务
        const res = await getTodayTasks(null, { familyWide: true })
        var all = ((res && res.data) || []).map(function(t) { return self.decorateSource(t) })
        var uid = this.currentUserId
        this.createdTasks = all.filter(function(t) {
          return t.creatorId != null && String(t.creatorId) === String(uid)
        })
      } catch (e) {
        console.error('加载创建的任务失败', e)
      }
    },
    async completeTask(task) {
      if (task.memberOnly === 1 && !this.isMember) {
        uni.showModal({
          title: '会员任务',
          content: '该任务是会员专属任务，开通会员后即可完成',
          confirmText: '去开通',
          success: (res) => {
            if (res.confirm) {
              uni.navigateTo({ url: '/pages/membership/index' })
            }
          }
        })
        return
      }
      // 只允许操作当前登录用户本人的任务
      if (!this.isOwnTask(task)) {
        uni.showToast({ title: '只能完成自己的任务', icon: 'none' })
        return
      }
      try {
        const res = await completeTaskApi(task.id, this.selfMemberId, '')
        if (res && res.code !== 200) {
          // B2：后端明确返回错误（任务不存在/无权完成/状态已变更），杜绝静默失败
          uni.showToast({ title: (res && res.message) || '完成失败', icon: 'none' })
          return
        }
        if (res.data && res.data.needReview) {
          uni.showToast({ title: '已提交，待审核', icon: 'none' })
        } else if (res.data) {
          uni.showToast({ title: `获得 ${res.data.pointsEarned} CF`, icon: 'success' })
        } else {
          uni.showToast({ title: '只能完成自己的任务', icon: 'none' })
        }
        this.loadTodayTasks()
      } catch (e) {
        console.error('完成任务失败', e)
        uni.showToast({ title: '完成失败，请重试', icon: 'none' })
      }
    },
    /** 按钮文案：按 action_type / start_required / require_input 分派 */
    getActionLabel(task) {
      if (task.startRequired === 1 && task.status !== 'in_progress') return '开始'
      if (task.requireInput === 1) return '填写完成'
      var at = task.actionType
      if (at === 'minigame') return '开始游戏'
      if (at === 'focus') return '开始专注'
      if (at === 'survey') return '去填写'
      if (at === 'article') return '去阅读'
      if (at === 'activity') return '去报名'
      if (at === 'cart' || at === 'order') return '去购物'
      if (at === 'diet') return '去打卡'
      if (at === 'sleep') return '去打卡'
      if (at === 'exercise') return '去打卡'
      return '完成'
    },
    /** 统一任务动作入口：开始/联动跳转/填写/直接完成 */
    handleTaskAction(task) {
      var self = this
      // 只允许操作当前登录用户本人的任务
      if (!this.isOwnTask(task)) {
        uni.showToast({ title: '只能操作自己的任务', icon: 'none' })
        return
      }
      // 前置锁定任务不可操作
      if (task.status === 'locked') {
        uni.showToast({ title: '需先完成前置任务', icon: 'none' })
        return
      }
      // 两阶段：先开始，再按 action_type 跳转联动页面
      if (task.startRequired === 1 && task.status !== 'in_progress') {
        uni.showLoading({ title: '开始中...' })
        startTaskApi(task.id, this.selfMemberId).then(function(res) {
          uni.hideLoading()
          if (res && res.code === 200 && res.data) {
            uni.showToast({ title: '已开始', icon: 'success' })
            self.navigateByAction(task)
            self.loadTodayTasks()
          } else {
            uni.showToast({ title: (res && res.message) || '开始失败', icon: 'none' })
          }
        }).catch(function() {
          uni.hideLoading()
          uni.showToast({ title: '开始失败', icon: 'none' })
        })
        return
      }
      // 填写式完成
      if (task.requireInput === 1) {
        this.activeInputTask = task
        this.inputContent = ''
        this.showInputModal = true
        return
      }
      // 打卡/联动类任务（含每日进度型打卡任务）：跳转联动页面执行，
      // 打卡提交后由后端回写（一次性任务直接完成 / 每日任务累计进度）
      var linkedTypes = ['minigame', 'focus', 'survey', 'article', 'activity', 'cart', 'order', 'diet', 'sleep', 'exercise']
      if (linkedTypes.indexOf(task.actionType) >= 0) {
        this.navigateByAction(task)
        return
      }
      // 已开始的两阶段任务或普通任务：直接完成
      this.completeTask(task)
    },
    /** 按 action_type 跳转联动页面 */
    navigateByAction(task) {
      var at = task.actionType
      var taskId = task.id
      if (at === 'minigame') {
        var cfg = {}
        try { cfg = typeof task.actionConfig === 'string' ? JSON.parse(task.actionConfig || '{}') : (task.actionConfig || {}) } catch (e) {}
        var gameId = cfg.gameId || ''
        uni.navigateTo({ url: '/pages/games/index?taskId=' + taskId + (gameId ? '&gameId=' + gameId : '') })
      } else if (at === 'focus') {
        uni.navigateTo({ url: '/pages/games/focus-timer?taskId=' + taskId })
      } else if (at === 'survey') {
        uni.navigateTo({ url: '/pages/survey/index?taskId=' + taskId })
      } else if (at === 'article') {
        var cfg = {}
        try { cfg = typeof task.actionConfig === 'string' ? JSON.parse(task.actionConfig || '{}') : (task.actionConfig || {}) } catch (e) {}
        var articleId = cfg.articleId || task.sourceId
        uni.navigateTo({ url: '/pages/article-center/article-detail?taskId=' + taskId + (articleId ? '&id=' + articleId : '') })
      } else if (at === 'activity') {
        uni.navigateTo({ url: '/pages/activity/list?taskId=' + taskId })
      } else if (at === 'cart' || at === 'order') {
        var cfg = {}
        try { cfg = typeof task.actionConfig === 'string' ? JSON.parse(task.actionConfig || '{}') : (task.actionConfig || {}) } catch (e) {}
        var isExternal = cfg.isExternal === 1 || cfg.isExternal === '1'
        if (isExternal) {
          // 外部平台商品：拍照上传打卡页（标题经 URL 传递，避免额外请求）
          var tTitle = encodeURIComponent(task.title || '外部平台商品')
          uni.navigateTo({ url: '/pages/tasks/task-upload-purchase?taskId=' + taskId + '&title=' + tTitle })
        } else {
          // 系统商品：走购物车 → 支付 → 自动完成
          uni.navigateTo({ url: '/pages/shop/cart?taskId=' + taskId })
        }
      } else if (at === 'diet') {
        var mIdT = (task.familyMemberId || task.executorId || '')
        uni.navigateTo({ url: '/pages/growth/diet-checkin?taskId=' + taskId + (mIdT ? '&memberId=' + mIdT : '') })
      } else if (at === 'sleep') {
        var mIdTs = (task.familyMemberId || task.executorId || '')
        uni.navigateTo({ url: '/pages/growth/sleep-checkin?taskId=' + taskId + (mIdTs ? '&memberId=' + mIdTs : '') })
      } else if (at === 'exercise') {
        var mIdTe = (task.familyMemberId || task.executorId || '')
        uni.navigateTo({ url: '/pages/growth/exercise-checkin?taskId=' + taskId + (mIdTe ? '&memberId=' + mIdTe : '') })
      }
    },
    closeInputModal() {
      this.showInputModal = false
      this.activeInputTask = null
      this.inputContent = ''
    },
    async submitWithInput() {
      var task = this.activeInputTask
      if (!task || !this.inputContent) return
      // 只允许操作当前登录用户本人的任务
      if (!this.isOwnTask(task)) {
        uni.showToast({ title: '只能完成自己的任务', icon: 'none' })
        this.closeInputModal()
        return
      }
      try {
        const res = await completeTaskApi(task.id, this.selfMemberId, '', this.inputContent, 'text')
        if (res && res.code !== 200) {
          uni.showToast({ title: (res && res.message) || '提交失败', icon: 'none' })
          this.closeInputModal()
          return
        }
        if (res.data && res.data.needReview) {
          uni.showToast({ title: '已提交，待审核', icon: 'none' })
        } else if (res.data) {
          uni.showToast({ title: `获得 ${res.data.pointsEarned} CF`, icon: 'success' })
        } else {
          uni.showToast({ title: '只能完成自己的任务', icon: 'none' })
        }
        this.closeInputModal()
        this.loadTodayTasks()
      } catch (e) {
        console.error('提交填写内容失败', e)
        uni.showToast({ title: '提交失败', icon: 'none' })
      }
    },
    acceptTask(task) {
      if (task.memberOnly === 1 && !this.isMember) {
        uni.showModal({
          title: '会员任务',
          content: '该任务是会员专属任务，开通会员后即可接受',
          confirmText: '去开通',
          success: (res) => {
            if (res.confirm) {
              uni.navigateTo({ url: '/pages/membership/index' })
            }
          }
        })
        return
      }
      uni.showLoading({ title: '接受中...' })
      // 接受接口只认本人：memberId 一律传当前登录账号自己的成员ID
      acceptTaskApi(task.id, this.selfMemberId).then(res => {
        uni.hideLoading()
        uni.showToast({ title: '已接受', icon: 'success' })
        this.loadPendingTasks()
        this.loadTodayTasks()
      }).catch(e => {
        uni.hideLoading()
        console.error('接受失败', e)
        uni.showToast({ title: '接受失败', icon: 'none' })
      })
    },
    showRejectModal(task) {
      this.rejectTaskId = task.id
      this.showRejectModalFlag = true
    },
    confirmReject() {
      uni.showLoading({ title: '拒绝中...' })
      // 拒绝接口只认本人：memberId 一律传当前登录账号自己的成员ID
      rejectTaskApi(this.rejectTaskId, this.selfMemberId).then(res => {
        uni.hideLoading()
        this.showRejectModalFlag = false
        uni.showToast({ title: '已拒绝', icon: 'success' })
        this.loadPendingTasks()
      }).catch(e => {
        uni.hideLoading()
        console.error('拒绝失败', e)
        uni.showToast({ title: '拒绝失败', icon: 'none' })
      })
    },
    statusLabel(status) {
      const map = {
        pending: '待完成',
        assigned: '待接受',
        in_progress: '进行中',
        completed: '已完成',
        pending_review: '待审核',
        rejected: '已拒绝',
        overdue: '已过期',
        cancelled: '已取消',
        locked: '未解锁'
      }
      return map[status] || status
    },
    formatTime(t) {
      if (!t) return ''
      var d = parseDate(t)
      if (!d) return String(t).substring(0, 16)
      var y = d.getFullYear()
      var m = String(d.getMonth() + 1).padStart(2, '0')
      var day = String(d.getDate()).padStart(2, '0')
      var h = String(d.getHours()).padStart(2, '0')
      var min = String(d.getMinutes()).padStart(2, '0')
      return y + '-' + m + '-' + day + ' ' + h + ':' + min
    },
    getProgressPercent(task) {
      var progress = task.progress || 0
      var target = task.targetValue || 1
      if (target <= 0) return 0
      var pct = Math.round((progress / target) * 100)
      return pct > 100 ? 100 : pct
    },
    async createTask() {
      if (!this.newTask.title) {
        uni.showToast({ title: '请输入标题', icon: 'none' })
        return
      }
      if (!this.newTask.category) {
        uni.showToast({ title: '请选择类型', icon: 'none' })
        return
      }
      if (this.newTask.memberIds.length === 0) {
        uni.showToast({ title: '请选择分配对象', icon: 'none' })
        return
      }
      try {
        await createTaskApi({
          title: this.newTask.title,
          description: this.newTask.description,
          category: this.newTask.category,
          points: parseInt(this.newTask.points) || 2,
          deadline: parseDate(this.newTask.deadline) ? parseDate(this.newTask.deadline).getTime() : null,
          executorType: 'member',
          memberIds: this.newTask.memberIds.map(id => Number(id))
        })
        uni.showToast({ title: '创建成功', icon: 'success' })
        this.showAddModal = false
        this.resetNewTask()
        this.loadCreatedTasks()
        this.loadPendingTasks()
      } catch (e) {
        console.error('创建任务失败', e)
        uni.showToast({ title: '创建失败', icon: 'none' })
      }
    },
    resetNewTask() {
      this.newTask = {
        title: '',
        description: '',
        category: '',
        points: 2,
        deadline: '',
        memberIds: []
      }
    },
    onCategoryChange(e) {
      this.newTask.category = this.categories[e.detail.value]
    },
    onDeadlineChange(e) {
      this.newTask.deadline = e.detail.value
    },
    onFamilyMemberSelectChange(e) {
      this.newTask.memberIds = e.detail.value || []
    }
  }
}
</script>

<style scoped lang="scss">
/* ============ 间距节奏统一：所有区块间距为 8 的倍数 ============ */
.container {
  padding: 16rpx 32rpx 120rpx;
  background: $app-bg;
  min-height: 100vh;
}

/* ============ 页头：当前账号 + 成员选择（置顶） ============ */
.page-header {
  background: $app-surface;
  border-radius: $uni-radius-lg;
  padding: $uni-spacing-md;
  box-shadow: $uni-shadow-sm;
}

.header-account {
  display: flex;
  align-items: center;
  margin-bottom: $uni-spacing-sm;
}

.account-label {
  font-size: calc(22rpx * var(--font-scale, 1));
  color: $app-surface;
  background: linear-gradient(135deg, $brand-primary, $brand-primary-light);
  border-radius: 8rpx;
  padding: 4rpx 12rpx;
  margin-right: $uni-spacing-sm;
  font-weight: 500;
}

.account-name {
  font-size: calc(30rpx * var(--font-scale, 1));
  font-weight: 600;
  color: $facade-text-strong;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-tip {
  display: block;
  font-size: calc(22rpx * var(--font-scale, 1));
  color: $facade-text-muted;
  margin-bottom: $uni-spacing-sm;
}

/* 成员选择横向滚动条 */
.member-scroll {
  width: 100%;
  white-space: nowrap;
}

.member-chips {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  padding-bottom: 4rpx;
}

.member-chip {
  flex-shrink: 0;
  font-size: calc(24rpx * var(--font-scale, 1));
  color: $facade-text-body;
  background: $facade-fill-gray-100;
  border-radius: 999rpx;
  padding: 10rpx 24rpx;
  margin-right: $uni-spacing-sm;
  transition: background $dur-state $ease-standard, color $dur-state $ease-standard;

  &.active {
    background: linear-gradient(135deg, $brand-primary, $brand-primary-light);
    color: $app-surface;
    font-weight: 600;
  }
}

/* ============ Tab 栏：胶囊切换 ============ */
.tab-bar {
  display: flex;
  background: $app-surface;
  border-radius: $uni-radius-lg;
  padding: 8rpx;
  margin: $uni-spacing-md 0;
  box-shadow: $uni-shadow-sm;
}

.tab-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64rpx;
  border-radius: $uni-radius-sm;
  position: relative;
  transition: background $dur-state $ease-standard;

  &.active {
    background: linear-gradient(135deg, $brand-primary, $brand-primary-light);
    box-shadow: 0 4rpx 12rpx rgba(249, 115, 22, 0.25);
  }
}

.tab-text {
  font-size: calc(26rpx * var(--font-scale, 1));
  color: $facade-text-body;
}

.tab-item.active .tab-text {
  color: $app-surface;
  font-weight: 600;
}

.tab-badge {
  position: absolute;
  top: 0;
  right: 16rpx;
  background: $status-danger;
  color: $app-surface;
  font-size: calc(18rpx * var(--font-scale, 1));
  min-width: 28rpx;
  height: 28rpx;
  line-height: 28rpx;
  text-align: center;
  border-radius: 999rpx;
  padding: 0 6rpx;
  transform: translateY(-8rpx);
}

/* ============ 任务列表统一容器 ============ */
.task-list {
  display: flex;
  flex-direction: column;
  gap: $uni-spacing-md;
}

/* ============ 任务卡片 ============ */
.task-card {
  position: relative;
  background: $app-surface;
  border-radius: $uni-radius-lg;
  box-shadow: $uni-shadow-sm;
  overflow: hidden;

  &.completed {
    opacity: 0.65;
  }

  &.locked {
    opacity: 0.5;
  }
}

/* 左侧色条（按状态区分） */
.card-accent-line {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5rpx;

  &.line-completed { background: $status-success; }
  &.line-locked { background: $facade-text-gray-400; }
  &.line-pending_review { background: $status-warning; }
  &.line-in_progress { background: $brand-primary; }
  &.line-assigned { background: $brand-primary; }
  &:not(.line-completed):not(.line-locked):not(.line-pending_review):not(.line-in_progress):not(.line-assigned) {
    background: $brand-primary; /* pending / 默认 */
  }
}

.card-body {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  padding: $uni-spacing-lg;
  gap: $uni-spacing-lg;
}

.card-body-row {
  flex-direction: row;
}

.card-left {
  flex: 1;
  min-width: 0;
}

/* 标题行：类型图标 + 标题 + 会员药丸 */
.card-top-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: $uni-spacing-xs;
  margin-bottom: $uni-spacing-sm;
}

.card-type-icon {
  font-size: calc(28rpx * var(--font-scale, 1));
  flex-shrink: 0;
}

.card-title {
  flex: 1;
  min-width: 0;
  font-size: calc(30rpx * var(--font-scale, 1));
  font-weight: 500;
  color: $facade-text-strong;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-pill {
  font-size: calc(20rpx * var(--font-scale, 1));
  color: $brand-primary;
  background: $uni-primary-pale;
  padding: 4rpx 12rpx;
  border-radius: 999rpx;
  font-weight: 500;
}

/* 方案来源药丸：健康方案（可点进详情）/ 任务方案 / 训练方案 */
.src-pill {
  font-size: calc(20rpx * var(--font-scale, 1));
  padding: 4rpx 12rpx;
  border-radius: 999rpx;
  font-weight: 500;
  flex-shrink: 0;
}

.src-health-plan {
  background: $status-info-soft;
  color: $status-info-deep;
}

.src-plan {
  background: $facade-fill-gray-100;
  color: $facade-text-body;
}

.src-training-plan {
  background: $dim-wisdom-tint-2;
  color: $dim-wisdom;
}

/* 元信息：积分药丸 + 分隔点 + 创建人/执行人/截止 */
.card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: $uni-spacing-xs;
  font-size: calc(22rpx * var(--font-scale, 1));
  color: $facade-text-muted;
}

.points-pill {
  display: inline-flex;
  align-items: center;
  font-size: calc(22rpx * var(--font-scale, 1));
  font-weight: 600;
  color: $brand-primary;
  background: $brand-primary-soft;
  padding: 4rpx 12rpx;
  border-radius: 999rpx;
}

.meta-dot {
  color: $facade-text-gray-400;
}

.card-creator,
.card-assignee,
.card-deadline {
  color: $facade-text-muted;
}

/* 进度条 */
.progress-wrap {
  display: flex;
  align-items: center;
  margin-top: $uni-spacing-sm;
}

.progress-track {
  flex: 1;
  height: 10rpx;
  background: $facade-fill-gray-100;
  border-radius: 8rpx;
  overflow: hidden;
  margin-right: $uni-spacing-sm;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(135deg, $brand-primary, $brand-primary-light);
  border-radius: 8rpx;
  transition: width $dur-structural $ease-standard;
}

.progress-text {
  font-size: calc(20rpx * var(--font-scale, 1));
  color: $brand-primary;
  white-space: nowrap;
}

.lock-tip {
  display: block;
  margin-top: $uni-spacing-xs;
  font-size: calc(20rpx * var(--font-scale, 1));
  color: $facade-text-gray-400;
}

/* ============ 卡片右侧：操作区 ============ */
.card-right {
  flex-shrink: 0;
}

.card-actions {
  display: flex;
  flex-direction: column;
  gap: $uni-spacing-sm;
  flex-shrink: 0;
}

/* 主按钮：品牌渐变（完成/接受） */
.btn-complete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, $brand-primary, $brand-primary-light);
  color: $app-surface;
  font-size: calc(24rpx * var(--font-scale, 1));
  font-weight: 500;
  padding: 0 28rpx;
  height: 64rpx;
  line-height: 64rpx;
  border-radius: 24rpx;
  border: none;
  box-shadow: 0 4rpx 12rpx rgba(249, 115, 22, 0.25);
}
.btn-complete::after { border: none; }

.btn-accept {
  background: linear-gradient(135deg, $status-success, $status-success-light-3);
  color: $app-surface;
  font-size: calc(24rpx * var(--font-scale, 1));
  font-weight: 500;
  padding: 0 32rpx;
  height: 60rpx;
  line-height: 60rpx;
  border-radius: 24rpx;
  border: none;
}
.btn-accept::after { border: none; }

/* 次按钮：描边（拒绝） */
.btn-reject {
  background: $app-surface;
  color: $facade-text-body;
  font-size: calc(24rpx * var(--font-scale, 1));
  padding: 0 32rpx;
  height: 60rpx;
  line-height: 58rpx;
  border-radius: 24rpx;
  border: 2rpx solid $facade-gray-200;
}
.btn-reject::after { border: none; }

/* ============ 状态徽章（统一色系与圆角） ============ */
.badge {
  font-size: calc(22rpx * var(--font-scale, 1));
  padding: 8rpx 18rpx;
  border-radius: 999rpx;
  font-weight: 500;
  flex-shrink: 0;
}

.badge-completed {
  background: $status-success-tint;
  color: $status-success;
}

.badge-review {
  background: $uni-primary-pale;
  color: $brand-primary;
}

.badge-lock {
  background: $facade-fill-gray-100;
  color: $facade-text-gray-400;
}

/* 我创建的 tab 状态小标签 */
.status-tag {
  font-size: calc(20rpx * var(--font-scale, 1));
  padding: 4rpx 12rpx;
  border-radius: 999rpx;
  background: $facade-fill-gray-100;
  color: $facade-text-body;
}

.status-pending { background: $uni-primary-pale; color: $brand-primary; }
.status-completed { background: $status-success-tint; color: $status-success; }
.status-pending_review { background: $status-warning-soft; color: $status-warning-deep; }
.status-assigned { background: $dim-wisdom-tint-2; color: $dim-wisdom; }
.status-in_progress { background: $status-info-soft; color: $status-info-deep; }
.status-rejected { background: $status-danger-soft; color: $status-danger; }
.status-locked { background: $facade-fill-gray-100; color: $facade-text-gray-400; }

/* ============ 空态 ============ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 96rpx 0;
}

.empty-icon {
  font-size: calc(72rpx * var(--font-scale, 1));
  margin-bottom: $uni-spacing-lg;
}

.empty-main {
  font-size: calc(28rpx * var(--font-scale, 1));
  color: $facade-text-body;
  margin-bottom: $uni-spacing-xs;
}

.empty-sub {
  font-size: calc(22rpx * var(--font-scale, 1));
  color: $facade-text-muted;
}

.add-btn {
  position: fixed;
  left: 40rpx;
  right: 40rpx;
  bottom: 40rpx;
  height: 88rpx;
  line-height: 88rpx;
  background: linear-gradient(135deg, $brand-primary, $brand-primary-light);
  color: $app-surface;
  font-size: calc(30rpx * var(--font-scale, 1));
  border-radius: 24rpx;
  border: none;
  padding: 0;
  box-shadow: 0 8rpx 24rpx rgba(249, 115, 22, 0.35);
}
.add-btn::after { border: none; }

.orchestration-btn {
  position: fixed;
  left: 40rpx;
  right: 40rpx;
  bottom: 148rpx;
  height: 88rpx;
  line-height: 88rpx;
  background: linear-gradient(135deg, $dim-wisdom, $facade-violet);
  color: $app-surface;
  font-size: calc(30rpx * var(--font-scale, 1));
  border-radius: 24rpx;
  border: none;
  padding: 0;
  box-shadow: 0 8rpx 24rpx rgba(99, 102, 241, 0.35);
}
.orchestration-btn::after { border: none; }

.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal {
  background: $app-surface;
  border-radius: 24rpx;
  padding: 40rpx;
  width: 85%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.12);
}

.modal-large {
  width: 90%;
}

.modal-title {
  font-size: calc(34rpx * var(--font-scale, 1));
  font-weight: bold;
  margin-bottom: 32rpx;
  text-align: center;
  color: $facade-text-strong;
}

.modal-content {
  font-size: calc(28rpx * var(--font-scale, 1));
  color: $facade-text-body;
  line-height: 1.6;
  margin-bottom: $uni-space-lg;
  text-align: center;
}

.input-tip {
  display: block;
  margin-bottom: 16rpx;
  color: $facade-text-strong;
  font-weight: 500;
}

.input-textarea {
  width: 100%;
  min-height: 180rpx;
  padding: 20rpx;
  background: $facade-fill-gray-50;
  border-radius: 16rpx;
  font-size: calc(28rpx * var(--font-scale, 1));
  box-sizing: border-box;
}

.modal-btns {
  display: flex;
  gap: 20rpx;
  margin-top: $uni-space-lg;
}

.modal-btns button {
  flex: 1;
  height: 88rpx;
  line-height: 88rpx;
  border-radius: 24rpx;
  font-size: calc(28rpx * var(--font-scale, 1));
  border: none;
  padding: 0;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
}

/* 清除微信 button 组件默认的 ::after 1px 边框（保证文字与按钮上下居中） */
.modal-btns button::after { border: none; }

.modal-btns button:first-child {
  background: $facade-fill-2;
  color: $facade-text-body;
}

.btn-primary {
  background: linear-gradient(135deg, $brand-primary, $brand-primary-light) !important;
  color: $app-surface !important;
}

.form-item {
  margin-bottom: 28rpx;
}

.form-label {
  font-size: calc(28rpx * var(--font-scale, 1));
  color: $facade-text-strong;
  margin-bottom: 14rpx;
  font-weight: 500;
}

.form-label .required {
  color: $brand-primary;
}

.form-item input,
.form-item .picker,
.form-item .textarea {
  width: 100%;
  padding: 20rpx;
  background: $facade-fill-gray-50;
  border-radius: 16rpx;
  font-size: calc(28rpx * var(--font-scale, 1));
  box-sizing: border-box;
}

/* 输入框高度补齐（任务标题/积分）：与 picker 同高，文字垂直居中 */
.form-item input {
  height: 108rpx;
  line-height: 108rpx;
  padding: 0 24rpx;
}

.form-item .picker {
  height: 108rpx;
  display: flex;
  align-items: center;
  padding: 0 24rpx;
}

.form-item .textarea {
  min-height: 140rpx;
}

.form-item checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.form-item label {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 12rpx 20rpx;
  background: $facade-fill-gray-50;
  border-radius: 16rpx;
  font-size: calc(26rpx * var(--font-scale, 1));
}

.form-item label.label-checked {
  background: $uni-primary-pale;
  color: $brand-primary;
}
</style>