<template>
    <layout-box :show-title="false">
        <template #content>
            <div class="full-height">
                <el-menu
                    :default-active="activeIndex"
                    class="menus"
                    mode="horizontal"
                    @select="handleSelect"
                >
                    <el-menu-item
                        :index="item.index"
                        v-for="(item, index) of menus"
                        :key="index"
                    >{{ item.name }}</el-menu-item>
                </el-menu>
                <div class="messages scrollbar">
                    <message-list
                        :message-list="messageList"
                        :active-index="activeIndex"
                        @jump="onJump"
                    ></message-list>
                </div>
            </div>
        </template>
    </layout-box>
</template>

<script>
export default {
    name: 'MessageCenter',
    components: {
        LayoutBox: () => import('./LayoutBox'),
        MessageList: () => import('./MessageList')
    },
    data () {
        return {
            activeIndex: '1',
            menus: [{ name: '学校通知', index: '1' }, { name: '会议通知', index: '2' }],
            messageList: []
        }
    },
    methods: {
        // 获取学校通知
        getSchoolNoticeList () {
            this.$api.noticeAnnounceApi.getNoticeList({
                start_data: '',
                end_data: '',
                key_world: '',
                menu_id: '',
                page_index: 1,
                page_size: 10,
                enabled: 1
            }).then(res => {
                this.$handleResponse(res).then(({ Data }) => {
                    this.messageList = Data
                })
            })
        },
        getMeettingNoticeList () {
            this.$api.meetingManageApi.getMeetingList({
                PageSize: 20,
                PageNumber: 1,
                Data: {
                    subCompanyId: '',
                    startTime: '',
                    endTime: '',
                    title: '',
                    isWechat: false
                }
            }).then(res => {
                this.$handleResponse(res).then(({ Data }) => {
                    this.messageList = Data.map(item => ({
                        ...item,
                        // eslint-disable-next-line no-useless-escape
                        is_read: new Date(item.meeting_endtime.replace(/\-/g, '/')).getTime() <= new Date().getTime()
                    }))
                })
            })
        },

        handleSelect (index) {
            if (index === this.activeIndex) return
            this.activeIndex = index
            if (index === '1') {
                this.getSchoolNoticeList()
            } else if (index === '2') {
                this.getMeettingNoticeList()
            } else {
                // .....
            }
        },
        // 跳转成功
        onJump (index) {
            this.messageList[index].is_read = true
        }
    },
    created () {
        this.getSchoolNoticeList()
    }
}
</script>

<style lang="stylus" scoped>
.full-height
    height 100%
    display flex
    flex-direction column
    .menus
        flex-shrink 0
        padding 0 15px
        >>> .el-menu-item, .el-submenu__title
            height 40px
            line-height 40px
    .messages
        padding 10px 15px
        flex 1
        overflow-y auto
</style>
