<template>
  <div>
    <div v-show="!isFullscreen" class="customTree" id="customTree">
      <tree fatherId="customTree" chartHeight="350px" :chartData="chartData"></tree>
      <img  class="isfull" src="../../assets/image/icon-openscreen.png" alt=""  @click="toggleFullSceen">
    </div>
    <div v-if="isFullscreen" class="isFullscreen">
      <div class="content">
        <div class="full-btn" @click="toggleFullSceen">
          <img  class="isfull" src="../../assets/image/icon-closescreen.png" alt="">
          <div>退出全屏</div>
        </div>
        <tree
          class="tree-content"
          :chartData="chartData"
          :chartHeight="'calc(100vh - 88px)'"
        ></tree>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted,defineProps } from 'vue';
import tree from '../chart/tree/tree.vue';
import screenfull from 'screenfull';
const {chartData} =defineProps({
  chartData:Array
})
const isFullscreen = ref(false);
/**
 * @descripiton 监听键盘
 */
const KeyDown = (event) => {
  if (event.keyCode === 122) {
    //禁用f11
    event.returnValue = false;
    //触发全屏的按钮
    toggleFullSceen();
  }
};
/**
 * @descripiton 点击全屏事件
 */
const toggleFullSceen = () => {
  if (!screenfull.isEnabled) {
    // this.$message({
    //   message: '当前浏览器不支持此功能!',
    //   type: 'warning'
    // })
    return false;
  }
  screenfull.toggle();
};
/**
 * @descripiton 状态改变时
 */
const change = () => {
  isFullscreen.value = screenfull.isFullscreen;
};
/**
 * @descripiton 初始化监听全屏事件
 */
const init = () => {
  if (screenfull.isEnabled) {
    screenfull.on('change', change);
  }
};
/**
 * @descripiton 关闭全屏事件
 */
const destroy = () => {
  if (screenfull.isEnabled) {
    screenfull.off('change', change);
  }
};
onMounted(() => {
  init();
  //解决按f11时图标不变化的问题
  window.addEventListener('keydown', KeyDown, true); // 监听按键事件
});
</script>

<style lang="scss" scoped>
.customTree {
  width: 100%;
  height: 350px;
  overflow-y: auto;
  border: 1px solid var(--el-border-color);
  border-radius: 6px;
  position: relative;
  .isfull {
    top: 16px;
    right: 16px;
    position: absolute;
    // left: 100%;
    margin-right: 10px;
    // bottom: 8px;
    width: 48px;
    height: 45px;
    // border-radius: 4px;
    // border: 1px solid var(--el-color-primary);
    // background: #fff;
    // box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.1);
    cursor: pointer;
  }
}
.customTree::-webkit-scrollbar {
  width: 0;
}
.isFullscreen {
  position: fixed;
  left: 0;
  top: 0;
  background: #fff;
  width: 100%;
  min-height: 100%;
  z-index: 1;
  .content {
    height: 100%;
    width: 100%;
    position: relative;
    .full-btn {
      display: flex;
      align-items: center;
      position: absolute;
      right: 24px;
      top: 24px;
      z-index: 999;
      color: var(--el-text-color-regular);
      .isfull {
        width: 48px;
    height: 45px;
        // border-radius: 4px;
        // border: 1px solid var(--el-color-primary);
        // background: #fff;
        // box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.1);
        margin-right: 10px;
        cursor: pointer;
      }
    }
  }
}
.tree-content {
  position: relative;
  top: 88px;
}
</style>
