<script lang="ts" setup>
import { ref, watch, onMounted, onBeforeUnmount, shallowRef } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import Assocmodule from '@/viewsnew/application/SfcEditor/NavbarEditor/assocPage.vue'
import PermissionSet from '@/viewsnew/application/permissionset/index.vue'
import UserInfoSet from '@/viewsnew/application/permissionset/user/userinfo.vue'
import {useRoute, useRouter } from 'vue-router'
import { useCache } from '@/hooks/web/useCache'
const { wsCache } = useCache()
const router = useRouter()
const route = useRoute()
const props = defineProps({
  menuList: {
    type: Array, // 根据实际数据结构调整
    required: true, // 强制必须传递
    default: () => [] // 设置安全默认值
  },
  isFixed: Boolean,
  projectName: String,
  applicationId: String,
  isExecuteEvent: Boolean
})
const navtitle = ref('')
const navmenulist: any = ref([
])
const checkindex = ref(null)
const showmodule = ref(false)
const currentMoudleId = ref('')
const showermission = ref(false)
const showUserInfo = ref(false)
const currentrow = ref({})
const userList:any = ref({})
watch(
  () => props.menuList,
  (newVal) => {
    if (newVal) {
      navmenulist.value = newVal
    }
  },
  { immediate: true } // 立即执行一次
)
function menuclick(index: any) {
  if (navmenulist.value[index].children.length == 0 || navmenulist.value[index].children == undefined) {
    checkindex.value = index
    if (props.isExecuteEvent) {
      return
    }
    currentMoudleId.value = navmenulist.value[index].module_id
    if (navmenulist.value[index].module_id && navmenulist.value[index].module_id !== '') {
      currentMoudleId.value = navmenulist.value[index].module_id
      currentrow.value = navmenulist.value[index]
      showmodule.value = true
      showermission.value = false
      showUserInfo.value = false
    }
  }
}
function childmenuclick(item: any) {
  if (props.isExecuteEvent) {
    return
  }
  showermission.value = false
  showmodule.value = false
  showUserInfo.value = false
  if (item.module_id && item.module_id !== '') {
    currentrow.value = item
    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
  userList.value = wsCache.get('Permission-userinfo')
})
onBeforeUnmount(() => {

});
function permissionClick() {
  if (props.isExecuteEvent) {
    return
  }
  showmodule.value = false
  showUserInfo.value = false
  showermission.value = true
}
function logout(){
  ElMessageBox.confirm(
    '确定退出登录?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      wsCache.delete('Permission-userinfo')
      router.push({
        path: '/SystemLogin',
        query: { id: props.applicationId, name: props.projectName }
      })
    })
    .catch(() => {})
}
function userdetails(){
  showmodule.value = false
  showermission.value = false
  showUserInfo.value = true
}
</script>
<template>
  <div class="system-box">
    <div class="Navbar-box">
      <div class="Navbar-box-titie">
        <div class="Navbar-box-titie-text">
          {{ navtitle }}
        </div>
      </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 || item.children.length == 0">{{ item.name }}</div>
            <el-popover v-else :show-arrow="false" 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="() => 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;cursor: pointer;"><img src="@/assets/img/nav1.png" alt=""></div>
          <div style="margin-right: 10px;min-width: 45px;cursor: pointer;" @click="userdetails">{{ props.isExecuteEvent == false?userList.nickname:'admin' }}</div>
          <div style="margin-right: 10px;cursor: pointer;" @click="userdetails"><img src="@/assets/img/nav3.png" alt=""></div>
          <div style="margin-right: 10px;cursor: pointer;" @click="permissionClick"><img
              src="@/assets/img/navpermission.png" alt=""></div>
<div @click="logout" style="cursor: pointer;"><img src="@/assets/img/nav4.png" alt=""></div>

        </div>
      </div>
    </div>
    <div v-if="!props.isExecuteEvent" class="system-box-content"
      :style="{ height: props.isFixed ? 'calc(100vh - 65px)' : 'calc(100vh - 125px)' }">
      <Assocmodule v-if="showmodule" :applicationId="props.applicationId"
        :moduleinfo="currentrow" />
      <PermissionSet v-if="showermission" />
      <UserInfoSet v-if="showUserInfo" :userList="userList" :applicationId="props.applicationId" />
    </div>
  </div>
</template>

<style lang="less" scoped>
.system-box {
  width: 100%;
  height: 100%;
  background-color: rgb(0, 52, 102);

  .Navbar-box {
    width: 100%;
    height: 85px;
padding-top:20px;
    display: flex;
    align-items: center;
    color: #fff;

    .Navbar-box-titie {
      width: 400px;
      height: 65px;
      line-height: 65px;
      background: url(/images/navleft.png) no-repeat;
      background-size: 100% 100%;
      padding-left: 20px;
      padding-right: 15px;

      .Navbar-box-titie-text {
        font-size: 25px;
        font-weight: 700;
        background: linear-gradient(to bottom, #ffffff, #0089ff);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }
    }

    .Navbar-menu-box {
      width: calc(100% - 400px);
      height: 63px;
      display: flex;
      align-items: center;
      padding-left: 20px;
      padding-right: 20px;
      justify-content: space-between;
      background: url(/images/navright.png) no-repeat;
      background-size: 100% 100%;

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

        .Navbar-menu-time {
          width: 150px;
    margin-top: -10px;

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

          .Navbar-menu-time-text2 {
            font-size: 13px;
            margin-top:5px;
          }
        }

        .Navbar-menu-item {
          font-size: 14px;
          padding: 8px 20px;
          background: url(/images/navmenu.png) no-repeat;
          background-size: 100% 100%;
          margin-left: 15px;
          cursor: pointer;
          position: relative;
    margin-top: -18px;
        }

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

        }

      }

      .Navbar-box-right {
        width: 210px;
        display: flex;
        align-items: center;
        font-size: 14px;
    margin-top: -15px;
      }
    }

  }

  .system-box-content {
    width: 100%;
  }
}
</style>
<style>
.tsmenu-popover.el-popover.el-popper {
  background: linear-gradient(to bottom, rgba(0, 71, 142, 1), rgba(0, 71, 142, 0));
   border: 1px solid;

 border-image: linear-gradient(to bottom, rgba(0,255,255,0.5), rgba(0,255,255,0)) 1;
border-bottom:none;
  color: #fff;
  border-radius: 0px;
  padding: 5px 0px;
  z-index: 9001 !important;

}

.tsmenu-popover.ed-popover.ed-popper {
  background: linear-gradient(to bottom, rgba(0, 71, 142, 1), rgba(0, 71, 142, 0));
 border: 1px solid;

 border-image: linear-gradient(to bottom, rgba(0,255,255,0.5), rgba(0,255,255,0)) 1;
border-bottom:none;
  color: #fff;
  border-radius: 0px;
  padding: 5px 0px;
  z-index: 9001 !important;
}

.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: rgba(0,153,255,0.2);
  font-weight: 700;
}
</style>