<template>
  <div style="height: 100vh; position: relative">
    <n-layout position="absolute">
      <n-layout-header style="height: 0px" bordered> </n-layout-header>
      <n-layout has-sider position="absolute" style="top: 0px; bottom: 0px">
        <n-layout-content :native-scrollbar="false">
          <router-view></router-view>
        </n-layout-content>
      </n-layout>
    </n-layout>
  </div>
</template>
<script>
import { h, ref, reactive, onMounted, onBeforeUnmount, toRefs } from "vue";
import { mapGetters } from "vuex";
import config from "@/config.js";
import { NIcon } from "naive-ui";
import { ContrastSharp, MenuOutline } from "@vicons/ionicons5";

import * as Icons from "@vicons/ionicons5";
import { useRouter } from "vue-router";

// 声明部分主题图片文件------A
import topImgPath_B from "@/assets/Imgs/index_TopBackgroundImg_B.png";
import topImgPath_W from "@/assets/Imgs/index_TopBackgroundImg_W.png";
// 声明部分主题图片文件------E
function renderIcon(icon) {
  return () => h(NIcon, null, { default: () => h(icon) });
}
const state = reactive({
  /**
   * 菜单数据
   * @param label 菜单名称
   * @param icon 调用renderIcon方法展示图标，目前设定只给一级菜单设定图标，功能上兼容子集菜单的图标渲染
   * @param key 唯一且与router中页面的name相呼应，如菜单是外链菜单请使用http(s)作为开头，则会对此类型菜单进行新窗口打开
   */
  menuOptions: [
    // {
    //   label: "首页",
    //   key: "homePage",
    //   icon: renderIcon(Icons.HomeSharp),
    // },
    // {
    //   label: "泵站综合一张图",
    //   key: "oneMap",
    // },
    // {
    //   label: "工作台",
    //   key: "workbench",
    // },
    // {
    //   label: "系统管理",
    //   key: "System",
    //   icon: renderIcon(Icons.Flower),
    //   children: [
    //     {
    //       label: "用户管理",
    //       key: "user",
    //     },
    //     {
    //       label: "角色管理",
    //       key: "role",
    //     },
    //     {
    //       label: "菜单管理",
    //       key: "menu",
    //     },
    //     // {
    //     //     label: "权限管理",
    //     //     key: "authority",
    //     // }
    //     {
    //       label: "定时任务",
    //       key: "scheduled",
    //     },
    //     {
    //       label: "系统日志",
    //       key: "logs",
    //     },
    //   ],
    // },
    // {
    //   label: "提醒设置",
    //   key: "reminder",
    //   icon: renderIcon(Icons.Flower),
    //   children: [
    //     {
    //       label: "提醒设置",
    //       key: "reminderSettings",
    //     },
    //   ],
    // },
    // {
    //   label: "人员管理",
    //   key: "Personnel",
    //   children: [
    //     {
    //       label: "培训结果",
    //       key: "trainingResults",
    //     },
    //     {
    //       label: "培训计划",
    //       key: "trainingPlan",
    //     },
    //     {
    //       label: "人员值班时长统计",
    //       key: "DutyHours",
    //     },
    //     {
    //       label: "值班历史记录",
    //       key: "DutyHistory",
    //     },
    //     {
    //       label: "人员培训明细",
    //       key: "trainingDetails",
    //     },
    //     {
    //       label: "值班计划配置",
    //       key: "dutyPlan",
    //     },
    //   ],
    // },
    // {
    //   label: "设备管理",
    //   key: "device",
    //   children: [
    //     {
    //       label: "维修分析",
    //       key: "analysis",
    //     },
    //     {
    //       label: "派单申请",
    //       key: "dispatchApplication",
    //     },
    //     {
    //       label: "设备维修记录",
    //       key: "maintenanceRecord",
    //     },
    //     {
    //       label: "维修审核",
    //       key: "maintenanceAudit",
    //     },
    //     {
    //       label: "工单评价",
    //       key: "WorkEvaluation",
    //     },
    //   ],
    // },
    // {
    //   label: "防汛应急一张图",
    //   key: "preventionOneMap",
    //   // icon: renderIcon(SparklesOutline),
    // },
    // {
    //   label: "运维一张图",
    //   key: "maintenanceOneMap",
    // },
    // {
    //   label: "泵站管理",
    //   key: "pumpStation",
    //   // icon: renderIcon(Flower),
    //   children: [
    //     {
    //       label: "泵站基础资料",
    //       key: "basicData",
    //     },
    //   ],
    // },
    // {
    //   label: "泵站工况管理",
    //   key: "pumpWorking",
    //   // icon: renderIcon(Flower),
    //   children: [
    //     {
    //       label: "物联设备工况",
    //       key: "iotEquipment",
    //     },
    //     {
    //       label: "实时运行统计",
    //       key: "realtimeStatistics",
    //     },
    //     {
    //       label: "泵闸工况",
    //       key: "pumpGateworking",
    //     },
    //   ],
    // },
    // {
    //   label: "数据服务",
    //   key: "dataService",
    //   // icon: renderIcon(Flower),
    //   children: [
    //     {
    //       label: "数据访问统计",
    //       key: "visitStatistics",
    //     },
    //   ],
    // },
    // {
    //   label: "运行监控",
    //   key: "operationMonitor",
    //   // icon: renderIcon(Flower),
    //   children: [
    //     {
    //       label: "视频监控",
    //       key: "videoMonitor",
    //     },
    //   ],
    // },
    // {
    //   label: "绩效管理",
    //   key: "performance",
    //   // icon: renderIcon(Flower),
    //   children: [
    //     {
    //       label: "年度考核绩效管理",
    //       key: "yearAssessment",
    //     },
    //     {
    //       label: "月度考核绩效管理",
    //       key: "mouthAssessment",
    //     },
    //     {
    //       label: "绩效考核指标库",
    //       key: "appraisal",
    //     },
    //   ],
    // },
    // // {
    // //     label: "Naive UI 文档",
    // //     key: "https://www.naiveui.com/zh-CN/os-theme/components/button",
    // //     // icon: renderIcon(SparklesOutline),
    // // },
    // // {
    // //     label: "测试页面",
    // //     key: "ceshi",
    // //     // icon: renderIcon(HomeSharp),
    // // }
  ],
});

