<template>
  <scroll-view scroll-y :class="['page-scroll', elderClass]" @scrolltolower="loadMore">
    <view class="page-content">
      <text class="page-title">咨询列表</text>
      <Loading v-if="loading && list.length === 0" text="加载中..." />
      <EmptyState v-else-if="list.length === 0" icon="💬" title="暂无咨询记录" action-text="发起咨询" @action="navigateTo('/pages-sub/consultation/create')" />
      <template v-else>
        <view v-for="item in list" :key="item.id" class="consult-card" @tap="goDetail(item.id)">
          <view class="consult-header">
            <text class="consult-doctor">{{ item.doctor_name || '医生' }}</text>
            <text :class="['consult-status', item.status]">{{ item.status_text || item.status }}</text>
          </view>
          <text class="consult-preview">{{ item.last_message || '暂无消息' }}</text>
          <text class="consult-time">{{ getRelativeTime(item.updated_at) }}</text>
        </view>
      </template>
    </view>
  </scroll-view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { api } from '@/services/request'
import { getRelativeTime } from '@/utils/date'
import Loading from '@/components/Loading.vue'
import EmptyState from '@/components/EmptyState.vue'
import { useElderClass } from '@/composables/useElderClass'

const { elderClass } = useElderClass()
const loading = ref(false)
const list = ref<any[]>([])

function navigateTo(url: string) { uni.navigateTo({ url }) }
function goDetail(id: string) { uni.navigateTo({ url: `/pages-sub/consultation/detail/index?id=${id}` }) }

async function fetchList() {
  loading.value = true
  try { list.value = await api.get<any[]>('/health/consultations') || [] }
  catch { list.value = [] }
  loading.value = false
}

function loadMore() { /* 预留 */ }

onMounted(fetchList)
</script>

<style lang="scss" scoped>
.page-scroll { height: 100vh; background: $bg; }
.page-content { padding: 28px 24px 120px; }
.page-title { @include section-title; }

.consult-card {
  background: $card;
  border-radius: $r;
  padding: 20px 24px;
  margin-bottom: 16px;
  box-shadow: $shadow-sm;
}

.consult-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.consult-doctor {
  font-size: var(--tk-font-body);
  font-weight: 600;
  color: $tx;
}

.consult-status {
  font-size: var(--tk-font-body-sm);
  padding: 4px 12px;
  border-radius: $r-pill;

  &.active { background: $acc-l; color: $acc; }
  &.closed { background: $bd-l; color: $tx3; }
}

.consult-preview {
  display: block;
  font-size: var(--tk-font-body-sm);
  color: $tx2;
  margin-bottom: 8px;
}

.consult-time {
  display: block;
  font-size: var(--tk-font-cap);
  color: $tx3;
}
</style>
