<template>
    <global-page
        title="文件预览"
        isDataList
        refresherEnabled
        loadingMoreEnabled
        localPaging
        auto
        :pageSize="20"
        :params="{ path: query.path }"
        :api="getFileListApi"
        :padding="24"
        :transformData="transformData"
    >
        <template #default="{ item }">
            <view class="file" @tap="handleClick(item)">
                <view class="file-left">
                    <template v-if="['image', 'png', 'jpg', 'jpeg', 'gif'].includes(item.type)">
                        <image src="/static/mocp/image/common/image.png" mode="widthFix" />
                    </template>
                    <template v-else-if="['video', 'mp4'].includes(item.type)">
                        <image src="/static/mocp/image/common/video.png" mode="widthFix" />
                    </template>
                    <template v-else-if="['pdf'].includes(item.type)">
                        <image src="/static/mocp/image/common/pdf.png" mode="widthFix" />
                    </template>
                    <template v-else-if="['ppt', 'txt'].includes(item.type)">
                        <image src="/static/mocp/image/common/ppt.png" mode="widthFix" />
                    </template>
                    <template v-else-if="['folder'].includes(item.type)">
                        <image src="/static/mocp/image/common/folder.png" mode="widthFix" style="width: 60rpx" />
                    </template>
                    <template v-else-if="['mel'].includes(item.type)">
                        <image src="/static/mocp/image/common/mel.png" mode="widthFix" />
                    </template>
                    <template v-else>
                        <image src="/static/mocp/image/common/unknown.png" mode="widthFix" />
                    </template>
                    <text class="txt">{{ item.name }}</text>
                </view>
                <view class="file-right">
                    <view class="circle">
                        <up-icon name="arrow-right" :size="10" color="#86909C"></up-icon>
                    </view>
                </view>
            </view>
        </template>
    </global-page>
</template>

<script setup>
import { getFileListApi } from 'mocp/api/fileList'
import { handleClick, transformData } from './constants/index.functionals'

const query = defineProps(['path'])
</script>
<style lang="scss" scoped>
.file {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32rpx;
    margin-bottom: 24rpx;
    border: 1px solid rgba(0, 0, 0, 0.06);
    &-left {
        display: flex;
        justify-content: space-between;
        align-items: center;
        image {
            width: 40rpx;
        }
        .txt {
            font-size: 34rpx;
            color: $mocp-text-5;
            margin-left: 24rpx;
        }
    }
    &-right {
        .circle {
            border-radius: 50%;
            background-color: #e5e5e5;
            width: 32rpx;
            height: 32rpx;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}
</style>
