<template>
    <div class="right-tabbox-newnotice">
        <el-tabs stretch v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="未读消息" name="first">
                <div class="box" v-for="item in noReadList">
                    <div class="header-title">【{{item.title}}】</div>
                    <div class="small-title">{{item.createTime}}</div>
                    <div class="small-title">{{item.content}}</div>
                    <div class="flex-box" @click="goRead(item._id)">
                        <div class="no-read">未读</div>
                        <div class="flex-box1">
                            <img src="../assets/dui.png" height="30" width="30">
                            <div>我知道了</div>
                        </div>
                    </div>
                </div>
                <div class="nodata" v-if="noReadList.length == 0 ">
                    <img width="150" height="120" :src="require('../assets/nodata1.png')"
                    >
                </div>

            </el-tab-pane>
            <el-tab-pane label="已读消息" name="second">
                <div class="box" v-for="item in readList">
                    <div class="header-title">【{{item.title}}】</div>
                    <div class="small-title">{{item.createTime}}</div>
                    <div class="small-title">{{item.content}}</div>
                    <div class="flex-box">
                        <div class="read">已读</div>
                    </div>
                </div>
                <div class="nodata" v-if="readList.length == 0">
                    <img width="150" height="120" :src="require('../assets/nodata1.png')"
                    >
                </div>

            </el-tab-pane>
        </el-tabs>
        <div class="yuan" v-if='noReadList.length > 0 && tabIndex == "0"'></div>
        <el-button size="small" style="margin-top: 2vh" type="primary" @click="goBack">返回上一页</el-button>
    </div>
</template>

<script>
    import {
        readMessage,
        noReadMessage,
        addMessage
    } from "../api";

    export default {
        name: "aboutme",
        data() {
            return {
                activeName: 'first',
                noReadList: [],
                readList: [],
                tabIndex : '0',
            };
        },
        methods: {
            handleClick(val) {
                if (val.index == '0') {
                    this.noReadMessage();
                } else {
                    this.readMessage();
                }
                this.tabIndex = val.index;
            },
            async goRead(id) {
                const result = await addMessage({noticeId: id});
                if (result.code == 0) {
                    this.noReadMessage();
                }
            },
            async readMessage() {
                const result = await readMessage();
                if (result.code == 0) {
                    this.readList = result.data
                }
            },
            async noReadMessage() {
                const result = await noReadMessage();
                if (result.code == 0) {
                    this.noReadList = result.data
                }
            },
            goBack() {
                this.$router.replace("/main");
            },
        },
        mounted() {
            this.readMessage();
            this.noReadMessage();
        },

    };
</script>

<style scoped>
    /deep/ .el-tabs__item.is-active {
        border-radius: 20px;
        border: 1px solid #2188F7;
        background: #D2E7FD;
    }


    /deep/ .el-tabs__active-bar {
        background-color: transparent !important;
    }

    .right-tabbox-newnotice /deep/ .el-tabs__nav-wrap::after {
        position: static !important;
    }

    .right-tabbox-newnotice {
        background: #f9f9f7;
        height: 100%;
        padding-top: 20px;
    }

    /deep/ .el-tabs__nav-scroll {
        background: white;
    }

    .box {
        width: 100%;
        background: white;
        box-sizing: border-box;
        padding: 16px;
        font-size: 10px;

    }

    .small-title {
        color: #999999;
        font-size: 14px;
        margin-top: 5px;
        margin-left: 8px;
    }

    .header-title {
        font-size: 15px;
    }

    .no-read {
        padding: 8px;
        border-radius: 5px;
        background: #2087F7;
        color: white;
        margin-left: 10px;
    }

    .flex-box {
        display: flex;
        margin-top: 10px;
        justify-content: space-between;
    }


    .flex-box1 {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .nodata {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 50vh;
    }

    .read {
        padding: 8px;
        border-radius: 5px;
        background: #999999;
        color: white;
        margin-left: 10px;
    }

    .yuan {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: red;
        position: absolute;
        top: 25px;
        left: 30%;
        z-index: 999;
    }


    /deep/ .el-button {
        width: 90%;
        margin-left: 5%;
    }

    /deep/ .el-tabs__header {
        margin: 0;
    }


</style>
