<template>
    <div class="nav">
        <div class="logo" :style="{'background-color': types == 0 ? 'unset' : ''}" @click="toindex">

            <img src="@/static/images/logo.png" alt="" class="img">
            <div class="title" :style="{'color': types == 0 ? '#07AD97' : ''}">Beelink</div>
        </div>
        <div class="navigation">
            <div class="item" v-for="(i,j) in nav" :key="j" @click="navto(j)">
                <div :class="i.route==nowroute?'active':''">{{lan.$t(i.name)}}</div>
            </div>
        </div>
        <div style="width: 100%"></div>
        <div class="setting">
            <a-dropdown :trigger="['click']" :getPopupContainer="triggerNode => triggerNode.parentNode" v-if="islogin">
                <div class="item" @click="e => e.preventDefault()">
                    <img src="@/static/images/shijian.png" alt="" class="icon">
                    <div class="name">{{userinfo.zoneStr}}</div>
                    <img src="@/static/images/jiantou2.png" alt="" class="down">
                </div>
                <template v-slot:overlay >
                    <a-menu style="max-height:70vh;overflow: auto;">
                        <!-- 时区 -->
                        <a-menu-item  v-for="(i,j) in zonelist" :key="j" @click="zonechange(i.zoneid)" style="position: relative;">
                            <div class="selitem">
                                <span :style="{'color': i.zoneid == userinfo.zoneid ? '#06C7AE' : ''}">{{i.city}}{{i.gmt}}</span>
                                <img src="@/static/images/duihao.png" alt="" v-if="i.zoneid == userinfo.zoneid" class="duihao">
                            </div>
                        </a-menu-item>
                        <!-- <a-menu-item key="1">
                            <div class="selitem">
                                <span>时区2a</span>
                            </div>
                        </a-menu-item>
                        <a-menu-item key="3">
                            <div class="selitem">
                                <span>时区3a</span>
                            </div>
                        </a-menu-item> -->
                    </a-menu>
                </template>
            </a-dropdown>
            
            <a-dropdown :trigger="['click']" :getPopupContainer="triggerNode => triggerNode.parentNode" v-if="islogin">
                <div class="item" @click="e => e.preventDefault()">
                    <img src="@/static/images/qianbi.png" alt="" class="icon">
                    <div class="name">{{userinfo.currency}}</div>
                    <img src="@/static/images/jiantou2.png" alt="" class="down">
                </div>
                <template v-slot:overlay>
                    <a-menu style="max-height:70vh;overflow: auto;">
                        <!-- 货币 -->
                        <a-menu-item  v-for="(i,j) in currencylist" :key="j" style="position: relative;">
                            <div class="selitem" @click="currencychange(i.value)">
                                <span :style="{'color': i.name == userinfo.currency ? '#06C7AE' : ''}">{{i.name}} </span>
                                <img src="@/static/images/duihao.png" alt="" v-if="i.name == userinfo.currency" class="duihao">
                            </div>
                        </a-menu-item>
                        <!-- <a-menu-item key="1">
                            <div class="selitem">
                                <span>时区2b</span>
                            </div>
                        </a-menu-item>
                        <a-menu-item key="3">
                            <div class="selitem">
                                <span>时区3b</span>
                            </div>
                        </a-menu-item> -->
                    </a-menu>
                </template>
            </a-dropdown>
            <a-dropdown :trigger="['click']" :getPopupContainer="triggerNode => triggerNode.parentNode">
                <div class="item" @click="e => e.preventDefault()">
                    <img src="@/static/images/yuyan.png" alt="" class="icon">
                    <div class="name">{{userinfo.language}}</div>
                    <img src="@/static/images/jiantou2.png" alt="" class="down">
                </div>
                <template v-slot:overlay>
                    <a-menu style="max-height:70vh;overflow: auto;">
                        <!-- 语言 -->
                        <a-menu-item  v-for="(i,j) in languagelist" :key="j" style="position: relative;">
                            <div class="selitem" @click="setlanguage(i.value)">
                                <span :style="{'color': i.name == userinfo.language ? '#06C7AE' : ''}">{{i.name}}</span>
                                 <img src="@/static/images/duihao.png" alt="" v-if="i.name == userinfo.language" class="duihao">
                            </div>
                        </a-menu-item>
                        <!-- <a-menu-item key="1">
                            <div class="selitem">
                                <span>时区2cc</span>
                            </div>
                        </a-menu-item>
                        <a-menu-item key="3">
                            <div class="selitem">
                                <span>时区3c</span>
                            </div>
                        </a-menu-item> -->
                    </a-menu>
                </template>
            </a-dropdown>
            <div class="item" style="border-right: none;" @click="navto('/regime/date')" v-if="islogin">
                <img src="@/static/images/rili.png" alt="" class="icon">
                <div class="name">{{lan.$t('rili')}}</div>
            </div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.nav ::v-deep(.ant-dropdown-menu-item:hover, .ant-dropdown-menu-submenu-title:hover){
    background: white;
    .selitem{
        color:#06C7AE ;
    }
}
.nav{
    display: flex;
    user-select: none;
    .duihao{
        width: 15px;
        height: 15px;
        position: absolute;
        right: 15px;
        top: 8px;
    }
    .logo{
        width: 171px;
        height: 57px;
        background-color: #06C7AE;
        display: flex;
        align-items: center;
        flex-shrink: 0;
        .img{
            width: 38px;
            height: 38px;
            margin-left: 14px;
            border-radius: 50%;
        }
        .title{
            margin-left: 9px;
            font-size: 17px;
            color: #fff;
        }
    }
    .navigation{
        display: flex;
        align-items: center;
        flex-shrink: 0;
        margin-left: 28px;
        .item{
            padding: 0 28px;
            height: 18px;
            border-right: 1px solid #eee;
            font-size: 11px;
            color: #111;
            font-weight: bold;
            cursor: pointer;
            &:last-child{
                border-right: none;
            }
        }
        .item:hover{
            color: #06C7AE;
        }
    }
    .active{
        color: #06C7AE;
    }
    .setting{
        display: flex;
        align-items: center;
        flex-shrink: 0;
        padding: 0 16px;
        .selitem{
            text-align: center;
            font-size: 11px;
            color: #111;
        }
        .item{
            display: flex;
            align-items: center;
            border-right: 1px solid #eee;
            padding: 0 23px;
            height: 18rpx;
            .icon{
                width: 16px;
                height: 16px;
            }
            .name{
                margin-left: 6px;
                font-size: 11px;
                color: #111;
                font-weight: bold;
            }
            .down{
                width: 9px;
                height: 5px;
                margin-left: 20px;
            }
        }
    }
}
</style>

