<template>
    <scroll-view scroll-y class="page">
        <view v-for="item in detailPlan" :key="item.Id || item.id" class="item-card">
            <view class="row"><text class="label">物资名称：</text><text class="value">{{ item.goodsName }}</text></view>
            <view class="row"><text class="label">发放数量：</text><text class="value highlight">{{ item.actualQuantity
                    }}</text></view>
            <view class="row"><text class="label">领用小组：</text><text class="value">{{ item.groupName }}</text></view>
            <view class="row"><text class="label">备注：</text><text class="value">{{ item.notes || '无' }}</text></view>
            <view class="row"><text class="label">发放计划：</text><text class="value">{{ item.planTitle }}</text></view>

            <view class="action">
                <button v-if="item.isDistributed == 0" size="mini" class="primary" @tap="reciept(item)">领用</button>
                <view v-else class="done">已领用</view>
            </view>
        </view>

        <view v-if="detailPlan.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 { getConsumptionDetail, consumptonConfirm } from '@/pages/api/fixedAssets.js'

type Item = Record<string, any>

const detailPlan = ref<Item[]>([])
const loading = ref(false)
const planId = ref<string | number>('')

async function loadDetail(id: string | number) {
    loading.value = true
    try {
        const res = await getConsumptionDetail(id)
        const list: any[] = (res?.data?.records)
            || (res?.data?.list)
            || (Array.isArray(res?.data) ? res.data : [])
            || []
        detailPlan.value = list
    } catch (e) {
        console.error('获取发放详情失败', e)
        uni.showToast({ title: '加载失败', icon: 'none' })
    } finally {
        loading.value = false
    }
}

async function reciept(item: any) {
    uni.showModal({
        content: '确认领用？',
        success: async (res: any) => {
            if (res.confirm) {
                try {
                    const r = await consumptonConfirm(item.id || item.Id)
                    const code = r?.code ?? r?.data?.code
                    if (code === 0) {
                        await loadDetail(planId.value)
                        uni.showToast({ title: '领用成功', icon: 'success' })
                    } else {
                        uni.showToast({ title: '领用失败', icon: 'none' })
                    }
                } catch (err) {
                    uni.showToast({ title: '领用失败', icon: 'none' })
                }
            }
        }
    })
}

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

<style scoped>
.page {
    min-height: 100vh;
    padding: 24rpx;
    background: #f5f7fb;
    box-sizing: border-box;
}

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

.row {
    display: flex;
    align-items: center;
    margin-bottom: 8rpx;
}

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

.value {
    color: #333;
}

.highlight {
    color: #e53935;
    font-weight: 600;
}

.action {
    margin-top: 10rpx;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.done {
    color: #2e7d32;
    font-size: 24rpx;
}

.empty {
    color: #9a9aa0;
    text-align: center;
    padding: 24rpx 0;
}

button.primary {
    background: #4b7aff;
    color: #fff;
    border-radius: 8rpx;
    padding: 0rpx 24rpx;
    margin: 0;
}
</style>
