<template>
    <view class="codefun-flex-col page">
        <z-paging ref="paging" v-model="pageData.list" @query="queryList">
            <view class="codefun-flex-col group_3">
                <view class="codefun-flex-row codefun-items-center section_2">
                    <image class="image_6" src="/static/images/codefun/6c5c5a3c082b8c60a307d3a7caee623c.png" />
                    <u-input
                        v-model="pageData.param.fileName"
                        placeholder="请输入文件名称搜索"
                        border="none"
                        class="codefun-ml-8"
                        @confirm="handleSearch"
                    />
                </view>

                <!-- 资源列表 - 根据图片样式修改 -->
                <view class="resource-list">
                    <view v-for="(item, index) in pageData.list" :key="index" class="resource-item">
                        <view class="resource-content">
                            <view class="resource-main">
                                <view class="resource-name">{{ item.fileName }}</view>
                                <view class="resource-meta">
                                    <text class="resource-size">{{ item.fileSize }}</text>
                                    <text class="separator">|</text>
                                    <text class="download-count">已下载{{ item.downloadCount || 0 }}次</text>
                                    <text class="separator">|</text>
                                    <text class="upload-time">{{ formatTime(item.createTime) }}</text>
                                </view>
                            </view>
                            <view
                                class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4"
                                @click.stop="handleDownload(item)"
                            >
                                <text class="font_10">下载</text>
                            </view>
                            <!-- <view class="download-section">
                                <view class="download-btn" @click="handleDownload(item)">
                                    <text class="btn-text">下载</text>
                                </view>
                            </view> -->
                        </view>
                    </view>
                </view>

                <!-- 空状态 -->
                <!-- <view class="empty-state" v-if="pageData.list.length === 0">
                    <image class="empty-icon" src="/static/images/empty.png" mode="aspectFit"></image>
                    <text class="empty-text">暂无资源</text>
                </view> -->
            </view>
        </z-paging>
        <!-- 弹窗组件 -->
        <save-dialog
            :show="showDialog"
            :editData="currentEditData"
            @update:show="showDialog = $event"
            @submitSuccess="handleSubmitSuccess"
        />
    </view>
</template>

<script setup>
    import { nextTick, reactive, ref } from 'vue'
    import { onLoad, onNavigationBarButtonTap, onShow } from '@dcloudio/uni-app'
    import * as API from '@/api/model/wode'
    import SaveDialog from './components/save-dialog.vue'

    const isOnePage = ref(true)
    const paging = ref(null)
    const pageData = reactive({
        param: {
            pageNo: 1,
            pageSize: 10,
            fileName: '',
        },
        list: [],
    })

    function getList() {
        if (!paging.value) return
        // API留空，使用模拟数据 - 根据图片内容调整
        API.getResourceList(pageData.param).then((res) => {
            paging.value.complete(res.records)
        })
    }

    function queryList(pageNo, pageSize) {
        pageData.param.pageNo = pageNo
        pageData.param.pageSize = pageSize
        getList()
    }

    function handleSearch() {
        pageData.param.pageNo = 1
        if (paging.value) {
            paging.value.reload()
        }
    }

    const showDialog = ref(false)
    const currentEditData = ref(null)

    onNavigationBarButtonTap((_) => {
        showAddDialog()
    })

    const showAddDialog = () => {
        currentEditData.value = null
        showDialog.value = true
    }

    // 格式化时间显示
    const formatTime = (time) => {
        if (!time) return ''
        // 如果是完整的时间字符串，可以格式化为图片中的样式
        return time.includes(' ') ? time : `${time} 14:00`
    }
    // 下载资源
    const handleDownload = async (resource) => {
        await API.downloadResource({ id: resource.id })
        // 更新下载次数
        const index = pageData.list.findIndex((item) => item.id === resource.id)
        if (index !== -1) {
            pageData.list[index].downloadCount = (pageData.list[index].downloadCount || 0) + 1
        }
        const { downloadResource } = await import('@/utils')

        // 使用封装的下载方法
        const result = await downloadResource(resource)

        if (!result.success) {
            console.error('下载失败:', result.error)
        }
    }

    // 格式化文件大小
    const formatFileSize = (bytes) => {
        if (!bytes) return '125kb'
        const k = 1024
        const sizes = ['B', 'KB', 'MB', 'GB']
        const i = Math.floor(Math.log(bytes) / Math.log(k))
        return parseFloat((bytes / Math.pow(k, i)).toFixed(0)) + sizes[i].toLowerCase()
    }

    const handleSubmitSuccess = () => {
        showDialog.value = false
        // 重新加载数据
        handleSearch()
    }
