<template>
    <div>
        <ul class="list" v-if="messageList.length">
            <li class="item" v-for="(item, index) in messageList" :key="index">
                <p
                    class="name ellipsis"
                    :class="{active: !item.is_read}"
                    :title="item.title"
                    @click="handleNoticeClick(item, index)"
                >
                    <i class="el-icon-message-solid"></i>
                    {{ item.title }}
                </p>

                <p class="user">{{ item.create_by }}</p>
                <p class="time">{{ item.create_time }}</p>
            </li>
        </ul>
        <empty v-else></empty>
    </div>
</template>

<script>
export default {
    name: 'MessageList',
    components: {
        Empty: () => import('@/common/Empty')
    },
    props: ['messageList', 'activeIndex'], // activeIndex 1 通知 2 会议 ....
    methods: {
        handleNoticeClick (item, index) {
            const { activeIndex } = this
            const id = item.b_id
            if (activeIndex === '1') {
                if (!item.is_read) this.$emit('jump', index)
                const modules = {
                    name: '通知详情',
                    baseUrl: '/office/noticeAnnounce/detail/Detail',
                    url: `/office/noticeAnnounce/detail/Detail?id=${id}&source=desktop`
                }
                localStorage.setItem('modules', JSON.stringify(modules))
            } else if (activeIndex === '2') {
                const modules = {
                    name: '会议详情',
                    baseUrl: '/office/meeting/detail',
                    url: `/office/meeting/detail/${id}/desktop`
                }
                localStorage.setItem('modules', JSON.stringify(modules))
            }
        }
    }

}
</script>

<style lang="stylus" scoped>
>>> .data-empty
    padding-top 20px
.list
    .item
        position relative
        display flex
        line-height 32px
        color #909399
        .name
            flex 1
            cursor pointer
            &:hover
                color #409EFF
            &.active
                .el-icon-message-solid
                    color #409EFF
        .user
            flex 0 0 160px
            text-align center
        .time
            flex 0 0 160px
            text-align right
</style>
