<template>
    <div id="nav">
        <div class="navBox">
            <div class="navIcon" v-if="iconType">
                <van-icon name="arrow-left" @click="goBack" />
            </div>

            <div class="navTitle">
                {{title}}

            </div>
            <!--
            <div class="navOut" v-if="out">
                <van-icon class="iconfont" class-prefix="icon" name="logout"></van-icon>
                <span @click="logoutF">{{$t("nav.signOut")}}</span>
            </div>
            -->
            <div class="navOut" v-if="out">
                <span @click="toogleLanguage" class="text">{{$t('login.language')}}：{{languages}}</span>
            </div>
        </div>
        <van-popup v-model="languageShow" round position="bottom" :style="{ height: '40%' }">
            <van-picker show-toolbar title="选择语言" :columns="languagecolumns" @confirm="languageConfirm" @cancel="languageCancel" />
        </van-popup>
    </div>
</template>

<script>
import { logout } from "@/api/login";
import { removeToken } from "@/utils/auth";
export default {
    props: {
        path: String,
        title: {
            type: String,
            default: "",
        },
        iconType: {
            type: Boolean,
            default: true,
        },
        out: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            languageShow:false,
            languagecolumns:[
                { text: '简体中文', value: 0 },
                { text: '日本語', value: 1 },
            ],
        };
    },
    computed:{
        languages(){
            let text='';
            let language=this.$store.state.user.language;
            if(language=='zh'){
                text='简体中文'
            }
            if(language=='ja'){
                text='日本語'
            }
            console.log(language)
            return text;
        }
    },
    methods: {
        goBack() {
            if (this.path) {
                let paths = path.indexOf("/") == -1 ? "/" + path : path;
                this.$router.push(paths);
            } else {
                this.$router.back();
            }
        },
        toogleLanguage(){
            this.languageShow = true;
        },
        languageConfirm(value){
            let text='';
            if(value.value==0){
                text='zh'
            }else{
                text='ja'
            }
            this.$store.commit("user/SET_LANGUAGE", text);
            this.languageCancel();
            location.reload();
        },
        languageCancel(){
            this.languageShow = false;
        },
        logoutF() {
            this.$dialog
                .confirm({
                    title: this.$t('van.tips'),
                    message: this.$t('van.confirmTips'),
                    confirmButtonText: this.$t('van.confirm'),
                    cancelButtonText: this.$t('van.cancel'),
                })
                .then(() => {
                    logout().then((res) => {
                        if (res.code == 200) {
                            this.$store.commit("user/SET_NAME", null); //用户名
                            this.$store.commit("user/SET_USERID", null); //用户ID
                            this.$store.commit("user/SET_LIFF_ID", null); //liffId
                            this.$store.commit("user/SET_USERINFO", null); //用户基本信息
                            removeToken();
                            this.$router.push({ path: "/home" });
                        }
                    });
                })
                .catch(() => {});
        },
    },
};
</script>

<style lang="scss" scoped>
#nav {
    width: 100%;
    height: 0.44rem /* 44/100 */;
    display: flex;
    color: #161616;
    // font-weight: bold;
    .navBox {
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;
        background: #fff;
        border-bottom:#F9F9F9 1px solid;
        .navIcon {
            font-size: 0.16rem /* 16/100 */;
            position: absolute;
            top: 0;
            left: 0;
            line-height: 0.44rem /* 44/100 */;
            padding: 0 0.1rem /* 10/100 */;

            .van-icon {
                font-weight: bold;
            }
        }
        .navTitle {
            font-size: 0.17rem /* 16/100 */;
            font-weight:500;
            text-align: center;
            width: 100%;
            line-height: 0.44rem /* 44/100 */;

        }

        .navOut {
            position: absolute;
            top: 0;
            right: 0;
            line-height: 0.44rem /* 44/100 */;
            padding: 0 0.1rem /* 10/100 */;
            font-size: 0.12rem /* 14/100 */;
            display: flex;
            align-items: center;
            > span {
                margin-left: 0.03rem /* 3/100 */;
            }
        }
    }
}


</style>