<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>
      <template v-if="user && user.groupId == 2">
        <!-- <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-item clickable v-ripple class="rounded-borders lang-demo">
          <q-item-section @click="goUrl('/passbook')">{{
            $t("v104.passbook.pageTitle")
          }}</q-item-section>
        </q-item> -->
      </template>
    </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) ?? {};
    }
    console.log(props.user)
    // 切换语言
    const methods = {
      goUrl(url: string) {
        $router.push({ path: url });
      },
      getLanguage(val: SitLang) {
        locale.value = val.langLocale ?? "";
        data.currentLang = val;
        localStorage.setItem("lanuage2", 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>
