k_online_ui/src/views/SystemMessage/src/SystemMessage.vue

<script setup lang="ts">
import NotificationMessageCard from '@/components/NotificationMessageCard/src/NotificationMessageCard.vue'
import { useNotificationMessage } from '@/stores/modules/notificationMessage'
import { isMacOS } from '@/utils/tools'

const isMac = isMacOS()
const activeCardTypeName = ref(sessionStorage.getItem('activeCardTypeName') || 'Milestone Update')

const notificationMsgStore = useNotificationMessage()
const collapseVModel = ref<string[]>(['1'])

const tabCountList = ref([0, 0, 0, 0, 0])
const curTabCount = ref([])

const handleCount = (count: number) => {
  if (!count) return ''
  return count > 99 ? '99+' : count
}
const handleShowCount = (typeName: string, index: number) => {
  // 在切换type类型时，防止点击的类型值为点击之前类型的值
  if (curTabCount.value?.[index] > -1) {
    return curTabCount.value[index]
  }
  const count = tabCountList.value[index]
  if (typeName === activeCardTypeName.value) {
    return handleCount(unreadNotificationList.value.length)
  }
  return handleCount(count)
}

const navList = [
  'Milestone Update',
  'Container Status Update',
  'Departure/Arrival Delay',
  'ETD/ETA Change'
]

const notificationTypeList = ref({
  Milestone_Update: 'Milestone Update',
  Container_Status_Update: 'Container Status Update',
  'Departure/Arrival_Delay': 'Departure/Arrival Delay',
  'ETD/ETA_Change': 'ETD/ETA Change',
  Feature_Update: 'Feature Update'
})

const setActiveItem = (item: string) => {
  navList.forEach((navItem, index) => {
    curTabCount.value[index] = handleShowCount(navItem, index)
  })
  curTabCount.value[tabCountList.value.length - 1] = handleShowCount(
    'Feature Update',
    tabCountList.value.length - 1
  )

  activeCardTypeName.value = item
  sessionStorage.setItem('activeCardTypeName', item)
  activeTabName.value = 'All Notifications'
  getNotificationList()
}

const loading = ref(false)
const notificationList = ref<any[]>([])

const unreadNotificationList = computed(() => {
  return notificationList.value.filter((item) => !item.info.isRead)
})
const readNotificationList = computed(() => {
  return notificationList.value.filter((item) => item.info.isRead)
})
const getNotificationList = async () => {
  loading.value = true
  const rulesType = Object.entries(notificationTypeList.value).find(
    (item) => item[1] === activeCardTypeName.value
  )?.[0]
  try {
    await notificationMsgStore.markMessageAsRead()
    $api
      .getSystemMessageData({
        rules_type: rulesType
      })
      .then((res) => {
        if (res.code === 200) {
          const data = res.data
          notificationList.value = data.cardList
          tabCountList.value = data.countList
        }
      })
      .finally(() => {
        loading.value = false
        curTabCount.value = []
      })
  } catch (error) {
    console.error(error)
    loading.value = false
    curTabCount.value = []
  }
}

const changeCardRead = () => {
  const readCardMap = notificationMsgStore.readCardMap
  notificationList.value.forEach((item) => {
    if (readCardMap.includes(item.info.id)) {
      item.info.isRead = true
    }
  })
}

const activeTabName = ref('All Notifications')
const handleTabChange = () => {
  // 当前tab页切换时，更新数据
  const readCardMap = notificationMsgStore.readCardMap
  notificationList.value.forEach((item) => {
    if (readCardMap.includes(item.info.id)) {
      item.info.isRead = true
    }
  })
}

onMounted(() => {
  getNotificationList()
})
</script>

