<template>
    <view>
        <view class="header">
            <view class="uni-padding-wrap" style="overflow: scroll;">
                <scroll-view scroll-x="true" scroll-left="120" style="width: 1000rpx;">
                    <view class="scroll-view-item" :class="{active:defaultselect==0}" 
                    @click="active">
                        全部消息
                    <view v-show="defaultselect==0"></view>
                    </view>             
                    <view class="scroll-view-item" v-for="(item,index) in mtype" 
                    :key="'msgtype'+index" @click="tab(index)">
                        {{item.name}}
                        <view v-show="selectindex==index"></view>
                    </view>         
                </scroll-view>
            </view>
        </view>
        
        <uni-load-more :status="more" :contentText="contentText" color="#9b5904">
            
        </uni-load-more>
        
        <view class="uni-list">
            <view class="uni-list-cell" hover-class="uni-list-cell-hover"  
            v-for="(msg,index) in msgs" :key="`mymsg${index}`" 
            v-show="showall||showtype==msg.msgtype">
                <view class="uni-media-list">
                    <image class="uni-media-list-logo" 
                    :src="msg.msgsender_portrait"></image>
                    <view class="uni-media-list-body">
                        <view class="uni-media-list-text-top">
                            <text class="uni-title">{{msg.msgfrom}}</text>
                            <uni-badge text="2" type="error" @click="bindClick"></uni-badge>
                            <text>{{msg.msgtime}}</text>                                
                        </view>
                        <view class="uni-media-list-text-bottom">
                            <text>{{msg.msgcon}}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
                
    </view>
</template>

<script>
    import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
    import uniBadge from "@/components/uni-badge/uni-badge.vue" 
    export default {
        data() {
            return {
                components:{uniLoadMore,uniBadge},
                defaultselect:0,
                selectindex:-1,
                showall:1,
                showtype:1,
                mtype:[
                    {
                        name:'聊天互动',
                        type:1
                    },
                    {
                        name:'交易物流',
                        type:2
                    },
                    {
                        name:'官方通知',
                        type:3
                    }
                    ],
                msgs:[
                    {
                        msgfrom:'千库店铺',
                        msgcon:'好的！已经安排为您发货！请耐心等候！',
                        msgsender_portrait:'../../static/images/msgpage_user_potrait1.png',
                        numof_unread_msgs: 3,//未读消息条数
                        msgtype:1, //1  聊天互动 2  交易物流   3官方通知
                        is_readed: 0, //0 unreaded    1 readed
                        msgtime:'09:30'//新消息收到的时间
                    },
                    {
                        msgfrom:'Qianku',
                        msgcon:'亲！我帮您查了一下，仓库那边已经开始发货了。',
                        msgsender_portrait:'../../static/images/msgpage_user_potrait2.png',
                        numof_unread_msgs: 1,
                        msgtype:2,
                        is_readed: 0,
                        msgtime:'09:30'
                    },
                    {
                        msgfrom:'千小库',
                        msgcon:'没问题，可以的',
                        msgsender_portrait:'../../static/images/msgpage_user_potrait3.png',
                        numof_unread_msgs: 3,
                        msgtype:3,
                        is_readed: 0,
                        msgtime:'09:30'
                    },
                    {
                        msgfrom:'千库数码',
                        msgcon:'订单编号是KU58800000000，已寄出，麻烦留意一下',
                        msgsender_portrait:'../../static/images/msgpage_user_potrait4.png',
                        numof_unread_msgs: 3,
                        msgtype:1,
                        is_readed: 0,
                        msgtime:'09:10' 
                    },
                    {
                        msgfrom:'千库店铺Qianku',
                        msgcon:'您已成为本店的黄金会员，我们将竭诚为您提供优质的专属服务',
                        msgsender_portrait:'../../static/images/msgpage_user_potrait5.png',
                        numof_unread_msgs: 3,
                        msgtype:2,
                        is_readed: 0,
                        msgtime:'09:30' 
                    },
                    {
                        msgfrom:'千库店铺Qianku',
                        msgcon:'好的！',
                        msgsender_portrait:'../../static/images/msgpage_user_potrait6.png',
                        numof_unread_msgs: 3,
                        msgtype:3,
                        is_readed: 0,
                        msgtime:'09:30'
                    },
                    ],
                    contentText:{
                        contentdown: "上拉刷新",
                        contentrefresh: "正在加载...",
                        contentnomore: "没有更多数据了"                        
                    }
            }
        },
        methods: {
            active:function(){
                this.defaultselect=0;
                this.selectindex=-1;
                this.showall=1;
            },
            tab:function(index){
                this.defaultselect=1;
                this.selectindex=index;
                this.showall=0;
                this.showtype=index+1;
            }           
        }
    }
</script>

<style>
 @import url("./msg.css");
</style>

.header{
    width: 750rpx;
    height: 180rpx;
    border-radius: 0 0 30rpx 30rpx;
    background:linear-gradient(to left,#e96636,#dc3667);
    overflow: hidden;
}
.uni-padding-wrap{
    margin-top: 80rpx;
}
.active{
    font-weight: bolder;
}
.scroll-view-item{  
    margin:0 40rpx;
    display: inline-block;
    color:#fff;
    position: relative;
    line-height: 80rpx;
}
.scroll-view-item>view{
    height:4rpx;
    width: 100%;
    position: absolute;
    background: #deccff;
    bottom:0rpx;
    left: 0;
    border-radius: 2rpx;
}
 .uni-media-list-logo {
        width: 120upx;
        height: 120upx;
    } 
 
    .uni-media-list-body {
        height: auto;
        justify-content: space-around;
    }
 
    .uni-media-list-text-top {
        height: 74upx;
        font-size: 28upx;
        overflow: hidden;
    }
    .uni-media-list-text-top>text{
        display: inline-block;
    }
    .uni-media-list-text-top>text:last-child{
        float: right;
        margin-top: 20rpx;
    }
    .uni-media-list-text-bottom {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .uni-badge{
        width: 30rpx!important;
        height: 30rpx;
        line-height: 30rpx;
        text-align: center;
        border-radius: 15rpx;
        position: relative;
        top: -5px;
        left: 4px;
    }
    .uni-title{
        font-weight: bold;
    }
    .uni-list-cell::after{
        display: none;
    }
    .uni-list-cell{
        margin-bottom: 20rpx;
        background-color: #fff;
    }
    .uni-list{
        background: #f8f8f8;
    }