<template>
    <div class="tab-group-page" ref="pageWrapperDom" @scroll="pageScroll">
        <div class="list-wrapper" ref="listWrapperDom">
            <div class="list-item" 
                v-for="(item, index) in listData" 
                :key="index"
                @click="clickItem(item, index)">
                <div class="left">
                    <img :src="item.avatarUrl" class="icon-avatar">
                </div>
                <div class="right">
                    <div class="top">
                        <div class="icon-nft-wrapper">
                            <img :src="item.nftItem.imagePath" class="icon-nft">
                            <div class="preview-nft">
                                <img :src="item.nftItem.imagePath" class="icon-nft-big">
                                <div class="content">
                                    <div class="nft-name">
                                        {{item.nftItem.nftItemName}} 
                                    </div>
                                    <div class="nft-desc">
                                        <div v-html="item.nftItem.metadata.description"></div>
                                    </div>
                                    <!-- <div class="nft-date">
                                        {{item.nftItem.dateOfPossession}}
                                    </div> -->
                                </div>
                            </div>
                        </div>
                        <div class="nick-name">
                            {{item.nickName}}{{index}}
                        </div>
                        <div class="screen-name">
                            {{item.screenName}}
                        </div>
                    </div>
                    <div class="post-content" v-html="item.textContent"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { getGroupPostList, getTwitterNftGroupInfo } from '@/http/nft'
import { getQueryString } from '@/uilts/help.js'

let twitterAccount = '';
let groupInfo = {};

let listData = ref([])
let listWrapperDom = ref(null);
let pageWrapperDom = ref(null);

let listReqParams = {
    params: {
        pageSize: 100,
        preTimestamp: ''
    },
    loadMore: false,
};

const clickItem = (data, index) => {
    let url = `https://twitter.com/${data.screenName}/status/${data.srcContentId}`;
    sendMessageToContent({
        actionType: 'IFRAME_PAGE_JUMP',
        data: {
            url
        }
    })
}

function onRuntimeMsg() {
    chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
        switch (req.actionType) {
            case 'CONTENT_REFRESH_TAB_GROUP_LIST':
                setListData();
                break;
            case 'CONTENT_GROUP_LIST_SCROLL':
                nextPage(req.data);
                break;
            case 'CONTENT_SEND_GROUP_NAV_TOP':
                styleHandler(req.data);
                break;
        }
    })
}

const nextPage = (params) => {
    let {wrapperHeight, wrapperScrollTop, contentHeight} = params;
    if (wrapperHeight + wrapperScrollTop >= (contentHeight - 50)) {
        console.log('next---');
        if(pageWrapperDom.value && pageWrapperDom.value.style.overflowY != 'auto') {
            pageWrapperDom.value.style.overflowY = 'auto'
        }
    }
};

const pageScroll = (e) => {
    console.log('pageScroll',e.target.scrollTop)
    sendMessageToContent({
        actionType: "IFREME_TAB_GROUP_CONTENT_GET_NAV_TOP",
        data: {
            scrollTop: e.target.scrollTop
        }
    })
}

const styleHandler = (data) => {
    if(data.top > 53) {
        if(pageWrapperDom.value && pageWrapperDom.value.style.overflowY != 'hidden') {
            pageWrapperDom.value.style.overflowY = 'hidden'
        }
    } else {
        if(pageWrapperDom.value && pageWrapperDom.value.style.overflowY != 'auto') {
            pageWrapperDom.value.style.overflowY = 'auto'
        }
        innerPageNext(data);
    }
}

const innerPageNext = (data) => {
    let wrapperHeight = pageWrapperDom.value.offsetHeight;
    let listContentHeight = listWrapperDom.value.offsetHeight;
    let scrollTop = data.scrollTop || 0;
    console.log(wrapperHeight,scrollTop,  '---', listContentHeight - 100)
    if (
        listReqParams.loadMore === false &&
        wrapperHeight + scrollTop >= (listContentHeight - 100)
    ) {
        listReqParams.loadMore = true;
        let dataLength = listData.value.length;
        if(dataLength) {
            listReqParams.params.preTimestamp = listData.value[dataLength - 1]['createTimestamp'];
        }
        getListData();
    }
}

