<template>
    <view class="body">
        <mescroll-uni ref="mescrollRef" @down="downCallback" @up="getData" :up="upOption" :down="downOption">
            <view class="body_content">
                <view class="comment_list">
                    <view class="comment_nav"  v-for="(item, index) in items" :key="index">
                        <view class="left">
                            <image class="header" :src="item.userimg"></image>
                        </view>
                        <view class="right">
                            <view class="comment_nav_name" v-text="item.username"></view>
                            <view class="comment_nav_time" v-text="item.CreateDate"></view>
                            <view class="comment_nav_content" v-text="item.Content"></view>
                            <view class="changguan_list">
                                <navigator hover-class="none" :url="'/pages/changguan/detail/index?id=' + item.cgid" class="changguan_nav">
                                    <view class="changguan_inner">
                                        <view class="changguan_nav_img"><image class="img" :src="item.ImgUrl"></image></view>
                                        <view class="changguan_nav_content">
                                            <view class="changguan_nav_title font_bold text_hidden" v-text="item.cgname"></view>
                                            <view class="changguan_nav_subtitle text_hidden" v-text="item.Author"></view>
                                            <view class="changguan_nav_label d_flex">
                                                <view v-for="(item2,index2) in item.Source" :key="index2" class="changguan_nav_label_txt" :class="[index2==0?'label1':'',index2==1?'label2':'',index2==2?'label3':'']" v-text="item2"></view>
                                            </view>
                                        </view>
                                    </view>
                                </navigator>
                            </view>
                        </view>
                        
                    </view>
                </view>
                
            </view>
        </mescroll-uni>
    </view>
</template>

<script>
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
export default {
    mixins: [MescrollMixin],
    components: {},
    data() {
        return {
            mescroll: null,
            downOption: {
                use: false, //是否启用下拉刷新
                auto: false //是否自动加载
            },
            upOption: {
                use: true, //是否启用上拉加载更多
                auto: true //是否自动加载
            },
            items: [
                {
                    header:'/static/header.png',
                    name:"金嘉豪",
                    content:"场馆非常新，体验很赞！环境舒适!",
                    time:"2021/08/10",
                    title: '百人体育馆',
                    subtitle: '常熟市社区活动',
                    imgUrl: '/static/changguan_img1.png',
                    labels: ['课外活动', '大空调', '运动'],
                    status:0
                },
                {
                    header:'/static/header.png',
                    name:"金嘉豪",
                    content:"体验不错，经常去打羽毛球。",
                    time:"2021/08/10",
                    title: '常熟市体育中心',
                    subtitle: '常熟市社区活动',
                    imgUrl: '/static/changguan_img2.png',
                    labels: ['课外活动', '大空调', '运动'],
                    status:0
                },
                {
                    header:'/static/header.png',
                    name:"金嘉豪",
                    content:"场馆非常新，体验很赞！环境舒适!",
                    time:"2021/08/10",
                    title: '高尔夫俱乐部',
                    subtitle: '常熟市社区活动',
                    imgUrl: '/static/changguan_img3.png',
                    labels: ['课外活动', '大空调', '运动'],
                    status:1
                },
                {
                    header:'/static/header.png',
                    name:"金嘉豪",
                    content:"体验不错，经常去打羽毛球。",
                    time:"2021/08/10",
                    title: '体育中心游泳馆',
                    subtitle: '常熟市社区活动',
                    imgUrl: '/static/changguan_img4.png',
                    labels: ['课外活动', '大空调', '运动'],
                    status:0
                },
                {
                    header:'/static/header.png',
                    name:"金嘉豪",
                    content:"场馆非常新，体验很赞！环境舒适!",
                    time:"2021/08/10",
                    title: '百人体育馆',
                    subtitle: '常熟市社区活动',
                    imgUrl: '/static/changguan_img5.png',
                    labels: ['课外活动', '大空调', '运动'],
                    status:1
                }
            ]
        };
    },
    onLoad(options) {
        let that = this;
    },
    onReady() {},
    onShow() {},
    methods: {
        collectClick(e){
            var index = e;
            if(this.items[index].status==0){
                this.items[index].status = 1;
            }else{
                this.items[index].status = 0;
            }
        },
        tabClick(e) {
            this.tabIndex = e;
        },
        getData(mescroll) {
            let that = this;
            let loginInfo = that.$util.getLoginInfo();
            that.$doPost('Server.aspx', {
                mod: 'getPL',
                myuserid: loginInfo.UserId || 1,
                cgid: 0,
                page: mescroll.num,
                pagesize: mescroll.size
            })
            .then(res => {
                if (res.data.resultcode != 0) {
                    that.$util.showToast(res.data.msg);
                    return;
                }
                let body = res.data.data;
                body.filter(function(item, index) {
                    item.CreateDate = that.$util.strDateFormat(item.CreateDate, 'yyyy-MM-dd');
                    item.ImgUrl = that.baseImgUrl + item.ImgUrl;
                    if(item.Source){
                        item.Source = item.Source.split("|");
                    }
                });
                if (mescroll.num == 1) {
                    that.items = body;
                } else {
                    that.items = that.items.concat(body);
                }
                mescroll.endSuccess(body.length);
            })
            .catch(err => {
                that.$util.showToast('网络错误，稍后重试');
                mescroll.endErr();
                console.log('request fail', err);
            });
        },
        downCallback(mescroll) {
            setTimeout(function() {
                mescroll.endSuccess(0);
            }, 600);
        }
    },
    onShareTimeline(res) {
        return {
            title: '活动列表',
            imageUrl: '',
            query: ''
        };
    },
    onShareAppMessage(res) {
        return {
            title: '活动列表',
            imageUrl: '',
            path: ''
        };
    }
};
</script>

