<template>
  <scroll-view scroll-y class="page">
    <view v-for="item in detailList" :key="item.id" class="card">
      <view class="head">{{ item.goodsName }}</view>
      <view class="body">
        <view class="row">📦 盘点数量：<text class="value">{{ item.quantity }}</text></view>
        <view class="row">📅 盘点日期：<text class="value">{{ item.checkDate }}</text></view>
        <view class="row">👤 盘点人：<text class="value">{{ item.checkManName }}</text></view>
        <view class="row">📞 盘点人电话：<text class="value">{{ item.checkManMobile }}</text></view>
        <view class="row">结果：
          <text class="result lose" v-if="item.checkResult==0">盘亏</text>
          <text class="result normal" v-else-if="item.checkResult==1">账实相符</text>
          <text class="result win" v-else-if="item.checkResult==2">盘盈</text>
          <text class="result unknown" v-else>未知</text>
        </view>
      </view>
    </view>
    <view v-if="detailList.length===0 && !loading" class="empty">暂无更多数据</view>
  </scroll-view>
</template>

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

const detailList = ref<any[]>([])
const loading = ref(false)

async function loadList(planId: string | number) {
  loading.value = true
  try {
    const res = await getConsumpationInventoryDetailEnd(planId)
    const list: any[] = (res?.data?.list) || (res?.data?.records) || (Array.isArray(res?.data) ? res.data : []) || []
    detailList.value = list
  } catch (e) {
    console.error(e)
    uni.showToast({ title: '加载失败', icon: 'none' })
  } finally {
    loading.value = false
  }
}

onLoad((query) => {
  const planId = query?.planId
  if (!planId) {
    uni.showToast({ title: '缺少计划ID', icon: 'none' })
    return
  }
  loadList(planId)
})
</script>

<style scoped>
.page { min-height: 100vh; padding: 24rpx; background: #f5f7fb; box-sizing: border-box;}
.card { background: #fff; border-radius: 16rpx; padding: 20rpx; margin-bottom: 16rpx; box-shadow: 0 6rpx 16rpx rgba(0,0,0,0.06); }
.head { font-size: 30rpx; color: #222; font-weight: 600; margin-bottom: 10rpx; }
.row { margin: 6rpx 0; color: #444; }
.value { color: #333; }
.result { padding: 2rpx 8rpx; border-radius: 999rpx; font-size: 22rpx; }
.lose { color: #e53935; background: #ffebee; }
.normal { color: #2e7d32; background: #e8f5e9; }
.win { color: #1e88e5; background: #e3f2fd; }
.unknown { color: #757575; background: #eeeeee; }
.empty { color: #9a9aa0; text-align: center; padding: 24rpx 0; }
</style>
