<template>
    <div class="p-20 vh100 hidden">
        <div class="round-12 hidden bg-fff h-full flex-col">
            <header class="flex-items-center justify-between minh-70 px-22" style="border-bottom: 1px solid #eee;">
                <div class="header-left flex-items-center">
                    <el-button class="flex-center w-36 h-36 mr-12 round-8 pointer" title="返回" @click="goBack">
                        <el-icon>
                            <ArrowLeft />
                        </el-icon>
                    </el-button>
                    <div>
                        <div class="flex-items-center">
                            <div class="fs-18 lh-24 fw-700">消息中心</div>
                            <span class="bg-ff2865 h-22 lh-22 round-12 color-fff fs-12 ml-10 px-10">{{
                                unreadCount }} 条未读</span>
                        </div>
                        <p class="mt-4 fs-12">业务通知、协作消息与管理审批统一入口</p>
                    </div>
                </div>
                <el-button class="flex-center gap-6 h-34 px-14 fs-12 pointer" @click="markAllRead">
                    <el-icon>
                        <Check />
                    </el-icon>
                    <span>全部标为已读</span>
                </el-button>
            </header>
            <div class="flex-1 flex hidden">
                <aside class="flex-col w-220 minw-220 py-14 px-8">
                    <div v-for="item in messageCategories" :key="item.code"
                        class="relative flex-items-center w-full minh-66 mb-10 py-10 px-14 round-8 gap-10 text-left pointer"
                        :class="{ active: activeCategory === item.code }" @click="activeCategory = item.code">
                        <div class="flex-center w-36 h-36 minw-36 round-8"
                            :style="{ color: item.color, backgroundColor: item.bgColor }">
                            <el-icon>
                                <component :is="iconMap[item.icon]" />
                            </el-icon>
                        </div>
                        <div class="flex-1">
                            <div class="flex-between">
                                <span class="category-name lh-20 fw-700">{{ item.name }}</span>
                                <span v-if="item.unread > 0"
                                    class="bg-ff2865 minw-18 h-18 lh-18 px-6 round-10 color-fff fs-12 text-center">{{
                                        item.unread }}</span>
                            </div>
                            <span class="mt-4 fs-12 ellipsis color-888">{{ item.summary }}</span>
                        </div>
                    </div>
                </aside>

                <main class="flex-1 h-full flex-col">
                    <section class="px-20 h-70 py-14">
                        <div class="flex gap-10">
                            <el-input v-model="keyword" class="w-full fs-12" placeholder="搜索标题、人员或业务编号">
                                <template #prefix>
                                    <el-icon>
                                        <Search />
                                    </el-icon>
                                </template>
                            </el-input>
                            <el-select v-model="selectedType" class="minw-160 maxw-160">
                                <el-option value="all" label="全部类型" />
                                <el-option v-for="item in typeOptions" :key="item" :value="item" :label="item" />
                            </el-select>
                            <el-select v-model="selectedStatus" class="minw-160 maxw-160">
                                <el-option value="all" label="全部状态" />
                                <el-option value="unread" label="未读" />
                                <el-option value="read" label="已读" />
                            </el-select>
                            <div class="w-240 minw-240">
                                <el-date-picker v-model="dateRange" type="daterange" range-separator="至"
                                    start-placeholder="开始时间" end-placeholder="结束时间" style="width: 100%;" />
                            </div>
                            <el-button @click="resetFilters">重置</el-button>
                        </div>
                    </section>
                    <section class="px-20 pt-10 pb-20 h-full over-y-auto">
                        <div class="mb-10">
                            <div class="lh-20 fw-600">{{ activeCategoryInfo.name }}</div>
                            <p class="mt-4 fs-12 color-888">当前筛选结果 {{ filteredMessages.length }} 条</p>
                        </div>
                        <div class="hidden round-8 border-eee">
                            <article v-for="item in filteredMessages" :key="item.id"
                                class="message-item relative flex-items-center gap-16 minh-104 py-16 px-18 pointer"
                                :class="{ unread: item.unread }" @click="item.unread = false">
                                <div class="message-icon relative flex-center w-40 h-40 round-8" :class="item.category">
                                    <span v-if="item.unread" class="unread-dot absolute w-10 h-10 round"></span>
                                    <el-icon>
                                        <component :is="messageIconMap[item.category]" />
                                    </el-icon>
                                </div>
                                <div class="message-content flex-1 minw-0">
                                    <div class="message-title-row flex-items-center gap-8 minw-0">
                                        <h3 class="fs-14 lh-22 ellipsis">{{ item.title }}</h3>
                                        <span v-for="tag in item.tags" :key="tag.label"
                                            class="tag h-20 lh-20 round-4 fs-12 px-8" :class="tag.tone">
                                            {{ tag.label }}
                                        </span>
                                    </div>
                                    <p class="mt-6 fs-12 lh-20 ellipsis">{{ item.content }}</p>
                                    <div class="message-meta flex-items-center gap-22 mt-6 fs-12">
                                        <span v-for="meta in item.meta" :key="meta" class="flex-items-center gap-4">
                                            <el-icon v-if="meta.includes('→')">
                                                <User />
                                            </el-icon>
                                            {{ meta }}
                                        </span>
                                    </div>
                                </div>
                                <div class="message-time flex-col items-end justify-center gap-6 w-100 fs-12">
                                    <span>{{ item.date }}</span>
                                    <strong class="fs-12">{{ item.time }}</strong>
                                    <em class="fs-12" :class="item.stateTone">{{ item.state }}</em>
                                </div>
                            </article>
                            <div v-if="filteredMessages.length === 0" class="empty-state flex-center h-160 fs-14">
                                暂无匹配消息
                            </div>
                        </div>
                    </section>
                    <section class="h-60">
                        分页
                    </section>
                </main>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { useRouter } from 'vue-router';
