<template>
  <div class="title_wrap">
    <div class="title">
      <span class="title-text">宜宾市12345坐席监控中心</span>
    </div>
    <div class="timers">
      <span class="timers-text">{{ dateData.dateYear }} {{ dateData.dateWeek }} {{ dateData.dateDay }}</span>
    </div>
    <div class="guang"></div>
    <div class="left_icons">
      <el-badge :value="busyCount" :max="99" class="left_icons_item">
        <img src="@/assets/img/seats/busy.png" alt="">通话中
      </el-badge>
      <el-badge :value="unreadyCount" :max="99" class="left_icons_item">
        <img src="@/assets/img/seats/unready.png" alt="">小休
      </el-badge>
      <el-badge :value="heldCount" :max="99" class="left_icons_item">
        <img src="@/assets/img/seats/held.png" alt="">保持
      </el-badge>
      <el-badge :value="readyCount" :max="99" class="left_icons_item">
        <img src="@/assets/img/seats/ready.png" alt="">示闲
      </el-badge>
    </div>
    <div class="right_icons">
      <el-badge :value="threeWayCount" :max="99" class="right_icons_item">
        <img src="@/assets/img/seats/threeWay.png" alt="">三方会议
      </el-badge>
      <el-badge :value="acwCount" :max="99" class="right_icons_item">
        <img src="@/assets/img/seats/acw.png" alt="">话后整理
      </el-badge>
      <el-badge :value="logoutCount" :max="99" class="right_icons_item">
        <img src="@/assets/img/seats/logout.png" alt="">签出
      </el-badge>
    </div>
  </div>
</template>
<script setup lang="ts">
import {computed, reactive, ref, onMounted, onUnmounted, watch} from "vue";
import dayjs from "dayjs";
import mittBus from "@/utils/mitt";

const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
});
const dateData = reactive<any>({
  dateDay: "",
  dateYear: "",
  dateWeek: "",
  timing: null as any,
});
const weekday = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
const timeFn = () => {
  dateData.timing = setInterval(() => {
    dateData.dateDay = dayjs().format("YYYY-MM-DD hh : mm : ss");
    dateData.dateWeek = weekday[dayjs().day()];
  }, 1000);
};
timeFn();
// 通话数量
const busyCount = computed(() => {
  return seatsList.value.filter((item: any) => item.state === 'busy').length;
});
// 小休数量、
const unreadyCount = computed(() => {
  return seatsList.value.filter((item: any) => item.state === 'unready').length;
});
// 保持数量
const heldCount = computed(() => {
  return seatsList.value.filter((item: any) => item.state === 'held').length;
});
// 空闲数量
const readyCount = computed(() => {
  return seatsList.value.filter((item: any) => item.state === 'ready').length;
});
// 三方会议数量
const threeWayCount = computed(() => {
  return seatsList.value.filter((item: any) => item.state === 'threeWay').length;
});
// 话后整理数量
const acwCount = computed(() => {
  return seatsList.value.filter((item: any) => item.state === 'acw').length;
});
// 签出数量
const logoutCount = computed(() => {
  return seatsList.value.filter((item: any) => item.state === 'logout').length;
});
const seatsList = ref<any>([])
watch(
    () => props.data,
    (newData: any) => {
      seatsList.value = newData;
    },
    {immediate: true}
);
onMounted(() => {
  // 接收消息
  mittBus.on('SeatState', (res: any) => {
    const item = seatsList.value.find((item: any) => item.telNo === res.telNo);
    item.loading = true;
    if (item) {
      setTimeout(() => {
        item.state = res.state;
        item.loading = false;
      }, 500);
    }
  });
});
onUnmounted(() => {
  mittBus.off('SeatState');
});
</script>

<style scoped lang="scss">
:deep(.el-badge__content) {
  border: none;
  top: -3px;
  right: calc(-3px + var(--el-badge-size) / 2);
}

.title_wrap {
  height: 140px;
  position: relative;

  &::after {
    content: '.';
    position: absolute;
    bottom: 13px;
    background-image: radial-gradient(circle, #1b86d1 50%, #176bb5 50%);
    width: 100%;
    height: 2px;
  }

  .guang {
    position: absolute;
    bottom: -13px;
    background-image: url("../../assets/img/guang.png");
    background-position: 80px center;
    width: 100%;
    height: 56px;
  }

  .timers {
    position: absolute;
    right: 16px;
    top: 20px;
    display: flex;
    align-items: center;
    color: var(--el-color-white);
    font-size: var(--el-font-size-extra-large);
  }
}

.title {
  position: relative;
  text-align: center;
  background-size: cover;
  color: transparent;
  height: 140px;
  line-height: 90px;
  padding-top: 20px;

  &-text {
    font-size: 38px;
    font-weight: 900;
    letter-spacing: 6px;
    width: 100%;
    background: linear-gradient(
            92deg,
            #0072ff 0%,
            #00eaff 48.8525390625%,
            #01aaff 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.left_icons {
  position: absolute;
  left: 40px;
  bottom: 25px;
  display: flex;
  align-items: center;

  .left_icons_item {
    display: flex;
    align-items: center;
    margin-right: 50px;

    img {
      margin-right: 10px;
    }
  }
}

.right_icons {
  position: absolute;
  right: 16px;
  bottom: 25px;
  display: flex;
  align-items: center;

  .right_icons_item {
    display: flex;
    align-items: center;
    margin-right: 50px;

    img {
      margin-right: 10px;
    }
  }
}
</style>
