<template>
    <div class="nft-page-wrapper" ref="pageWrapperDom" @scroll="pageScroll">
        <div class="content" ref="pageListDom">
            <div class="item" v-for="(item, index) in listData" :key="index" @click="clickNFT(item)">
                <img :src="item.imagePath" class="img" v-if="item.imagePath" />
                <nft-card :nftItemId="item.nftItemId" :item="item.createImageInfo" :width="103" v-else></nft-card>
                <div class="name">{{  item.nftItemName  }}</div>
            </div>
        </div>
        <join-group-finish-dialog :dialogVisible="joinGroupFinishShow" :position="'absolute'"
            :contentStyle="{ width: '315px' }" :iconStyle="{ width: '80px', marginTop: '26px' }"
            :descStyle="{ marginTop: '24px', marginBottom: '25px', fontSize: '19px' }" @confirm="confirmFinish">
        </join-group-finish-dialog>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { nftListMine } from "@/http/nft.js";
import messageCenter from "@/uilts/messageCenter";
import MESSAGE_ENUM from "@/uilts/messageCenter/messageEnum";
import nftCard from "@/components/nft-card.vue";
import joinGroupFinishDialog from "@/components/join-group-finish-dialog.vue";

let listData = ref([]);

let NFTReqParams = {
    params: {
        pageNum: 1,
        pageSize: 30,
    },
    loadMore: false,
};

let pageWrapperDom = ref(null);
let pageListDom = ref(null);
let joinGroupFinishShow = ref(false);
let router = useRouter()
let iframeId = 'de-nav-nft-index-page';

const clickNFT = (params) => {
    console.log(params)
    messageCenter.send({
        info: {
            actionType: MESSAGE_ENUM.IFRAME_SHOW_FOOTER_MENU,
            iframeId: iframeId,
        },
        data: {
            showMenu: false,
        }
    })
    router.push({
        name: 'navNftDetail',
        query: {
            params: JSON.stringify(params)
        }
    })
}

const getNFTListMine = () => {
    nftListMine({
        params: NFTReqParams.params,
    }).then((res) => {
        if (res.data && res.data.length) {
            if (NFTReqParams.params.pageNum < 2) {
                listData.value = res.data;
            } else {
                let data = listData.value;
                data = data.concat(res.data);
                listData.value = data;
            }
            NFTReqParams.loadMore = false;
        }
    });
}

const pageScroll = (e) => {
    let wrapperHeight = pageWrapperDom.value.offsetHeight;
    let pageListHeight = pageListDom.value.offsetHeight;
    let scrollTop = e.target.scrollTop || 0;
    if (
        NFTReqParams.loadMore === false &&
        wrapperHeight + scrollTop >= pageListHeight - 60
    ) {
        NFTReqParams.loadMore = true;
        NFTReqParams.params.pageNum++;
        getNFTListMine();
    }
};

const onMessage = () => {
    messageCenter.listen(MESSAGE_ENUM.CONTENT_POPUP_PAGE_SHOW, (req) => {
        getNFTListMine();
        showJoinFinishHandler(req.data);
    })
}

const showJoinFinishHandler = (params) => {
    let { path, showJoinGroupFinish } = params;
    if (path == '/NFT' && showJoinGroupFinish) {
        joinGroupFinishShow.value = true;
    } else if (joinGroupFinishShow.value) {
        joinGroupFinishShow.value = false;
    }
}

const confirmFinish = () => {
    joinGroupFinishShow.value = false;
}

onMounted(() => {
    onMessage();
    getNFTListMine();
})
</script>

<style scoped lang="scss">
.nft-page-wrapper {
    width: 100%;
    height: 100%;
    overflow-y: auto;

    .content {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        padding: 5px 2px 0 16px;
        box-sizing: border-box;

        .item {
            width: 33%;
            box-sizing: border-box;
            padding-right: 14px;
            margin-top: 15px;
            cursor: pointer;

            .img {
                width: 100%;
                border-radius: 5px;
                height: 104px;
                object-fit: cover;
            }

            .name {
                font-weight: 400;
                font-size: 12px;
                margin-top: 6px;
            }
        }
    }
}
</style>