cfc/cfc-frontend/pages/health/report-survey.vue

<template>
  <view class="survey-container">
    <!-- 导航 -->
    <view class="nav-bar">
      <text class="nav-back" @click="goBack">‹ 返回</text>
      <text class="nav-title">健康调研问卷</text>
      <view class="nav-placeholder"></view>
    </view>

    <!-- 进度条 -->
    <view class="progress-bar">
      <view class="progress-fill" :style="{ width: progressPercent + '%' }"></view>
    </view>

    <!-- 提示说明 -->
    <view class="tip-banner">
      <text class="tip-icon">💡</text>
      <text class="tip-text">请根据孩子和家庭的实际情况填写，帮助AI更准确地解读报告</text>
    </view>

    <!-- 表单 -->
    <view class="form-section">

      <!-- ===================== 第一部分：生活习惯 ===================== -->
      <view class="section-header">
        <text class="section-icon">🍚</text>
        <text class="section-title">生活习惯</text>
      </view>

      <!-- Q1: 饮食结构 -->
      <view class="question-card">
        <text class="q-number">1/12</text>
        <text class="q-title">孩子平时的饮食结构是怎样的？</text>
        <view class="q-options">
          <view class="q-option" :class="{ 'q-selected': survey.diet === 'balanced' }" @click="survey.diet = 'balanced'">
            <text class="q-icon">🥗</text>
            <text class="q-text">均衡饮食，荤素搭配</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': survey.diet === 'meat' }" @click="survey.diet = 'meat'">
            <text class="q-icon">🥩</text>
            <text class="q-text">偏荤食，爱吃肉</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': survey.diet === 'veggie' }" @click="survey.diet = 'veggie'">
            <text class="q-icon">🥬</text>
            <text class="q-text">偏素食，不爱吃肉</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': survey.diet === 'junk' }" @click="survey.diet = 'junk'">
            <text class="q-icon">🍟</text>
            <text class="q-text">偏好零食/快餐</text>
          </view>
        </view>
      </view>

      <!-- Q2: 消化状况 -->
      <view class="question-card">
        <text class="q-number">2/12</text>
        <text class="q-title">孩子近期消化状况如何？</text>
        <view class="q-options">
          <view class="q-option" :class="{ 'q-selected': survey.digestion === 'good' }" @click="survey.digestion = 'good'">
            <text>😊</text>
            <text class="q-text">正常，消化良好</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': survey.digestion === 'constipation' }" @click="survey.digestion = 'constipation'">
            <text>😣</text>
            <text class="q-text">容易便秘</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': survey.digestion === 'diarrhea' }" @click="survey.digestion = 'diarrhea'">
            <text>😟</text>
            <text class="q-text">容易腹泻</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': survey.digestion === 'irregular' }" @click="survey.digestion = 'irregular'">
            <text>🤔</text>
            <text class="q-text">不太规律</text>
          </view>
        </view>
      </view>

      <!-- Q3: 睡眠质量 -->
      <view class="question-card">
        <text class="q-number">3/12</text>
        <text class="q-title">孩子近期的睡眠质量如何？</text>
        <view class="q-options">
          <view class="q-option" :class="{ 'q-selected': survey.sleep === 'good' }" @click="survey.sleep = 'good'">
            <text>😴</text>
            <text class="q-text">睡得好，作息规律</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': survey.sleep === 'late' }" @click="survey.sleep = 'late'">
            <text>🦉</text>
            <text class="q-text">睡得太晚</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': survey.sleep === 'restless' }" @click="survey.sleep = 'restless'">
            <text>😰</text>
            <text class="q-text">翻来覆去睡不安稳</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': survey.sleep === 'short' }" @click="survey.sleep = 'short'">
            <text>⏰</text>
            <text class="q-text">睡眠时间不足</text>
          </view>
        </view>
      </view>

      <!-- Q4: 运动习惯 -->
      <view class="question-card">
        <text class="q-number">4/12</text>
        <text class="q-title">孩子每周运动情况？</text>
        <view class="q-options">
          <view class="q-option" :class="{ 'q-selected': survey.exercise === 'frequent' }" @click="survey.exercise = 'frequent'">
            <text>🏃</text>
            <text class="q-text">经常运动（3次以上/周）</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': survey.exercise === 'moderate' }" @click="survey.exercise = 'moderate'">
            <text>🚶</text>
            <text class="q-text">偶尔运动（1-2次/周）</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': survey.exercise === 'rare' }" @click="survey.exercise = 'rare'">
            <text>🪑</text>
            <text class="q-text">很少运动</text>
          </view>
        </view>
      </view>

      <!-- Q5: 饮水习惯 -->
      <view class="question-card">
        <text class="q-number">5/12</text>
        <text class="q-title">孩子每日饮水量如何？</text>
        <view class="q-options">
          <view class="q-option" :class="{ 'q-selected': survey.water === 'enough' }" @click="survey.water = 'enough'">
            <text>💧</text>
            <text class="q-text">充足（＞1500ml）</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': survey.water === 'moderate' }" @click="survey.water = 'moderate'">
            <text>🥤</text>
            <text class="q-text">一般（500-1500ml）</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': survey.water === 'little' }" @click="survey.water = 'little'">
            <text>😥</text>
            <text class="q-text">偏少（＜500ml）</text>
          </view>
        </view>
      </view>

      <!-- Q6: 用药情况 -->
      <view class="question-card">
        <text class="q-number">6/12</text>
        <text class="q-title">孩子近期是否有以下用药情况？（可多选）</text>
        <view class="q-options multi">
          <view class="q-option" :class="{ 'q-selected': hasMedication('antibiotic') }" @click="toggleMedication('antibiotic')">
            <text class="q-text">抗生素（近3个月内使用过）</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': hasMedication('probiotic') }" @click="toggleMedication('probiotic')">
            <text class="q-text">益生菌/益生元</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': hasMedication('cold') }" @click="toggleMedication('cold')">
            <text class="q-text">感冒药/退烧药</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': hasMedication('stomach') }" @click="toggleMedication('stomach')">
            <text class="q-text">肠胃药</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': hasMedication('none') }" @click="toggleMedication('none')">
            <text class="q-text">无特殊用药</text>
          </view>
        </view>
      </view>

      <!-- ===================== 第二部分：疾病史 ===================== -->
      <view class="section-header">
        <text class="section-icon">🏥</text>
        <text class="section-title">疾病史</text>
      </view>

      <!-- Q7: 慢性病/系统性疾病 -->
      <view class="question-card">
        <text class="q-number">7/12</text>
        <text class="q-title">孩子是否有以下慢性或系统性疾病？（可多选）</text>
        <view class="q-options multi">
          <view class="q-option" :class="{ 'q-selected': hasChronic('none') }" @click="toggleChronic('none')">
            <text class="q-text">无已知疾病</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': hasChronic('asthma') }" @click="toggleChronic('asthma')">
            <text class="q-text">哮喘/过敏性鼻炎</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': hasChronic('eczema') }" @click="toggleChronic('eczema')">
            <text class="q-text">湿疹/特应性皮炎</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': hasChronic('anemia') }" @click="toggleChronic('anemia')">
            <text class="q-text">贫血</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': hasChronic('obesity') }" @click="toggleChronic('obesity')">
            <text class="q-text">超重/肥胖</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': hasChronic('underweight') }" @click="toggleChronic('underweight')">
            <text class="q-text">偏瘦/营养不良</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': hasChronic('thyroid') }" @click="toggleChronic('thyroid')">
            <text class="q-text">甲状腺问题</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': hasChronic('digestive') }" @click="toggleChronic('digestive')">
            <text class="q-text">消化系统疾病（胃炎/肠炎等）</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': hasChronic('other') }" @click="toggleChronic('other')">
            <text class="q-text">其他（请在备注说明）</text>
          </view>
        </view>
        <!-- 其他疾病描述 -->
        <textarea v-if="hasChronic('other')" class="extra-input" v-model="survey.diseaseHistory.otherDesc" placeholder="请描述其他疾病情况..." maxlength="200" />
      </view>

      <!-- Q8: 过敏史 -->
      <view class="question-card">
        <text class="q-number">8/12</text>
        <text class="q-title">孩子是否有以下过敏情况？（可多选）</text>
        <view class="q-options multi">
          <view class="q-option" :class="{ 'q-selected': survey.allergies.indexOf('none') !== -1 }" @click="toggleAllergy('none')">
            <text class="q-text">无明显过敏</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': survey.allergies.indexOf('food') !== -1 }" @click="toggleAllergy('food')">
            <text class="q-text">食物过敏（牛奶/鸡蛋/海鲜等）</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': survey.allergies.indexOf('drug') !== -1 }" @click="toggleAllergy('drug')">
            <text class="q-text">药物过敏</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': survey.allergies.indexOf('pollen') !== -1 }" @click="toggleAllergy('pollen')">
            <text class="q-text">花粉/尘螨过敏</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': survey.allergies.indexOf('skin') !== -1 }" @click="toggleAllergy('skin')">
            <text class="q-text">皮肤过敏/荨麻疹</text>
          </view>
        </view>
        <!-- 过敏详情 -->
        <textarea v-if="survey.allergies.length > 0 && survey.allergies.indexOf('none') === -1" class="extra-input" v-model="survey.allergyDetail" placeholder="请补充过敏详情（过敏原、症状等）..." maxlength="200" />
      </view>

      <!-- Q9: 手术/住院史 -->
      <view class="question-card">
        <text class="q-number">9/12</text>
        <text class="q-title">孩子是否有手术或住院史？</text>
        <view class="q-options">
          <view class="q-option" :class="{ 'q-selected': survey.surgery === 'none' }" @click="survey.surgery = 'none'">
            <text class="q-text">无</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': survey.surgery === 'yes' }" @click="survey.surgery = 'yes'">
            <text class="q-text">有</text>
          </view>
        </view>
        <textarea v-if="survey.surgery === 'yes'" class="extra-input" v-model="survey.surgeryDetail" placeholder="请描述手术/住院原因和时间..." maxlength="200" />
      </view>

      <!-- ===================== 第三部分：家族史 ===================== -->
      <view class="section-header">
        <text class="section-icon">🧬</text>
        <text class="section-title">家族病史</text>
      </view>

      <!-- Q10: 家族病史 -->
      <view class="question-card">
        <text class="q-number">10/12</text>
        <text class="q-title">直系亲属是否有以下疾病史？（可多选）</text>
        <view class="family-grid">
          <view class="family-col">
            <text class="family-role">父亲</text>
            <view class="family-options">
              <view v-for="opt in familyDiseaseOptions" :key="opt.value"
                class="family-tag" :class="{ 'tag-selected': hasFamilyDisease('father', opt.value) }"
                @click="toggleFamilyDisease('father', opt.value)">
                <text>{{ opt.label }}</text>
              </view>
              <view class="family-tag" :class="{ 'tag-selected': hasFamilyDisease('father', 'other') }"
                @click="toggleFamilyDisease('father', 'other')">
                <text>其他</text>
              </view>
            </view>
          </view>
          <view class="family-col">
            <text class="family-role">母亲</text>
            <view class="family-options">
              <view v-for="opt in familyDiseaseOptions" :key="opt.value"
                class="family-tag" :class="{ 'tag-selected': hasFamilyDisease('mother', opt.value) }"
                @click="toggleFamilyDisease('mother', opt.value)">
                <text>{{ opt.label }}</text>
              </view>
              <view class="family-tag" :class="{ 'tag-selected': hasFamilyDisease('mother', 'other') }"
                @click="toggleFamilyDisease('mother', 'other')">
                <text>其他</text>
              </view>
            </view>
          </view>
          <view class="family-col">
            <text class="family-role">兄弟姐妹</text>
            <view class="family-options">
              <view v-for="opt in familyDiseaseOptions" :key="opt.value"
                class="family-tag" :class="{ 'tag-selected': hasFamilyDisease('sibling', opt.value) }"
                @click="toggleFamilyDisease('sibling', opt.value)">
                <text>{{ opt.label }}</text>
              </view>
              <view class="family-tag" :class="{ 'tag-selected': hasFamilyDisease('sibling', 'other') }"
                @click="toggleFamilyDisease('sibling', 'other')">
                <text>其他</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- Q11: 祖父母病史 -->
      <view class="question-card">
        <text class="q-number">11/12</text>
        <text class="q-title">祖父母/外祖父母是否有以下疾病史？（可多选）</text>
        <view class="q-options multi">
          <view class="q-option" :class="{ 'q-selected': survey.grandparentHistory.indexOf('unknown') !== -1 }" @click="toggleGrandparent('unknown')">
            <text class="q-text">不清楚</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': survey.grandparentHistory.indexOf('hypertension') !== -1 }" @click="toggleGrandparent('hypertension')">
            <text class="q-text">高血压</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': survey.grandparentHistory.indexOf('diabetes') !== -1 }" @click="toggleGrandparent('diabetes')">
            <text class="q-text">糖尿病</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': survey.grandparentHistory.indexOf('heart') !== -1 }" @click="toggleGrandparent('heart')">
            <text class="q-text">心脏病</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': survey.grandparentHistory.indexOf('stroke') !== -1 }" @click="toggleGrandparent('stroke')">
            <text class="q-text">脑卒中</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': survey.grandparentHistory.indexOf('cancer') !== -1 }" @click="toggleGrandparent('cancer')">
            <text class="q-text">癌症</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': survey.grandparentHistory.indexOf('autoimmune') !== -1 }" @click="toggleGrandparent('autoimmune')">
            <text class="q-text">自身免疫病</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': survey.grandparentHistory.indexOf('none') !== -1 }" @click="toggleGrandparent('none')">
            <text class="q-text">无明显疾病</text>
          </view>
        </view>
      </view>

      <!-- ===================== 第四部分：健康目标 ===================== -->
      <view class="section-header">
        <text class="section-icon">🎯</text>
        <text class="section-title">健康目标</text>
      </view>

      <!-- Q12: 健康目标 -->
      <view class="question-card">
        <text class="q-number">12/12</text>
        <text class="q-title">您希望通过本次健康管理改善什么？（可多选）</text>
        <view class="q-options multi">
          <view class="q-option" :class="{ 'q-selected': survey.goals.indexOf('immunity') !== -1 }" @click="toggleGoal('immunity')">
            <text>🛡️</text>
            <text class="q-text">增强免疫力</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': survey.goals.indexOf('digestion') !== -1 }" @click="toggleGoal('digestion')">
            <text>🌿</text>
            <text class="q-text">改善消化</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': survey.goals.indexOf('growth') !== -1 }" @click="toggleGoal('growth')">
            <text>📈</text>
            <text class="q-text">促进生长发育</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': survey.goals.indexOf('focus') !== -1 }" @click="toggleGoal('focus')">
            <text>🎯</text>
            <text class="q-text">提升专注力</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': survey.goals.indexOf('sleep') !== -1 }" @click="toggleGoal('sleep')">
            <text>😴</text>
            <text class="q-text">改善睡眠</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': survey.goals.indexOf('weight') !== -1 }" @click="toggleGoal('weight')">
            <text>⚖️</text>
            <text class="q-text">体重管理</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': survey.goals.indexOf('allergy') !== -1 }" @click="toggleGoal('allergy')">
            <text>🌸</text>
            <text class="q-text">改善过敏</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': survey.goals.indexOf('mood') !== -1 }" @click="toggleGoal('mood')">
            <text>😊</text>
            <text class="q-text">改善情绪</text>
          </view>
        </view>
      </view>

      <!-- 提交按钮 -->
      <view class="submit-btn" :class="{ 'btn-disabled': !canSubmit }" @click="doSubmit">
        <text v-if="submitting">提交中...</text>
        <text v-else>提交并进入 AI 解读</text>
      </view>
    </view>

    <view class="bottom-spacer"></view>
  </view>
