<template>
  <div class="tool_info_bar">
    <!--    -->
    <!-- 快捷功能按钮 -->
    <div class="function-list">

      <div class="function-list-item" style="width:max-content">
        <scroll-notifications/>
      </div>
      <div class="function-list-item">
        <Download/>
      </div>
      <div class="function-list-item">
        <Message/>
      </div>
      <div class="function-list-item">
        <Full-screen/>
      </div>
      <div class="function-list-item">
        <SizeChange/>
      </div>
      <div class="function-list-item">
        <theme/>
      </div>
      <div class="function-list-item" style="width: auto; margin-left: 6px;padding: 0 6px">
        <user-info @password="showPasswordLayer" @loginOut="loginOut"/>
      </div>
    </div>
    <!-- 修改密码 -->
    <password-layer v-if="layer.show" :layer="layer"/>
  </div>
</template>

<script setup name='ToolInfoBar' lang="ts">
import {reactive} from 'vue'
import {useStore} from 'vuex'
import Download from './function-list/download.vue'
import Message from './function-list/message.vue'
import FullScreen from './function-list/fullscreen.vue'
import SizeChange from './function-list/sizeChange.vue'
import PasswordLayer from './PasswordLayer.vue'
import UserInfo from "./function-list/user-info/UserInfo.vue";
import ScrollNotifications from "./ScrollNotifications.vue";
import Theme from "./function-list/Theme.vue";


const store = useStore()

const layer = reactive({
  show: false,
  showButton: true,
})

const showPasswordLayer = () => {
  layer.show = true
}

const loginOut = () => {
  store.dispatch('user/loginOut')
}

</script>

<style scoped lang="scss">
.tool_info_bar {
  height: 100%;
  display: flex;
  width: 100%;
}

.scroll-notifications {
  justify-content: center;
  align-items: center;
  display: flex;

  i {
    margin: 0 7px;
  }

  &:hover {
    cursor: pointer;
    background-color: rgb(245, 245, 245);
  }
}

.function-list {
  display: flex;

  .function-list-item {
    width: 30px;
    display: flex;
    justify-content: center;
    align-items: center;

    &:hover {
      cursor: pointer;
      background-color: rgb(245, 245, 245);
    }

    :deep(i) {
      color: var(--system-header-text-color);
    }
  }
}

.user-info {
  margin-left: 20px;
  display: flex;
  justify-content: center;
  align-items: center;

  .el-dropdown-link {
    color: var(--system-header-breadcrumb-text-color);
  }
}

</style>