<style lang="scss">
page,
.body {
    background: #fff;
}
.comment_list{
    width: 100%;
    overflow: hidden;
}
.comment_nav{
    margin: 0 30upx;
    border-bottom: 1upx solid #edeaea;
    padding-top: 20upx;
    padding-bottom: 26upx;
    overflow: hidden;
}
.comment_nav .left{
    width: 100upx;
    height: 100upx;
    float: left;
}
.comment_nav .left .header{
    box-sizing: border-box;
    border:6upx solid #f5f5f5;
    border-radius: 50%;
    width: 100%;
    height: 100%;
}
.comment_nav .right{
    float: left;
    width: calc(100% - 120upx);
    margin-left: 20upx;
}
.comment_nav .comment_nav_content{
    margin-bottom: 28upx;
    margin-top: 40upx;
    overflow: hidden;
    font-size: 30upx;
    color:#393a38;
}
.comment_nav .comment_nav_name{
    font-size: 24upx;
    padding-top: 10upx;
    padding-bottom: 20upx;
}
.comment_nav .comment_nav_time{
    font-size: 20upx;
    color:#767676;
}
/*场馆列表*/
.changguan_list {
    padding: 12upx;
    overflow: hidden;
    background: #f5f5f5;
    border-radius: 20upx;
}
.changguan_nav {
    margin: 0 0 0 0;
    position: relative;
    z-index: 10;
}
.changguan_nav .changguan_inner {
    width: 100%;
    overflow: hidden;
    border-radius: 20upx;
}
.changguan_nav .changguan_time .icon{
    width: 29upx;
    height: 30upx;
    margin-right: 10upx;
}
.changguan_nav .changguan_nav_img {
    width: 160upx;
    height: 97upx;
    float: left;
    position: relative;
}
.changguan_nav .changguan_nav_img .img {
    width: 100%;
    height: 100%;
    border-radius: 20upx;
}
.changguan_nav .changguan_nav_content {
    width: calc(100% - 196upx);
    margin-left: 20upx;
    float: left;
    padding-right: 16upx;
}
.changguan_nav .changguan_nav_title {
    font-size: 26upx;
    color: #3c3d3b;
    margin-top: 0;
    line-height: 28upx;
    width: 100%;
}
.changguan_nav .changguan_nav_subtitle {
    color: #767676;
    font-size: 20upx;
    margin-top: 6upx;
    margin-bottom: 6upx;
}
.changguan_nav .changguan_nav_label {
}
.changguan_nav .changguan_nav_label_txt {
    height: 34upx;
    line-height: 34upx;
    text-align: center;
    font-size: 20upx;
    color: #fff;
    padding:0 20upx;
}
.changguan_nav .changguan_nav_label_txt.label1 {
    background: #fdf6e5;
    color: #f4bd67;
    margin-right: 12upx;
}
.changguan_nav .changguan_nav_label_txt.label2 {
    background: #f2fcfe;
    color: #80a9f4;
    margin-right: 12upx;
}
.changguan_nav .changguan_nav_label_txt.label3 {
    background: #e9f1fa;
    color: #9f9d9d;
}
</style>