</template>

<script>
import { createReportSurvey, submitReportSurvey, getSurveyStatus } from '../../utils/api.js'

export default {
  data() {
    return {
      reportId: null,
      childId: null,
      surveyId: null,
      survey: {
        // 生活习惯
        diet: '',
        digestion: '',
        sleep: '',
        exercise: '',
        water: '',
        medications: [],
        // 疾病史
        diseaseHistory: {
          chronic: [],
          otherDesc: ''
        },
        allergies: [],
        allergyDetail: '',
        surgery: '',
        surgeryDetail: '',
        // 家族史
        familyHistory: {
          father: [],
          mother: [],
          sibling: []
        },
        grandparentHistory: [],
        // 健康目标
        goals: []
      },
      familyDiseaseOptions: [
        { value: 'none', label: '无' },
        { value: 'hypertension', label: '高血压' },
        { value: 'diabetes', label: '糖尿病' },
        { value: 'heart', label: '心脏病' },
        { value: 'stroke', label: '脑卒中' },
        { value: 'cancer', label: '癌症' },
        { value: 'allergy', label: '过敏性疾病' },
        { value: 'autoimmune', label: '自身免疫病' },
        { value: 'mental', label: '精神/心理疾病' },
        { value: 'obesity', label: '肥胖' },
      ],
      submitting: false
    }
  },
  computed: {
    progressPercent: function() {
      var answered = 0
      var total = 12
      if (this.survey.diet) answered++
      if (this.survey.digestion) answered++
      if (this.survey.sleep) answered++
      if (this.survey.exercise) answered++
      if (this.survey.water) answered++
      if (this.survey.medications.length > 0) answered++
      if (this.survey.diseaseHistory.chronic.length > 0) answered++
      if (this.survey.allergies.length > 0) answered++
      if (this.survey.surgery) answered++
      // 家族史：至少填了父亲或母亲或兄弟姐妹或祖父母之一
      if (this.survey.familyHistory.father.length > 0
        || this.survey.familyHistory.mother.length > 0
        || this.survey.familyHistory.sibling.length > 0) answered++
      if (this.survey.grandparentHistory.length > 0) answered++
      if (this.survey.goals.length > 0) answered++
      return Math.round((answered / total) * 100)
    },
    canSubmit: function() {
      return this.survey.diet && this.survey.sleep && this.survey.exercise
        && this.survey.diseaseHistory.chronic.length > 0
        && this.survey.allergies.length > 0
        && this.survey.goals.length > 0
    }
  },
  onLoad: function(options) {
    this.reportId = options.reportId ? parseInt(options.reportId) : null
    this.childId = options.childId ? parseInt(options.childId) : null
    this.initSurvey()
  },
  methods: {
    initSurvey: function() {
      var self = this
      if (!self.reportId) return
      getSurveyStatus(self.reportId).then(function(res) {
        if (res.code === 200 && res.data) {
          if (res.data.completed) {
            uni.showToast({ title: '该报告问卷已提交', icon: 'none' })
            return
          }
          if (res.data.pendingSurveyId) {
            self.surveyId = res.data.pendingSurveyId
            return
          }
        }
        return createReportSurvey(self.reportId, self.childId || 0)
      }).then(function(res) {
        if (res && res.code === 200 && res.data && res.data.id) {
          self.surveyId = res.data.id
        }
      }).catch(function(e) {
        console.log('初始化问卷失败', e)
      })
    },
    // === 用药多选 ===
    hasMedication: function(val) {
      return this.survey.medications.indexOf(val) !== -1
    },
    toggleMedication: function(val) {
      var idx = this.survey.medications.indexOf(val)
      if (val === 'none') {
        this.survey.medications = ['none']
      } else {
        var noneIdx = this.survey.medications.indexOf('none')
        if (noneIdx !== -1) this.survey.medications.splice(noneIdx, 1)
        if (idx === -1) {
          this.survey.medications.push(val)
        } else {
          this.survey.medications.splice(idx, 1)
        }
        if (this.survey.medications.length === 0) {
          this.survey.medications.push('none')
        }
      }
    },
    // === 慢性病多选 ===
    hasChronic: function(val) {
      return this.survey.diseaseHistory.chronic.indexOf(val) !== -1
    },
    toggleChronic: function(val) {
      var arr = this.survey.diseaseHistory.chronic
      var idx = arr.indexOf(val)
      if (val === 'none') {
        this.survey.diseaseHistory.chronic = ['none']
      } else {
        var noneIdx = arr.indexOf('none')
        if (noneIdx !== -1) arr.splice(noneIdx, 1)
        if (idx === -1) {
          arr.push(val)
        } else {
          arr.splice(idx, 1)
        }
        if (arr.length === 0) {
          arr.push('none')
        }
      }
    },
    // === 过敏多选 ===
    toggleAllergy: function(val) {
      var idx = this.survey.allergies.indexOf(val)
      if (val === 'none') {
        this.survey.allergies = ['none']
      } else {
        var noneIdx = this.survey.allergies.indexOf('none')
        if (noneIdx !== -1) this.survey.allergies.splice(noneIdx, 1)
        if (idx === -1) {
          this.survey.allergies.push(val)
        } else {
          this.survey.allergies.splice(idx, 1)
        }
        if (this.survey.allergies.length === 0) {
          this.survey.allergies.push('none')
        }
      }
    },
    // === 家族病史 ===
    hasFamilyDisease: function(role, val) {
      return this.survey.familyHistory[role].indexOf(val) !== -1
    },
    toggleFamilyDisease: function(role, val) {
      var arr = this.survey.familyHistory[role]
      var idx = arr.indexOf(val)
      if (val === 'none') {
        this.survey.familyHistory[role] = ['none']
      } else {
        var noneIdx = arr.indexOf('none')
        if (noneIdx !== -1) arr.splice(noneIdx, 1)
        if (idx === -1) {
          arr.push(val)
        } else {
          arr.splice(idx, 1)
        }
        if (arr.length === 0) {
          arr.push('none')
        }
      }
    },
    // === 祖父母病史 ===
    toggleGrandparent: function(val) {
      var idx = this.survey.grandparentHistory.indexOf(val)
      if (val === 'unknown') {
        this.survey.grandparentHistory = ['unknown']
      } else {
        var unkIdx = this.survey.grandparentHistory.indexOf('unknown')
        if (unkIdx !== -1) this.survey.grandparentHistory.splice(unkIdx, 1)
        if (idx === -1) {
          this.survey.grandparentHistory.push(val)
        } else {
          this.survey.grandparentHistory.splice(idx, 1)
        }
        if (this.survey.grandparentHistory.length === 0) {
          this.survey.grandparentHistory.push('unknown')
        }
      }
    },
    // === 健康目标 ===
    toggleGoal: function(val) {
      var idx = this.survey.goals.indexOf(val)
      if (idx === -1) {
        this.survey.goals.push(val)
      } else {
        this.survey.goals.splice(idx, 1)
      }
    },
    goBack: function() {
      uni.navigateBack()
    },
    doSubmit: function() {
      if (!this.canSubmit || this.submitting) return
      var self = this
      self.submitting = true
      uni.showLoading({ title: '提交中...' })

      var doSubmit = function() {
        submitReportSurvey(self.surveyId, JSON.stringify(self.survey)).then(function(res) {
          uni.hideLoading()
          if (res.code === 200) {
            uni.showToast({ title: '提交成功', icon: 'success' })
            // AI问答功能已屏蔽
            // setTimeout(function() {
            //   var params = 'reportId=' + self.reportId + '&surveyId=' + self.surveyId + '&firstMessage=' + encodeURIComponent('请根据报告和问卷信息，提供个性化的健康建议')
            //   uni.redirectTo({ url: '/pages/ai/chat?' + params })
            // }, 500)
          } else {
            uni.showToast({ title: res.message || '提交失败', icon: 'none' })
            self.submitting = false
          }
        }).catch(function(e) {
          uni.hideLoading()
          uni.showToast({ title: '提交失败，请重试', icon: 'none' })
          console.log('提交问卷失败', e)
          self.submitting = false
        })
      }

      if (this.surveyId) {
        doSubmit()
      } else {
        createReportSurvey(this.reportId, this.childId || 0).then(function(res) {
          if (res.code === 200 && res.data && res.data.id) {
            self.surveyId = res.data.id
            doSubmit()
          } else {
            uni.hideLoading()
            uni.showToast({ title: '创建问卷失败', icon: 'none' })
            self.submitting = false
          }
        }).catch(function(e) {
          uni.hideLoading()
          uni.showToast({ title: '创建问卷失败', icon: 'none' })
          self.submitting = false
          console.log('创建问卷失败', e)
        })
      }
    }
  }
}
</script>

