<template>
    <div style="padding-bottom:50px">
        <div style="display:flex;align-items:center">   
            <div class="dvied"></div>
            <div style="font-weight: bold;color: #333333;font-size: 18px;margin-left:10px">站内消息</div>
        </div>
        <div style="background: #FFFFFF;border-radius: 4px;">   
            <div style="" class="messsagenum">
                <el-radio-group v-model="mesage" @change="showDataTypeChage" fill='#0066EB'> 
                    <!-- <el-radio-button label="1">
                        <span>全部消息</span>
                    </el-radio-button> -->
                    <!-- <el-radio-button label="2">
                        <span>未读消息{{unreadmessage>0?'('+unreadmessage+')':''}}</span>
                    </el-radio-button>        
                    <el-radio-button label="3">
                        <span>已读消息</span>
                    </el-radio-button>         -->
                    <!-- <el-radio-button label="4">
                        <span>消息列表</span>
                    </el-radio-button>         -->
                </el-radio-group>
                <el-table v-loading='loading' :data="messagelist"  >
                    <el-table-column label="消息类型" align="center" key="title" prop="title"  width="200" :show-overflow-tooltip="true"/>
                    <el-table-column label="发送时间" align="center" key="sendTime" prop="sendTime"  width="200" :show-overflow-tooltip="true"/>
                    <el-table-column label="标题内容" align="center" key="message" prop="message" :show-overflow-tooltip="true"/>
                </el-table>
                <!-- @size-change="handleSizeChange" -->
                <div v-if="total>10"  style='width:100%;margin-top:30px;text-align: center;'>
                    <el-pagination background                 
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"             
                        :page-size="queryParams.pageSize"
                        layout="total,  prev, pager, next, jumper"
                        :total="total">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import {listMyMessage,sendMessage,listMyMessageCount} from "@/api/system/message";
    import store from "@/store";
    export default{
        data(){
            return{
                loading:false,
                currentPage:1,    
                mesage:'1',
                unreadmessage:'',
                messageData:[],
                messagelist:[],
                total:0,
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    userId:''
                },
            }
        },
        mounted(){          
            // this.showDataTypeChage('1');
             this.getlist();                            
            // this.messagelist=this.messageData 
          
        },
        methods:{
            showDataTypeChage(val){
                this.loading = true;           
                 this.getlist();
             
                // if(val==1){    
                //     this.getlist();                            
                //     this.messagelist=this.messageData   
                // }else if(val==2){    
                //      this.getlist();          
                //     // this.messagelist=this.messageData.slice(0,this.unreadmessage)
                //     this.messagelist=this.messageData.filter(item=>item.status==1)
                //     this.unreadmessage=this.messagelist.length
                //     listMyMessageCount().then(res => {
                //             // this.unreadmessage=res.data
                //             store.commit('SET_MESSAGECOUNT',res.data);            
                //     }) 
                // }else if(val==3){
                //      this.getlist(); 
                //     //  this.messagelist=this.messageData.slice(this.unreadmessage)
                //       this.messagelist=this.messageData.filter(item=>item.status==2)
                // }else if(val==4){
                //     this.$router.push('./messagelist')
                // }
            },
            getlist(){
                listMyMessage(this.queryParams).then(response => {
                    this.messagelist = response.rows;
                    this.total = response.total;
                    this.loading = false;    
                    // this.messagelist=this.messageData                     
                })   
            },
            //当前页码
            handleCurrentChange(val) {
                this.queryParams.pageNum=val;
                this.showDataTypeChage(this.mesage);
            }
        },

    }
</script>
<style scoped>
    .dvied{
        width: 4px;
        height: 18px;
        background: #0066EB;
    }
    .messsagenum>>>.el-radio-button__inner{
        background:#ebebed;
        border:none;
        margin-right:20px;
        /* font-weight:bold; */
    }
    .messsagenum>>>.el-radio-button:first-child .el-radio-button__inner{
        border-radius:0;
    }
    .messsagenum>>>.el-radio-button:last-child .el-radio-button__inner{
        border-radius:0;
    }
    .messsagenum>>>.el-table th{
        background-color:#F7F7F7;
        color:#666666;
        /* text-align:left; */
    }
    .messsagenum>>>.el-table td{
        /* text-align:center; */
        background-color:#FFFFFF;
        height:60px;
        color:#333333;
    }
    .messsagenum>>>.el-table--border th{
        border-right:#F7F7F7
    }
</style>