<!-- 数据看板 -->
<script name="DataBoard" lang="ts" setup>
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'
import { getDictByCode } from '@/api/system/dict'
import { getLocationList, getUerDeptLab } from '@/api/business/taskMeasure/measureData'
// 实验室
const labCode = ref('')
const labCodeList = ref<string[]>([])

getDictByCode('labDept').then((response) => {
  labCodeList.value = response.data.map((item: any) => item.name)
  // 获取当前用户所在实验室，用来展示对应实验室数据
  getUerDeptLab().then((res) => {
    labCode.value = labCodeList.value.filter(item => item === res.data)[0] || labCodeList.value[0]
  })
})
// 当前时间
const currentTime = ref('1999-01-01 00:00:00')
const currentTimer = ref()
const openTimer = () => {
  currentTimer.value = setInterval(() => {
    currentTime.value = dayjs().format('YYYY-MM-DD HH:mm:ss')
  }, 1000)
}
openTimer()
onBeforeUnmount(() => {
  // 清空定时器
  clearInterval(currentTimer.value)
  currentTimer.value = null
})

// 菜单列表
const menu = ref([
  {
    name: '受检设备分析',
    id: '1',
    color: '#F59A23',
  },
  {
    name: '计量检定分析',
    id: '2',
    color: '#8080FF',
  },
  {
    name: '资源管理分析',
    id: '3',
    color: '#02A7F0',
  },
  {
    name: '设备分析',
    id: '4',
    color: '#70B603',
  },
  {
    name: '检定证书分析',
    id: '5',
    color: '#EC808D',
  },
  {
    name: '标准装置分析',
    id: '6',
    color: '#C280FF',
  },
])
// 选中的菜单
const selectMenu = ref('')
const colorMenu = ref('')
// 跳转方法
const navigator = (name: string) => {
  if (!labCode.value) {
    ElMessage.warning('实验室未选中')
    return
  }
  selectMenu.value = name
  colorMenu.value = menu.value.filter((item: any) => item.name === selectMenu.value)[0].color || '#fff'
}
// 返回菜单
const bak = () => {
  selectMenu.value = ''
  colorMenu.value = ''
}
// 展示区域高度
const showContentHeight = ref(800)
function calcBlockSize() { // 36是消息滚动栏的高度
  showContentHeight.value = document.body.clientHeight - 60 - 40 - 15
}
calcBlockSize()
window.addEventListener('resize', () => {
  calcBlockSize()
})
</script>

<template>
  <!-- 查询条件 -->
  <div class="seach-date">
    <div class="none" />
    <div class="label">
      <el-select v-model="labCode">
        <el-option v-for="item in labCodeList" :key="item" :label="item" :value="item" />
      </el-select>
    </div>
    <div class="current">
      {{ currentTime }}
    </div>
  </div>
  <div class="route-content">
    <!-- 菜单页面 -->
    <div v-if="!selectMenu" class="menu-content">
      <div v-for="item in menu" :key="item.id" class="menu-item" :style="{ 'background-color': item.color }" @click="navigator(item.name)">
        {{ item.name }}
      </div>
    </div>
    <!-- 展示数据 -->
    <div v-if="selectMenu" class="show-content" :style="{ height: `${showContentHeight}px` }">
      <div class="content" :style="{ height: `${showContentHeight - 10}px`, border: `3px solid ${colorMenu}` }">
        <div class="content-header">
          <div class="header-name" :style="{ color: colorMenu }">
            {{ selectMenu }}
          </div>
          <div class="icon-bak" @click="bak">
            <svg-icon name="icon-data-bak" class="icon-button-icon" />
          </div>
        </div>
        <div class="data-board" :style="{ height: `${showContentHeight - 10 - 40}px` }">
          没开发,先欠着
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.seach-date {
  display: flex;
  position: relative;
  top: 8px;
  // right: 10% !important;
  left: 60%;
  width: 38%;
  z-index: 999;
  justify-content: space-around;

  .none {
    // display: none;
    width: 303.64px;
    opacity: 0;
  }

  .current {
    font-size: 18px;
    font-weight: 700;
    height: 32px;
    line-height: 32px;
  }
}

.menu-content {
  width: 50%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  margin-top: 100px;
  justify-content: space-between;

  .menu-item {
    margin: 26px 0;
    width: 45%;
    height: 140px;
    line-height: 140px;
    text-align: center;
    color: #fff;
    font-weight: 700;
    font-size: 25px;
    border-radius: 20px;

    &:hover {
      cursor: pointer;
      box-shadow: 4px 4px 15px #666;
    }
  }
}

.show-content {
  margin-top: 15px;
  // padding: 10px;
  // box-sizing: content-box;
  display: flex;
  flex-direction: column;
  justify-content: center;

  .content {
    width: 98.5%;
    margin: 0 auto;
    border-radius: 6px;

    .content-header {
      display: flex;
      justify-content: space-between;
      padding: 5px 10px;

      .header-name {
        font-size: 22px;
        font-weight: 700;
      }

      .icon-bak {
        border-radius: 50%;
        border: 2px solid #02a7f0;
        width: 29px;
        height: 29px;
        display: flex;
        flex-direction: column;
        justify-content: center;

        &:hover {
          cursor: pointer;
          // width: 29.5px;
          // height: 29.5px;
          box-shadow: 2px 2px 6px #666;
        }
      }

      .icon-button-icon {
        width: 20px;
        height: 20px;
        margin: 0 auto;

        &:hover {
          cursor: pointer;
          width: 21px;
          height: 21px;
          // box-shadow: 4px 4px 15px #666;
        }
      }
    }
  }
}
</style>