<template>
  <view class="container">
    <view class="tab-bar">
      <view class="tab-item" :class="{ active: currentTab === tab }" v-for="(t, tab) in tabs" :key="tab" @tap="switchTab(tab)">{{ t }}</view>
    </view>

    <view v-if="list.length === 0" class="empty-state">
      <view class="empty-icon">📋</view>
      <view>暂无预约记录</view>
    </view>

    <view v-for="item in list" :key="item.id" class="card list-card" @tap="goDetail(item)">
      <view class="card-header">
        <view class="item-name">{{ item.examination_item_name || item.examination_item_name }}</view>
        <view class="status-tag" :class="getStatusClass(item.status !== undefined ? item.status : (item.appointment_status || 0))">
          {{ getStatusText(item.status !== undefined ? item.status : (item.appointment_status || 0)) }}
        </view>
      </view>
      <view class="info-row" v-if="item.appointment_time">
        <text class="info-label">预约时间</text>
        <text class="info-value highlight">{{ formatTime(item.appointment_time) }}</text>
      </view>
      <view class="info-row">
        <text class="info-label">执行科室</text>
        <text class="info-value">{{ item.examination_department_name || '-' }}</text>
      </view>
      <view class="info-row">
        <text class="info-label">申请时间</text>
        <text class="info-value">{{ formatTime(item.apply_time || item.created_at) }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import { getApplicationList } from '../../services/application'
import { formatTime, getStatusText, getStatusClass } from '../../utils/format'

export default {
  data() {
    return {
      tabs: ['全部', '待检查', '已完成', '已取消'],
      currentTab: 0,
      list: []
    }
  },
  onShow() { this.loadData() },
  onPullDownRefresh() { this.loadData().finally(() => uni.stopPullDownRefresh()) },
  methods: {
    formatTime, getStatusText, getStatusClass,
    switchTab(idx) { this.currentTab = idx; this.loadData() },
    async loadData() {
      try {
        // 全部 = 不传status, 然后过滤
        const res = await getApplicationList({})
        let all = res.data.list || []
        // tab: 0全部, 1已预约(待检查), 2已完成, 4已取消
        if (this.currentTab === 0) {
          this.list = all
        } else {
          const statusMap = { 1: [1, 2], 2: [3], 3: [4] }
          this.list = all.filter(i => (statusMap[this.currentTab] || []).includes(i.status))
        }
      } catch (e) { this.list = [] }
    },
    goDetail(item) {
      uni.navigateTo({ url: `/pages/application/detail?id=${item.id}` })
    }
  }
}
</script>

<style scoped>
.tab-bar { display: flex; background: #FFF; border-radius: 16rpx; padding: 8rpx; margin-bottom: 20rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
.tab-item { flex: 1; text-align: center; padding: 18rpx 0; font-size: 28rpx; color: #666; border-radius: 12rpx; }
.tab-item.active { background: #2B7FD2; color: #FFF; font-weight: 600; }
.list-card { padding: 28rpx 30rpx; }
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16rpx; }
.item-name { font-size: 32rpx; font-weight: 600; color: #333; flex: 1; }
.info-row { display: flex; justify-content: space-between; padding: 6rpx 0; font-size: 26rpx; }
.info-label { color: #999; }
.info-value { color: #333; }
.highlight { color: #2B7FD2; font-weight: 500; }
</style>
