<template>
    <div class="group-list-page" ref="pageWrapperDom">
        <div class="title">
            <img class="icon" :src="require('@/assets/svg/icon-joined-group-logo.svg')" >
            NFT Owners Group
        </div>
        <div class="content-wrapper">
            <nft-group-list style="height: 100%" :showBadge="true" @clickCallBack="clickHandler"></nft-group-list>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref, watch } from "vue";
import NftGroupList from '@/view/components/nft-group-list.vue';

const clickHandler = (params) => {
    let url = `https://twitter.com/${params.defaultTwitterAccount}?deTabVal=deGroupTab`;
    sendMessageToContent({
        actionType: 'IFRAME_PAGE_JUMP',
        data: {
            url
        }
    })
}

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

onMounted(() => {
}) 
</script>

<style  lang="scss">
html, body, #app {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.group-list-page {
    height: 100%;
    overflow-y: auto;
    background: #F7F9F9;

    padding: 0 16px;
    box-sizing: border-box;

    .title {
        font-weight: 800;
        font-size: 18px;
        box-sizing: border-box;
        height: 56px;
        display: flex;
        align-items: center;

        .icon {
            margin-right: 8px;
        }

    }
    .content-wrapper {
        height: calc(100% - 60px);
        overflow-y: auto;
        padding-left: 4px;
        box-sizing: border-box;
    }
}
</style>