// 获取菜单数据
async function GetMenuData() {
  // let res = await mockGetuser();
  // if (res.code == 200) {
  state.menuOptions = [
    // {
    //     label: "首页",
    //     key: "homePage",
    //     // icon: renderIcon(HomeSharp),
    // }, {
    //     label: "泵站综合一张图",
    //     key: "oneMap"
    // },
    {
      label: "流域一张图",
      key: "WatershedOneMap",
    },
    {
      label: "工作台",
      key: "workbench",
    },
    {
      label: "实时数据",
      key: "DataNow",
    },
    {
      label: "系统管理",
      key: "System",
      // icon: renderIcon(Flower),
      children: [
        {
          label: "用户管理",
          key: "user",
        },
        {
          label: "角色管理",
          key: "role",
        },
        {
          label: "菜单管理",
          key: "menu",
        },
        // {
        //     label: "权限管理",
        //     key: "authority",
        // }
        {
          label: "定时任务",
          key: "scheduled",
        },
        {
          label: "系统日志",
          key: "logs",
        },
      ],
    },
    {
      label: "提醒设置",
      key: "reminder",
      // icon: renderIcon(Flower),
      children: [
        {
          label: "提醒设置",
          key: "reminderSettings",
        },
      ],
    },
    {
      label: "人员管理",
      key: "Personnel",
      children: [
        {
          label: "培训结果",
          key: "trainingResults",
        },
        {
          label: "培训计划",
          key: "trainingPlan",
        },
        {
          label: "人员值班时长统计",
          key: "DutyHours",
        },
        {
          label: "值班历史记录",
          key: "DutyHistory",
        },
        {
          label: "人员培训明细",
          key: "trainingDetails",
        },
        {
          label: "值班计划配置",
          key: "dutyPlan",
        },
      ],
    },
    {
      label: "设备管理",
      key: "device",
      children: [
        {
          label: "维修分析",
          key: "analysis",
        },
        {
          label: "派单申请",
          key: "dispatchApplication",
        },
        {
          label: "设备维修记录",
          key: "maintenanceRecord",
        },
        {
          label: "维修审核",
          key: "maintenanceAudit",
        },
        {
          label: "工单评价",
          key: "WorkEvaluation",
        },
      ],
    },
    {
      label: "防汛应急一张图",
      key: "preventionOneMap",
      // icon: renderIcon(SparklesOutline),
    },
    {
      label: "运维一张图",
      key: "maintenanceOneMap",
    },
    {
      label: "泵站管理",
      key: "pumpStation",
      // icon: renderIcon(Flower),
      children: [
        {
          label: "泵站基础资料",
          key: "basicData",
        },
      ],
    },
    {
      label: "泵站工况管理",
      key: "pumpWorking",
      // icon: renderIcon(Flower),
      children: [
        {
          label: "物联设备工况",
          key: "iotEquipment",
        },
        {
          label: "实时运行统计",
          key: "realtimeStatistics",
        },
        {
          label: "泵闸工况",
          key: "pumpGateworking",
        },
      ],
    },
    {
      label: "数据服务",
      key: "dataService",
      // icon: renderIcon(Flower),
      children: [
        {
          label: "数据明细管理",
          key: "dataDetailManagement",
        },
        {
          label: "数据访问统计",
          key: "visitStatistics",
        },
      ],
    },
    {
      label: "运行监控",
      key: "operationMonitor",
      // icon: renderIcon(Flower),
      children: [
        {
          label: "视频监控",
          key: "videoMonitor",
        },
      ],
    },
    {
      label: "绩效管理",
      key: "performance",
      // icon: renderIcon(Flower),
      children: [
        // {
        //     label: "年度考核绩效管理",
        //     key: "yearAssessment",
        // },
        // {
        //     label: "月度考核绩效管理",
        //     key: "mouthAssessment",
        // },
        // {
        //     label: "绩效考核指标库",
        //     key: "appraisal",
        // },
        {
          label: "绩效考核评价",
          key: "evaluation",
        },
        // {
        //     label: "绩效考核评价(水务局)",
        //     key: "evaluation_Water",
        // },
        {
          label: "考核结果",
          key: "resultsPublicity",
        },
        // {
        //     label: "考核通知",
        //     key: "AssessmentNotice",
        // },
        {
          label: "指标库管理",
          key: "indexLibrary",
        },
        {
          label: "统计分析",
          key: "statisticalAna",
        },
      ],
    },
    {
      label: "报警预警",
      key: "alarmWarning",
      // icon: renderIcon(Flower),
      children: [
        {
          label: "报警设置",
          key: "alarmSettings",
        },
        {
          label: "报警日志",
          key: "alarmLogs",
        },
        {
          label: "推送规则",
          key: "alarmAnalys",
        },
        {
          label: "实时监测",
          key: "realTimeMonitoring",
        },
      ],
    },
    {
      label: "配置管理",
      key: "siteConfig",
      children: [
        {
          label: "站点管理",
          key: "siteManage",
        },
        {
          label: "因子管理",
          key: "factorManage",
        },
      ],
    },
    {
      label: "服务监控",
      key: "server",
      children: [
        {
          label: "服务器管理",
          key: "serverManager",
        },
        {
          label: "用户绑定",
          key: "userManage",
        },
      ],
    },
    // {
    //     label: "Naive UI 文档",
    //     key: "https://www.naiveui.com/zh-CN/os-theme/components/button",
    //     // icon: renderIcon(SparklesOutline),
    // },
    // {
    //     label: "测试页面",
    //     key: "ceshi",
    //     // icon: renderIcon(HomeSharp),
    // }
  ];
  // }
}

