<script setup lang="ts">
import { ref} from 'vue'
import { useRouter } from 'vue-router'
import { GlobalStore } from '@/stores/index'
import Breadcrumb from './Breadcrumb.vue'
import { Expand, Fold } from '@element-plus/icons-vue'
import 'element-plus/theme-chalk/src/dropdown.scss'
const globalStore = GlobalStore()
const router = useRouter()
const logOut = () => {
  localStorage.clear()
  globalStore.SET_User_Tokey('')
  globalStore.SET_User_Info({})
  globalStore.SET_Flat_Menu([])
  router.replace('/login')
}

const getTime = ()=>{
  return new Date().toLocaleString('en-US', {
    hour: 'numeric',
    minute: 'numeric',
    hour12: true
  })
}

let time = ref(getTime())

setInterval(() => {
  time.value = getTime()
}, 1000 * 60)
</script>

<template>
  <div class="header">
    <el-row>
      <el-col :xl="16" :sm="15" class="d-flex">
        <el-button
          class="isCollapse"
          type="primary"
          :icon="globalStore.GET_isCollapse ? Expand : Fold"
          link
          @click="globalStore.SET_isCollapse"
        ></el-button>
        <Breadcrumb></Breadcrumb>
      </el-col>
      <el-col :xl="2" :sm="2" class="notice">
        <el-dropdown>
          <!-- <el-icon :size="25"><Bell /></el-icon> -->
          <el-button type="primary" circle>
            <i class="iconfont el-icon">&#xe63e;</i>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>Action 2</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-col>
      <el-col :xl="1" :sm="1" class="notice">
        <el-avatar>
          <img src="@/assets/images/avatar.jpg" />
        </el-avatar>
      </el-col>
      <el-col :xl="2" :lg="3" :sm="3" class="notice">
        <el-dropdown>
          <div class="avatar">
            <span>{{ globalStore.GET_User_Info.T_name }}</span>
            <el-icon class="el-icon">
              <arrow-down />
            </el-icon>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="logOut">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-col>
      <el-col :xl="2" :sm="3" class="notice">{{time}}</el-col>
    </el-row>
  </div>
</template>

<style scoped lang="scss">
.header {
  width: 100%;
  color: #fff;
  // background-color: rgba(18, 21, 39, 0.86);
  .notice {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .d-flex {
    display: flex;
    align-items: center;
    .isCollapse {
      margin-right: 1rem;
      font-size: 1.35rem;
    }
  }
  .avatar {
    cursor: pointer;
    display: flex;
    align-items: center;
    span,
    .el-icon {
      color: #fff;
    }
  }
}
</style>
