<!-- 消息滚动组件 -->
<script setup lang="ts" name="MessageScrolling">
import { ref } from 'vue'
import type { IMessageScroll } from '../workbench-interface'
import { getWorkbenchMessageCount } from '@/api/workbench/workbench'
import userStore from '@/store/modules/user'
const user = userStore()
const systemMsg = ref<IMessageScroll[]>([])
const timer = ref() // 定时器
const fetchData = () => {
  getWorkbenchMessageCount({ remindDeptId: user.deptId, remindId: user.id }).then((res) => {
    systemMsg.value = []
    if (!res.data.approvalMessageCount && !res.data.remindMessageCount) {
      systemMsg.value.push({
        id: '1', title: '暂无新消息',
      })
      return false
    }
    if (res.data.approvalMessageCount) {
      systemMsg.value.push({
        id: '2',
        title: `新增${res.data.approvalMessageCount}条待办信息，请及时处理`,
      })
    }
    if (res.data.remindMessageCount) {
      systemMsg.value.push({
        id: '3',
        title: `新增${res.data.remindMessageCount}条工作提醒，请及时查看`,
      })
    }
  })
}
onMounted(() => {
  fetchData()
  timer.value = setInterval(() => {
    fetchData()
  }, 60000)
})
onBeforeUnmount(() => {
  clearInterval(timer.value)
})
</script>

<template>
  <!-- 我这个需求是有消息时才会让这个功能显示，所以使用了v-if -->
  <div class="bs-sysMsg">
    <i class="el-alert__icon el-icon-warning" />
    <div class="msg__content">
      <el-carousel height="20px" direction="vertical" indicator-position="none" :autoplay="true">
        <el-carousel-item v-for="item in systemMsg" :key="item.id" class="carousel-item">
          <el-icon style="margin-right: 10px;">
            <svg-icon name="icon-radio" />
          </el-icon>
          {{ item.title }}
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<style lang="scss" scoped>
/* 轮翻消息 */
.bs-sysMsg {
  position: relative;
  display: flex;
  width: 100%;
  padding: 8px 12px;
  border-radius: 2px;
  color: #e6a23c;
  background-color: #fdf6ec;
  overflow: hidden;
  opacity: 1;
  align-items: center;
  transition: opacity 0.2s;
}

.carousel-item {
  display: flex;
  // justify-content: center;
  align-items: center;
}

.bs-sysMsg .msg__content {
  display: table-cell;
  padding: 0 8px;
  width: 100%;
}

.bs-sysMsg .msg__content a.item {
  color: #e6a23c;
  font-size: 14px;
  opacity: 0.75;
}
.bs-sysMsg .msg__content a.item:hover { text-decoration: underline; }
</style>