<template>
  <header>
    <div class="center-wrapper">
      <div class="logo">
        <img style="width: 62px;height: 46px;" src="/favicon.ico" alt=""/>
        <span>药慧精灵</span>
      </div>
      <div class="menu">
        <router-link to="/home" class="menu-item" active-class="active active1">首页</router-link>
        <router-link to="/registration" class="menu-item" active-class="active active2">挂号</router-link>
        <router-link to="/outpatient" class="menu-item" active-class="active active3">接诊</router-link>
        <router-link to="/charge" class="menu-item" active-class="active active4">收费</router-link>
        <router-link to="/inventory" class="menu-item" active-class="active active5">库存</router-link>
        <router-link to="/member" class="menu-item" active-class="active active6">患者</router-link>
        <router-link to="/social" class="menu-item" active-class="active active7">医保</router-link>
        <router-link to="/statistics" class="menu-item" active-class="active active8">统计</router-link>
        <router-link to="/settings" class="menu-item" active-class="active active9">设置</router-link>
      </div>
      <div class="info">
        <span class="username">{{ username }}</span>
        <el-button class="hover" :icon="Right" style="color: #fff" @click="logout" text>退出登录</el-button>
      </div>
    </div>
  </header>
</template>

<style scoped lang="scss">
@use "@/assets/scss/base";
.center-wrapper{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu {
  position: relative;
  display: flex;
  align-items: center;
  text-align: center;
  .menu-item {
    display: inline-block;
    color: #FFF;
    outline: none;
    text-decoration: none;
    font-size: 18px;
    width: 140px;
    height: 50px;
    position: relative;
    &::before {
      content: '';
      display: inline-block;
      width: 26px;
      height: 50px;
      vertical-align: middle;
      border-radius: 12px;
      background-repeat: no-repeat;
      background-size: 100%;
      background-position: 0 10px;
    }

    &:nth-child(1)::before {
      background-image: url('/static/images/menu_icon/1.png'); // 替换为实际的图片路径
    }

    &:nth-child(2)::before {
      background-image: url('/static/images/menu_icon/2.png'); // 替换为实际的图片路径
    }

    &:nth-child(3)::before {
      background-image: url('/static/images/menu_icon/3.png'); // 替换为实际的图片路径
    }

    &:nth-child(4)::before {
      background-image: url('/static/images/menu_icon/4.png'); // 替换为实际的图片路径
    }

    &:nth-child(5)::before {
      background-image: url('/static/images/menu_icon/5.png'); // 替换为实际的图片路径
    }

    &:nth-child(6)::before {
      background-image: url('/static/images/menu_icon/6.png'); // 替换为实际的图片路径
    }

    &:nth-child(7)::before {
      background-image: url('/static/images/menu_icon/7.png'); // 替换为实际的图片路径
    }

    &:nth-child(8)::before {
      background-image: url('/static/images/menu_icon/8.png'); // 替换为实际的图片路径
    }

    &:nth-child(9)::before {
      background-image: url('/static/images/menu_icon/9.png'); // 替换为实际的图片路径
    }
  }

  .active {
    background: #fff;
    color: base.$background-color-main;
    border-radius: 12px;
  }

  .active1:before {
    background-image: url('/static/images/menu_icon/1-active.png') !important;
  }

  .active2:before {
    background-image: url('/static/images/menu_icon/2-active.png') !important;
  }

  .active3:before {
    background-image: url('/static/images/menu_icon/3-active.png') !important;
  }

  .active4:before {
    background-image: url('/static/images/menu_icon/4-active.png') !important;
  }

  .active5:before {
    background-image: url('/static/images/menu_icon/5-active.png') !important;
  }

  .active6:before {
    background-image: url('/static/images/menu_icon/6-active.png') !important;
  }

  .active7:before {
    background-image: url('/static/images/menu_icon/7-active.png') !important;
  }

  .active8:before {
    background-image: url('/static/images/menu_icon/8-active.png') !important;
  }

  .active9:before {
    background-image: url('/static/images/menu_icon/9-active.png') !important;
  }

}

header {
  position: relative;
  width: 100%;
  height: 80px;
  background-color: base.$background-color-main;
  padding: 15px 0;
}

.info {
  color: #FFF;
  font-size: 18px;
  float: right;
  display: flex;
  align-items: center; // 垂直居中
  .username {
    display: inline-block;
    height: 50px;
    line-height: 50px;
  }

  .hover {
    margin-left: 10px;
    cursor: pointer;

    &:hover {
      color: #4d6de4 !important;
    }
  }
}
.logo{
  margin-left: 30px;
  display: flex;
  align-items: center;
  font-weight: 400;
  font-size: 24px;
  color: #FFFFFF;
  font-style: normal;
}

/* 响应式设计 */
@media (max-width: 1299px) {
  .logo span {
    display: none; // 隐藏文字
  }
}
@media (width: 1920px) {
  .logo span {
    font-size: 28px; // 隐藏文字
  }
}
</style>
<script setup lang="ts">
import {useRouter} from 'vue-router'
import {type Action, ElMessage, ElMessageBox} from 'element-plus'
import {apiConfig} from "@/assets/config/apiConfig.ts";
import {post} from "@/utils/request";
import {Right} from "@element-plus/icons-vue";
import {onMounted, ref} from "vue";


let logout = function () {
  ElMessageBox.confirm(
      '退出成功并退出签到，即将为您跳转到登录页面,确定吗?',
      '退出提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        localStorage.removeItem('token')
        post(apiConfig.signOut).then((res: any) => {
          useRouter().push("/manager/login")
        })
        ElMessage({
          type: 'success',
          message: '退出登录并退出签到',
        })
      })
      .catch(() => {
        useRouter().push("/")
      })
}
onMounted(() => {
  getInfo()
})
const username = ref<any>('')
const getInfo = () => {
  post(apiConfig.managerUserVerify).then((res: any) => {
    username.value = res.username
  })
}
</script>
