<!-- 系统公告 -->
<template>
    <app-drawer title="系统公告" :width="800" v-model:show="show">
        <template #header>
            <el-radio-group v-model="selectedTab">
                <el-radio-button label="notice">公告</el-radio-button>
                <el-radio-button label="message">消息</el-radio-button>
            </el-radio-group>
        </template>
        <el-tabs tab-position="left" v-model="activeId" @tab-change="collapseChange" v-if="dataList.length">
            <template v-for="(item, index) in dataList" :key="index">
                <el-tab-pane :name="item.autoid">
                    <template #label>
                        <el-badge :is-dot="!item.readed" style="margin-right: 8px;" />
                        <span>{{ formatDate(item.createtime, 'MM/DD HH:mm') }}</span>
                    </template>
                    <div style="padding:0 28px;">
                        <h4 style="display: flex; flex-direction: column;">
                            <span style="font-weight: bold;">{{ item.title }}</span>
                            <span style="font-size: 12px; color: #999;margin: 8px 0;">{{ formatDate(item.createtime)
                            }}</span>
                        </h4>
                        <div style="line-height: 24px;color: #555;" v-html="formatHtmlString(item.content)"></div>
                    </div>
                </el-tab-pane>
            </template>
        </el-tabs>
        <el-empty v-else />
    </app-drawer>
</template>

<script lang="ts" setup>
import { shallowRef, computed, onMounted } from 'vue'
import { formatDate, formatHtmlString } from '@/filters'
import { useNotice } from '@/stores'
import AppDrawer from '@pc/components/base/drawer/index.vue'

const noticeStore = useNotice()
const show = shallowRef(true)
const selectedTab = shallowRef('notice')
const activeId = shallowRef(0)

const dataList = computed(() => {
    switch (selectedTab.value) {
        case 'notice': {
            return noticeStore.noticeList.filter((e) => e.msgtype === 1)
        }
        case 'message': {
            return noticeStore.noticeList.filter((e) => e.msgtype === 2)
        }
        default: {
            return []
        }
    }
})

const collapseChange = (id: number) => {
    noticeStore.updateNoticeReaded(id)
}

onMounted(() => {
    const [firstItem] = dataList.value
    if (firstItem) {
        activeId.value = firstItem.autoid
        collapseChange(activeId.value)
    }
})
</script>