<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">BAT07-A电池电性能防爆试验箱</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, watchEffect } 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';
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 (cur_path.value == '/experiment') {
    return;
  }
  showSet.value = !showSet.value;
};
let cur_path = ref('');
watchEffect(() => {
  let path = route.path;
  cur_path.value = path;
});
const closeComp = () => {
  showConfirmDialog({
    title: '是否确认关机',
    message: ''
  })
    .then(() => {
      close(); //关机
    })
    .catch(() => {
      notify('已取消', 'primary');
    });
};

const exitService = () => {
  showConfirmDialog({
    title: '是否确认退出系统',
    message: ''
  })
    .then(() => {
      exit(); //关闭服务
    })
    .catch(() => {
      notify('已取消', 'primary');
    });
};

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: '/changePassword'
  },
  {
    id: 4,
    content: '退出登录',
    imgSrc: exitImage,
    path: '/'
  },
  {
    id: 4,
    content: '关机',
    imgSrc: closeImage,
    path: '/close'
  }
]);

const set = (val) => {
  if (val == '/close') {
    closeComp();
    return;
  }
  if (val == '/') {
    sessionStorage.removeItem('userInfo');
  }
  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: 16px;
.userLogin {
  position: relative;
  height: 100vh;
  width: 100vw;
  background-image: url('@/assets/image/home/layout_bg.png');
  background-size: cover;
  background-repeat: no-repeat;

  .hander {
    position: relative;
    width: 100vw;
    height: 38px;
    background: linear-gradient(180deg, #ffffff 0%, #e8e8e8 100%);
    box-shadow: 0px 4px 8px 1px rgba(0, 0, 0, 0.16);
    border-radius: 0px 0px 0px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    padding-bottom: 8px;

    .left {
      display: flex;

      .logo {
        .image {
          width: 59px;
          height: 17px;
          margin-right: 8px;
        }
      }

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

    .right {
      display: flex;
      align-items: center;
      .time {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: @commonSize;
        color: #666666;
        line-height: @commonSize;
        text-align: right;
        font-style: normal;
        text-transform: none;
      }

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

    .set-option {
      position: absolute;
      right: 20px;
      top: 40px;
      z-index: 9999;
      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;
      background-color: #fff;
      padding: 5px;
      .item {
        display: flex;
        align-items: center;
        height: 44px;
        line-height: 44px;
        font-size: @commonSize;
        color: #666666;
        text-align: center;
        padding: 14px 30px 14px 18px;

        background-color: #fff;
        cursor: pointer;
        box-sizing: border-box;
        border-bottom: 1px solid #e5e5e5;

        .img {
          width: 17px;
          height: 17px;
          margin-right: 23px;
        }
        .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: calc(100vh - 80px);
  display: flex;
  padding: 12px;
  overflow-y: auto;
}
.mask-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #666666;
}
</style>
