cfc/cfc-frontend/pages/wealth-sub/insurance-planning.vue

<template>
  <scroll-view class="container" scroll-y>

    <!-- 加载状态 -->
    <view v-if="loading" class="loading-state">
      <text class="loading-icon">🔍</text>
      <text class="loading-text">正在分析家庭保险规划...</text>
    </view>

    <template v-else-if="report">

      <!-- 综合评分卡 -->
      <view class="score-card">
        <view class="score-header">
          <text class="score-title">🛡️ 保险规划评分</text>
          <text class="score-status" :class="'status-' + report._cssStatus">{{ report.overallStatus }}</text>
        </view>
        <view class="score-body">
          <view class="score-ring">
            <view class="score-ring-inner">
              <text class="score-value">{{ report.coverageScore }}</text>
              <text class="score-max">/100</text>
            </view>
          </view>
          <view class="score-dims">
            <view class="dim-row">
              <text class="dim-label">身</text>
              <view class="dim-bar">
                <view class="dim-fill body-fill" :style="'width:' + (report.familyBodyScore || 0) + '%'"></view>
              </view>
              <text class="dim-value">{{ report.familyBodyScore || 0 }}分</text>
            </view>
            <view class="dim-row">
              <text class="dim-label">心</text>
              <view class="dim-bar">
                <view class="dim-fill mind-fill" :style="'width:' + (report.familyMindScore || 0) + '%'"></view>
              </view>
              <text class="dim-value">{{ report.familyMindScore || 0 }}分</text>
            </view>
            <view class="dim-row">
              <text class="dim-label">智</text>
              <view class="dim-bar">
                <view class="dim-fill wisdom-fill" :style="'width:' + (report.familyWisdomScore || 0) + '%'"></view>
              </view>
              <text class="dim-value">{{ report.familyWisdomScore || 0 }}分</text>
            </view>
          </view>
        </view>
        <!-- 缺口统计 -->
        <view class="gap-stats">
          <view class="gap-stat high" v-if="report.highPriorityGapCount > 0">
            <text class="gap-stat-num">{{ report.highPriorityGapCount }}</text>
            <text class="gap-stat-label">高优先级</text>
          </view>
          <view class="gap-stat medium" v-if="report.mediumPriorityGapCount > 0">
            <text class="gap-stat-num">{{ report.mediumPriorityGapCount }}</text>
            <text class="gap-stat-label">中优先级</text>
          </view>
          <view class="gap-stat low" v-if="report.lowPriorityGapCount > 0">
            <text class="gap-stat-num">{{ report.lowPriorityGapCount }}</text>
            <text class="gap-stat-label">低优先级</text>
          </view>
        </view>
      </view>

      <!-- 整体建议 -->
      <view class="section">
        <view class="recommend-card">
          <text class="recommend-title">💡 综合建议</text>
          <text class="recommend-text">{{ report.overallRecommendation }}</text>
        </view>
      </view>

      <!-- 成员覆盖卡片 -->
      <view class="section" v-if="report.memberCoverages && report.memberCoverages.length > 0">
        <view class="section-header">
          <text class="section-title">👨‍👩‍👧‍👦 成员覆盖情况</text>
          <text class="section-sub">{{ report.memberCount }} 位成员</text>
        </view>
        <view class="member-list">
          <view class="member-card" v-for="m in coverageMembers" :key="m.memberId">
            <view class="member-header">
              <view class="member-avatar">{{ (m.name || '未知').substring(0, 1) }}</view>
              <view class="member-info">
                <text class="member-name">{{ m.name || '未知' }}</text>
                <text class="member-role">{{ m.familyRole || (m.memberType === 'parent' ? '家长' : '孩子') }}</text>
              </view>
              <view class="member-policy-badge" v-if="m.policyCount > 0">
                <text>{{ m.policyCount }}份保单</text>
              </view>
              <view class="member-policy-badge no-policy" v-else>
                <text>暂无保单</text>
              </view>
            </view>
            <!-- 维度得分 -->
            <view class="member-dims" v-if="m.bodyScore || m.mindScore || m.wisdomScore">
              <view class="member-dim-item">
                <text class="mdim-label">身</text>
                <text class="mdim-val">{{ m.bodyScore || 0 }}</text>
              </view>
              <view class="member-dim-item">
                <text class="mdim-label">心</text>
                <text class="mdim-val">{{ m.mindScore || 0 }}</text>
              </view>
              <view class="member-dim-item">
                <text class="mdim-label">智</text>
                <text class="mdim-val">{{ m.wisdomScore || 0 }}</text>
              </view>
            </view>
            <!-- 覆盖状态 -->
            <view class="coverage-chips">
              <view class="coverage-chip" :class="'chip-' + m._cssMedical" @click="showCoverageTip(m.memberName, 'medical')">
                <text>医疗险</text>
                <text class="chip-status">{{ getCoverageLabel(m.medicalCoverage) }}</text>
              </view>
              <view class="coverage-chip" :class="'chip-' + m._cssCriticalIllness" @click="showCoverageTip(m.memberName, 'critical_illness')">
                <text>重疾险</text>
                <text class="chip-status">{{ getCoverageLabel(m.criticalIllnessCoverage) }}</text>
              </view>
              <view class="coverage-chip" :class="'chip-' + m._cssAccident" @click="showCoverageTip(m.memberName, 'accident')">
                <text>意外险</text>
                <text class="chip-status">{{ getCoverageLabel(m.accidentCoverage) }}</text>
              </view>
              <view class="coverage-chip" v-if="m.educationCoverage && m.educationCoverage !== 'not_applicable'" :class="'chip-' + m._cssEducation">
                <text>教育金</text>
                <text class="chip-status">{{ getCoverageLabel(m.educationCoverage) }}</text>
              </view>
              <view class="coverage-chip" v-if="m.mentalHealthCoverage && m.mentalHealthCoverage !== 'not_applicable'" :class="'chip-' + m._cssMental">
                <text>心理险</text>
                <text class="chip-status">{{ getCoverageLabel(m.mentalHealthCoverage) }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 缺口列表 -->
      <view class="section" v-if="report.gaps && report.gaps.length > 0">
        <view class="section-header">
          <text class="section-title">⚠️ 保障缺口</text>
          <text class="section-sub">共 {{ report.gaps.length }} 项</text>
        </view>
        <view class="gap-list">
          <view class="gap-card" v-for="(g, idx) in report.gaps" :key="idx">
            <view class="gap-header">
              <view class="gap-priority" :class="'priority-' + g.priority">{{ getPriorityLabel(g.priority) }}</view>
              <text class="gap-member">{{ g.memberName }}</text>
              <text class="gap-type">{{ g.gapTypeName }}</text>
            </view>
            <text class="gap-desc">{{ g.gapDescription }}</text>
            <view class="gap-products" v-if="g.recommendedTypes && g.recommendedTypes.length > 0">
              <text class="gap-products-label">推荐险种：</text>
              <text class="gap-products-list">{{ g.recommendedTypes.join(' / ') }}</text>
            </view>
            <view class="gap-actions">
              <button class="gap-add-btn" @click="goToAddPolicy(g)">添加保单</button>
            </view>
          </view>
        </view>
      </view>

      <!-- 无缺口提示 -->
      <view class="section" v-if="report.gaps && report.gaps.length === 0">
        <view class="all-covered-card">
          <text class="all-covered-icon">✅</text>
          <text class="all-covered-title">保险配置完善</text>
          <text class="all-covered-desc">您的家庭保险已覆盖主要风险，请定期复审保单有效性。</text>
        </view>
      </view>

      <!-- 保单管理入口 -->
      <view class="section">
        <view class="action-btn" @click="goToInsuranceList">
          <text>📋 管理我的保单</text>
          <text class="action-arrow">›</text>
        </view>
      </view>

    </template>

    <!-- 无数据 -->
    <view v-else class="empty-state">
      <text class="empty-icon">🛡️</text>
      <text class="empty-title">暂无保险规划数据</text>
      <text class="empty-desc">请先加入家庭后再使用此功能</text>
    </view>
  </scroll-view>
</template>

<script>
import { getInsurancePlanning, ensureFamily } from '../../utils/api'

export default {
  data() {
    return {
      loading: true,
      report: null
    }
  },
  computed: {
    /** 成员覆盖数据：预计算CSS类名（wxss不支持中文类名，禁止:class方法调用） */
    coverageMembers: function() {
      var members = this.report && this.report.memberCoverages
      if (!members) return []
      var self = this
      return members.map(function(m) {
        m._cssMedical = self._coverageCss(m.medicalCoverage)
        m._cssCriticalIllness = self._coverageCss(m.criticalIllnessCoverage)
        m._cssAccident = self._coverageCss(m.accidentCoverage)
        m._cssEducation = self._coverageCss(m.educationCoverage)
        m._cssMental = self._coverageCss(m.mentalHealthCoverage)
        return m
      })
    }
  },
  onShow() {
    this.loadPlanning()
  },
  methods: {
    async loadPlanning() {
      var ui = uni.getStorageSync('userInfo') || {}
      if (!ui.familyId) {
        var result = await ensureFamily()
        if (result && result.created) {
          this.loadPlanning()
        } else {
          this.loading = false
        }
        return
      }
      this.loading = true
      try {
        const res = await getInsurancePlanning()
        if (res && res.code === 200 && res.data) {
          this.report = res.data
          // 预计算CSS类名（wxss/wxml不支持中文和特殊字符）
          var self = this
          this.report._cssStatus = self._overallStatusCss(res.data.overallStatus)
        } else {
          this.report = null
        }
      } catch (e) {
        console.error('获取保险规划失败', e)
        this.report = null
      } finally {
        this.loading = false
      }
    },
    /** 覆盖等级 → CSS类名 */
    _overallStatusCss: function(s) {
      var map = { '优秀': 'excellent', '良好': 'good', '一般': 'fair', '较差': 'poor', '差': 'bad' }
      return map[s] || 'neutral'
    },
    _coverageCss: function(level) {
      if (level === 'comprehensive' || level === 'adequate') return 'good'
      if (level === 'basic') return 'warn'
      if (level === 'none') return 'danger'
      return 'neutral'
    },
    getCoverageLabel(level) {
      if (level === 'comprehensive') return '完善'
      if (level === 'adequate') return '充足'
      if (level === 'basic') return '基础'
      if (level === 'none') return '缺失'
      if (level === 'not_applicable') return '不适用'
      return level || '缺失'
    },
    getPriorityLabel(priority) {
      if (priority === 'high') return '高'
      if (priority === 'medium') return '中'
      return '低'
    },
    showCoverageTip(name, type) {
      var tips = {
        medical: '医疗险：覆盖门诊和住院医疗费用，按实际花费报销',
        critical_illness: '重疾险：确诊即赔，一次性给付保险金',
        accident: '意外险：覆盖意外伤害医疗、身故和伤残'
      }
      uni.showModal({
        title: '险种说明',
        content: tips[type] || '',
        showCancel: false
      })
    },
    goToAddPolicy(gap) {
      uni.navigateTo({
        url: '/pages/wealth-sub/insurance-add?gapType=' + gap.gapType + '&memberId=' + gap.memberId
      })
    },
    goToInsuranceList() {
      uni.navigateTo({
        url: '/pages/wealth-sub/insurance-list'
      })
    }
  }
}
</script>

<style scoped>
  .container {
    min-height: 100vh;
    background: #f5f7fa;
    padding: 20rpx 30rpx 120rpx;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }

/* 加载 */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 120rpx 0;
}
.loading-icon { font-size: 64rpx; margin-bottom: 24rpx; }
.loading-text { font-size: 28rpx; color: #999; }

/* 综合评分卡 */
.score-card {
  background: linear-gradient(135deg, #1E3A5F 0%, #2D5A8A 100%);
  border-radius: 24rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
  color: #fff;
}
.score-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
}
.score-title { font-size: 30rpx; font-weight: bold; }
.score-status {
  font-size: 26rpx;
  padding: 6rpx 20rpx;
  border-radius: 20rpx;
  background: rgba(255,255,255,0.2);
}
.score-body {
  display: flex;
  align-items: center;
  gap: 32rpx;
}
.score-ring {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  border: 8rpx solid rgba(255,255,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.score-ring-inner { text-align: center; }
.score-value { font-size: 56rpx; font-weight: bold; display: block; }
.score-max { font-size: 24rpx; opacity: 0.7; }

.score-dims { flex: 1; }
.dim-row {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}
.dim-label {
  font-size: 26rpx;
  width: 36rpx;
  color: rgba(255,255,255,0.8);
}
.dim-bar {
  flex: 1;
  height: 12rpx;
  background: rgba(255,255,255,0.2);
  border-radius: 6rpx;
  margin: 0 12rpx;
  overflow: hidden;
}
.dim-fill {
  height: 100%;
  border-radius: 6rpx;
}
.body-fill { background: #FF8C42; }
.mind-fill { background: #FF6B9D; }
.wisdom-fill { background: #6366F1; }
.dim-value {
  font-size: 24rpx;
  width: 70rpx;
  text-align: right;
  color: rgba(255,255,255,0.9);
}

.gap-stats {
  display: flex;
  gap: 16rpx;
  margin-top: 24rpx;
  padding-top: 20rpx;
  border-top: 1rpx solid rgba(255,255,255,0.15);
}
.gap-stat {
  flex: 1;
  background: rgba(255,255,255,0.12);
  border-radius: 12rpx;
  padding: 12rpx 0;
  text-align: center;
}
.gap-stat.high { border-left: 4rpx solid #FF4D4F; }
.gap-stat.medium { border-left: 4rpx solid #FFA940; }
.gap-stat.low { border-left: 4rpx solid #52C41A; }
.gap-stat-num {
  font-size: 36rpx;
  font-weight: bold;
  display: block;
  color: #fff;
}
.gap-stat-label { font-size: 22rpx; color: rgba(255,255,255,0.7); }

/* 整体建议 */
.recommend-card {
  background: #FFFBEB;
  border-radius: 16rpx;
  padding: 24rpx;
  border-left: 6rpx solid #F59E0B;
}
.recommend-title { font-size: 28rpx; font-weight: bold; color: #92400E; display: block; margin-bottom: 12rpx; }
.recommend-text { font-size: 26rpx; color: #78350F; line-height: 1.6; }

/* Section */
.section { margin-bottom: 24rpx; }
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}
.section-title { font-size: 30rpx; font-weight: bold; color: #333; }
.section-sub { font-size: 24rpx; color: #999; }

/* 成员卡片 */
.member-list {}
.member-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.member-header {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}
.member-avatar {
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16rpx;
  flex-shrink: 0;
}
.member-info { flex: 1; }
.member-name { font-size: 30rpx; font-weight: bold; color: #333; display: block; }
.member-role { font-size: 24rpx; color: #999; }
.member-policy-badge {
  font-size: 22rpx;
  background: #DCFCE7;
  color: #16A34A;
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
}
.member-policy-badge.no-policy {
  background: #FEF2F2;
  color: #DC2626;
}

.member-dims {
  display: flex;
  gap: 24rpx;
  margin-bottom: 16rpx;
  padding: 12rpx 0;
  border-top: 1rpx solid #f5f5f5;
  border-bottom: 1rpx solid #f5f5f5;
}
.member-dim-item { text-align: center; flex: 1; }
.mdim-label { font-size: 22rpx; color: #999; display: block; }
.mdim-val { font-size: 32rpx; font-weight: bold; color: #333; }

/* 覆盖状态芯片 */
.coverage-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
}
.coverage-chip {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  background: #f0f0f0;
  color: #666;
}
.coverage-chip.chip-good { background: #DCFCE7; color: #16A34A; }
.coverage-chip.chip-warn { background: #FFF7E6; color: #D46B08; }
.coverage-chip.chip-danger { background: #FFF1F0; color: #CF1322; }
.chip-status { font-size: 22rpx; }

/* 缺口列表 */
.gap-list {}
.gap-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  border-left: 6rpx solid;
}
.gap-card[style*="priority-high"] { border-left-color: #FF4D4F; }
.gap-header {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
  gap: 12rpx;
}
.gap-priority {
  font-size: 22rpx;
  padding: 4rpx 12rpx;
  border-radius: 8rpx;
}
.gap-priority.priority-high { background: #FFF1F0; color: #CF1322; }
.gap-priority.priority-medium { background: #FFF7E6; color: #D46B08; }
.gap-priority.priority-low { background: #F6FFED; color: #389E0D; }
.gap-member { font-size: 28rpx; font-weight: bold; color: #333; }
.gap-type { font-size: 26rpx; color: #666; }
.gap-desc {
  font-size: 26rpx;
  color: #555;
  line-height: 1.5;
  display: block;
  margin-bottom: 12rpx;
}
.gap-products { margin-bottom: 12rpx; }
.gap-products-label { font-size: 24rpx; color: #999; }
.gap-products-list { font-size: 24rpx; color: #F59E0B; font-weight: 500; }
.gap-actions { display: flex; justify-content: flex-end; }
.gap-add-btn {
  font-size: 24rpx;
  background: #F97316;
  color: #fff;
  padding: 10rpx 28rpx;
  border-radius: 24rpx;
  line-height: 1.5;
}

/* 全覆盖 */
.all-covered-card {
  background: #F6FFED;
  border-radius: 16rpx;
  padding: 40rpx;
  text-align: center;
  border: 2rpx solid #B7EB8F;
}
.all-covered-icon { font-size: 64rpx; display: block; margin-bottom: 16rpx; }
.all-covered-title { font-size: 30rpx; font-weight: bold; color: #389E0D; display: block; margin-bottom: 12rpx; }
.all-covered-desc { font-size: 26rpx; color: #52C41A; }

/* 保单管理入口 */
.action-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border-radius: 16rpx;
  padding: 28rpx 30rpx;
  font-size: 28rpx;
  color: #333;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.action-arrow { color: #ccc; font-size: 32rpx; }

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 120rpx 0;
}
.empty-icon { font-size: 80rpx; margin-bottom: 24rpx; }
.empty-title { font-size: 32rpx; font-weight: bold; color: #333; margin-bottom: 12rpx; }
.empty-desc { font-size: 26rpx; color: #999; }
</style>