<!-- 数据管理页面  数据看板/环境看板 -->
<script name="DataManagement" lang="ts" setup>
import dataBoard from './dataBoard.vue'
import environmentBoard from './environmentBoard.vue'
// 右上角菜单
const buttonBoxActive = 'DataManagement'
const active = ref<string>('数据看板')
const menu = ref<any[]>([
  {
    name: '数据看板',
    id: '1',
  },
  {
    name: '环境看板',
    id: '2',
  },
])
onMounted(async () => {
  if (window.sessionStorage.getItem(buttonBoxActive)) {
    active.value = window.sessionStorage.getItem(buttonBoxActive)!
  }
  else {
    active.value = menu.value.find(item => item.name === '数据看板')!.id as string // 全部
  }
})
const changeCurrentButton = (val: string) => {
  active.value = val
  window.sessionStorage.setItem(buttonBoxActive, val)
}
const showContentHeight = ref(document.body.clientHeight - 60)
window.addEventListener('resize', () => {
  showContentHeight.value = document.body.clientHeight - 60
})
</script>

<template>
  <div class="container-wrap" :class="active === '1' ? 'bj-css' : 'bj1-css'" :style="`height:${showContentHeight}px;`">
    <!-- 右上角按钮集合 -->
    <button-box class="select-btn" :active="active" :menu="menu" @change-current-button="changeCurrentButton" />
    <!-- 环境看板 -->
    <environment-board v-if="active === '2'" />
    <!-- 数据看板 -->
    <data-board v-if="active === '1'" />
  </div>
</template>

<style lang="scss" scoped>
.bj-css {
  background:
    url("../../assets/images/data/bg.png") no-repeat
    center / cover;
}

.bj1-css {
  background-color: #fff;
}

.container-wrap {
  // background-color: #fff;

  ::v-deep(.container) {
    .btns {
      left: 15px !important;
    }
  }
}
</style>