<template>
    <scroll-view scroll-y class="page">
        <!-- 搜索栏 -->
        <view class="search-sticky">
            <view class="search-bar">
                <text class="search-label">领用小组</text>
                <input
                    class="search-input"
                    v-model.trim="keyword"
                    type="text"
                    confirm-type="search"
                    placeholder="输入小组名称筛选"
                    @confirm="onSearchConfirm"
                />
                <button v-if="keyword" size="mini" class="clear-btn" @tap="clearKeyword">清除</button>
            </view>
            <view class="search-meta">
                <text class="meta-chip">共 {{ detailPlan.length }} 条</text>
                <text v-if="keyword" class="meta-dot">·</text>
                <text v-if="keyword" class="meta-chip accent">筛选出 {{ filteredPlan.length }} 条</text>
            </view>
        </view>

        <!-- 加载骨架屏 -->
        <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-for="item in filteredPlan" :key="item.Id || item.id" class="card">
                <!-- 卡片头部：名称 + 状态 -->
                <view class="card-header">
                    <text class="goods-name">{{ item.goodsName }}</text>
                    <view class="status-badge" :class="item.isDistributed == 0 ? 'pending' : 'done'">
                        <text>{{ item.isDistributed == 0 ? '待领用' : '已领用' }}</text>
                    </view>
                </view>

                <!-- 关键指标：数量、组别 -->
                <view class="key-meta">
                    <view class="meta-block">
                        <text class="meta-label">发放数量</text>
                        <text class="meta-value number">{{ item.actualQuantity }}</text>
                    </view>
                    <view class="meta-block">
                        <text class="meta-label">领用小组</text>
                        <text class="meta-value tag">{{ item.groupName }}</text>
                    </view>
                </view>

                <!-- 详细信息 -->
                <view class="detail">
                    <view class="detail-row">
                        <text class="label">备注</text>
                        <text class="value ellipsis-2">{{ item.notes || '无' }}</text>
                    </view>
                    <view class="detail-row">
                        <text class="label">发放计划</text>
                        <text class="value">{{ item.planTitle }}</text>
                    </view>
                    <view class="detail-row">
                        <text class="label">领用时间</text>
                        <text class="value">{{ item.getTime ?? '-' }}</text>
                    </view>
                </view>

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

            <view v-if="!loading && filteredPlan.length === 0 && detailPlan.length > 0" class="empty">未找到匹配的小组</view>
        </view>

        <view v-if="!loading && detailPlan.length === 0" class="empty">暂无数据</view>
    </scroll-view>
</template>

<script setup lang="ts">
import { ref, computed } 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>('')
const keyword = ref('')

const filteredPlan = computed<Item[]>(() => {
    const kw = keyword.value.trim().toLowerCase()
    if (!kw) return detailPlan.value
    return detailPlan.value.filter((i: any) => String(i?.groupName ?? '').toLowerCase().includes(kw))
})

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' })
                }
            }
        }
    })
}

function clearKeyword() {
    keyword.value = ''
}

function onSearchConfirm() {
    // 保留占位，若后续需要联动键盘收起等，可在此处理
}

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;
}

.search-sticky {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #f5f7fb;
    padding-bottom: 16rpx;
}

.search-bar {
    display: flex;
    align-items: center;
    gap: 16rpx;
    background: #fff;
    border-radius: 999rpx;
    padding: 12rpx 16rpx;
    box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.06);
}

.search-label {
    color: #666;
    font-size: 26rpx;
    margin-left: 8rpx;
}

.search-input {
    flex: 1;
    height: 64rpx;
    line-height: 64rpx;
    padding: 0 8rpx;
    border: none;
    outline: none;
    font-size: 28rpx;
    background: transparent;
}

.clear-btn {
    margin: 0;
    border-radius: 24rpx;
    background: #eff3ff;
    color: #4b7aff;
}

.search-meta {
    margin-top: 10rpx;
    display: flex;
    align-items: center;
    gap: 8rpx;
    padding: 0 8rpx;
}

.meta-chip {
    color: #8a8f99;
    font-size: 24rpx;
}

.meta-chip.accent {
    color: #4b7aff;
}

.meta-dot {
    color: #c0c4cc;
}

.card {
    background: #fff;
    border-radius: 16rpx;
    padding: 20rpx;
    margin: 16rpx 0;
    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;
}

.goods-name {
    font-size: 32rpx;
    font-weight: 600;
    color: #222;
}

.status-badge {
    padding: 4rpx 12rpx;
    border-radius: 999rpx;
    font-size: 22rpx;
}

.status-badge.pending {
    background: #fff4e5;
    color: #ff9800;
}

.status-badge.done {
    background: #e8f5e9;
    color: #2e7d32;
}

.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-top: 8rpx;
}

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

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

.value {
    color: #333;
}

.ellipsis-2 {
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

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

.done-text {
    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;
}

/* 骨架屏样式 */
.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>
