<template>
  <scroll-view scroll-y :class="['page-scroll', elderClass]">
    <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/appointment/create/index')" />
      <template v-else>
        <view v-for="item in list" :key="item.id" class="appt-card">
          <view class="appt-header">
            <text class="appt-doctor">{{ item.doctor_name || '医生' }}</text>
            <text :class="['appt-status', item.status]">{{ item.status_text || item.status }}</text>
          </view>
          <text class="appt-time">{{ formatDate(item.appointment_time, 'YYYY-MM-DD HH:mm') }}</text>
          <text class="appt-dept">{{ item.department || '' }}</text>
        </view>
      </template>

      <!-- 新建预约按钮 -->
      <view class="create-btn" @tap="navigateTo('/pages-sub/appointment/create/index')">
        新建预约
      </view>
    </view>
  </scroll-view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { api } from '@/services/request'
import { formatDate } 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 }) }

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

onMounted(fetchList)
</script>

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

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

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

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

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

  &.confirmed { background: $acc-l; color: $acc; }
  &.pending { background: $wrn-l; color: $wrn; }
  &.cancelled { background: $bd-l; color: $tx3; }
}

.appt-time {
  display: block;
  font-size: var(--tk-font-body-sm);
  color: $tx2;
  margin-bottom: 4px;
}

.appt-dept {
  display: block;
  font-size: var(--tk-font-cap);
  color: $tx3;
}

.create-btn {
  @include btn-primary;
  margin-top: 28px;
}
</style>
