<template>
  <el-config-provider :locale="appStore.locale" :size="appStore.size">
    <router-view />
  </el-config-provider>
  <PrintView ref="printView" />
  <ai-assistant ref="aiAssistantRef" />
  <div class="floatIcon" @click="openAiAssistantMenu">
    <svg-icon class-name="search-icon" icon-class="Ai" />
  </div>
</template>

<script setup lang="ts">
import useSettingsStore from '@/store/modules/settings';
import { handleThemeStyle } from '@/utils/theme';
import useAppStore from '@/store/modules/app';
import PrintView from '@/views/print/view.vue';
import SearchMenu from '@/layout/components/TopBar/search.vue';
import AiAssistant from '@/layout/components/TopBar/aiAssistant.vue';

const appStore = useAppStore();
const printView = ref();
const internalInstance = getCurrentInstance();

onMounted(() => {
  nextTick(() => {
    // 初始化主题样式
    handleThemeStyle(useSettingsStore().theme);
    if (internalInstance) {
      internalInstance.appContext.config.globalProperties.$openPrint = printView.value.openPrint;
    }
  });
});

const aiAssistantRef = ref<InstanceType<typeof SearchMenu>>();
const openAiAssistantMenu = () => {
  aiAssistantRef.value?.openSearch();
};

</script>
<style lang="less">
.floatIcon {
  position: fixed;
  top: 50%;
  right: 10px;
  width: 24px;
  height: 24px;
  cursor: pointer;
  z-index:7000;
}

.el-message {
  z-index:8006 !important;
}
</style>
<style>
.auto-scroll-back {
  display: inline-block;
  animation-name: backAndForth;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* 来回滚动动画 */
@keyframes backAndForth {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(calc(-1 * var(--scroll-x)));
  }
  75% {
    transform: translateX(calc(-1 * var(--scroll-x)));
  }
  100% {
    transform: translateX(0);
  }
}
</style>
