<script lang="ts" setup>
    import URI from 'urijs'
    import { getExtranetUrl } from '/@/utils/proxy'

    const link = ref<string>('')
    const name = ref<string>('')
    onLoad(({ uri }) => {
        link.value = getExtranetUrl(uri)
        name.value = URI(uri).filename()

        // 设置标题栏为文件名
        uni.setNavigationBarTitle({
            title: decodeURI(name.value),
        })
    })

    const images = computed(() => {
        const size = link.value.replace(/^.*\.P(\d+)\..*$/, '$1')
        if (size === link.value) {
            return []
        }

        return Array(Number(size))
            .fill(0)
            .map((_, index) => ({
                src: `${link.value}.${index + 1}.jpg`,
            }))
    })

    function preview(index: number) {
        uni.previewImage({
            urls: images.value.map((item: { src: string }) => item.src),
            current: index,
        })
    }
</script>

<template>
    <view class="wrap">
        <template v-if="images.length > 0">
            <CacheImage
                class="image"
                v-for="(item, index) in images"
                :key="item.src"
                :src="item.src"
                width="750"
                height="0"
                :radius="0"
                @tap="preview(index)"
            />
        </template>

        <!-- empty -->
        <view class="empty-wrap" v-else>
            <Empty tips="资源不见了~" />
        </view>
    </view>
</template>

<style lang="less" scoped>
    .image {
        height: auto;

        + .image {
            margin-top: 4rpx;
        }
    }

    .empty-wrap {
        height: calc(100vh - 44px - var(--status-bar-height) - env(safe-area-inset-top));
    }
</style>
