<script setup lang="ts">
import {
  ref,
  watch,
  reactive,
  onMounted,
  computed,
  defineProps,
  toRefs,
} from "vue";
import { getLeftTreeJson } from "../../../api/screen/index";
import deptObj from "../../../store/modules/dept";
import { storeToRefs } from "pinia";
let nowDate = ref("");
let fullscreen = ref(false);
onMounted(() => {
  setInterval(() => {
    getTime();
  }, 1000);

  window.onresize = function () {
    setTimeout(() => {
      if (!fullscreenElement()) {
        fullscreen.value = false;
      }
    });
  };
});
//获取当前时间戳
const getTime = () => {
  const date = new Date();
  const seconds = date.getSeconds();
  const month = date.getMonth();
  const minute = date.getMinutes();
  const hour = date.getHours();
  const data = date.getDate();
  nowDate.value =
    date.getFullYear() +
    "-" +
    (month + 1 > 10
      ? month + 1
      : "0" +
        (month + 1) +
        "-" +
        (data > 9 ? data : "0" + data) +
        " " +
        (hour > 9 ? hour : "0" + hour) +
        ":" +
        (minute > 9 ? minute : "0" + minute) +
        ":" +
        (seconds > 9 ? seconds : "0" + seconds));
};
const fullscreenElement = () => {
  const fullscreenEle =
    document.fullscreenElement ||
    document.mozFullScreenElement ||
    document.webkitFullscreenElement;
  return fullscreenEle;
};
const handleFullScreen = () => {
  const element = document.documentElement;
  if (fullscreen.value) {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
  } else {
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.webkitRequestFullScreen) {
      element.webkitRequestFullScreen();
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen();
    }
  }
  fullscreen.value = !fullscreen.value;
};

interface Tree {
  label: string;
  children?: Tree[];
}
const store = deptObj();
let { id } = storeToRefs(store);
const handleNodeClick = (data: Tree) => {
  store.$patch((state) => {
    state.id = data.id;
  });
};
const deptList: Tree[] = ref([]);
//部门的数据
const getDeptData = () => {
  getLeftTreeJson().then((res) => {
    const { code, data = {} } = res;
    if (code == 200) {
      deptList.value = data && data.treeData;
      deptList.value.unshift({
        id: null,
        label: "全部",
      });
    }
  });
};
const defaultProps = {
  children: "children",
  label: "label",
};
onMounted(() => {
  getDeptData();
});
</script>

<template>
  <div class="ya-screen-header">
    <div class="ya-title">资产态势大屏</div>
    <div class="ya-right">
      <div class="ya-time">{{ nowDate }}</div>
      <div class="ya-dept">
        <span class="ya-change">部门切换</span>
        <div class="ya-select-tree">
          <el-tree
            :data="deptList"
            :props="defaultProps"
            @node-click="handleNodeClick"
          />
        </div>
      </div>
      <div class="ya-inset" @click.stop="handleFullScreen">
        <span class="ya-font"> {{ fullscreen ? "退出" : "全屏" }} </span>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.ya-screen-header {
  width: 100%;
  height: 100px;
  display: flex;
  position: relative;
  .ya-title {
    font-size: 31px;
    font-family: yixinchangyouti;
    font-weight: 400;
    color: #ffffff;
    line-height: 23px;
    position: absolute;
    top: 45px;
    left: 50%;
    transform: translateX(-50%);
  }
  .ya-right {
    display: flex;
    margin: 55px 53px 0px 0px;
    align-items: center;
    height: 25px;
    width: 100%;
    justify-content: flex-end;
  }
  .ya-time {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.8);
    margin-right: 19px;
  }
  .ya-dept {
    width: 100px;
    height: 26px;
    line-height: 26px;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.8);
    margin-right: 13px;
    text-align: center;
    cursor: pointer;
    z-index: 10;
    background: url("../../../assets/image/screen/icon-dept.png") no-repeat;
    position: relative;
    &:hover .ya-select-tree {
      display: block;
    }
  }
  .ya-select-tree {
    // width: 130px;
    padding-top: 7px;
    position: absolute;
    top: 26px;
    display: none;

    // background: rgba(9, 24, 50, 0.9);
  }
  ::v-deep .el-tree {
    max-height: 236px;
    overflow: auto;
    border: 1px solid #3d94ff;
    border-radius: 2px;
    padding: 13px;
    background: rgba(9, 24, 50, 0.9);
    font-size: 14px;
    font-family: Microsoft YaHei;
    color: rgba(255, 255, 255, 0.8);
    --el-tree-node-hover-bg-color: transparent;
    .el-tree-node__content > .el-tree-node__expand-icon {
      padding-right: 0px;
    }
    .el-tree-node__label {
      margin-left: 13px;
    }
    .el-tree-node__expand-icon.is-leaf {
      display: none;
    }
    .el-tree-node.is-current > .el-tree-node__content > .el-tree-node__label {
      color: #1f86ff;
    }

    .el-icon svg {
      color: #ffffff;
    }

    .el-tree-node {
      .el-tree-node__content {
        margin-top: 0px;
        padding: 0px 5px;
        color: rgba(255, 255, 255, 0.8);
        font-size: 14px;
        font-family: Microsoft YaHei;
        &:hover {
          span {
            color: #ffffff !important;
          }
          background: linear-gradient(165deg, #00badb 0%, #006aeb 100%);
        }
      }
    }
  }
}
.ya-inset {
  width: 80px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  cursor: pointer;
  background: url("../../../assets/image/screen/icon-fullscreen.png") no-repeat;
}

.ya-font {
  font-weight: 400;
  font-size: 14px;
  font-family: MicrosoftYaHei;
  color: rgba(255, 255, 255, 0.8);
  line-height: 11px;
}
</style>
<style lang="scss">
// .situationScreen {
//   ::v-deep .ya-tree .el-tree-node.is-current > .el-tree-node__content {
//     background: linear-gradient(165deg, #00badb 0%, #006aeb 100%) !important;
//   }
// }
</style>
