<template>
    <view 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="!inventoryPlanList.length" class="empty">暂无数据</view>

            <view class="inventory-list">
                <view class="inventory-item card" v-for="item in inventoryPlanList" :key="item.inventoryPlanId">
                    <view class="left">
                        <!-- 头部：标题 + 状态徽章 -->
                        <view class="card-header">
                            <text class="title ellipsis-1">📋 盘点计划</text>
                            <text class="status-badge" :class="statusClass(item.status)">{{ item.status || '未知'
                            }}</text>
                        </view>

                        <!-- 关键指标：开始/结束日期 -->
                        <view class="key-meta">
                            <view class="meta-block">
                                <text class="meta-label">开始日期</text>
                                <text class="meta-value">{{ item.inventoryStartDate || '-' }}</text>
                            </view>
                            <view class="meta-block">
                                <text class="meta-label">结束日期</text>
                                <text class="meta-value">{{ item.inventoryEndDate || '-' }}</text>
                            </view>
                        </view>

                        <!-- 详情：盘点人、备注 -->
                        <view class="detail">
                            <view class="detail-row">
                                <text class="label">盘点人</text>
                                <text class="value ellipsis-1">{{ item.inventoryManName || '-' }}</text>
                            </view>
                            <view class="detail-row">
                                <text class="label">备注</text>
                                <text class="value ellipsis-2">{{ item.note || '无' }}</text>
                            </view>
                        </view>
                    </view>

                    <!-- 右侧预览图（仅当有图片时显示） -->
                    <view class="preview" v-if="item.image" @click="previewImage(item.image)">
                        <image class="preview-img" :src="'data:image/png;base64,' + item.image" mode="aspectFill" />
                    </view>

                    <view class="action">
                        <view class="chevron-link" @tap="gotoPlanDetail(item)">
                            <svg class="chevron-icon" viewBox="0 0 24 24" aria-hidden="true">
                                <path d="M9 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </view>
                    </view>
                </view>

            </view>

            <view class="load-status" v-if="noMore && inventoryPlanList.length">没有更多数据了</view>
        </view>
    </view>
</template>

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

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

function statusClass(status?: string) {
    if (status === '已结束') return 'ended'
    if (status === '正在进行') return 'running'
    return 'unknown'
}

onLoad(() => { fetchInventoryList() })

onReachBottom(() => {
    if (!loading.value && !noMore.value) { page.value++; fetchInventoryList() }
})

async function fetchInventoryList() {
    loading.value = true
    try {
        const data: any = await getInventoryPlan(page.value, pageSize.value)
        const list = data?.data?.list || []
        if (list.length < pageSize.value) noMore.value = true
        console.log(list);

        inventoryPlanList.value = inventoryPlanList.value.concat(list)
    } catch (e) {
        console.error('获取数据失败', e)
    } finally {
        loading.value = false
    }
}

function gotoPlanDetail(item: any) {
    const id = item.inventoryPlanId || item.inventoryId || item.id
    if (!id) return
    if (item.status === '已结束') {
        uni.navigateTo({ url: `/pages/fixed-assets/inventory-end?planId=${id}` })
    } else if (item.status === '正在进行') {
        uni.navigateTo({ url: `/pages/fixed-assets/inventory-ing?planId=${id}` })
    } else {
        // 未知状态，默认当进行中处理
        uni.navigateTo({ url: `/pages/fixed-assets/inventory-ing?planId=${id}` })
    }
}

function previewImage(imageBase64: string) {
    if (!imageBase64) {
        uni.showToast({ title: '无图片可预览', icon: 'none' })
        return
    }
    uni.previewImage({
        urls: ['data:image/png;base64,' + imageBase64],
        current: 'data:image/png;base64,' + imageBase64
    })
}
</script>

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

.card {
    background: #fff;
    border-radius: 20rpx;
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06);
}

.inventory-list {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
}

.inventory-item {
    padding: 20rpx;
    display: flex;
    align-items: stretch;
    /* 让左右两侧等高，右侧图片可拉满高度 */
    gap: 16rpx;
}

.left {
    /* 左侧内容占据剩余空间 */
    flex: 1 1 auto;
    min-width: 0;
}

.preview {
    /* 固定宽度的预览区域，避免占满 */
    flex: 0 0 220rpx;
    width: 220rpx;
    display: flex;
    /* 使内部图片可以 100% 拉伸 */
}

.header {
    margin-bottom: 8rpx;
}

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

/* 卡片头与状态徽章 */
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10rpx;
}

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

.status-badge.running {
    color: #1e88e5;
    background: #e3f2fd;
}

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

.status-badge.unknown {
    color: #757575;
    background: #eeeeee;
}

/* 关键指标与详情 */
.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;
}

.detail {
    margin-top: 8rpx;
}

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

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

.value {
    color: #333;
}

/* 操作区 */
.action {
    display: flex;
    align-items: center;
    justify-content: center;
}


/* 简约右箭头点击区域 */
.chevron-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48rpx;
    height: 48rpx;
    border-radius: 50%;
    background: #f1f3f9;
}

.chevron-icon {
    width: 32rpx;
    height: 32rpx;
    color: #86909c;
}

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

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

.value {
    color: #333;
}

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

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

/* 右侧图片自适应填满容器，保持裁剪 */
.preview-img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    display: block;
    object-fit: cover;
    /* H5 有效；小程序端由 mode=aspectFill 生效 */
    border-radius: 12rpx;
}

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

.skeleton {
    position: relative;
    padding: 20rpx;
    margin-bottom: 16rpx;
}

.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>
