<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 } 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'
  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
      data.menus = 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>
