<template>
  <dashboard-container class="page" ref="page">
    <top-title class="wow slideInDown" :name="'安检站分级质控监控大屏'" />
    <template #center>
      <div class="left">
        <div :class="{ carouselItemBtn: true, carouselItemActive: activeIndex === 0 }" @click="setActiveItem(0)">首页看板
        </div>
        <div :class="{ carouselItemBtn: true, carouselItemActive: activeIndex === 1 }" @click="setActiveItem(1)">实时状态
        </div>
        <div :class="{ carouselItemBtn: true, carouselItemActive: activeIndex === 2 }" @click="setActiveItem(2)">站级质控
        </div>
        <div :class="{ carouselItemBtn: true, carouselItemActive: activeIndex === 3 }" @click="setActiveItem(3)">队级质控
        </div>
      </div>
      <div class="right">
        <div :class="{ carouselItemBtn: true, carouselItemActive: activeIndex === 4 }" @click="setActiveItem(4)">站级画像
        </div>
        <div :class="{ carouselItemBtn: true, carouselItemActive: activeIndex === 5 }" @click="setActiveItem(5)">队级画像
        </div>
        <!-- <div :class="{ carouselItemBtn: true, carouselItemActive: activeIndex === 6 || activeIndex === 7  }" @click="setActiveItem( 6 )">班组画像
        </div> -->
        <!-- <div :class="{ carouselItemBtn: true, carouselItemActive: activeIndex === 7 }" @click="setActiveItem( 7 )">个人画像
        </div> -->
      </div>
      <div class="warp" ref="content">
        <el-carousel style="height: 100%;" height="100%" :autoplay="false" motion-blur arrow="never"
          indicator-position="none" interval="60000" ref="carousel">
          <el-carousel-item>
            <HomePage v-if="activeIndex === 0" />
          </el-carousel-item>
          <el-carousel-item>
            <RealTimeStatus v-if="activeIndex === 1" />
          </el-carousel-item>
          <el-carousel-item>
            <QualityControl v-if="activeIndex === 2" />
          </el-carousel-item>
          <el-carousel-item>
            <QualityControl type="brigade" v-if="activeIndex === 3" ref="departmentQualityControl" />
          </el-carousel-item>
          <el-carousel-item>
            <OrganizationalPortrait v-if="activeIndex === 4" />
          </el-carousel-item>
          <el-carousel-item>
            <OrganizationalPortraitSectionLevel v-if="activeIndex === 5" ref="organizationalPortrait" />
          </el-carousel-item>
        </el-carousel>
      </div>
    </template>
  </dashboard-container>
</template>

<script setup>
import TopTitle from './TopTitle.vue';
import DashboardContainer from '@/views/dataBigScreen/dashboard/components/DashboardContainer.vue';
import HomePage from './components/pageView/HomePage.vue';
import RealTimeStatus from './components/pageView/RealTimeStatus.vue';
import QualityControl from './components/pageView/QualityControl.vue';
import OrganizationalPortrait from './components/pageView/OrganizationalPortrait.vue';
import OrganizationalPortraitSectionLevel from './components/pageView/OrganizationalPortraitSectionLevel.vue';
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { InactivityTimer } from './InactivityTimer.js'



const page = ref(null)
const carousel = ref(null)
const content = ref(null)
const departmentQualityControl = ref(null)
const organizationalPortrait = ref(null)
const setActiveItem = (index) => {
  carousel.value.setActiveItem(index)
}

const activeIndex = computed(() => {
  return carousel.value ? carousel.value.activeIndex : 7
})

const timer = new InactivityTimer({
  timeout: 60000, // 60秒超时（1分钟）
  warningTime: 5000, // 提前5秒警告
  onTimeout: () => {
    let switchPage = true
    // 首页看板直接切换到下一个页面
    if (activeIndex.value === 0) {
      // 首页看板直接切换到实时状态
      switchPage = true
    }
    else if (activeIndex.value === 3) {
      switchPage = departmentQualityControl.value.next()
    }
    else if (activeIndex.value === 5) {
      switchPage = organizationalPortrait.value.next()
    }
    if (typeof switchPage === 'function') {
      switchPage()
    }
    carousel.value && switchPage && carousel.value.next()
    timer.start();
  },
  onWarning: () => console.info('即将切换至下一张页面')
});

