<template>
  <scroll-view scroll-y class="page">
    <!-- 加载骨架屏 -->
    <view v-if="loading" class="skeleton-list">
      <view class="card skeleton" v-for="n in 3" :key="n">
        <view class="skeleton-line w-70"></view>
        <view class="skeleton-line w-40"></view>
        <view class="skeleton-line w-90"></view>
      </view>
    </view>

    <!-- 列表内容 -->
    <view v-else>
      <view v-if="planList.length === 0" class="empty">暂无数据</view>

      <view v-for="plan in planList" :key="plan.id" class="card plan-card">
        <!-- 头部：标题 + 操作 -->
        <view class="card-header">
          <text class="plan-title ellipsis-1">{{ plan.planTitle }}</text>
          <text class="plan-action" @tap="goToDistribution(plan.id)">发放物资</text>
        </view>

        <!-- 关键指标：数量 + 周期类型 -->
        <view class="key-meta">
          <view class="meta-block">
            <text class="meta-label">发放数量</text>
            <text class="meta-value number">{{ plan.quantityPerPeriod }}</text>
          </view>
          <view class="meta-block">
            <text class="meta-label">周期类型</text>
            <text class="meta-value tag">{{ plan.periodType }}</text>
          </view>

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

        <!-- 底部信息 -->
        <view class="plan-footer">
          <text class="hosp ellipsis-1">医院：{{ plan.hospName }}</text>
          <text class="created ellipsis-1">创建人：{{ plan.createdByName }}（{{ plan.createdByMobile }}）</text>
          <text class="time ellipsis-1">创建时间：{{ plan.createdTime }}</text>
        </view>
      </view>

      <view class="load-status" v-if="noMore && planList.length > 0">没有更多数据了</view>
    </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;
}

.card {
  background: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 16rpx;
  box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.06);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12rpx;
}

.plan-title {
  font-size: 32rpx;
  color: #222;
  font-weight: 600;
}

.plan-action {
  font-size: 26rpx;
  color: #4b7aff;
  padding: 8rpx 16rpx;
  border: 2rpx solid #4b7aff;
  border-radius: 999rpx;
}

.key-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16rpx;
  margin: 8rpx 0 12rpx;
}

.meta-block {
  background: #f7f9ff;
  border-radius: 12rpx;
  padding: 16rpx;
}

.meta-label {
  display: block;
  color: #8a8f99;
  font-size: 22rpx;
  margin-bottom: 6rpx;
}

.meta-value {
  color: #333;
  font-size: 28rpx;
}

.meta-value.number {
  color: #e53935;
  font-weight: 700;
  font-size: 36rpx;
}

.meta-value.tag {
  display: inline-flex;
  align-items: center;
  padding: 2rpx 12rpx;
  background: #eff3ff;
  color: #4b7aff;
  border-radius: 999rpx;
  font-size: 26rpx;
}

.detail {
  margin: 8rpx 0;
}

.detail-row {
  display: flex;
  align-items: flex-start;
  margin: 8rpx 0;
}

.label {
  color: #888;
  min-width: 140rpx;
}

.value {
  color: #333;
}

.time-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12rpx;
  margin-top: 4rpx;
}

.time-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6rpx;
  background: #fafafa;
  border-radius: 10rpx;
  padding: 12rpx;
}

.time-label {
  color: #8a8f99;
  font-size: 22rpx;
}

.time-value {
  color: #333;
  font-size: 24rpx;
}

.plan-footer {
  color: #666;
  font-size: 24rpx;
  display: flex;
  flex-direction: column;
  gap: 6rpx;
  margin-top: 6rpx;
}

.load-status {
  text-align: center;
  color: #9a9aa0;
  padding: 20rpx 0;
}

.ellipsis-1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 骨架屏样式 */
.skeleton-list .card {
  overflow: hidden;
}

.skeleton {
  position: relative;
}

.skeleton::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.04) 50%, rgba(0, 0, 0, 0) 100%);
  animation: shimmer 1.2s infinite;
}

.skeleton-line {
  height: 28rpx;
  background: #f0f2f5;
  border-radius: 8rpx;
  margin: 14rpx 0;
}

.skeleton-line.w-70 {
  width: 70%;
}

.skeleton-line.w-40 {
  width: 40%;
}

.skeleton-line.w-90 {
  width: 90%;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}
</style>
