<template>
    <div class="message-notify" v-if="settingsStore.showMessageNotify">
        <el-badge :value="2" style="font-size: 1.3rem;">
            <el-icon class="icon" @mouseenter="showNotify = true" @mouseleave="onLeave">
                <Bell />
            </el-icon>
        </el-badge>

        <div class="msg-list" v-show="showNotify"  @mouseenter="onEnter" @mouseleave="showNotify = false">
            <div class="ab-m-b-10">
                <div class="msg-item" v-for="item in list" :key="item.id">
                    <div class="left">
                        <el-icon  style="font-size: 1.3rem;">
                            <Bell />
                        </el-icon>
                    </div>
                    <div class="right">
                        <div>{{ item.title }}</div>
                        <div class="date">{{ item.date }}</div>
                    </div>
                </div>
            </div>
            <div class="footer">
                <div class="left">清空通知</div>
                <div class="right">查看更多</div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useSettingsStore } from "@/framework/store/modules/settings";
const settingsStore = useSettingsStore()

const showNotify = ref(false)
let timer: number = 0
const onEnter = () => {
    clearTimeout(timer)
}
const onLeave = () => {
    timer = window.setTimeout(() => {
        showNotify.value = false
    }, 300)
}

const list = ref([{
    title: '你有十五条售后问题要处理',
    date: '2023-06-30 10:21'
},{
    title: '你有十五条售后问题要处理',
    date: '2023-06-30 10:21'
}])


</script>

<style lang="scss" scoped>
.message-notify {

    cursor: pointer;
    margin-right: 32px;
    margin-top: 3px;

    .msg-list {
        width: 350px;
        height: auto;
        background-color: #fff;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        color: #333;
        position: absolute;
        z-index: 100;
        top: 70px;
        right: 50px;
        padding-top: 10px;

        .msg-item {
            display: flex;
            align-items: center;
            padding: 5px 0;
            &:hover{
                opacity: 0.7;
            }

            .left {
                width: 45px;
                display: flex;
                align-items: center;
                justify-content: center;
                
            }
            .right{
                font-size: 14px;
                color: #303335;
                .date{
                    margin-top: 3px;
                    color: #b8bbbd;
                }
            }
        }

        .footer{
            display: flex;
            height: 50px;
            line-height: 50px;
            border-top: 1px solid #f0f0f0;
            .left{
                width: 50%;
                text-align: center;
                border-right: 1px solid #f0f0f0;
                &:hover{
                    opacity: 0.5;
                }
            }
            .right{
                width: 50%;
                text-align: center;
                border-right: 1px solid #f0f0f0;
                &:hover{
                    opacity: 0.5;
                }
            }
        }

    }
}
</style>