import {
    ArrowLeft,
    Bell,
    Check,
    DocumentChecked,
    List,
    Lock,
    Search,
    Upload,
    User,
    VideoCamera,
} from '@element-plus/icons-vue';
import {
    messageCategories,
    messageRecords,
    type MessageCategoryCode,
    type MessageIconName,
} from './messageRecords';

const router = useRouter();
const activeCategory = ref<MessageCategoryCode>('all');
const keyword = ref('');
const selectedType = ref('all');
const selectedStatus = ref('all');
const dateRange = ref<any>('');
const messages = ref(messageRecords.map((item) => ({ ...item })));

const iconMap: Record<MessageIconName, unknown> = {
    Bell,
    DocumentChecked,
    List,
    Upload,
    VideoCamera,
    Lock,
};

const messageIconMap = {
    approval: DocumentChecked,
    task: List,
    content: Upload,
    live: VideoCamera,
    system: Lock,
};

const activeCategoryInfo = computed(() => {
    return messageCategories.find((item) => item.code === activeCategory.value) ?? messageCategories[0];
});

const unreadCount = computed(() => messages.value.filter((item) => item.unread).length);

const typeOptions = computed(() => {
    return Array.from(new Set(messages.value.map((item) => item.type)));
});

const filteredMessages = computed(() => {
    const searchValue = keyword.value.trim().toLowerCase();
    const [startDate, endDate] = ['', ''];

    return messages.value.filter((item) => {
        const matchCategory = activeCategory.value === 'all' || item.category === activeCategory.value;
        const matchType = selectedType.value === 'all' || item.type === selectedType.value;
        const matchStatus =
            selectedStatus.value === 'all' ||
            (selectedStatus.value === 'unread' && item.unread) ||
            (selectedStatus.value === 'read' && !item.unread);
        const matchKeyword =
            !searchValue ||
            [item.title, item.content, item.id, ...item.meta].some((text) => text.toLowerCase().includes(searchValue));
        const matchStartDate = !startDate || normalizeDate(item.date) >= normalizeDate(startDate);
        const matchEndDate = !endDate || normalizeDate(item.date) <= normalizeDate(endDate);

        return matchCategory && matchType && matchStatus && matchKeyword && matchStartDate && matchEndDate;
    });
});

const normalizeDate = (date: string) => date.replace(/\//g, '-');

const goBack = () => {
    router.back();
};

const markAllRead = () => {
    messages.value = messages.value.map((item) => ({ ...item, unread: false }));
};

const resetFilters = () => {
    keyword.value = '';
    selectedType.value = 'all';
    selectedStatus.value = 'all';
    dateRange.value = [];
};
</script>

<style lang="scss" scoped>
.bg-ff2865 {
    background: #ff2865;
}

.active {
    border-color: #dbc1ff;
    background: #fbf6ff;

    .category-name {
        color: #7b11ff;
    }
}

.message-item {
    border-bottom: 1px solid #ecf1f7;
}

.message-item:last-child {
    border-bottom: 0;
}

.message-item.unread {
    background: linear-gradient(90deg, #fff 0%, #fff 75%, #fbf7ff 100%);
}

.message-icon {
    margin-top: 1px;
}

.message-icon.approval {
    color: #e96500;
    background: #fff7df;
}

.message-icon.task {
    color: #236cff;
    background: #edf5ff;
}

.message-icon.content {
    color: #00a874;
    background: #eafff6;
}

.message-icon.live {
    color: #f21f67;
    background: #fff0f3;
}

.message-icon.system {
    color: #4b627f;
    background: #f0f4f8;
}

.unread-dot {
    top: -2px;
    right: -2px;
    background: #ff2865;
}

.message-title-row h3 {
    color: #061b39;
    letter-spacing: 0;
}

.tag {
    flex: 0 0 auto;
}

.tag.warning {
    color: #d86a00;
    background: #fff5dd;
}

.tag.primary {
    color: #136bff;
    background: #eaf2ff;
}

.tag.success {
    color: #00a874;
    background: #e7fff5;
}

.tag.danger {
    color: #ff2865;
    background: #fff0f4;
}

.tag.info {
    color: #5c7899;
    background: #eef4fb;
}

.message-content p {
    color: #526f91;
}

.message-meta {
    color: #7890ae;
}

.message-time {
    color: #888;
}

.message-time strong {
    color: #17345a;
}

.message-time em {
    color: #8a22ff;
    font-style: normal;
}

.message-time em.done,
.message-time em.available {
    color: #00a874;
}

.message-time em.failed,
.message-time em.expired {
    color: #ff2865;
}

.empty-state {
    color: #7890ae;
    background-color: #fdfdfd;
}
</style>
