<template>
  <div class="tiondesk">
    <layout>
      <template #left>
        <div class="left_tiondesk">
          <div class="flex_spection">
            <HeadlineTag value="全年会议统计"></HeadlineTag>
            <div class="box_arch">
              <conference :arrData="arrData"></conference>
            </div>
          </div>
          <div class="flex_spection">
            <HeadlineTag value="会议室累计使用场数 (Top5)"></HeadlineTag>
            <div class="box_arch">
              <gambit :resultData="gamesData" v-if="gamesData.length > 0"></gambit>
              <Empty v-else></Empty>
            </div>
            <div class="box_time_select">
              <div class="time_choice" :class="timeType == 'month' ? 'activateTime' : ''" @click="timeChoice('month')">
                本月
              </div>
              <div class="time_choice" :class="timeType == 'year' ? 'activateTime' : ''" @click="timeChoice('year')">
                全年
              </div>
            </div>
          </div>
          <div class="flex_spection">
            <HeadlineTag value="会议室累计使用时长 (Top5)"></HeadlineTag>
            <div class="box_arch" style="justify-content: flex-end">
              <feedback :resultData="utilityTimeData"></feedback>
            </div>
            <div class="box_time_select">
              <div class="time_choice" :class="timeType == 'month' ? 'activateTime' : ''" @click="timeChoice('month')">
                本月
              </div>
              <div class="time_choice" :class="timeType == 'year' ? 'activateTime' : ''" @click="timeChoice('year')">
                全年
              </div>
            </div>
          </div>
        </div>
      </template>
      <template #right>
        <div class="right_tiondesk">
          <div class="flex_spection">
            <HeadlineTag type="right" value="部门全年会议次数统计"></HeadlineTag>
            <div class="box_arch">
              <wordcloud :resultData="meetingData" v-if="meetingData.length > 0"></wordcloud>
              <Empty v-else></Empty>
            </div>
          </div>
          <div class="flex_spection">
            <HeadlineTag type="right" value="会议时长分布"></HeadlineTag>
            <div class="box_arch">
              <formerly :xData="durationKey" :yData="durationValue" v-if="durationValue.length > 0"></formerly>
              <Empty v-else></Empty>
            </div>
            <div class="box_time_select" style="left: 0;right: unset;">
              <div class="time_choiceil" :class="timeType == 'month' ? 'activateTime' : ''"
                @click="timeChoice('month')">
                本月
              </div>
              <div class="time_choiceil" :class="timeType == 'year' ? 'activateTime' : ''" @click="timeChoice('year')">
                全年
              </div>
            </div>
          </div>
          <div class="flex_spection">
            <HeadlineTag type="right" value="会议预约时段分析"></HeadlineTag>
            <div class="box_arch">
              <subscribe :resultData="subscribeData" v-if="subscribeData.length > 0"></subscribe>
              <Empty v-else></Empty>
            </div>
          </div>
        </div>
      </template>
    </layout>
    <div class="top_desk">
      <div class="desk_meeting">
        <kilobit value="空闲会议室" :number="leisureNum" color="rgb(71, 143, 251)"></kilobit>
      </div>
      <div class="desk_meeting">
        <kilobit value="使用中会议室" :number="busyNum" color="rgb(61, 250, 230)"></kilobit>
      </div>
      <div class="desk_meeting">
        <kilobit value="禁用会议室" :number="forbiddenNum" color="rgb(222, 44, 22)"></kilobit>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getDataAnalysis } from "@/api/system/meeting"
