<template>
    <Header backgroundBox="white" :showTitle="true" title="图组详情" v-show="showHeader"></Header>
    <div class="container" v-if="catalog">
        <div class="atlas">
            <div class="list">
                <div class="item" v-for="(item, index) in catalog.enclosureList" :key="index">
                    <img :src="fileDomain + item.compressPath" @click="handlePreviewImage(index)">
                </div>
            </div>
        </div>
    </div>
    <van-empty description="暂无数据" v-else />
    <van-image-preview v-model:show="showPicList" :images="previewImages" @change="onChange" @close="onClose"
        :start-position="index">
        <template v-slot:index>
            <div class="pagebox">{{ index + 1 }}/{{ previewImages.length }}</div>
            <div class="infobox">
                <div class="iconbox" @click="handleViewDetail">
                    <img src="@/static/image/info.png" class="icon" />
                    <span class="title">信息</span>
                </div>
                <div class="iconbox" @click="handleDownload">
                    <img src="@/static/image/download.png" class="icon" />
                    <span class="title">{{ convertSize(catalog.enclosureList[index].fileSize) }}</span>
                </div>
            </div>
        </template>
    </van-image-preview>
    <van-popup v-model:show="showPop" position="bottom" round @close="handleClose">
        <div class="info">
            <div class="header">
                <span class="title">图片详情</span>
                <van-icon name="cross" size="30rpx" color="#707070" @click="handleClose" />
            </div>
            <div class="content">
                <div class="item">
                    <span class="label">图片名称:</span>
                    <span class="value">{{ catalog.enclosureList[index].enclosureDesc }}</span>
                </div>
                <div class="item">
                    <span class="label">标签信息:</span>
                    <div class="tagbox">
                        <div class="tag" v-for="(tagName, index) in catalog.tagName.split(',')" :key="index">{{ tagName
                            }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="bottom">
                <span class="title">图组信息:</span>
                <div class="card">
                    <div class="top">
                        <div class="userbox">
                            <img class="image" src="@/static/image/avatar.png" mode="aspectFill" />
                            <span class="name">{{ catalog.author }}</span>
                        </div>
                        <van-button icon="plus" type="primary" size="small">收藏</van-button>
                    </div>
                    <div class="detail">
                        <div class="item">
                            <span class="label">图组标题:</span>
                            <span class="value">{{ catalog.materialTitle }}</span>
                        </div>
                        <div class="item">
                            <span class="label">图组描述:</span>
                            <span class="value">{{ catalog.materialIntro }}</span>
                        </div>
                        <div class="item">
                            <span class="label">图组数量:</span>
                            <span class="value">{{ catalog.fileNum }}张</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </van-popup>
</template>

<script setup>
import { showToast, showSuccessToast, showFailToast } from 'vant';
import { selectPictureById } from '@/api/publish'
import { useInitScroll } from '@/hooks/useScroll'

useInitScroll()

const fileDomain = import.meta.env.VITE_APP_FILE_URL
const previewImages = ref([])
const showHeader = ref(true)
const id = ref(0)
onLoad((options) => {
    id.value = options.id
    handleSelect()
})

const catalog = ref(null)
const handleSelect = async () => {
    const res = await selectPictureById(id.value)
    catalog.value = res.data
    previewImages.value = res.data.enclosureList.map(item => {
        return fileDomain + item.watermarkPath
    })
}

// 预览图片
const showPicList = ref(false)
const index = ref(0)
const onChange = (newIndex) => {
    index.value = newIndex;
};
const onClose = () => {
    showHeader.value = true
}
const handlePreviewImage = (i) => {
    index.value = i
    showPicList.value = true
    showHeader.value = false
}

// 弹出层
const showPop = ref(false)
const handleClose = () => {
    showPop.value = false
}

// 查看图片详情
const handleViewDetail = () => {
    showPop.value = true
}

// 单位转换
const convertSize = (sizeInKB) => {
    if (sizeInKB == null || sizeInKB == undefined || sizeInKB == '') {
        return '下载'
    }
    if (sizeInKB < 1024) {
        return sizeInKB + " K";
    } else if (sizeInKB < 1024 * 1024) {
        return (sizeInKB / 1024).toFixed(1) + " M";
    } else if (sizeInKB < 1024 * 1024 * 1024) {
        return (sizeInKB / (1024 * 1024)).toFixed(1) + " G";
    } else {
        return (sizeInKB / (1024 * 1024 * 1024)).toFixed(1) + " T";
    }
}

// 下载图片
const handleDownload = () => {
    // #ifdef H5-SGY
    showToast('请长按保存图片'); 
    return
    // #endif
    saveImage(previewImages.value[index.value]);
}

function saveImage(url) {
    fetch(url)
        .then(response => response.blob())
        .then(blob => {
            // 创建一个下载链接 
            const link = document.createElement('a');
            const objectUrl = URL.createObjectURL(blob);
            link.href = objectUrl;
            // 设置下载的文件名和后缀 
            link.download = catalog.value.enclosureList[index.value].enclosureDesc + '.jpg';
            // 触发点击事件 
            document.body.appendChild(link);
            link.click();
            // 移除下载链接 
            document.body.removeChild(link);
            URL.revokeObjectURL(objectUrl);
            showSuccessToast('下载成功');
        })
        .catch(error => {
            showFailToast('下载失败');
            console.log('下载图片失败', error)
        });
}

</script>

<style lang="scss" scoped>
.container {
    background-color: #F6F7FB;
    padding: 20rpx;
    display: flex;
    flex-direction: column;
    gap: 12rpx;
    // height: 100vh;

    .list {
        column-count: 2;
        column-gap: 12rpx;

        .item {
            break-inside: avoid;

            img {
                width: 100%;
                object-fit: cover;
            }
        }
    }

}

.pagebox {
    position: relative;
    top: 5vh;
    // left: calc(50% - 20rpx);
}

.infobox {
    width: 270rpx;
    height: 120rpx;
    background-color: #F7F8FA;
    opacity: 0.8;
    position: absolute;
    top: 80vh;
    left: calc(50% - 135rpx);
    border-radius: 72rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60rpx;

    .iconbox {
        display: flex;
        flex-direction: column;
        align-items: center;

        .icon {
            width: 50rpx;
            height: 50rpx;
        }

        .title {
            font-size: 22rpx;
            color: #3B3B3B;
            margin-top: 8rpx;
            font-weight: 400;
            line-height: 22rpx;
        }
    }

}

.info {
    display: flex;
    flex-direction: column;
    gap: 36rpx;
    padding: 40rpx;

    .header {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .title {
            font-size: 24rpx;
            color: #707070;
            text-align: center;
            width: 100%;
        }
    }

    .content {
        display: flex;
        flex-direction: column;
        gap: 30rpx;

        .item {
            display: flex;
            gap: 20rpx;

            .label {
                width: 130rpx;
                font-size: 28rpx;
                color: #707070;
            }

            .value {
                max-width: 530rpx;
                font-size: 28rpx;
                color: #232524;
            }

            .tagbox {
                max-width: 530rpx;
                display: flex;
                flex-wrap: wrap;
                gap: 14rpx;

                .tag {
                    background-color: #F3F8FE;
                    padding: 10rpx 12rpx;
                    border-radius: 6rpx;
                    color: #4C70AC;
                    font-size: 22rpx;
                    text-align: center;
                }
            }
        }
    }

    .bottom {
        display: flex;
        flex-direction: column;
        gap: 20rpx;

        .title {
            font-size: 28rpx;
            color: #707070;
        }

        .card {
            background-color: #F7F8FA;
            border-radius: 10rpx;
            padding: 30rpx 20rpx;
            display: flex;
            flex-direction: column;
            gap: 30rpx;

            .top {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .userbox {
                    display: flex;
                    align-items: center;
                    gap: 20rpx;

                    .image {
                        width: 70rpx;
                        height: 70rpx;
                        border-radius: 50%;
                    }

                    .name {
                        font-size: 28rpx;
                        color: #232524;
                    }
                }
            }

            .detail {
                display: flex;
                flex-direction: column;
                gap: 20rpx;

                .item {
                    display: flex;
                    gap: 20rpx;

                    .label {
                        width: 130rpx;
                        font-size: 28rpx;
                        color: #707070;
                    }

                    .value {
                        max-width: 480rpx;
                        font-size: 28rpx;
                        color: #232524;
                    }
                }
            }
        }

    }
}
</style>