<template>
  <div class="userLogin" @click="closeSetting">
    <div class="hander">
      <div class="left">
        <div class="logo">
          <img class="image" src="@/assets/image/logo-red.png" alt="" />
        </div>
        <div class="title">{{ page_title }}</div>
      </div>
      <div class="right">
        <div class="time">
          {{ currentTime }}
        </div>
        <div class="set">
          <img
            class="image"
            v-show="show_menu"
            src="@/assets/image/menu.png"
            @click.stop="setOption" />
        </div>
      </div>
      <div class="set-option" v-if="showSet">
        <!--        <div @click="closeComp" v-if="route.path == '/'" class="item">-->
        <!--          <img class="img" :src="closeImage" alt="" />-->
        <!--          <div class="con">关机</div>-->
        <!--        </div>-->
        <div @click="exitService" v-if="route.path == '/'" class="item">
          <img class="img" :src="closeImage" alt="" />
          <div class="con">退出系统</div>
        </div>
        <div
          v-else
          class="item"
          v-for="item in setSelectOption"
          :key="item.id"
          @click="set(item.path)">
          <img class="img" :src="item.imgSrc" alt="" />
          <div class="con">{{ item.content }}</div>
        </div>
      </div>
    </div>
    <div class="main">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUpdated, reactive, onUnmounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import userManImage from '@/assets/image/userMan.png';
import exitImage from '@/assets/image/exit.png';
import dataManage from '@/assets/image/instrument_cal/dataManage.png';
import closeImage from '@/assets/image/close.png';
import { showConfirmDialog } from 'vant';
import { message, notify } from '@/utils/message.js';
import { shutDownApi, exitServiceApi } from '@/api/user.js';
import changePassword from '@/assets/image/change-password.png';
let page_title = import.meta.env.VITE_APP_TITLE;
const router = useRouter();
const route = useRoute();
let show_menu = ref(true);

const currentTime = ref('');

function updateTime() {
  const now = new Date();
  currentTime.value = `${now.getFullYear()}/${now.getMonth() + 1}/${now.getDate()} ${
    now.getHours() < 10 ? '0' + now.getHours() : now.getHours()
  }:${now.getMinutes() < 10 ? '0' + now.getMinutes() : now.getMinutes()}`;
}

onMounted(() => {
  updateTime(); // 初始更新时间
  const intervalId = setInterval(updateTime, 1000 * 60); // 每秒更新时间
});

onUpdated(() => {
  route.name == 'Login' ? (show_menu.value = false) : (show_menu.value = true);
});

const showSet = ref(false);

const setOption = () => {
  if (route.path == '/test1/secondStep') {
    return;
  }
  showSet.value = !showSet.value;
};

const closeComp = () => {
  showConfirmDialog({
    title: '提示',
    message: `是否确认关机？`,
    className: 'BaseApp-MessageBox-Confirm'
  })
    .then(() => {
      close(); //关机
    })
    .catch(() => {
      
    });
};

const exitService = () => {
  showConfirmDialog({
    title: '提示',
    message: `是否确认退出系统？`,
    className: 'BaseApp-MessageBox-Confirm'
  })
    .then(() => {
      exit(); //关闭服务
    })
    .catch(() => {
      
    });
};

let setCloseTimer;
const close = async () => {
  const res = await shutDownApi();
  clearTimeout(setCloseTimer);
  setCloseTimer = setTimeout(() => {
    notify(res.data.desc, 'success');
  }, 3000);
};

const exit = async () => {
  const res = await exitServiceApi();
  clearTimeout(setCloseTimer);
  setCloseTimer = setTimeout(() => {
    notify(res.data.desc, 'success');
  }, 3000);
};

const setSelectOption = reactive([
  {
    id: 3,
    content: '用户管理',
    imgSrc: userManImage,
    path: '/accountManagement'
  },
  {
    id: 1,
    content: '报表管理',
    imgSrc: dataManage,
    path: '/report'
  },
  {
    id: 2,
    content: '修改密码',
    imgSrc: changePassword,
    path: '/addUser?oprType=changePassword'
  },
  {
    id: 6,
    content: '仪器校准',
    imgSrc: changePassword,
    path: '/calibration'
  },
  {
    id: 13,
    content: '安全设置',
    imgSrc: changePassword,
    path: '/safeSetting'
  },
  {
    id: 4,
    content: '退出登录',
    imgSrc: exitImage,
    path: '/'
  },
  {
    id: 5,
    content: '关机',
    imgSrc: closeImage,
    path: '/close'
  }
]);

const set = (val) => {
  if (val == '/close') {
    closeComp();
    return;
  }
  if (val == '/') {
    sessionStorage.removeItem('userInfo');
    sessionStorage.removeItem('userArray');
  }
  router.push(val);
  showSet.value = !showSet.value;
};
const closeSetting = () => {
  if (showSet.value) {
    showSet.value = false;
  }
};
onUnmounted(() => {
  if (intervalId) {
    clearInterval(intervalId);
  }
  clearTimeout(setCloseTimer);
});
</script>

<style lang="less" scoped>
@commonSize: 24px;
.userLogin {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-image: url('@/assets/image/home/layout_bg.png');
  background-size: cover;
  background-repeat: round;
  .hander {
    position: relative;
    justify-content: space-between;
    align-items: center;
    width: 100vw;
    height: 75px;
    display: flex;
    padding: 0 20px;
    background: linear-gradient(180deg, #ffffff 0%, #e8e8e8 100%);
    box-shadow: 0px 4px 8px 1px rgba(0, 0, 0, 0.16);
    .left {
      display: flex;
      align-items: center;
      .logo {
        .image {
          width: 115px;
          height: 35px;
          margin-right: 17px;
        }
      }

      .title {
        font-size: @commonSize;
        font-weight: bold;
      }
    }

    .right {
      display: flex;
      align-items: center;
      .time {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: @commonSize;
        color: #aaaaaa;
      }

      .set {
        .image {
          width: 56px;
          height: 56px;
        }
      }
    }

    .set-option {
      position: absolute;
      right: 30px;
      top: 80px;
      z-index: 9999;
      background: #f6f6f6;
      box-shadow: 0px 6px 16px 1px rgba(0, 0, 0, 0.16), inset 0px 3px 6px 1px #ffffff;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #cccccc;
      padding: 5px;
      .item {
        display: flex;
        align-items: center;
        height: 80px;
        font-size: 35px;
        color: #666666;
        text-align: center;
        padding: 31px 75px 33px 41px;
        background-color: #f6f6f6;
        cursor: pointer;
        box-sizing: border-box;
        border-bottom: 1px solid #e5e5e5;

        .img {
          width: @commonSize;
          height: @commonSize;
          margin-right: 24px;
        }
        .con {
          font-weight: 400;
          font-size: @commonSize;
          color: #666666;
          line-height: @commonSize;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }
      :last-child {
        border-bottom: 0;
      }
    }
  }
}
.main {
  height: 100%;
  display: flex;
  overflow-y: auto;
}
.mask-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #666666;
}
</style>
