<template>
    <div class="container">
        <div class="row" style="margin-top:20px;">
            <div class="col-sm-9" style="padding:0 40px;">
                <div v-show="tag === 'list'" class="list">
                    <tabs :data="tabs" @click="tabClick">
                        <button class="btn btn-primary" style="width:80px;" @click="sendMsg">发私信</button>
                    </tabs>
                    <div class="all" v-show="active === 0">
                        <div class="letter-item" :class="{read:item.readFlag}" v-for="item in letters">
                            <img :src="item.img">
                            <span>{{item.username}}</span>
                            <span @click="lookMsg(item)">给你发了一条私信</span>
                            <span>{{item.date}}</span>
                        </div>
                    </div>
                    <div class="unread" v-show="active === 1">
                        <div class="letter-item" v-for="item in unread">
                            <img :src="item.img">
                            <span>{{item.username}}</span>
                            <span @click="lookMsg(item)">给你发了一条私信</span>
                            <span>{{item.date}}</span>
                        </div>
                    </div>
                    <div class="read" v-show="active === 2">
                        <div class="letter-item" v-for="item in read">
                            <img :src="item.img">
                            <span>{{item.username}}</span>
                            <span @click="lookMsg(item)">给你发了一条私信</span>
                            <span>{{item.date}}</span>
                        </div>
                    </div>
                </div>
                <div v-show="tag === 'send'">
                    <input type="text" class="form-control" placeholder="@私信谁?">
                    <textarea class="form-control content" rows="10"></textarea>
                    <div style="margin-top:20px;">
                        <button class="btn btn-primary" style="width:80px;" @click="backToList">返回</button>
                        <button class="btn btn-danger" style="width:80px;margin-left:10px;">发送</button>
                    </div>
                </div>
                <div v-show="tag === 'content'">
                    <div class="letter-item">
                        <img :src="msgItem.img">
                        <span>{{msgItem.username}}</span>
                        <span>给你发了一条私信</span>
                        <span>{{msgItem.date}}</span>
                    </div>
                    <p style="padding-left:42px;margin-top:10px;">{{msgItem.content}}</p>
                    <div>
                        <button class="btn btn-primary" style="width:80px;margin-left:42px;" @click="backToList">返回</button>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <list :data="list" :active="3"></list>
            </div>
        </div>
    </div>
</template>

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

    export default{
        components:{
            List,
            Tabs
        },
        data(){
            return {
                tag:'list',
                msgItem:{},
                list:SIDE_LIST,
                tabs:[{
                    title:'全部消息'
                },{
                    title:'未读消息'
                },{
                    title:'已读消息'
                }],
                letters:[{
                    img:require('../assets/headimg.png'),
                    username:'王大白',
                    readFlag:false,
                    date:'2017-03-09',
                    content:'测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容'
                },{
                    img:require('../assets/headimg.png'),
                    username:'王大白',
                    readFlag:false,
                    date:'2017-03-09',
                    content:'测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容'
                },{
                    img:require('../assets/headimg.png'),
                    username:'王大白',
                    readFlag:true,
                    date:'2017-03-09',
                    content:'测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容'
                },{
                    img:require('../assets/headimg.png'),
                    username:'王大白',
                    readFlag:true,
                    date:'2017-03-09',
                    content:'测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容'
                }],
                active:0
            }
        },
        computed:{
            unread(){
                return this.letters.filter((item) => {
                    return !item.readFlag;
                });
            },
            read(){
                return this.letters.filter((item) => {
                    return item.readFlag;
                });
            }
        },
        methods:{
            tabClick(idx){
                if(this.active !== idx)this.active = idx;
            },
            sendMsg(){
                this.tag = 'send';
            },
            backToList(){
                this.tag = 'list';
            },
            lookMsg(item){
                this.msgItem = item;
                this.tag = 'content';
            }
        }
    }
</script>

<style scoped>
    .letter-item{
        font-size:0;
        line-height:32px;
        margin-top:10px;
    }

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

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

    .letter-item span:last-child{
        float:right;
        font-size:12px;
        color:#999;
    }

    .letter-item button{
        float:right;
        width:100px;
    }

    .letter-item.read span{
        color:#999;
    }

    textarea.content{
        border-radius:5px;
        margin-top:10px;
    }

    .list .letter-item span:nth-child(3){
        cursor:pointer;
        text-decoration: underline;
    }
</style>
