<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 '@/views/system/manage/index.vue'
import UserInfoSet from '@/views/system/manage/user/userinfo.vue'
import {useRoute, useRouter } from 'vue-router'
import { useCache } from '@/data-visualization/hooks/web/useCache'
import dataVisualization from '@/data-visualization/index.vue'
import FormCreate from '@/views/BuiltInPage/FormCreate.vue'
const { wsCache } = useCache()
const router = useRouter()
const route = useRoute()
const props = defineProps({
  menuList: {
    type: Array, // 根据实际数据结构调整
    required: true, // 强制必须传递
    default: () => [] // 设置安全默认值
  },
  isFixed: Boolean,
  projectName: String,
  applicationId: String,
})
const navtitle:any = ref('')
const navmenulist: any = ref([
])
const checkindex = ref(null)
const currentMoudleId = ref('')
const currentMoudleType = ref('')
const currentrow:any = ref({})
const userList:any = ref({})
const showcontent = ref('')
watch(
  () => props.menuList,
  (newVal) => {
    if (newVal) {
      navmenulist.value = newVal
    }
  },
  { immediate: true } // 立即执行一次
)
function menuclick(index: any) {
  showcontent.value = ''
  if (navmenulist.value[index].children.length == 0 || navmenulist.value[index].children == undefined) {
    checkindex.value = index
    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]
      if(currentrow.value.module_type == '03'){
      currentMoudleType.value = 'dataV'
      showcontent.value = 'dataVisualization'
    }else if(currentrow.value.module_type == '0301'){
      currentMoudleType.value = 'dashboard'
      showcontent.value = 'dataVisualization'
    }
    }
  }
}
function childmenuclick(item: any) {
  showcontent.value = ''
  if (item.module_id && item.module_id !== '') {
    currentrow.value = item
    currentMoudleId.value = item.module_id
    if(currentrow.value.module_type == '03'){
      currentMoudleType.value = 'dataV'
      showcontent.value = 'dataVisualization'
    }else if(currentrow.value.module_type == '0301'){
      currentMoudleType.value = 'dashboard'
      showcontent.value = 'dataVisualization'
    }else if(currentrow.value.module_type == '05'){
      showcontent.value = 'FormCreate'
    }
  }
}
// 时间相关逻辑移动到独立组件中
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 = JSON.parse(localStorage.getItem('userInfo'))
})
onBeforeUnmount(() => {

});
function permissionClick() {
  showcontent.value = 'PermissionSet'
}
function logout(){
  ElMessageBox.confirm(
    '确定退出登录?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      localStorage.removeItem('token')
      localStorage.removeItem('userInfo')
      localStorage.removeItem('permissions')
      router.push({
        path: '/UserLogin',
      })
    })
    .catch(() => {})
}
function userdetails(){
  showcontent.value = 'UserInfoSet'
}
</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;" @click="permissionClick"><img
              src="@/assets/system/navpermission.png" alt=""></div>
          <div style="margin-right: 10px;cursor: pointer;" @click="userdetails"><img src="@/assets/system/nav1.png" alt=""></div>
          <div style="margin-right: 15px;min-width: 45px;cursor: pointer;" @click="userdetails">{{ userList.nickname }}</div>
          <div style="margin-right: 15px;cursor: pointer;"><img src="@/assets/system/nav3.png" alt=""></div>
          <div @click="logout" style="cursor: pointer;"><img src="@/assets/system/nav4.png" alt=""></div>
        </div>
      </div>
    </div>
    <div class="system-box-content" style="height: calc(100vh - 65px);">
      <dataVisualization v-if="showcontent == 'dataVisualization'" :appId="currentrow.module_id" :busiFlag="currentMoudleType" />
      <FormCreate v-if="showcontent == 'FormCreate'" :appId="currentrow.module_id" />
      <PermissionSet v-if="showcontent == 'PermissionSet'" :isshowheader="true" />
      <UserInfoSet v-if="showcontent == 'UserInfoSet'" :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: 65px;
    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;

          .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(/images/navmenu.png) no-repeat;
          background-size: 100% 100%;
          margin-left: 15px;
          cursor: pointer;
          position: relative;
        }

        .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;
      }
    }

  }

  .system-box-content {
    width: 100%;
  }
}
</style>
<style>
.tsmenu-popover.el-popover.el-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;
  z-index: 9001 !important;
}

.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;
  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: rgb(2, 88, 161);
  font-weight: 700;
}
</style>