<template>
  <q-card
    flat
    class="bg-white q-pa-none light-shadow"
    style="border: 1px solid #eee"
    :style="{ width: $q.platform.is.desktop ? '375px' : '350px' }"
  >
    <div class="Notifications-bg">
      <div class="q-pa-lg row items-center">
        <span class="text-white text-weight-bold text-h6 q-mr-sm q-pl-sm">{{
          $t("Notifications.title")
        }}</span>
        <div class="text-grey-1 f12 q-pl-sm">0 {{ $t("Notifications.subtitle") }}</div>
      </div>
    </div>
    <div class="Notifications-height q-py-md" style="display: none">
      <q-scroll-area
        :thumb-style="scrollStyle.thumbStyle"
        :bar-style="scrollStyle.barStyle"
        class="full-height"
      >
        <q-list>
          <q-item v-for="(item, index) in menus" class="rounded-borders q-py-md">
            <q-item-section>
              <div
                class="row items-center"
                :style="{ width: $q.platform.is.desktop ? '340px' : '317px' }"
              >
                <div
                  class="rounded-borders Notifications-item q-mr-md"
                  :class="{
                    'bg-blue-1': index == 0,
                    'bg-red-1': index == 1,
                    'bg-yellow-1': index == 2,
                    'bg-green-1': index == 3,
                    activeOne: index == 0,
                    activeTwo: index == 1,
                    activeThree: index == 2,
                    activeFour: index == 3,
                  }"
                >
                  <svg-icon :icon="item.icon" :size="16" color="nav"></svg-icon>
                </div>
                <div class="col column">
                  <span
                    class="Notifications-overflow Notifications-title text-weight-bold f12 cursor-pointer q-mr-md text-grey-8"
                    >Project AlicePhase 1 developmentPhase 1 developmentPhase 1
                    development</span
                  >
                  <div class="Notifications-overflow Notifications-text text-grey-6 fz12">
                    Phase 1 developmentPhase 1 developmentPhase 1 developmentPhase 1
                    development
                  </div>
                </div>
                <div
                  class="bg-blue-grey-1 q-px-xs q-ml-lg text-grey-6 Notifications-time fz10"
                >
                  1 {{ $t("Notifications.time") }}
                </div>
              </div>
            </q-item-section>
          </q-item>
        </q-list>
      </q-scroll-area>
    </div>
    <div class="text-center q-my-xl">
      {{ $t("noneNotify") }}
    </div>
  </q-card>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRefs, provide, onMounted, inject } from "vue";
import { useMenus, Menu } from "../../utils/menus";
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";
import useScrollModule from "../../module/scrollbar/scrollModule";
import svgIcon from "../global/svg-icon.vue";
import { DirtionmaryHelper } from "../../config/dictionary";
export default defineComponent({
  components: { svgIcon },
  name: "user-info",
  props: {
    user: {
      type: Object,
      require: true,
    },
  },
  setup(props) {
    const { locale, t } = useI18n();
    const data = reactive({
      currentLang: {} as SitLang,
      langs: [] as SitLang[],
      menus: [] as Menu[],
      scrollStyle: {} as any,
    });
    data.scrollStyle = useScrollModule().scrollStyle;

    // 根据域名渲染菜单
    const menList = useMenus.getMenus().filter((x) => {
      return x.id == 16;
    });
    data.menus = !inject(DirtionmaryHelper.DOMAIN_NAME) ? menList : useMenus.getMenus();

    data.langs = getLangs();
    if (data.langs && data.langs.length > 0) {
      data.currentLang = data.langs.find((x) => x.langLocale == locale.value) ?? {};
    }

    // 切换语言
    const methods = {
      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();
      },
    };
    onMounted(() => {});
    return { ...toRefs(data), ...methods };
  },
});
</script>

<style>
.Notifications-height {
  height: 325px;
}
.Notifications-bg {
  background: url("../../assets/images/menu-header-bg.jpg") no-repeat;
  background-size: 100% 100%;
}
.Notifications-item {
  cursor: default;
  display: flex;
  height: 35px;
  width: 35px;
  align-items: center;
  justify-content: center;
}
.Notifications-item svg g {
  cursor: default;
  padding: 4px;
}
.Notifications-item.activeOne svg g [fill] {
  fill: var(--q-primary) !important;
}
.Notifications-item.activeTwo svg g [fill] {
  fill: var(--q-negative) !important;
}
.Notifications-item.activeThree svg g [fill] {
  fill: var(--q-warning) !important;
}
.Notifications-item.activeFour svg g [fill] {
  fill: var(--q-positive) !important;
}
.Notifications-overflow {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.Notifications-title:hover {
  color: var(--q-primary) !important;
}
.Notifications-title {
  font-weight: 600;
}
.Notifications-title,
.Notifications-text {
  width: 100%;
}
.Notifications-demo:hover .q-item__section {
  color: var(--q-primary) !important;
}
.Notifications-time {
  color: var(--kt-light-inverse);
  line-height: 18px;
  border-radius: 6px;
}
</style>
