num/client/pages/relations/analysis-select.vue

<template>
  <view class="page-select">
    <!-- ========== Member Selection ========== -->
    <view class="section">
      <text class="section-title">选择分析成员</text>
      <text class="section-desc">选择您自己以及想分析的关系人（至少选2人）</text>

      <!-- Self (always included) -->
      <view class="member-card self-card">
        <view class="member-avatar self-avatar">
          <text class="avatar-text">我</text>
        </view>
        <view class="member-info">
          <text class="member-name">我（本人）</text>
          <text class="member-detail">{{ userProfile.birthYear }}-{{ userProfile.birthMonth }}-{{ userProfile.birthDay }}</text>
        </view>
        <view class="member-checked">
          <text class="check-icon">✓</text>
        </view>
      </view>

      <!-- Relations list -->
      <view v-if="loading" class="loading-hint">加载关系人...</view>
      <view v-else-if="relations.length === 0" class="empty-hint">
        <text>暂无关系人，请先</text>
        <text class="link-text" @click="goAddRelation">添加关系人</text>
      </view>
      <view
        v-for="item in relations"
        :key="item.id"
        class="member-card"
        :class="{ selected: selectedIds.includes(item.id) }"
        @click="toggleRelation(item.id)"
      >
        <view class="member-avatar">
          <text class="avatar-text">{{ item.name ? item.name[0] : '?' }}</text>
        </view>
        <view class="member-info">
          <text class="member-name">{{ item.name || '未知' }}</text>
          <text class="member-detail">{{ relationTypeLabel(item.relationType) }} · {{ item.birthDateText || '' }}</text>
        </view>
        <view class="member-checkbox">
          <view class="checkbox-box" :class="{ checked: selectedIds.includes(item.id) }">
            <text v-if="selectedIds.includes(item.id)" class="checkbox-icon">✓</text>
          </view>
        </view>
      </view>
    </view>

    <!-- ========== Question Input ========== -->
    <view class="section">
      <text class="section-title">您想咨询什么？</text>
      <view class="input-wrap">
        <textarea
          v-model="question"
          class="question-input"
          placeholder="例如：我们之间的能量是否匹配？或者想了解某方面的关系影响..."
          placeholder-class="input-placeholder"
          maxlength="500"
          :auto-height="true"
        />
      </view>
      <text class="char-count">{{ question.length }}/500</text>
    </view>

    <!-- ========== Submit ========== -->
    <view class="submit-bar">
      <view
        class="btn-submit"
        :class="{ disabled: !canSubmit || submitting }"
        @click="handleStart"
      >
        <text class="btn-submit-text">{{ submitting ? '分析中...' : '开始分析' }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { useUserStore } from '@/stores/user'
import request from '@/utils/api'

const userStore = useUserStore()
const relations = ref([])
const loading = ref(false)
const selectedIds = ref([])
const question = ref('')
const submitting = ref(false)

const userProfile = computed(() => ({
  birthYear: userStore.birthYear || '----',
  birthMonth: userStore.birthMonth || '--',
  birthDay: userStore.birthDay || '--'
}))

const canSubmit = computed(() => selectedIds.value.length >= 1 && question.value.trim().length > 0)

const relationTypeMap = {
  spouse: '夫妻',
  parent_child: '亲子',
  colleague: '同事',
  friend: '朋友',
  superior: '上下级'
}

function relationTypeLabel(type) {
  return relationTypeMap[type] || type || '未知'
}

onShow(() => {
  fetchRelations()
})

async function fetchRelations() {
  loading.value = true
  try {
    relations.value = await request.post('/relation/list', {})
  } catch (e) {
    relations.value = []
  } finally {
    loading.value = false
  }
}

function toggleRelation(id) {
  const idx = selectedIds.value.indexOf(id)
  if (idx > -1) {
    selectedIds.value.splice(idx, 1)
  } else {
    selectedIds.value.push(id)
  }
}

function goAddRelation() {
  uni.navigateTo({ url: '/pages/relations/add-relation' })
}

async function handleStart() {
  if (!canSubmit.value || submitting.value) return
  submitting.value = true
  try {
    const res = await request.post('/relation/analysis/start', {
      relationIds: selectedIds.value,
      question: question.value.trim()
    })
    if (res && res.id) {
      uni.redirectTo({
        url: '/pages/relations/analysis-chat?recordId=' + res.id
      })
    }
  } catch (e) {
    uni.showToast({ title: '启动分析失败', icon: 'none' })
  } finally {
    submitting.value = false
  }
}
</script>

<style scoped lang="scss">
@import "@/styles/theme.scss";

.page-select {
  min-height: 100vh;
  background: var(--color-bg);
  padding: 16px;
}

.section {
  margin-bottom: 24px;
}
.section-title {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 6px;
}
.section-desc {
  display: block;
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-bottom: 14px;
}

/* Member cards */
.member-card {
  display: flex;
  align-items: center;
  background: var(--color-bg-card);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 10px;
  border: 2px solid transparent;
  transition: border-color 0.2s;
}
.member-card:active {
  transform: scale(0.98);
}
.member-card.selected {
  border-color: var(--color-gold);
  background: linear-gradient(135deg, var(--color-bg-card), rgba(201, 168, 76, 0.06));
}
.self-card {
  border-color: var(--color-brand);
  opacity: 0.85;
}

.member-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 14px;
  flex-shrink: 0;
}
.self-avatar {
  background: var(--color-gold);
}
.avatar-text {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-bg-card);
}

.member-info {
  flex: 1;
  min-width: 0;
}
.member-name {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 3px;
}
.member-detail {
  display: block;
  font-size: 12px;
  color: var(--color-text-secondary);
}

.member-checkbox {
  margin-left: 10px;
  flex-shrink: 0;
}
.checkbox-box {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.checkbox-box.checked {
  background: var(--color-gold);
  border-color: var(--color-gold);
}
.checkbox-icon {
  color: var(--color-bg-card);
  font-size: 12px;
  font-weight: 700;
}

.member-checked {
  margin-left: 10px;
}
.check-icon {
  font-size: 18px;
  color: var(--color-gold);
  font-weight: 700;
}

/* Loading / Empty */
.loading-hint, .empty-hint {
  text-align: center;
  padding: 30px 0;
  font-size: 14px;
  color: var(--color-text-secondary);
}
.link-text {
  color: var(--color-brand);
  font-weight: 600;
  text-decoration: underline;
}

/* Question input */
.input-wrap {
  background: var(--color-bg-card);
  border-radius: 12px;
  padding: 14px;
  border: 1px solid var(--color-border);
}
.question-input {
  width: 100%;
  min-height: 100px;
  font-size: 15px;
  color: var(--color-text-primary);
  line-height: 1.6;
  background: transparent;
}
.input-placeholder {
  color: var(--color-text-secondary);
  font-size: 14px;
}
.char-count {
  display: block;
  text-align: right;
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 4px;
  padding-right: 4px;
}

/* Submit */
.submit-bar {
  position: sticky;
  bottom: 0;
  padding: 12px 0 24px;
  background: var(--color-bg);
}
.btn-submit {
  width: 100%;
  height: 50px;
  background: linear-gradient(135deg, var(--color-brand), darken(var(--color-brand), 4%));
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-submit:active {
  transform: scale(0.97);
  opacity: 0.9;
}
.btn-submit.disabled {
  opacity: 0.5;
  pointer-events: none;
}
.btn-submit-text {
  color: var(--color-bg-card);
  font-size: 17px;
  font-weight: 700;
}
</style>