<template>
  <div class="background">
    <!-- 头部 -->
    <Header />
    <div class="content">
      <div class="left-content">
        <!-- 任务区 -->
        <TaskArea />
        <!-- 完成任务 -->
        <CompleteTask :getValueType="getValueType"/>
      </div>
      <div class="right-content">
        <!-- 最佳员工 -->
        <BestEmployee :getValueType="getValueType"/>
        <!-- 组排名 -->
        <GroupRanings :getValueType="getValueType"/>
        <!-- 再办任务 -->
        <WorkingTask :getValueType="getValueType"/>
      </div>
    </div>
  </div>

</template>

<script setup lang="ts">
import Header from './Header/index.vue'
import TaskArea from './TaskArea/index.vue'
import CompleteTask from './CompleteTask/index.vue'
import BestEmployee from './BestEmployee/index.vue'
import GroupRanings from './GroupRankings/index.vue'
import WorkingTask from './WorkingTask/index.vue'
import { onMounted, ref, onBeforeUnmount } from 'vue'
import { v4 as uuidv4 } from 'uuid';

const inteval = ref()
const getValueType = ref()

onMounted(() => {
  inteval.value = setInterval(() => {
    getValueType.value = uuidv4()
  }, 10000)
})

onBeforeUnmount(() => {
  clearInterval(inteval.value)
})



</script>

<style lang="scss" scoped>
.background{
  width: 100%;
  height: 100vh;
  background-image: url('/public/taskhall/background.png');
  :deep(.sub_title){
    width: 405px;
    height: 27px;
    background-image: url('/public/taskhall/sub_title_background.png');
    background-repeat: no-repeat;
    font-family: HuXiaoBo-NanShen;
    font-weight: 400;
    font-size: 20px;
    color: #FFFFFF;
    margin-bottom: 17px;
    padding-top: 3px;
    padding-left: 17px;
    user-select: none;
    cursor: default;
  }
}
.content{
  padding-left: 53px;
  padding-right: 42px;
  display: flex;
  height: calc(100% - 122px);
  padding-bottom: 34px;
  .left-content{
    width: 1294px;
    margin-right: 50px;
  }
  .right-content{
    width: 472px;
  }
  .sub_title{
    width: 405px;
    height: 27px;
    background-image: url('/public/taskhall/sub_title_background.png');
    background-repeat: no-repeat;
    font-family: HuXiaoBo-NanShen;
    font-weight: 400;
    font-size: 20px;
    color: #FFFFFF;
    margin-bottom: 17px;
    padding-top: 3px;
    padding-left: 17px;
    user-select: none;
    cursor: default;
  }
}
</style>