<script lang="ts">
import { editsystemsetting, getcurrencys, getlanguages, getzonelist } from '@/api';
import router from '@/router';
import store from '@/store';
import { computed, defineComponent, onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import axios from 'axios'
import { useI18n } from '@/utils/i18n';
import { setLanvuage } from '@/api/base';

export default defineComponent({
    props:{
        type: {
            type: Number,
            default:0
        }
    },
    setup(props){
        const lan: any = useI18n();
        
        const routes = useRoute();
        console.log(routes.path);
        const types = ref(props.type)
        const zonelist=ref<any>([{
            city: "中途岛",
            gmt: "GMT-11:00",
            id: "Pacific/Midway",
            zoneid: 1

        }])
        const selectedzone=ref([])
        const currencylist=ref<any>([{
            alias: "CNY",
            code: "104110041000",
            createdAt: "2020-08-19 11:54:59",
            deletedAt: null,
            dictionaryid: 241,
            name: "人民币￥",
            position: 1,
            publish: 1,
            updatedAt: "2020-08-19 11:54:59",
            value: "1"
        }])
        const languagelist=ref<any>([{
            alias: "",
            code: "104110011000",
            createdAt: "2020-08-14 11:08:28",
            deletedAt: null,
            dictionaryid: 210,
            name: "中文",
            position: 1,
            publish: 1,
            updatedAt: "2020-08-14 11:08:28",
            value: "zh"
        }])
        console.log(types.value)
        interface Nav{
            name: string;
            route: string;
        }
        const nav: Array<Nav> = [
            {
                name: 'zhiboguanli',
                route: "/regime/live"
            },
            {
                name: 'shipinguanli',
                route: "/regime/video"
            },
            {
                name:  'dingyuezheguanli',
                route: "/regime/subscriber"
            },
            {
                name: 'gerenzhongxin',
                route: "/mine/archives"
            }
        ]
        const userinfo = computed(() => {
            return store.state.userinfo;
        })
        const nowroute=ref<string>("")

        const islogin = computed(()=>store.state.islogin)
        
        function navto(index: number | string){
            if(!store.state.islogin){
               return ; 
            }
            if(typeof index == "number"){
                nowroute.value=nav[index].route
                router.push({
                    path: nav[index].route
                })
            }else{
                router.push(index)
            }
            
        }
        onMounted(async () => {
            zonelist.value=await getzonelist()
            // console.log(zonelist.value)
            currencylist.value=await getcurrencys()
            languagelist.value=await getlanguages()
            console.log(routes.path)
            nowroute.value=routes.path
            lan.locale.value = userinfo.value.languageValue
        })
        
        function zonechange(e?: any){
            // console.log(e,1002)
            editsystemsetting({zoneid:e})
        }
        function currencychange(e?: any){
            console.log(e)
            editsystemsetting({currency:parseInt(e)})
        }
        function setlanguage(e?: any){
            console.log(e)
            if(store.state.islogin){
                editsystemsetting({language:e})
            }else {
                setLanvuage(e)
            }
            lan.locale.value = e
            
        }
        function toindex(){
            router.push("/")
        }

        return {
            nav,
            types,
            navto,
            userinfo,
            zonelist,
            zonechange,
            selectedzone,
            currencylist,
            currencychange,
            languagelist,
            setlanguage,
            nowroute,
            toindex,
            lan,
            islogin
        }
    }
})
</script>