<!-- 系统公告 -->
<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-timeline>
            <template v-for="(item,index) in tableList" :key="index">
                <el-timeline-item :timestamp="moment(item.createtime).format('YYYY-MM-DD HH:mm:ss')" placement="top">
                    <el-card shadow="never">
                        <h4 style="margin-bottom: 10px;font-weight: bold;">{{ item.title }}</h4>
                        <p>{{ item.content }}</p>
                    </el-card>
                </el-timeline-item>
            </template>
        </el-timeline> -->
        <el-collapse v-model="selectedItem" accordion v-if="tableList.length" @change="collapseChange">
            <template v-for="(item,index) in tableList" :key="index">
                <el-collapse-item :name="index">
                    <template #title>
                        <h4 :style="selectedItem === index ? 'font-weight: bold;' : 'color: #666;'">
                            <el-badge :is-dot="!item.readed" style="margin-right: 8px;" />
                            <span>{{ item.title }}</span>
                        </h4>
                    </template>
                    <p style="padding-left: 28px;color: #999;">{{
                    moment(item.createtime).format('YYYY-MM-DD HH:mm:ss')
                    }}</p>
                    <p style="padding-left: 28px;">{{ item.content }}</p>
                </el-collapse-item>
            </template>
        </el-collapse>
        <el-empty v-else />
    </app-drawer>
</template>

<script lang="ts" setup>
import { shallowRef, PropType, computed } from 'vue'
import { useNotice } from '@/business/notice'
import moment from 'moment'
import AppDrawer from '@pc/components/base/drawer/index.vue'

const props = defineProps({
    dataList: {
        type: Array as PropType<Ermcp.NoticeRsp[]>,
        default: () => ([])
    }
})

const { updateNoticeReaded } = useNotice()
const show = shallowRef(true)
const selectedTab = shallowRef('notice')
const selectedItem = shallowRef(0)

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

const collapseChange = (index: number) => {
    if (tableList.value.length && index.toString()) {
        const item = tableList.value[index]
        if (!item.readed) {
            updateNoticeReaded(item.autoid).then(() => {
                //item.readed = true
            })
        }
    }
}

collapseChange(selectedItem.value)
</script>