<template>
    <div class="container">
        <div class="row" style="margin-top:20px;">
            <div class="col-sm-9" style="padding:0 40px;">
                <div class="title">
                    消息
                </div>
                <div class="message-item" v-for="(item,index) in messages">
                    <img :src="item.img">
                    <span>{{item.username}}</span>
                    <span>{{item.eventMsg}}</span>
                    <button class="btn btn-primary" style="margin-left:10px;" v-if="item.eventType === '1'">同意</button>
                    <div class="opt">
                        <span>{{item.date}}</span>
                        <img src="../assets/opt-remove.png" @click="deleteMsg(index)">
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <list :data="list" :active="-1"></list>
            </div>
        </div>
    </div>
</template>

<script>
    import List from './SideList.vue'
    import {SIDE_LIST} from '../const'

    export default{
        components:{
            List
        },
        data(){
            return {
                list:SIDE_LIST,
                messages:[{
                    img:require('../assets/headimg.png'),
                    username:'王大白',
                    date:'2017-03-09',
                    eventType:'0',
                    eventMsg:'评论了你的译文'
                },{
                    img:require('../assets/headimg.png'),
                    username:'王大白',
                    date:'2017-03-09',
                    eventType:'0',
                    eventMsg:'评论了你的译文'
                },{
                    img:require('../assets/headimg.png'),
                    username:'王大白',
                    date:'2017-03-09',
                    eventType:'0',
                    eventMsg:'评论了你的译文'
                },{
                    img:require('../assets/headimg.png'),
                    username:'王大白',
                    date:'2017-03-09',
                    eventType:'1',
                    eventMsg:'给你发了一个翻译校对邀请'
                }],
            }
        },
        methods:{
            deleteMsg(idx){
                this.messages.splice(idx,1);
            }
        }
    }
</script>

<style scoped>
    .title{
        font-size:18px;
        font-weight:bold;
        line-height:40px;
        border-bottom:1px solid #d6d6d6;
        padding-left:20px;
    }

    .message-item{
        font-size:0;
        line-height:32px;
        margin-top:10px;
    }

    .message-item img{
        width:32px;
        height:32px;
    }

    .message-item span{
        font-size:14px;
        vertical-align: middle;
        margin-left:10px;
    }

    .message-item .opt{
        float:right;
        font-size:12px;
        color:#999;
    }

    .message-item .opt img{
        width:16px;
        height:16px;
        margin-left:10px;
        cursor:pointer;
    }
</style>