<template>
  <div v-vloading="loading" style="height: 100%; width: 100%">
    <div class="Title">System Message</div>
    <div class="system-message">
      <div class="left-nav">
        <el-collapse v-model="collapseVModel">
          <el-collapse-item title="Event Notifications" name="1">
            <div
              @click="setActiveItem(item)"
              class="collapse-item"
              :class="{ 'is-active': item === activeCardTypeName }"
              v-for="(item, index) in navList"
              :key="item"
            >
              <div v-if="item === activeCardTypeName" class="active-sign"></div>
              <span>{{ item }}</span>
              <div
                class="count"
                :style="{ 'padding-top': isMac ? 0 : '1px' }"
                v-if="handleShowCount(item, index)"
              >
                <span>{{ handleShowCount(item, index) }}</span>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
        <div
          @click="setActiveItem('Feature Update')"
          class="collapse-item"
          style="margin-top: 4px; font-weight: 700"
          :class="{ 'is-active': activeCardTypeName === 'Feature Update' }"
        >
          <div v-if="activeCardTypeName === 'Feature Update'" class="active-sign"></div>
          <span>Feature Update</span>
          <div
            class="count"
            :style="{ 'padding-top': isMac ? 0 : '1px' }"
            v-if="handleShowCount('Feature Update', tabCountList.length - 1)"
          >
            <span>{{ handleShowCount('Feature Update', tabCountList.length - 1) }}</span>
          </div>
        </div>
      </div>
      <div class="right-content">
        <el-tabs v-model="activeTabName" @tab-change="handleTabChange" class="demo-tabs">
          <el-tab-pane label="All Notifications" name="All Notifications">
            <template #label>
              <span style="margin-right: 4px">All Notifications</span>
            </template>
            <div style="padding-bottom: 20px" v-if="activeTabName === 'All Notifications'">
              <NotificationMessageCard
                v-if="activeTabName === 'All Notifications'"
                :data="notificationList"
                @hasCardRead="changeCardRead"
                :isScrollPadding="true"
                :isShowInsertionTime="true"
                :updateReadCardsOnChange="false"
              ></NotificationMessageCard>
            </div>
          </el-tab-pane>
          <el-tab-pane label="Unread" name="Unread">
            <template #label>
              <span style="margin-right: 4px">Unread</span>
              <div
                class="count"
                :style="{ 'padding-top': isMac ? 0 : '1px' }"
                v-if="unreadNotificationList.length"
              >
                <span>{{ handleCount(unreadNotificationList.length) }}</span>
              </div>
            </template>
            <div style="padding-bottom: 20px" v-if="activeTabName === 'Unread'">
              <NotificationMessageCard
                v-if="activeTabName === 'Unread'"
                :data="unreadNotificationList"
                :isScrollPadding="true"
                :isShowInsertionTime="true"
                :updateReadCardsOnChange="false"
              ></NotificationMessageCard>
            </div>
          </el-tab-pane>
          <el-tab-pane label="Read" name="Read">
            <template #label><span style="margin-right: 4px">Read</span> </template>
            <div style="padding-bottom: 20px" v-if="activeTabName === 'Read'">
              <NotificationMessageCard
                v-if="activeTabName === 'Read'"
                :updateReadCardsOnChange="false"
                :isScrollPadding="true"
                :isShowInsertionTime="true"
                :data="readNotificationList"
              >
              </NotificationMessageCard>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.Title {
  display: flex;
  height: 68px;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-6);
  font-weight: 700;
  padding: 0 24px;
  align-items: center;
}
.system-message {
  display: flex;
  height: calc(100% - 68px);
  .count {
    display: inline-flex;
    height: 18px;
    padding-left: 5px;
    padding-right: 5px;
    background-color: var(--color-theme);
    border-radius: 9px;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    span {
      color: var(--color-white);
      font-weight: 700;
    }
  }
}
.left-nav {
  width: 280px;
  padding: 24px;
  padding-right: 0;
  border-right: 1px solid var(--color-border);
  .el-collapse {
    padding-right: 16px;
    border-top: none;
    :deep(.el-collapse-item__header) {
      font-weight: 700;
    }
  }
  .collapse-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 240px;
    height: 48px;
    margin-bottom: 4px;
    padding: 0 16px;
    border-radius: 12px;
    &:hover {
      background-color: var(--color-system-message-nav-bg);
    }
    .active-sign {
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      width: 4px;
      height: 21px;
      border-radius: 12px;
      background-color: var(--color-theme);
    }

    &.is-active {
      background-color: var(--color-system-message-nav-bg);
      & > span {
        font-weight: 700;
        color: var(--color-theme);
      }
    }
    &:last-child {
      margin-bottom: 8px;
    }
  }
  :deep(.el-collapse-item__header) {
    width: 240px;
    padding: 16px;
  }
}

.right-content {
  flex: 1;
  padding-top: 24px;
  :deep(.el-tabs__nav-scroll) {
    padding-left: 16px;
    border-bottom: 1px solid var(--color-border);
    .el-tabs__item {
      font-weight: 400;
      color: var(--color-neutral-1);
      &.is-active {
        font-weight: 700;
      }
    }
  }
  :deep(.el-tabs) {
    height: 100%;
    .el-tabs__content {
      overflow-y: auto;
      height: 100%;
    }
  }
  :deep {
    .scroller {
      padding-top: 10px;
    }
  }
}
</style>