<template>
    <Header backgroundBox="white" :showTitle="true" title="图组详情"></Header>
    <!-- <van-nav-bar title="图组详情" :left-arrow="true" fixed placeholder safe-area-inset-top @click-left="router.go(-1)" /> -->
    <div class="container" v-if="catalog">
        <div class="info">
            <div class="header">
                <div class="user">
                    <img class="avatar" src="../../static/image/avatar-content.png">
                    <div class="username">{{ catalog.author }}</div>
                </div>
                <div class="collect">
                    <van-button icon="plus" loading-size="14" type="primary">收藏</van-button>
                </div>
            </div>
            <div class="tags">
                <div class="item" v-for="(tagName, index) in catalog.tagName.split(',')" :key="index">
                    <span class="tag">{{ tagName }}</span>
                </div>
            </div>
            <div class="content">
                <van-row :gutter="[0, 10]">
                    <van-col span="12">
                        <div class="item">
                            <div class="label">渠道：</div>
                            <div class="value">
                                <span class="tag">{{ catalog.sourceName }}</span>
                            </div>
                        </div>
                    </van-col>
                    <van-col span="12">
                        <div class="item">
                            <div class="label">类型：</div>
                            <div class="value">
                                <span class="tag">{{ catalog.sourceDitch }}</span>
                            </div>
                        </div>
                    </van-col>
                    <van-col span="12">
                        <div class="item">
                            <div class="label">创建人：</div>
                            <div class="value">{{ catalog.createBy }}</div>
                        </div>
                    </van-col>
                    <van-col span="12">
                        <div class="item">
                            <div class="label">组织：</div>
                            <div class="value">
                                <van-text-ellipsis :content="catalog.organizeName" />
                            </div>
                        </div>
                    </van-col>
                    <van-col span="12">
                        <div class="item">
                            <div class="label">创建时间：</div>
                            <div class="value">{{ dayjs(catalog.createtime).format('YYYY-MM-DD') }}</div>
                        </div>
                    </van-col>
                    <van-col span="12">
                        <div class="item">
                            <div class="label">数量：</div>
                            <div class="value">{{ catalog.fileNum }}张</div>
                        </div>
                    </van-col>
                    <van-col span="12">
                        <div class="item">
                            <div class="label">拍摄时间：</div>
                            <div class="value">{{ dayjs(catalog.shoottime).format('YYYY-MM-DD') }}</div>
                        </div>
                    </van-col>
                    <van-col span="12">
                        <div class="item">
                            <div class="label">大小：</div>
                            <div class="value">{{ catalog.fileSize }}KB</div>
                        </div>
                    </van-col>
                    <van-col span="24">
                        <div class="item">
                            <div class="label">拍摄地点：</div>
                            <div class="value">{{ catalog.shootLocation }}</div>
                        </div>
                    </van-col>
                </van-row>
            </div>
        </div>
        <div class="atlas">
            <div class="title">{{ catalog.materialTitle }}</div>
            <div class="atlas-desc">{{ catalog.materialIntro }}</div>
            <div class="list">
                <div class="item" v-for="(item, index) in catalog.enclosureList" :key="index">
                    <img :src="fileDomain + item.compressPath" @click="handlePreviewImage(index)">
                    <div class="item-desc">
                        {{ item.enclosureDesc }}
                    </div>
                    <div class="item-info">
                        <!-- <span>808x539</span> -->
                        <span>{{ item.fileSize }}KB</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <van-empty description="暂无数据" v-else />
</template>
<script setup>
import dayjs from 'dayjs'
import { showImagePreview } from 'vant';
import { selectPictureById } from '@/api/publish'

const fileDomain = import.meta.env.VITE_APP_FILE_URL
const previewImages = ref([])

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 handlePreviewImage = (index) => {
    showImagePreview({
        images: previewImages.value,
        startPosition: index,
    });
}
</script>
<style lang="scss" scoped>
.container {
    background-color: #f6f6f6;
    padding: 15px 10px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    height: 100vh;

    .info {
        background-color: #ffffff;
        border-radius: 5px;
        padding: 20px 15px;
        display: flex;
        flex-direction: column;
        gap: 20px;
        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);

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


            .user {
                display: flex;
                align-items: center;
                gap: 10px;

                .avatar {
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                }

                .username {
                    font-size: 17px;
                }
            }

            .collect {
                :deep(.van-button--normal) {
                    padding: 0 5px;
                    width: 70px;
                    height: 35px;
                    font-size: 15px;

                    .van-button__icon {
                        font-size: 14px;
                    }

                }
            }
        }

        .tags {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            font-size: 15px;
        }

        .content {
            font-size: 14px;

            .item {
                display: flex;
                color: #6e737e;


                .label {
                    // width: 75px;
                }

                .value {
                    flex: 1;
                }
            }
        }
    }

    .atlas {
        background-color: #ffffff;
        border-radius: 10px;
        padding: 20px 15px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);

        .title {
            font-size: 20px;
            overflow-wrap: break-word;
            white-space: normal;
        }

        .atlas-desc {
            line-height: 30px;
            color: #707070;
            font-size: 15px;
            overflow-wrap: break-word;
            white-space: normal;
        }

        .list {
            column-count: 2;
            column-gap: 10px;

            .item {
                break-inside: avoid;
                margin-bottom: 10px;

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

                .item-desc {
                    font-size: 15px;
                    color: #707070;
                    line-height: 25px;

                    overflow-wrap: break-word;
                    white-space: normal;
                }

                .item-info {
                    font-size: 13px;
                    color: #707070;
                    margin-top: 5px;
                    display: flex;
                    justify-content: space-between;
                }
            }
        }
    }

    .tag {
        color: #4c70ac;
        background-color: #f3f8fe;
        padding: 5px 10px;
    }
}
</style>