export default {
  components: {
    ContrastSharp,
    MenuOutline,
  },
  setup() {
    // 主题色初始化------A
    let primaryColor =
      localStorage.getItem("primaryColor") || config.primaryColor;

    let sysName = localStorage.getItem("sysName") || config.sysName;
    // 主题色初始化------E
    // 菜单点击事件-----A
    const router = useRouter();
    // 点击菜单
    function clickMenuItem(key) {
      if (/http(s)?:/.test(key)) {
        // 外链菜单
        window.open(key);
      } else {
        // 项目内部菜单
        router.push({ name: key });
      }
    }

    //顶部时间-------S
    let stateTime = reactive({
      date: "",
      time: "",
      week: "",
      timer: null,
    });
    const formatTime = () => {
      let date = new Date();
      let year = date.getFullYear(); // 年
      let month = date.getMonth() + 1; // 月
      let day = date.getDate(); // 日
      let hour = date.getHours(); // 时
      hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
      let minute = date.getMinutes(); // 分
      minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
      let second = date.getSeconds(); // 秒
      second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
      let week = new Array(
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六"
      ); //星期
      week = week[date.getDay()];
      stateTime.date = `${year}-${month}-${day}`;
      stateTime.time = `${hour}:${minute}:${second}`;
      stateTime.week = `${week}`;
    };
    const currentTime = () => {
      clearInterval(stateTime.timer);
      stateTime.timer = setInterval(() => {
        formatTime();
      }, 500);
    };
    Date.prototype.Format = function (fmt) {
      // author: meizz
      var o = {
        "M+": this.getMonth() + 1, // 月份
        "d+": this.getDate(), // 日
        "h+": this.getHours(), // 小时
        "m+": this.getMinutes(), // 分
        "s+": this.getSeconds(), // 秒
        "q+": Math.floor((this.getMonth() + 3) / 3), // 季度
        S: this.getMilliseconds(), // 毫秒
      };
      if (/(y+)/.test(fmt))
        fmt = fmt.replace(
          RegExp.$1,
          (this.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt))
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length == 1
              ? o[k]
              : ("00" + o[k]).substr(("" + o[k]).length)
          );
      return fmt;
    };
    //顶部时间-------E
    onMounted(() => {
      currentTime();
      console.log("挂载后");
      sessionStorage.setItem("powerHandle", ["a", "b", "c"]);
      GetMenuData();
    });
    onBeforeUnmount(() => {
      clearInterval(stateTime.timer);
    });
    return {
      cities: ref([]),
      ...toRefs(state),
      primaryColor: ref(primaryColor),
      sysName: ref(sysName),
      activeKey: ref(null),
      collapsed: ref(false),
      clickMenuItem,
      ...toRefs(stateTime),
      formatTime,
      currentTime,
      topImgPath_B,
      topImgPath_W,
      GetMenuData,
    };
  },
  computed: {
    ...mapGetters(["sysTheme", "sysThemeColor"]),
  },
  methods: {
    //切换主题
    onTheme() {
      this.$store.commit("system/TOGGLE_THEME");
    },
  },
};
</script>
<style lang="less">
@import "./index.less";
</style>