<template>
    <a-spin style="display: block" :loading="loading">
        <a-tabs v-model:activeKey="messageType" type="rounded" destroy-on-hide>
            <a-tab-pane v-for="item in tabList" :key="item.key">
                <template #title>
                    <span> {{ item.title }}{{ formatUnreadLength(item.key) }} </span>
                </template>
                <a-result v-if="!renderList.length" status="404">
                    <template #subtitle> {{ $t('messageBox.noContent') }} </template>
                </a-result>
                <List :render-list="renderList" :unread-count="unreadCount" @item-click="handleItemClick" />
            </a-tab-pane>
            <template #extra>
                <a-button type="text" @click="emptyList">
                    {{ $t('messageBox.tab.button') }}
                </a-button>
            </template>
        </a-tabs>
    </a-spin>
</template>

<script lang="ts" setup>
    import { ref, reactive, toRefs, computed } from 'vue'
    import { useI18n } from 'vue-i18n'
    import { queryMessageList, setMessageStatus, MessageRecord, MessageListType } from '@/api/message'
    import useLoading from '@/hooks/loading'
    import List from './list.vue'

    interface TabItem {
        key: string
        title: string
        avatar?: string
    }
    const { loading, setLoading } = useLoading(true)
    const messageType = ref('message')
    const { t } = useI18n()
    const messageData = reactive<{
        renderList: MessageRecord[]
        messageList: MessageRecord[]
    }>({
        renderList: [],
        messageList: [],
    })
    toRefs(messageData)
    const tabList: TabItem[] = [
        {
            key: 'message',
            title: t('messageBox.tab.title.message'),
        },
        {
            key: 'notice',
            title: t('messageBox.tab.title.notice'),
        },
        {
            key: 'todo',
            title: t('messageBox.tab.title.todo'),
        },
    ]
    async function fetchSourceData() {
        setLoading(true)
        try {
            const { data } = await queryMessageList()
            messageData.messageList = data
        } catch (err) {
            // you can report use errorHandler or other
        } finally {
            setLoading(false)
        }
    }
    async function readMessage(data: MessageListType) {
        const ids = data.map((item) => item.id)
        await setMessageStatus({ ids })
        fetchSourceData()
    }
    const renderList = computed(() => {
        return messageData.messageList.filter((item) => messageType.value === item.type)
    })
    const unreadCount = computed(() => {
        return renderList.value.filter((item) => !item.status).length
    })
    const getUnreadList = (type: string) => {
        const list = messageData.messageList.filter((item) => item.type === type && !item.status)
        return list
    }
    const formatUnreadLength = (type: string) => {
        const list = getUnreadList(type)
        return list.length ? `(${list.length})` : ``
    }
    const handleItemClick = (items: MessageListType) => {
        if (renderList.value.length) readMessage([...items])
    }
    const emptyList = () => {
        messageData.messageList = []
    }
    fetchSourceData()
</script>

<style scoped lang="less">
    :deep(.arco-popover-popup-content) {
        padding: 0;
    }

    :deep(.arco-list-item-meta) {
        align-items: flex-start;
    }
    :deep(.arco-tabs-nav) {
        padding: 14px 0 12px 16px;
        border-bottom: 1px solid var(--color-neutral-3);
    }
    :deep(.arco-tabs-content) {
        padding-top: 0;
        .arco-result-subtitle {
            color: rgb(var(--gray-6));
        }
    }
</style>