const sendMessageToContent = (params) => {
    let {actionType, data} = params || {};
    chrome.tabs.getCurrent((tab) => {
        chrome.tabs.sendMessage(tab.id, {
        actionType,
        data,
        }, (res) => { console.log(res) });
    })
}

const getListData = () => {
    getGroupPostList({
        params: {
            pageSize: listReqParams.params.pageSize,
            preTimestamp: listReqParams.params.preTimestamp,
            groupId: groupInfo.nftGroupId
        }
    }).then(res => {
        if (res.code == 0) {
            let resData = res.data;
            if (resData.length) {
                if (!listReqParams.params.preTimestamp) {
                    listData.value = resData;
                } else {
                    let data = dataList.value;
                    data = data.concat(resData);
                    listData.value = data;
                }
                listReqParams.loadMore = false;
            }
        }
    })
}

onMounted(() => {
    onRuntimeMsg();
    let {windowLocation} = JSON.parse(getQueryString('params'));
    console.log('windowLocation', windowLocation)
    if(windowLocation.pathname) {
        twitterAccount = windowLocation.pathname.split('/')[1];
        if(twitterAccount) {
            getTwitterNftGroupInfo({
                params: {
                    twitterAccount
                }
            }).then(res => {
                if(res.code == 0) {
                    groupInfo = res.data;
                    getListData()
                }
            })
        }
    }


    sendMessageToContent({
        actionType: "IFREME_TAB_GROUP_SET_IFRAME_HEIGHT",
        data: {
            height: listWrapperDom.value.offsetHeight + 10
        }
    })
}) 
</script>

<style  lang="scss">
html, body, #app {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.tab-group-page {
    height: 100%;
    overflow-y: auto;

    &::-webkit-scrollbar {
        width: 2px;
    }
    &::-webkit-scrollbar-track {
        background: rgb(241, 241, 241);
    }
    &::-webkit-scrollbar-thumb {
        background: rgb(136, 136, 136);
        border-radius: 8px;
    }

    .list-wrapper {

        .list-item:hover {
            background: rgba($color: #000000, $alpha: 0.03);
        }

        .list-item {
            padding: 20px;
            box-sizing: border-box;
            display: flex;
            border-bottom: 1px solid #F0F3F4;
            cursor: pointer;

            .left {
                margin-right: 10px;

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

            .right {
                flex: 1;
                .top {
                    display: flex;
                    align-items: center;
                    margin-bottom: 7px;
                    position: relative;

                    .icon-nft-wrapper {
                        height: 24px;
                        margin-right: 8px;
                        .icon-nft {
                            width: 24px;
                            height: 24px;
                            // object-fit: cover;
                        }
                    }

                    .icon-nft-wrapper:hover {
                        .preview-nft  {
                            display: block;
                        }
                    }

                    .nick-name, .screen-name {
                        font-weight: 600;
                        font-size: 15px;
                    }

                    .nick-name {
                        color: #000;
                        margin-right: 8px;
                    }

                    .screen-name {
                        color: #566370;
                    }

                    .preview-nft {
                        width: 340px;
                        background: #FFFFFF;
                        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
                        border-radius: 20px;
                        padding: 20px;
                        box-sizing: border-box;
                        position: absolute;
                        left: 28px;
                        top: 0px;
                        z-index: 1999;
                        display: none;

                        .icon-nft-big {
                            width: 300px;
                            height: 300px;
                            object-fit: cover;
                        }

                        .content {
                            margin-top: 19px;
                            .nft-name {
                                margin-bottom: 6px;
                            }
                            .nft-desc {
                                // margin-bottom: 18px;
                            }
                            .nft-date {
                                font-weight: 500;
                                font-size: 12px;
                                color: #ACACAC;
                            }
                        }
                    }
                }

                .post-content {
                    font-weight: 400;
                    font-size: 16px;
                    line-height: 24px;
                    color: rgb(15, 20, 25);
                    font-family: TwitterChirp, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
                    word-break: break-all;
                    white-space: pre-line;
                }
            }
        }
    }
}
</style>
