<template>
  <div class="avue-logo">
    <transition name="fade">
      <span v-if="keyCollapse" class="avue-logo_subtitle" key="0">
        {{ website.logo }}
      </span>
    </transition>
    <transition-group name="fade">
      <template v-if="!keyCollapse">
        <span class="avue-logo_title" key="1">{{ indexTitle }} </span>
      </template>
    </transition-group>
  </div>
</template>

<script lang="ts">
import { isvalidatemobile } from "@/util/validate";
import { useRouter } from "vue-router";
import { useStore, mapGetters } from "vuex";
import { useI18n } from "vue-i18n";
import { ElForm, ElMessage } from "element-plus";
import { detail } from "@/views/api/system/param";
import { getStore, setStore } from '@/util/store'
import {
  computed,
  defineComponent,
  reactive,
  ref,
  watch,
  Ref,
  onMounted,
  inject,
  provide,
} from "vue";

interface Logo {
  t: Function;
  indexTitle: any;
  keyCollapse: any;
  website: any;
}

export default defineComponent({
  name: "logo",

  // 组件
  components: {},

  setup(props, context): Logo {
    const router = useRouter();
    const store = useStore();
    const { t } = useI18n();
    const indexTitle = ref();

    const getParam = () => {
      const projectName = getStore({ name: 'projectName' }) || ''
      if (projectName == '') {
        detail({paramKey: "project.name"}).then((res: { data: any }) => {
          const data = res.data;
          indexTitle.value = data.paramValue
          setStore({ name: 'projectName', content: data.paramValue })
        })
      } else {
        indexTitle.value = projectName
      }
    }
	
    // computed
    const website = computed(() => {
      return store.getters.website;
    });
    const keyCollapse = computed(() => {
      return store.getters.keyCollapse;
    });

    // mounted函数
    onMounted(async () => {
      getParam();
    });


    // 返回值
    return {
      t,
      indexTitle,
      keyCollapse,
      website
    };
  },
});
</script>
<style lang="scss">
.fade-leave-active {
  transition: opacity 0.2s;
}
.fade-enter-active {
  transition: opacity 2.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.avue-logo {
  position: fixed;
  top: 0;
  left: 0;
  width: 240px;
  height: 64px;
  line-height: 64px;
  background-color: #20222a;
  font-size: 20px;
  overflow: hidden;
  box-sizing: border-box;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
  color: rgba(255, 255, 255, 0.8);
  z-index: 1024;
  &_title {
    display: block;
    text-align: center;
    font-weight: 300;
    font-size: 20px;
  }
  &_subtitle {
    display: block;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
  }
}
</style>