<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { debounce } from '@/hooks'
import announcementApi from '@/api/system/announcement'
import type { AnnouncementListType } from '../interface'
import LoadIcon from '@/page/system/mailbox/components/LoadIcon.vue'

const page = ref({ current: 1, size: 10, total: 0 })
const list = ref<AnnouncementListType[]>([])
const listLoading = ref(false)
const pageLoading = ref(false)
const activeObj = ref<AnnouncementListType>()

const pageError = ref(false)

const announcementSidebarRef = ref()
async function handleScroll(event: any) {
  if (list.value.length >= page.value.total) return
  if (listLoading.value) return
  if (
    event.target.scrollTop + event.target.offsetHeight >=
    announcementSidebarRef.value?.offsetHeight - 50
  ) {
    try {
      listLoading.value = true
      await init()
    } catch (err) {
      console.log('err')
    }
    listLoading.value = false
  }
}

const debounceScroll = debounce(handleScroll, 500, false)

// 查看文章
function handleReadArticle(i: AnnouncementListType) {
  activeObj.value = i
  if (i.readStatus === 0) {
    announcementApi.updateAnnouncemenStatusApi(i.id)
  }
  let idx = list.value.findIndex(obj => obj.id === i.id)
  if (idx !== -1) {
    list.value[idx].readStatus = 1
  }
}
async function init() {
  try {
    const { data } = await announcementApi.getAnnouncementListApi(page.value)
    page.value.total = data.data.totalRows
    if (data.code === 200) {
      list.value.push(...data.data.rows)
      activeObj.value = list.value[0]
      if (list.value.length >= page.value.total) return
      page.value.current++
    }
  } catch (err) {
    pageError.value = true
  }
}

// function setFontSize() {
//     const allScrollBox = document.querySelectorAll('.item');
//     const allScrollContent = document.querySelectorAll('.item .item_main');
//     for (let i in allScrollBox) {
//         if (allScrollContent[i] && allScrollBox[i]) {
//             let isOverText = allScrollContent[i]?.offsetHeight > allScrollBox[i].offsetHeight;
//             allScrollContent[i]?.classList.add(isOverText ? 'showOverText' : 'noShowOverText');
//         }
//     }
// }
const initLoading = ref(true)
let timeout: any = null
onMounted(async () => {
  list.value = []
  initLoading.value = true
  await init()
  timeout = setTimeout(() => {
    initLoading.value = false
  }, 500)
})
onUnmounted(() => {
  clearTimeout(timeout)
})
</script>
<template>
  <div class="announcement">
    <BackBar leftText="公告" class="backBar" />
    <div v-if="!initLoading" class="announcement_content">
      <div
        ref="announcementSidebarRef"
        class="announcement_list hidden_scroll"
        @scroll="debounceScroll"
      >
        <div v-for="i in list" :key="i.id" class="outer">
          <div
            :class="{
              item: true,
              unread: i.readStatus === 0,
              active: activeObj?.id === i.id,
            }"
            :style="{
              'background-image':
                activeObj?.id === i.id
                  ? `url(${OSS_URL}/urm/mailbox_sidebar_active.svg)`
                  : i.readStatus === 1
                    ? `url(${OSS_URL}/urm/announcement_read_bg.svg)`
                    : '',
            }"
            @click="handleReadArticle(i)"
          >
            <span
              :class="{
                item_main: true,
                active_main: activeObj?.id === i.id,
                read: i.readStatus === 1,
              }"
              :style="{
                'background-image':
                  activeObj?.id === i.id
                    ? `url(${OSS_URL}/urm/mailbox_sidebar_active_bg.svg)`
                    : i.readStatus === 1
                      ? `url(${OSS_URL}/urm/mailbox_sidebar_ready_bg.svg)`
                      : `url(${OSS_URL}/urm/mailbox_sidebar_bg.svg)`,
              }"
            >
              {{ i.title }}
            </span>
          </div>
          <Icon
            v-if="i.readStatus === 0"
            name="warning"
            width="30"
            height="30"
            class="unread_icon"
          ></Icon>
        </div>
        <LoadIcon v-if="listLoading" />
      </div>
      <div class="single_announcement">
        <div v-if="page.total > 0 && !pageLoading" class="announcement_article">
          <div class="title">{{ activeObj?.title }}</div>
          <div class="article hidden_scroll">
            {{ activeObj?.content }}
          </div>
        </div>
        <Empty
          v-else
          class="empty"
          :type="pageLoading ? 'loading' : pageError ? 'network' : 'announcement'"
        ></Empty>
      </div>
    </div>
    <div v-else class="init_loading">
      <Icon name="global_loading" loading size="100"></Icon>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.announcement {
  padding: $space-4_h 0 $space-1 0;
  width: 100%;
  height: 100%;
  @include main_bg;
  box-sizing: border-box;
  font-family: $font-special;
  color: $font-color;
  font-size: $font-size-7;
  .init_loading {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
  .backBar {
    margin-left: $space-8;
  }
  &_content {
    display: flex;
    width: 1728px;
    height: 90vh;
    margin: auto;
    background: $theme-color-bg;
    background-size: 100% 100%;
    padding: $space-8;

    .announcement_list {
      margin: $space-3_h 0 $space-2 0;
      width: 485px;
      overflow-y: auto;

      .outer {
        position: relative;
        margin: 0 $space-2 $space-2 $space-2;
        .unread_icon {
          position: absolute;
          top: 0;
          right: 0;
        }
      }
      .unread {
        background-color: #fff;
      }
      .item {
        height: 9.67vh;
        border-radius: 2.67vh;
        box-sizing: border-box;
        box-shadow: 0 0.33vh 0.17vh 0 rgba(0, 0, 0, 0.15);
        background-size: 100% 100%;
        background-size: cover;
        overflow: hidden;

        .item_main {
          display: flex;
          align-items: center;
          padding: $space-2_h $space-4;
          width: 453px;
          height: 9.67vh;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          background-position: 134px bottom;
          line-height: 4vh;
          cursor: pointer;
          @include multiple_ellipsis(2);
        }
        // .noShowOverText {
        //     height: 116px;
        // }
        // .showOverText {
        //     font-size: 28px;
        //     line-height: 42px;
        //     height: 104px;
        //     @include multiple_ellipsis(2);
        // }
      }
      .active {
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-color: #fff;
      }
    }
    .single_announcement {
      width: 1116px;
      height: 79.67vh;
      .loading_article {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
      }
      .announcement_article {
        margin-top: $space-3_h;
        padding: $space-4_h $space-6;
        height: 100%;
        .title {
          padding: 0 0 $space-2 0;
          margin-bottom: $space-4_h;
          text-align: center;
          font-size: 4vh;
          line-height: 6vh;
          border-bottom: 0.17vh solid rgba(0, 0, 0, 0.45);
          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .article {
          height: 59.67vh;
          color: $font-main-color;
          line-height: 4vh;
          overflow-y: auto;
        }
      }
    }
  }
}
</style>
