<template>
  <div class="layout-header">
   <div class="header-title" :style="header.text.style"><img class="logo" :src="header.logo" /> {{header.text.label}}</div>
   <div v-if="$slots.menu" class="header-menu" >
    <slot name="menu"></slot>
    <!-- <span :class="menuIndex===0? 'avt' : ''">首页</span>
    <span :class="menuIndex===1? 'avt' : ''">3.0-个案管理</span>
    <span :class="menuIndex===2? 'avt' : ''">4.0-预防接种</span>
    <span :class="menuIndex===3? 'avt' : ''">5.0-预约管理</span>
    <span :class="menuIndex===4? 'avt' : ''">6.0-统计报表</span>
    <span :class="menuIndex===5? 'avt' : ''">7.0-系统设置</span>
    <span :class="menuIndex===6? 'avt' : ''">8.0-审核管理</span>
    <span :class="menuIndex===7? 'avt' : ''">10.0-后台管理</span>

    <div id="indicator"></div> -->
   </div>
   <div v-if="$slots.uinfo" class="header-uinfo">
      <slot name="uinfo"></slot>
      <!-- <div class="header-uinfo" >
        <t-dropdown class="dropdown" :options="options" trigger="click" @click="clickHandler">
          <div class="user-info-name">管理员管理员管理员<ChevronDownIcon class="iconss"/></div>
        </t-dropdown>
      </div> -->
    </div>
  </div>
</template>
<script setup lang="ts">
import {ref, computed, onMounted } from 'vue'
const props = defineProps({
  config: {  // 配置项
    type: Object,
    default: {},
  },
});
const { config } = props

const header = computed(() => {
  console.log('config', config);
  var data = config
  if(data.logo){
    data.logo = data.logo.replace('{theme}', config.theme) || null
  }
   return data
});

const options = [
  { content: '个人中心', value: 1 },
  // { content: '修改密码', value: 2, divider: true },
  { content: '退出系统', value: 3, theme: 'error' },
];

const clickHandler = (item) => {
  console.log(item);
};

const menuIndex = ref(0)
const doActive = ()=>{
  console.log('doActive');
//   document.addEventListener('DOMContentLoaded', function() {
    
// });
  const navLinks = document.querySelectorAll('.header-menu span'); // 获取所有链接
  const indicator = document.getElementById('indicator'); // 获取指示器元素
  let currentIndex = 0; // 当前激活的链接索引，默认为第一个链接
  function updateIndicator(index) {
    menuIndex.value = index
    const link = navLinks[index]; // 获取当前链接元素
    const left = link.offsetLeft; // 获取链接左侧位置
    const width = link.offsetWidth; // 获取链接宽度
    indicator.style.left = `${left}px`; // 设置指示器左侧位置为当前链接的左侧位置
    indicator.style.width = `${width}px`; // 设置指示器宽度为当前链接的宽度
  }
  
  navLinks.forEach((link, index) => {
      link.addEventListener('mouseenter', () => {
          updateIndicator(index); // 当鼠标进入链接时更新指示器位置
      });
  });
  updateIndicator(menuIndex.value)
}

onMounted(()=>{
  setTimeout(() => {
    doActive()
  }, 500);
})


</script>
<style lang="less">
:root {
  --start-color: #00448F;
  --end-color: #1F7EF2;
}

.layout-header{
  height: 60px;
  background: linear-gradient(to right, var(--start-color), var(--end-color));
  line-height: 60px;
  padding: 0 10px;
  display: flex;
  // justify-content: space-between;
  gap: 0px; /* 列之间的间距 */
 
  .header-title{
    display: inline-block;
    line-height: 60px;
    font-size: 20px;
    .logo{
      // height: 100%;
      vertical-align: middle;
      margin-right: 10px;
      width: 54px;
      height: 60px;

    }
  }
  .header-menu{
    // background: rgba(255,255,255,0.2);
    color: #ffffff;
    padding-left: 60px;
    margin: 10px 0px;
    line-height: 40px;
    border-right: 1px solid #378bf1;
    position: relative;
    flex: 1;
    >span{
      display: inline-block;
      padding: 0 10px;
      margin: 0 5px;
      color: #e8e8e8;
      cursor: pointer;
    }
    span.avt{
      height: 40px; /* 指示器高度 */
      background-color: #abd0f7; /* 指示器颜色 */
      transition: left 0.5s ease; /* 平滑过渡效果 */
      box-shadow: 0 0 8px #0003;
      background: rgba(255,255,255,0.2);
      border-radius: 5px;
      color: #ffffff;
    }
    #indicator {
      display: none;
      // border-bottom-right-radius: 0;
      // border-bottom-left-radius: 0;
      // border-bottom: 1px solid #abd0f7;
    }
  }
  .header-menu:hover{
    span.avt{
      height: 40px; /* 指示器高度 */
      background:none;
      color: #e8e8e8;
      box-shadow:none;
    }
    #indicator {
      position: absolute;
      bottom: 0;
      height: 40px; /* 指示器高度 */
      background-color: #abd0f7; /* 指示器颜色 */
      transition: left 0.5s ease; /* 平滑过渡效果 */
      box-shadow: 0 0 8px #0003;
      background: rgba(255,255,255,0.2);
      border-radius: 5px;
      display: block;
      cursor: pointer;
    }
  }
  .header-uinfo{
    text-align: right;
    color: #ffffff;
    width: 90px;
    padding: 0 10px;
    margin: 10px 0px;
    line-height: 40px;
    border-left: 1px solid #1667c9; // 3d8ef1;1a6cd1
    .user-info-name{
      white-space: nowrap; /* 防止文本换行 */
      overflow: hidden; /* 隐藏溢出的文本 */
      text-overflow: ellipsis; /* 溢出的文本显示为省略号 */
      width: 80px; /* 设置一个宽度，例如200px */
      padding-right: 15px;
      padding-left: 4px;
      position: relative;
      text-align: center;
      .iconss{
        position: absolute;
        right: 0px;
        top: 16px;
      }
    }

  }
  
}
</style>