<template>
    <view class="page">
        <view class="borrow-list">
            <view v-for="item in borrowList.filter(item => !item.isReturn)" :key="item.borrowId || item.id"
                class="borrow-item card">

                <view class="item-header">
                    <text class="asset-name">{{ item.assetName }}</text>
                    <!-- <button class="btn btn-primary outline" @tap="button_returnAsset(item)">归还</button> -->
                </view>
                <view class="detail">借用日期：{{ item.borrowDate }}</view>
                <view class="detail">预计归还日期：{{ item.returnDate }}</view>
                <view class="detail">借用人：{{ item.borrowerName }}（{{ item.borrowerMobile }}）</view>
                <view class="detail">出借人：{{ item.lenderName }}（{{ item.lenderMobile }}）</view>
                <view class="detail">备注：{{ item.note || '无' }}</view>
            </view>
        </view>
        <view class="empty" v-if="borrowList.length === 0">暂无更多数据</view>
    </view>
</template>

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

const borrowList = ref<any[]>([])
const userInfo = uni.getStorageSync('staff') || {}

onLoad(() => { loadBorrowList() })

onShow(() => { loadBorrowList() })

function loadBorrowList() {
    if (!userInfo?.id) {
        borrowList.value = []
        return
    }
    borrowInfo(userInfo.id)
        .then((res: any) => { borrowList.value = res?.data || [] })
        .catch((err: any) => {
            console.error(err)
            uni.showToast({ title: '加载失败', icon: 'none' })
        })
}

function button_returnAsset(item: any) {
    uni.showModal({
        content: '确认归还？',
        success: async (r) => {
            if (r.confirm) {
                try {
                    await returnAsset(item.assetId)
                    uni.showToast({ title: '归还成功', icon: 'success' })
                    loadBorrowList()
                } catch (e) {
                    uni.showToast({ title: '归还失败', icon: 'none' })
                }
            }
        }
    })
}
</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);
}

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

.borrow-item {
    padding: 20rpx;
}

.item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8rpx;
}

.asset-name {
    font-size: 30rpx;
    color: #222;
    font-weight: 600;
    flex: 1;
}

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

.btn {
    padding: 0 20rpx;
    background: #e9efff;
    color: #3a5ddd;
    border-radius: 10rpx;
    font-size: 24rpx;
}

.btn-primary {
    background: #3a5ddd;
    color: #fff;
}

.btn-primary.outline {
    background: #fff;
    color: #3a5ddd;
    border: 2rpx solid #3a5ddd;
}

.empty {
    text-align: center;
    color: #9a9aa0;
    margin-top: 40rpx;
}
</style>
