<template>
    <view class="page">
        <view class="load-status" v-if="!inventoryPlanList.length && !loading">没有更多数据了</view>
        <view class="inventory-list">
            <view class="inventory-item card" v-for="item in inventoryPlanList" :key="item.inventoryPlanId">
                <view class="left" @tap="gotoPlanDetail(item)">
                    <view class="header"><text class="title">📋 盘点计划</text></view>
                    <view class="content">
                        <view class="row">开始日期：<text class="value">{{ item.inventoryStartDate }}</text></view>
                        <view class="row">结束日期：<text class="value">{{ item.inventoryEndDate }}</text></view>
                        <view class="row">盘点人：<text class="value">{{ item.inventoryManName }}</text></view>
                        <view class="row">备注：<text class="value">{{ item.note || '无' }}</text></view>
                    </view>
                    <view class="status">计划状态：<text class="value">{{ item.status || '无' }}</text></view>
                </view>
                <view class="preview" @click="previewImage(item.image)">
                    <image class="preview-img" :src="'data:image/png;base64,' + item.image" mode="aspectFill" />
                </view>

            </view>
        </view>
        <view class="load-status">
            <text v-if="loading">加载中...</text>
            <text v-else-if="noMore && inventoryPlanList.length">没有更多数据了</text>
        </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[]>([])

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: 0 0 auto;
    min-width: 0;
}

.preview {
    /* 占据剩余空间 */
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    /* 使内部图片可以 100% 拉伸 */
}

.header {
    margin-bottom: 8rpx;
}

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

.content .row {
    font-size: 24rpx;
    color: #666;
    margin-top: 6rpx;
}

.status {
    font-size: 24rpx;
    color: #333;
    margin-top: 10rpx;
}

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

.value {
    color: #333;
}

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