import layout from "@/components/layout_/index.vue";
import HeadlineTag from '@/components/HeadlineTag'
import kilobit from '@/components/kilobit'
import Empty from '@/components/Empty'
import conference from './conference'
import feedback from './feedback'
import gambit from './gambit'
import wordcloud from './wordcloud'
import formerly from './formerly'
import satisfaction from './satisfaction'
import subscribe from './subscribe'
const intervalId = ref(null)
const timeType = ref('month') //month 月 year 年
const leisureNum = ref([0, 0, 0, 0]) //空闲
const busyNum = ref([0, 0, 0, 0]) //使用中
const forbiddenNum = ref([0, 0, 0, 0]) //禁用
// 全年会议统计
const arrData = ref({})
// 使用场数
const gamesData = ref([])
// 使用时长
const utilityTimeData = ref([])
// 会议次数
const meetingData = ref([])
// 会议时长分布
const durationKey = ref([])
const durationValue = ref([])
// 会议预约时段
const subscribeData = ref([])
// 生命周期
onMounted(() => {
  intervalId.value = setInterval(getStatisticData, 10000);
  getStatisticData()
});
onUnmounted(() => {
  clearInterval(intervalId.value);
})
// 获取会议统计数据
function getStatisticData() {
  getDataAnalysis().then(res => {
    if (res.code == 200) {
      const arrList = res.data
      arrData.value.meetingYearSum = arrList.meetingYearSum
      arrData.value.meetingMonthHM = arrList.meetingMonthHM
      arrData.value.meetingMonthSum = arrList.meetingMonthSum
      arrData.value.meetingMonthManCount = arrList.meetingMonthManCount
      arrData.value.meetingYearManCount = arrList.meetingYearManCount
      arrData.value.meetingAvgDayCount = arrList.meetingAvgDayCount
      arrData.value.meetingAvgTimes = arrList.meetingAvgTimes
      arrData.value.meetingProlongYearCount = arrList.meetingProlongYearCount
      arrData.value.meetingStopYearCount = arrList.meetingStopYearCount
      arrData.value.meetingYearHM = arrList.meetingYearHM
      leisureNum.value = Array.from(String(addZero(arrList.meetingRoomFreeCount)), Number)
      busyNum.value = Array.from(String(addZero(arrList.meetingRoomOccupiedCount)), Number)
      forbiddenNum.value = Array.from(String(addZero(arrList.meetingRoomForbiddenCount)), Number)
      meetingData.value = arrList.departmentMeetingYearCount
      const result = [];
      let obj = arrList.meetingAppointIntervalYear
      for (const key in obj) {
        if (obj.hasOwnProperty(key)) {
          let timeNum = key.split('-')
          result.push({ time: timeNum[1], value: obj[key] });
        }
      }
      subscribeData.value = result
      if (timeType.value == 'month') {
        gamesData.value = arrList.meetingRoomMonthUseCount
        let keysArray = Object.keys(arrList.meetingTimeMonth).map(item => {
          let title = '分钟'
          if (item == '90') {
            title = '分钟以上'
          } else {
            title = '分钟'
          }
          return item + title
        })
        let valuesArray = Object.values(arrList.meetingTimeMonth)
        durationKey.value = keysArray
        durationValue.value = valuesArray
        utilityTimeData.value = arrList.meetingRoomMonthTimes
      } else {
        gamesData.value = arrList.meetingRoomYearUseCount
        let keysArray = Object.keys(arrList.meetingTimeYear).map(item => {
          let title = '分钟'
          if (item == '90') {
            title = '分钟以上'
          } else {
            title = '分钟'
          }
          return item + title
        })
        let valuesArray = Object.values(arrList.meetingTimeYear)
        durationKey.value = keysArray
        durationValue.value = valuesArray
        utilityTimeData.value = arrList.meetingRoomYearTimes
      }
      function addZero(num) {
        if (num < 10) {
          return '000' + num;
        } else if (num < 100) {
          return '00' + num;
        } else if (num < 1000) {
          return '0' + num;
        } else {
          return num;
        }
      }
    }
  })
}
// 选择时间
function timeChoice(params) {
  timeType.value = params
  getStatisticData()
}
</script>

<style scoped lang="scss">
.tiondesk {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.top_desk {
  position: absolute;
  top: 50px;
  left: calc(50% - 25%);
  width: 50%;
  height: 100px;
  z-index: 2;
  display: flex;
  align-items: center;
}

.desk_meeting {
  flex: 1;
}

.left_tiondesk {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.right_tiondesk {
  position: absolute;
  right: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.flex_spection {
  position: relative;
  flex: 1;
  color: #fff;
}

.box_arch {
  display: flex;
  align-items: center;
  height: calc(100% - 40px);
}

.box_time_select {
  position: absolute;
  top: 10px;
  right: 0px;
  display: flex;
  align-items: center;
}

.time_choice {
  cursor: pointer;
  user-select: none;
  font-size: 12px;
  padding: 4px 15px;
  border: 1px solid #1AB4FF;
  margin-left: 10px;
  background-color: rgb(11, 33, 62);
}

.time_choiceil {
  cursor: pointer;
  user-select: none;
  font-size: 12px;
  padding: 4px 15px;
  border: 1px solid #1AB4FF;
  margin-right: 10px;
  background-color: rgb(11, 33, 62);
}

.activateTime {
  background: linear-gradient(0deg, rgba(26, 180, 255, 1), rgba(26, 180, 255, .05));
  color: #ffffff;
}
</style>
