<!-- 数据看板 -->
<script name="DataBoard" lang="ts" setup>
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'
import eqptDevice from './components/data/eqptDevice.vue'
import meteringVerification from './components/data/meteringVerification.vue'
import resourceManage from './components/data/resourceManage.vue'
import verificationCertificate from './components/data/verificationCertificate.vue'
import standardDevice from './components/data/standardDevice.vue'
import device from './components/data/device.vue'
import customChart from './components/data/customChart.vue'
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('')
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: '#fff',
    bj: 'bj1',
  },
  {
    name: '计量检定分析',
    id: '2',
    color: '#fff',
    bj: 'bj2',
  },
  {
    name: '资源管理分析',
    id: '3',
    color: '#fff',
    bj: 'bj3',
  },
  {
    name: '设备分析',
    id: '4',
    color: '#fff',
    bj: 'bj4',
  },
  {
    name: '检定证书分析',
    id: '5',
    color: '#fff',
    bj: 'bj5',
  },
  {
    name: '标准装置分析',
    id: '6',
    color: '#fff',
    bj: 'bj6',
  },
])
// 选中的菜单
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()
})
const chartRef = ref()
// 自定义数据弹窗
const customRef = ref()
const setting = () => {
  if (chartRef.value.showChart.filter((item: any) => item.source === 'custom').length) {
    const data = chartRef.value.showChart[chartRef.value.showChart.findIndex((item: any) => item.source === 'custom')]
    customRef.value.initDialog(data)
  }
  else {
    customRef.value.initDialog({})
  }
}
// 确认自定义数据
const confirm = (data: any) => {
  console.log(data, '填充的数据')
  if (chartRef.value.showChart.filter((item: any) => item.source === 'custom').length) {
    chartRef.value.showChart[chartRef.value.showChart.findIndex((item: any) => item.source === 'custom')] = data
  }
  else {
    chartRef.value.showChart.push(data)
  }
}
</script>

<template>
  <!-- 自定义echart弹窗 -->
  <custom-chart ref="customRef" @confirm="confirm" />
  <!-- 查询条件 -->
  <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)">
        <div class="item-icon">
          <div class="icon-img" :class="item.bj" />
        </div>
        <div class="item-name">
          {{ item.name }}
        </div>
      </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: '#3D6FB6' }">
            {{ selectMenu }}
          </div>
          <div style="display: flex;">
            <div class="icon-bak" style="margin-right: 10px;" @click="setting">
              <svg-icon name="icon-data-setting" class="icon-button-icon" />
            </div>
            <div class="icon-bak" @click="bak">
              <svg-icon name="icon-data-bak" class="icon-button-icon" />
            </div>
          </div>
        </div>
        <div class="data-board" :style="{ height: `${showContentHeight - 10 - 40}px` }">
          <eqpt-device v-if="selectMenu === '受检设备分析'" ref="chartRef" :lab="labCode" />
          <metering-verification v-if="selectMenu === '计量检定分析'" ref="chartRef" :lab="labCode" />
          <resource-manage v-if="selectMenu === '资源管理分析'" ref="chartRef" :lab="labCode" />
          <device v-if="selectMenu === '设备分析'" ref="chartRef" :lab="labCode" />
          <verification-certificate v-if="selectMenu === '检定证书分析'" ref="chartRef" :lab="labCode" />
          <standard-device v-if="selectMenu === '标准装置分析'" ref="chartRef" :lab="labCode" />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.bj1 {
  background:
    url("../../assets/images/data/info.png") no-repeat
    center !important;
}

.bj2 {
  background:
    url("../../assets/images/data/info.png") no-repeat
    center !important;
}

.bj3 {
  background:
    url("../../assets/images/data/info.png") no-repeat
    center !important;
}

.bj4 {
  background:
    url("../../assets/images/data/info.png") no-repeat
    center !important;
}

.bj5 {
  background:
    url("../../assets/images/data/info.png") no-repeat
    center !important;
}

.bj6 {
  background:
    url("../../assets/images/data/info.png") no-repeat
    center !important;
}

.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: 60%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  margin-top: 100px;
  justify-content: space-between;
  padding-top: 50px;

  .menu-item {
    margin: 15px 0;
    width: 32%;
    height: 180px;
    // line-height: 140px;
    // text-align: center;
    // color: #3d6fb6;
    // font-weight: 700;
    // font-size: 25px;
    // border-radius: 20px;
    .item-icon {
      height: 140px;
      display: flex;
      justify-content: center;
      flex-direction: column;

      .icon-img {
        height: 120px;
        width: 50%;
        margin: 0 auto;
        background-color: #3d6fb6;
      }
    }

    .item-name {
      height: 40px;
      line-height: 30px;
      text-align: center;
      color: #3d6fb6;
      font-weight: 700;
      font-size: 18px;
    }

    &: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;
  // background-color: #fff;

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

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

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

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

        &: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>