<template>
  <scroll-view scroll-y class="page">
    <view v-if="planList.length === 0 && !loading" class="empty">暂无更多数据</view>

    <view v-for="plan in planList" :key="plan.id" class="plan-card">
      <view class="plan-header">
        <text class="plan-title">{{ plan.planTitle }}</text>
        <text class="plan-action" @tap="goToDistribution(plan.id)">发放物资</text>
      </view>

      <view class="plan-info">
        <view class="info-item">
          <text class="label">医院：</text>
          <text class="value">{{ plan.hospName }}</text>
        </view>
        <view class="info-item">
          <text class="label">周期类型：</text>
          <text class="value">{{ plan.periodType }}</text>
        </view>
        <view class="info-item">
          <text class="label">发放数量：</text>
          <text class="value">{{ plan.quantityPerPeriod }}</text>
        </view>
      </view>

      <view class="plan-time">
        <view class="info-item">
          <text class="label">上次分配：</text>
          <text class="value">{{ plan.lastDistributionDate || '-' }}</text>
        </view>
        <view class="info-item">
          <text class="label">下次分配：</text>
          <text class="value">{{ plan.nextDistributionDate || '-' }}</text>
        </view>
      </view>

      <view class="plan-footer">
        <text class="created">创建人：{{ plan.createdByName }}（{{ plan.createdByMobile }}）</text>
        <text class="time">创建时间：{{ plan.createdTime }}</text>
      </view>
    </view>

    <view class="load-status">
      <text v-if="loading">加载中...</text>
      <text v-else-if="noMore">没有更多数据了</text>
    </view>
  </scroll-view>
  
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
// @ts-ignore JS模块无类型声明
import * as api from '@/pages/api/fixedAssets.js'

type PlanItem = Record<string, any>

const planList = ref<PlanItem[]>([])
const page = ref(1)
const pageSize = ref(10)
const loading = ref(false)
const noMore = ref(false)

function resetAndLoad() {
  planList.value = []
  page.value = 1
  noMore.value = false
  getPlan()
}

async function getPlan() {
  if (loading.value || noMore.value) return
  loading.value = true
  try {
    const staff = uni.getStorageSync('staff') || {}
    const hospId = staff.hosp_id || staff.hospId || 0
    // API 兼容多返回格式
    const res = await api.getPlanInfo(hospId, page.value, pageSize.value)
    const list: any[] = (res?.data?.records)
      || (res?.data?.list)
      || (Array.isArray(res?.data) ? res.data : [])
      || []
    planList.value = planList.value.concat(list)
    if (list.length < pageSize.value) noMore.value = true
  } catch (e) {
    console.error('获取易耗品领用计划失败', e)
    uni.showToast({ title: '加载失败', icon: 'none' })
  } finally {
    loading.value = false
  }
}

function goToDistribution(id: string | number) {
  if (!id && id !== 0) {
    uni.showToast({ title: '缺少计划ID', icon: 'none' })
    return
    }
  uni.navigateTo({ url: `/pages/consumables/distribution?id=${id}` })
}

onLoad(() => {
  resetAndLoad()
})

onReachBottom(() => {
  if (!loading.value && !noMore.value) {
    page.value += 1
    getPlan()
  }
})
</script>

<style scoped>
.page {
  min-height: 100vh;
  padding: 24rpx;
  background: #f5f7fb;
  box-sizing: border-box;
}
.empty {
  color: #9a9aa0;
  text-align: center;
  padding: 24rpx 0;
}
.plan-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 16rpx;
  box-shadow: 0 6rpx 16rpx rgba(0,0,0,0.06);
}
.plan-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12rpx;
}
.plan-title {
  font-size: 30rpx;
  color: #222;
  font-weight: 600;
}
.plan-action {
  font-size: 26rpx;
  color: #4b7aff;
}
.plan-info, .plan-time {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12rpx;
  margin-bottom: 8rpx;
}
.info-item { color: #444; }
.label { color: #888; }
.value { color: #333; }
.plan-footer { color: #666; font-size: 24rpx; display: flex; flex-direction: column; gap: 6rpx; }
.load-status { text-align: center; color: #9a9aa0; padding: 20rpx 0; }
</style>
