<script lang="ts" setup>
import { ref, onMounted,onBeforeUnmount,shallowRef } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import Assocmodule from '@/viewsnew/application/menuconfig/assocmodule.vue'
const props = defineProps({
    menuList:Object,
    isFixed:  Boolean,
    projectName:String,
    applicationId:String
})
const navtitle = ref('')
const navmenulist:any = ref([
])
const checkindex = ref(null)
const showmodule = ref(false)
const currentMoudleId = ref('')
function menuclick(index:any) {
    if(navmenulist.value[index].children.length == 0 || navmenulist.value[index].children == undefined){
        checkindex.value = index
        currentMoudleId.value = navmenulist.value[index].module_id
    }
}
function childmenuclick(item:any){
  if(item.module_id && item.module_id !== ''){
    currentMoudleId.value = item.module_id
    showmodule.value = true
  }else{
    showmodule.value = false
  }
}
// 时间相关逻辑移动到独立组件中
const TimeDisplay = {
  template: `
    <div class="Navbar-menu-time">
      <div class="Navbar-menu-time-text">{{ currentTime }}</div>
      <div class="Navbar-menu-time-text2">{{ currentDate }}</div>
    </div>
  `,
  setup() {
    const currentTime = shallowRef('')
    const currentDate = shallowRef('')
    let timer: number
    
    function updateTime() {
      const now = new Date();
      const hours = String(now.getHours()).padStart(2, '0');
      const minutes = String(now.getMinutes()).padStart(2, '0');
      const seconds = String(now.getSeconds()).padStart(2, '0');
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, '0');
      const day = String(now.getDate()).padStart(2, '0');
      const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      const weekday = weekdays[now.getDay()];
      currentTime.value = `${hours}:${minutes}:${seconds}`;
      currentDate.value = `${year}-${month}-${day} ${weekday}`;
    }
    
    onMounted(() => {
      updateTime()
      timer = setInterval(updateTime, 1000)
    })
    
    onBeforeUnmount(() => {
      clearInterval(timer)
    })
    
    return { currentTime, currentDate }
  }
}
onMounted(() => {
    navmenulist.value = props.menuList
    navtitle.value = props.projectName
})
onBeforeUnmount(() => {
 
});
</script>
<template>
    <div class="system-box">
        <div class="Navbar-box">
            <div class="Navbar-box-titie">{{ navtitle }}</div>
            <div class="Navbar-menu-box">
                <div class="Navbar-menu-content">
                    <TimeDisplay />
                    <div class="Navbar-menu-item"
                        :class="{ 'Navbar-menu-items': checkindex == index && item.children.length == 0 }"
                        v-for="(item, index) in navmenulist" :key="index" @click="menuclick(index)">
                        <div v-if="item.children.length == 0">{{ item.name }}</div>
                        <el-popover v-else class="tsmenu" placement="bottom" popper-class="tsmenu-popover">
                            <div v-for="(items, indexs) in item.children" :key="indexs"
                                class="Navbar-menu-item-child-item" @click.stop="childmenuclick(items)">
                                {{ items.name }}
                            </div>
                            <template #reference>
                                <div v-if="item.children.length > 0">{{ item.name }}</div>
                            </template>
                        </el-popover>
                    </div>
                </div>
                <div class="Navbar-box-right">
                    <div style="margin-right: 10px;"><img src="@/assets/img/nav1.png" alt=""></div>
                    <div style="margin-right: 15px;min-width: 45px;">admin</div>
                    <div style="margin-right: 15px;"><img src="@/assets/img/nav3.png" alt=""></div>
                    <div><img src="@/assets/img/nav4.png" alt=""></div>
                </div>
            </div>
        </div>
        <div class="system-box-content" :style="{height:props.isFixed?'calc(100vh - 65px)':'calc(100vh - 125px)'}">
            <Assocmodule v-if="showmodule" :applicationId="applicationId" :moduleinfo="{module_id:currentMoudleId}" />
        </div>
    </div>
</template>

<style lang="less" scoped>
.system-box {
    width: 100%;
    height: 100%;
    background-color: rgb(0,52,102);
    .Navbar-box {
        width: 100%;
        height: 65px;
        display: flex;
        align-items: center;
        color: #fff;
        background: url(@/assets/img/navbg.png) no-repeat;
        background-size: 100% 100%;
        padding-left: 25px;
        .Navbar-box-titie {
            font-size: 25px;
            font-weight: 700;
            background: linear-gradient(to bottom, #ffffff, #0089ff);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            width: 340px;
        }

        .Navbar-menu-box {
            width: calc(100% - 340px);
            display: flex;
            align-items: center;
            padding-left: 43px;
            padding-right: 20px;
            justify-content: space-between;

            .Navbar-menu-content {
                width: 100%;
                display: flex;
                align-items: center;

                .Navbar-menu-time {
                    width: 150px;

                    .Navbar-menu-time-text {
                        font-size: 16px;
                        font-weight: 700;
                    }

                    .Navbar-menu-time-text2 {
                        font-size: 13px;
                        font-weight: 700;
                    }
                }

                .Navbar-menu-item {
                    font-size: 14px;
                    padding: 5px 15px;
                    background: url(@/assets/img/navmenu.png) no-repeat;
                    background-size: 100% 100%;
                    margin-left: 15px;
                    cursor: pointer;
                    position: relative;
                }

                .Navbar-menu-items {
                    background: url(@/assets/img/navmenucheck.png)  no-repeat;
                    background-size: 100% 100%;
                }

            }

            .Navbar-box-right {
                width: 165px;
                display: flex;
                align-items: center;
                font-size: 14px;
            }
        }

    }

    .system-box-content {
        width: 100%;
    }
}
</style>
<style>
.tsmenu-popover.ed-popover.ed-popper {
    background: linear-gradient(to bottom, rgba(0, 52, 102, 1), rgba(0, 55, 110, 0.5));
    color: #fff;
    border: none;
    border-radius: 0px;
    padding: 5px 0px;
}

.tsmenu-popover .Navbar-menu-item-child-item {
    padding: 5px 15px;
    cursor: pointer;
    text-align: center;
}
.tsmenu-popover .Navbar-menu-item-child-item:hover {
    color: rgb(0, 255, 254);
    background: rgb(2, 88, 161);
    font-weight:700;
}
</style>