<template>
    <div class="comn-navigation">
        <div class="content">
            <div class="left">
                <img src="@/assets/images/logo.png" alt="" class="logo pointer" @click="goHome">
                <div class="title flex-row-start-center">
                    <div @click="goHome" class="pointer">{{$t('metaverse')}}</div>
                </div>
                <div class="nav-contianer">
                    <div class="nav-item" @click="linkTo(item.path)" :class="{'nav-item-active': $route.path == item.path}" v-for="(item,index) in navList" :key="index">{{item.name}}</div>
                </div>
            </div>
            <div class="right">
                <div class="option style-2" v-if="!walletConnected" @click="toCannectWallet">{{$t('connectWallet')}}</div>
                <div class="option wrong-network" v-else-if="!isValidChaindId" @click="showConnetChain = true">{{$t('errChain')}}</div>
                <div class="option" style="cursor: auto;" v-else>{{$hideMoreText(currentWalletAddress, 7, 0)}}</div>
                <div class="option language">
                    <div>{{language}} <i class="el-icon-arrow-down" /></div>
                    <div class="lang-list-area">
                        <ul class="lang-list" @click="toChangeLanguage($event.target.dataset.lang)">
                            <li v-for="(item,index) in  langList" :key="index" :data-lang="item.value" class="lang-item">
                                {{item.label}}
                            </li>
                        </ul>
                    </div>
    
                </div>
            </div>
        </div>
        <NetworkErrorModal @close="showConnetChain = false" :visible="showConnetChain"/>
    </div>
</template>

<script>
import i18n, { setLanguage, getCurrentLanguage } from '../i18n';
import { createNamespacedHelpers } from 'vuex';
import { validChainIds } from '@/networkConfig';
import NetworkErrorModal from './NetworkErrorModal';

const { mapMutations: mapMutationsWallet, mapState: mapStateWallet } = createNamespacedHelpers('wallet');

export default {
    name: 'Navigation',
    props: {

    },
    components: { NetworkErrorModal },
    data() {
        return {
            isPro: false,
            queryData: '',
            queryInputFocus: false,
            langList: [
                { label: '中文', value: 'zh' },
                { label: 'English', value: 'en' },
                { label: '日本語', value: 'ja' },
                { label: '한글', value: 'ko' },
            ],
            showConnetChain: false,
        };
    },
    computed: {
        walletConnected() {
            return this.$store.getters.walletConnected;
        },
        isValidChaindId() {
            let chainId = this.$store.getters.chainId;
            return validChainIds.includes(chainId - 0);
        },
        currentWalletAddress() {
            return this.$store.getters.currentWalletAddress
        },
        navList() {
            return []
        },
        language() {
            let lan = getCurrentLanguage();
            let content = this.langList.find(item => item.value == lan) || {};
            return content.label;
        }
    },
    methods: {
        ...mapMutationsWallet(['SET_INTERFACE_SIGNATURE', 'SET_CURRENT_WALLET_ADDRESS', 'CHANGE_CONNECT_WALLET_MODAL_STATUS', 'SET_ADMIN_STRING']),
        linkTo(path) {
            this.$router.push(path);
        },
        goHome() {
            this.$router.push("/");
        },
        toChangeLanguage(lang) {
            console.log('改语言', lang)
            setLanguage(lang)
        },
        toCannectWallet() {
            this.CHANGE_CONNECT_WALLET_MODAL_STATUS(true);
        },
        closeConnetChain() {
            this.showConnetChain = false
        }
    },
    created() {

    },
};
</script>

<style lang="scss" scoped>
* {
    box-sizing: border-box;
}

.comn-navigation {
    position: absolute;
    z-index: 100;
    width: 100%;
    height: 93*$vpx;
    background: rgba(0, 0, 0, 0.1);
    .content {
        height: 100%;
        width: 1600*$vpx;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .logo {
                width: 50*$vpx;
                height: 55*$vpx;
                margin-right: 10*$vpx;
            }
        }
    }
    .title {
        font-size: 28*$vpx;
        font-family: FZZongYi-M05;
        color: $themeColor;
        margin: 0 50*$vpx 0 2*$vpx;
        display: flex;
        align-items: center;
        line-height: 28*$vpx;
        span {
            cursor: pointer;
            display: block;
            font-size: 14*$vpx;
            height: 28*$vpx;
            line-height: 28*$vpx;
            padding: 0 10*$vpx;
            background-color: rgba($color: $themeColor, $alpha: 0.2);
            border-radius: 18*$vpx;
            margin-left: 12*$vpx;
        }
    }
    .nav-contianer {
        display: flex;
        align-items: center;
        .nav-item {
            position: relative;
            margin-right: 50*$vpx;
            cursor: pointer;
            font-size: 18*$vpx;
            font-weight: bold;
            color: #FFF;
            display: flex;
            justify-content: center;
            align-items: center;
            &.nav-item-active {
                color: $themeColor;
                &:after {
                    content: '';
                    position: absolute;
                    width: 69*$vpx;
                    height: 10*$vpx; // background: url('../assets/images/header/tabActive.png') center no-repeat;
                    background-size: cover;
                }
            }
            &:hover {
                color: $themeColor;
            }
        }
    }
    .right {
        height: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        .option {
            width: 133*$vpx;
            height: 47*$vpx;
            border-radius: 23*$vpx;
            background: rgba(255, 255, 255, 0.2);
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 29*$vpx;
            cursor: pointer;
            &.style-2 {
                width: auto;
                padding: 0 28*$vpx;
            }
        }
        .language {
            position: relative;
            &:hover {
                .lang-list-area {
                    display: block;
                }
            }
            .lang-list-area {
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                padding-top: 10*$vpx;
                display: none;
                .lang-list {
                    background: rgba(255, 255, 255, 0.2);
                    width: 100%;
                    border-radius: 5px;
                    padding: 10*$vpx 20*$vpx;
                    .lang-item {
                        line-height: 30*$vpx;
                        &:hover{
                            color: $themeColor;
                        }
                    }
                }
            }
        }
        .wrong-network {
            width: auto;
            min-width: 133*$vpx;
            padding: 0 10*$vpx;
            height: 47*$vpx;
            background: rgba(255, 26, 26, 0.8);
            border-radius: 23*$vpx;
            color: #FFFFFF;
            white-space: nowrap;
        }
    }
    
}
</style>