const setStyle = () => {
  const root = document.querySelector(':root')
  root.style.setProperty('--el-border-color-light', '#0D507A')
  root.style.setProperty('--el-bg-color-overlay', '#0D507A')
  root.style.setProperty('--el-box-shadow-light', 'none')
  root.style.setProperty('--el-text-color-regular', '#fff')
  root.style.setProperty('--el-fill-color-light', '#70CFE7')
  root.style.setProperty('--el-datepicker-inrange-bg-color', '#0D507A')

}

const resetStyle = () => {
  const root = document.querySelector(':root')
  root.style.setProperty('--el-border-color-light', '#e4e7ed')
  root.style.setProperty('--el-bg-color-overlay', '#ffffff')
  root.style.setProperty('--el-box-shadow-light', '0px 0px 12px rgba(0, 0, 0, 0.12)')
  root.style.setProperty('--el-text-color-regular', '#606266')
  root.style.setProperty('--el-fill-color-light', '#f5f7fa')
  root.style.setProperty('--el-datepicker-inrange-bg-color', '#fff')
}


onMounted(() => {
  const pageRoot = page.value.getRoot()
  function setCSSZoom(scale) {
    const height = ((content.value.offsetHeight - (110 * scale)) / scale)
    content.value.style.setProperty('height', height + 'px')
    pageRoot.style.zoom = scale;
  }
  if (window.innerWidth < 1280) {
    setCSSZoom(0.4)
  }
  if (window.innerWidth > 1280 && window.innerWidth <= 1440) {
    setCSSZoom(0.6)
  }
  if (window.innerWidth > 1440 && window.innerWidth <= 1680) {
    setCSSZoom(0.75)
  }
  if (window.innerWidth > 1680 && window.innerWidth < 1920) {
    setCSSZoom(0.9)
  }
  if (window.innerWidth >= 1920) {
    setCSSZoom(1)
  }
  setStyle()
  // 启动定时器
  timer.start();
})
onUnmounted(() => {
  resetStyle()
  // 停止定时器
  timer.stop();
  timer.clearTimer();
})
</script>

<style lang="scss" scoped>
.warp {
  height: calc(100vh);
  box-sizing: border-box;
}

.left {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  height: 59px;
  align-items: center;
  justify-items: flex-start;
  padding: 0 15px;
  column-gap: 8px;
  background: #054066;
  border-bottom: 1px solid #037599;
}

.right {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  height: 59px;
  align-items: center;
  justify-items: flex-end;
  padding: 0 15px;
  column-gap: 8px;
  background: #054066;
  border-bottom: 1px solid #037599;
}

.carouselItemBtn {
  width: 126px;
  height: 40px;
  color: #B4E9FF;
  font-weight: bold;
  border-radius: 5px;
  text-align: center;
  text-indent: 6px;
  line-height: 38px;
  font-size: 18px;
  background: url('../../../assets/images/btnBg.png') no-repeat;
  background-size: cover;
  cursor: pointer;
}

.carouselItemActive {
  background: linear-gradient(to right 50%, #3398BE, #0B5883);
  color: #fff;
  background: url('../../../assets/images/btnActive.png') no-repeat;
  background-size: cover;
}
</style>

<style lang="scss">
.page {
  .wow {
    .quantity-overview-item {
      background: url('../../../assets/images/cardBg.png') no-repeat !important;
      background-size: 100% 105% !important;
    }
  }
}

.userSelectParams {
  --el-border-color-extra-light: #70CFE7;
  --el-text-color-primary: #fff;
  --el-fill-color-blank: #0D507A;
  --el-border-color: #0D507A;
}

.el-popper {
  --el-border-color-extra-light: #70CFE7;
  //--el-fill-color-blank: #0D507A;
  --el-border-color: #0D507A;
}

.el-message-box {
  --el-text-color-regular: #606060;
}
</style>