<template>
  <div class="headBox">
    <div class="top">
      <div class="top-left">
        <div class="time">
          <!-- {{ hour + ":" + minute +':'+ second }} {{ datatime }}  {{weekenday}}  -->
          {{ hour + ":" + minute }} {{ datatime }} {{ weekenday }}
        </div>
        <div class="qwbox">
          <span v-if="qwlevel == null">常态勤务</span>
          <span v-if="qwlevel == '01'">一级勤务</span>
          <span v-if="qwlevel == '02'">二级勤务</span>
          <span v-if="qwlevel == '03'">三级勤务</span>
        </div>
      </div>
      <!-- 改 -->
      <div class="top-center" @click="goToHome">林芝公安智慧街面巡防</div>
      <div class="top-right">
        <!-- <div class="meun" @click="modularShowFn" title="后台">
          菜单
        </div> -->
        <!-- <el-popover trigger="click" placement="bottom" v-model:visible="showVisible" :append-to-body="false">
          <template #reference>
            <div class="meun" @click="showVisible = !showVisible">
              设置
            </div>
          </template>
          <div @click="handleRhtx" class="settingItem">
            <el-icon>
              <Notification />
            </el-icon>融合通信
          </div>
          <div @click="handleJxkh" class="settingItem">
            <el-icon>
              <Notification />
            </el-icon>数据分析
          </div>
          <div @click="downloadBao" class="settingItem">
            <el-icon>
              <Notification />
            </el-icon>
            <a href="http://80.93.7.13:9009/myga/林芝巡防.exe"> 安装包下载 </a>
          </div>
          <div @click="openWarning('YJZX')" class="settingItem">
            <el-icon>
              <Notification />
            </el-icon>预警中心
          </div>
          <div @click="openWarning('JQTJ')" class="settingItem">
            <el-icon>
              <Notification />
            </el-icon>警情统计
          </div>

        </el-popover> -->

        <div class="info">
          <img class="photo" src="@/assets/my/photo.png" width="40" />
          <div class="text">
            <div style="color: #3877f2">
              {{ username }}
              <!-- <el-dropdown :hide-on-click="false">
                <el-icon style="top: 2px" :size="18" color="#3877f2">
                  <ArrowRight />
                </el-icon>
                <template #dropdown>
                  <el-dropdown-menu class="loginOut" @click="logout">
                    <el-dropdown-item command="logout"
                      >退出登录</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </template>
              </el-dropdown> -->
            </div>
            <div class="dept f12">
              <el-tooltip :content="deptName">{{ deptName }}</el-tooltip>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Performance v-model="modelValue" />
  </div>
</template>

<script setup>
// import { qcckPost, qcckGet, qcckPut, qcckDelete } from "@/api/qcckApi.js";
import { currentQwdj } from "@/api/xffile.js";
import emitter from "@/utils/eventBus.js";
import { getRecentDay, timeValidate } from "@/utils/tools.js";
import { useRouter, useRoute, onBeforeRouteLeave } from "vue-router";
import { useStore } from "vuex";
import { ref, onMounted, defineEmits, onUnmounted } from "vue";
import Performance from "./performance.vue";
const modelValue = ref(false);
const showVisible = ref(false);
const store = useStore();
const router = useRouter();
const route = useRoute();
const username = ref("");
const weekenday = ref(""); //星期几
const datatime = ref(getRecentDay(0));
const minute = ref("00"); //分
const second = ref("00"); //秒
const hour = ref("00"); //时
const day = ref(0);
const deptName = ref(JSON.parse(localStorage.getItem("deptId"))[0].deptName);
const modularShow = ref(false);
const timersfm = ref(null);
const qwlevel = ref(null);
onMounted(() => {
  getWeek();
  getQwLevel(); // 获取勤务等级
  username.value = localStorage.getItem("USERNAME");
  timersfm.value = setInterval(() => {
    CurrentTime();
  }, 1000);
});

// 打开融合通信页面
function handleRhtx(params) {
  const DDZHhref = router.resolve({
    name: "rhtx", //这里是跳转页面的name
    path: "/rhtx"
  });
  window.open(DDZHhref.href, "_blank");
}

// 获取勤务等级s
function getQwLevel() {
  currentQwdj({ dateTime: timeValidate() }).then((res) => {
    qwlevel.value = res ? res.qwdj : null;
  });
  // qcckGet({},'/mosty-qwzx/tbQwQwdj/currentQwdj?dateTime='+timeValidate()).then(res=>{
  //
  // })
}

// 打开绩效考核
function handleJxkh() {
  modelValue.value = true;
  showVisible.value = false;
}

function getWeek() {
  let week = new Date().getDay();
  switch (week) {
    case 0:
      return (weekenday.value = "星期日");
      break;
    case 1:
      return (weekenday.value = "星期一");
      break;
    case 2:
      return (weekenday.value = "星期二");
      break;
    case 3:
      return (weekenday.value = "星期三");
      break;
    case 4:
      return (weekenday.value = "星期四");
      break;
    case 5:
      return (weekenday.value = "星期五");
      break;
    case 6:
      return (weekenday.value = "星期六");
      break;
  }
}

// 获取时分秒
function CurrentTime() {
  const date = new Date();
  hour.value = date.getHours();
  minute.value = date.getMinutes();
  second.value = date.getSeconds();
  day.value = day.value < 10 ? "0" + day.value : day.value;
  hour.value = hour.value < 10 ? "0" + hour.value : hour.value;
  minute.value = minute.value < 10 ? "0" + minute.value : minute.value;
  second.value = second.value < 10 ? "0" + second.value : second.value;
}
// 打开菜单弹窗
function modularShowFn(val) {
  router.replace("/editPassword");
}

// 退出
const logout = () => {
  store.dispatch("user/logout");
  store.commit("app/clearTag", null, { immediate: true });
  store.commit("permission/deleteRouter", { immediate: true });
  store.commit("user/deleteKeepLiiveRoute", "lz/home");
};

// 路由跳转
function goToHome() {
  window.location.href = "/";
}

const openWarning = (val) => {
  showVisible.value = false;
  emitter.emit("showWarning", val);
};

const downInfo = () => {
  showVisible.value = false;
  emitter.emit("showZlDetail");
};

onUnmounted(() => {
  clearInterval(timersfm.value);
});
</script>

<style lang="scss" scoped>
@import "@/assets/css/homeScreens.scss";
::v-deep .el-dialog {
  --el-dialog-bg-color: #10295b;
}
::v-deep .el-dialog__title {
  color: #140101;
}
.settingItem {
  color: #000000;
  display: flex;
  align-items: center;
  height: 30px;
  border-bottom: 1px solid #143d91;
  padding-left: 10px;
  box-sizing: border-box;
  cursor: pointer;
  .el-icon {
    margin-right: 10px;
  }
}
.settingItem:hover {
  background: #143d91;
}
::v-deep .el-popper.is-light {
  background: #00314e;
  border: 1px solid #00314e;
}
</style>
