<template>
  <q-card flat class="bg-white q-pa-none q-py-sm" style="width: 275px; shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15)">
    <div class="q-px-sm">
      <div class="q-pa-sm row">
        <q-avatar size="50px" rounded class="bg-blue-2 cursor-pointer q-mr-md">
          <q-img :src="user.photo" v-if="user?.photo" mode="cover" />
          <span class="text-primary text-h6" v-else>{{ user?.name.substring(0, 1) }}</span>
        </q-avatar>
        <div class="col column">
          <div class="col row items-center">
            <span class="text-weight-bold text-subtitle1 q-mr-md">{{ user?.name }}</span>
            <span class="bg-green-11 text-green-14 rounded-borders q-px-sm">{{$t('verified')}}</span>
          </div>
          <div class="f12 text-grey-6 f12">{{ user?.account }}</div>
        </div>
      </div>
    </div>
    <q-separator color="grey-3" class="q-my-sm" />
    <q-list class="q-px-md text-subtitle2">
      <q-item clickable v-ripple class="rounded-borders lang-demo">
        <q-item-section @click="goUrl('/personal')">{{ $t('userMenu.mypro') }}</q-item-section>
      </q-item>
      <q-item clickable v-ripple class="rounded-borders lang-demo">
        <q-item-section>
          <div class="row items-center">
            <div class="q-mr-md">{{ $t('userMenu.myfinace') }}</div>
            <q-badge rounded class="din bg-red-2 text-red-14 text-weight-bold" label="3" />
          </div>
        </q-item-section>
      </q-item>
      <q-item clickable v-ripple class="rounded-borders lang-demo">
        <q-item-section>{{ $t('userMenu.fapiao') }}</q-item-section>
      </q-item>
    </q-list>

    <q-separator color="grey-3" class="q-my-sm" />
    <q-list class="q-px-md text-subtitle2">
      <q-item clickable v-ripple class="rounded-borders lang-demo">
        <q-item-section>
            <div class="row">
                <div class="col">{{ $t('userMenu.lang') }}</div>
                <div class="lang-box bg-grey-2 q-px-sm rounded-borders">
                    <span>{{currentLang.langName}}</span>
                    <q-popup-proxy class="no-shadow">
                        <q-card class="q-pa-sm" flat dark>
                            <q-list>
                                <q-item class="rounded-borders" clickable v-ripple v-for="(x,i) in langs"  @click="getLanguage(x)">
                                    <q-item-section>
                                        <div class="row">
                                            <div class="f12 dark col">{{x.langName}}</div>
                                        </div>
                                    </q-item-section>
                                </q-item>
                            </q-list>
                        </q-card>
                    </q-popup-proxy>
                </div>
            </div>
        </q-item-section>
      </q-item>
      <q-item clickable v-ripple class="rounded-borders lang-demo" @click="signOut">
        <q-item-section>{{ $t('userMenu.signOut') }}</q-item-section>
      </q-item>
    </q-list>
  </q-card>
</template>

<script lang="ts">
  import { useRouter } from 'vue-router';
import { defineComponent, ref, reactive, toRefs, provide } from 'vue'
import { getLangs } from "../../utils/tools";
import { SitLang } from '../../@types';
import { useI18n } from 'vue-i18n'
import { dispatchAction } from '../../store/utils';
import { UserActionsType } from '../../store/modules/user/actions';
export default defineComponent({
  name: 'user-info',
  props: {
    user: {
      type: Object,
      require: true
    }
  },
  setup(props) {
    const $router = useRouter();
    const {locale,t } = useI18n();
    const data=reactive({
        currentLang: {} as SitLang,
        langs:[] as SitLang[],
    })
    data.langs=getLangs()
    if(data.langs && data.langs.length>0){
      data.currentLang = data.langs.find(x=> x.langLocale==locale.value) ?? {};
    }

    // 切换语言
    const methods = {
        goUrl(url:string){
          $router.push({ path:url})
        },
        getLanguage (val:SitLang) {
            locale.value = val.langLocale??''
            data.currentLang=val
            localStorage.setItem('lanuage', val.langLocale??'')
            window.location.reload()
        },
        signOut(){
            dispatchAction<UserActionsType>('user', 'setUserSignout', null)
            window.location.reload()
        }
    }
    return {...toRefs(data),...methods}
  }
})
</script>

<style>
    .lang-demo:hover .lang-box{
        background: unset !important;
    }
    .lang-demo:hover .q-item__section{
        color:var(--q-primary) !important;
    }
</style>