</script>

<style lang="scss">
    body {
        background: #e6f5e8;
    }

    .page {
        background: #e6f5e8;
        width: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        height: 100%;
    }

    .group_3 {
        padding: 28rpx 24rpx;
    }

    .section_2 {
        padding: 16rpx 20rpx;
        background-color: #ffffff;
        border-radius: 1998rpx;
        margin-bottom: 30rpx;
        box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
    }

    .image_6 {
        width: 32rpx;
        height: 32rpx;
    }

    /* 资源列表样式 - 根据图片样式重写 */
    .resource-list {
        margin-top: 0;
        border-radius: 16rpx;
        background-color: #ffffff;
        box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
        padding: 0 20rpx;
    }

    .resource-item {
        // border-radius: 16rpx;
        // margin-bottom: 20rpx;
        overflow: hidden;
        transition: all 0.3s ease;
        border-bottom: 1px solid #e3e3e3;

        &:active {
            transform: translateY(2rpx);
            box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1);
        }
    }

    .resource-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 24rpx;
    }

    .resource-main {
        flex: 1;
        min-width: 0;
    }

    .resource-name {
        font-size: 32rpx;
        font-weight: 500;
        color: #333333;
        line-height: 1.4;
        margin-bottom: 12rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .resource-meta {
        display: flex;
        align-items: center;
        font-size: 20rpx;
        color: #999999;
        gap: 10rpx;
        flex-wrap: wrap;
    }

    .separator {
        color: #dddddd;
        font-size: 20rpx;
    }

    .resource-size,
    .download-count,
    .upload-time {
        color: #666666;
    }

    .download-section {
        margin-left: 30rpx;
        flex-shrink: 0;
    }

    .download-btn {
        background-color: #5db66f;
        border: none;
        border-radius: 20rpx;
        padding: 12rpx 30rpx;
        min-width: 120rpx;
        transition: all 0.3s ease;

        &::after {
            border: none;
        }

        &:active {
            background-color: #4ca85c;
            transform: scale(0.95);
        }
    }

    .text-wrapper_4 {
        padding: 16rpx 0;
        background-color: #5db66f26;
        border-radius: 400rpx;
        mix-blend-mode: NOTTHROUGH;
        width: 136rpx;
        .font_10 {
            font-size: 24rpx;
            line-height: 24rpx;
            color: #16a34a;
        }
    }

    .btn-text {
        color: #ffffff;
        font-size: 28rpx;
        font-weight: 500;
    }

    .empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 120rpx 0;
        color: #999999;
    }

    .empty-icon {
        width: 160rpx;
        height: 160rpx;
        margin-bottom: 30rpx;
        opacity: 0.6;
    }

    .empty-text {
        font-size: 28rpx;
        color: #999999;
    }

    /* 响应式调整 */
    @media (max-width: 375px) {
        .resource-content {
            padding: 24rpx 20rpx;
        }

        .resource-name {
            font-size: 30rpx;
        }

        .resource-meta {
            font-size: 22rpx;
        }

        .download-btn {
            padding: 10rpx 24rpx;
            min-width: 100rpx;
        }

        .btn-text {
            font-size: 26rpx;
        }
    }
</style>