<style scoped>
.survey-container {
  min-height: 100vh;
  background: #F3F7FA;
}
.nav-bar {
  position: sticky;
  top: 0;
  background: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
  z-index: 100;
}
.nav-back { font-size: 32rpx; color: #5B9BD5; }
.nav-title { font-size: 32rpx; font-weight: bold; color: #333; }
.nav-placeholder { width: 80rpx; }

.progress-bar {
  height: 6rpx;
  background: #E2E8F0;
  margin: 0 30rpx;
  border-radius: 3rpx;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #66BB6A, #43A047);
  border-radius: 3rpx;
  transition: width 0.3s;
}

.tip-banner {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: #FFF8E1;
  margin: 16rpx 30rpx;
  padding: 16rpx 20rpx;
  border-radius: 12rpx;
}
.tip-icon { font-size: 28rpx; margin-right: 12rpx; flex-shrink: 0; }
.tip-text { font-size: 22rpx; color: #F57F17; line-height: 1.5; }

.form-section { margin: 10rpx 30rpx 30rpx; }

/* 分段标题 */
.section-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 30rpx 0 16rpx;
  padding-left: 8rpx;
}
.section-icon { font-size: 36rpx; margin-right: 12rpx; }
.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.question-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 28rpx 24rpx;
  margin-bottom: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
}
.q-number {
  font-size: 20rpx;
  color: #66BB6A;
  font-weight: bold;
  display: block;
  margin-bottom: 8rpx;
}
.q-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 16rpx;
}
.q-options {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}
.q-options.multi {
  gap: 10rpx;
}
.q-option {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12rpx;
  padding: 16rpx 18rpx;
  border-radius: 14rpx;
  background: #F5F7FA;
  border: 2rpx solid transparent;
}
.q-selected {
  background: #E8F5E9;
  border-color: #66BB6A;
}
.q-option:active { opacity: 0.7; }
.q-icon { font-size: 32rpx; flex-shrink: 0; }
.q-text { font-size: 26rpx; color: #333; }

/* 家族史网格 */
.family-grid {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}
.family-col {
  background: #F5F7FA;
  border-radius: 14rpx;
  padding: 16rpx;
}
.family-role {
  font-size: 26rpx;
  font-weight: bold;
  color: #5B9BD5;
  display: block;
  margin-bottom: 12rpx;
}
.family-options {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8rpx;
}
.family-tag {
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 22rpx;
  color: #666;
  background: #fff;
  border: 2rpx solid #E2E8F0;
}
.family-tag:active { opacity: 0.7; }
.tag-selected {
  background: #E3F2FD;
  border-color: #5B9BD5;
  color: #1565C0;
}

/* 额外文本输入 */
.extra-input {
  width: 100%;
  min-height: 100rpx;
  background: #F5F7FA;
  border-radius: 12rpx;
  padding: 16rpx 20rpx;
  font-size: 24rpx;
  color: #333;
  margin-top: 16rpx;
  box-sizing: border-box;
}

.submit-btn {
  background: linear-gradient(135deg, #43A047, #2E7D32);
  color: #fff;
  font-size: 30rpx;
  font-weight: bold;
  text-align: center;
  padding: 28rpx;
  border-radius: 16rpx;
  margin-top: 20rpx;
}
.submit-btn:active { opacity: 0.85; }
.btn-disabled { opacity: 0.5; }

.bottom-spacer { height: 60rpx; }
</style>