<template>
	<view class="content">
		<block v-if="logsArr.length > 0">
            <view class="While circle" v-for="(item, index) in logsArr" :key="index">
                <view class="circle-user">
                    <image class="circle-user-head" :src="item.case.user.avatar ? item.case.user.avatar : '/static/imgs/default_myHead.png'" mode="aspectFill"></image>
                    <view class="circle-user-name">
                        <block v-if="item.case">{{ item.case.user.nickname }}</block>
                        <view class="circle-user-quantity">尿酸值{{ item.quantity }}</view>
                    </view>
                </view>
                <view class="circle-content">
                    {{ item.remark }}
                </view>
                <image v-if="item.cover" class="circle-picture-img" @click="openImg(item.cover)" :src="item.cover" mode="widthFix"></image>
                <view class="circle-see">
                    发布时间：<text>{{ item.created_at }}</text>
                </view>
            </view>
            <view class="pagesLoding" v-if="lodingStats">
                <block v-if="page.has_more">
                    <image class="pagesLodingIcon" src="/static/icons/refresh_loding.gif" mode="widthFix"></image>加载中...
                </block>
                <block v-else>
                    没有更多了~
                </block>
            </view>
        </block>
        <view class="pack-center pages-hint" v-else>
            <image src="/static/imgs/coupon_null.png"></image>
            <view>暂无数据</view>
        </view>
	</view>
</template>

<script>
    import {
    	allLogs
    } from '@/apis/interfaces/gout'
	export default {
		data() {
			return {
				logsArr     : [] ,// 病友记列表
                page        : {},     //分页信息
                lodingStats : false   //加载状态
			};
		},
        onShow() {
            // 获取首页数据
            this.logsInfo();
        },
        methods: {
            // 首页数据
            logsInfo(page) {
            	allLogs({
                    page : page || ''
                }).then(res => {
                    let listArr = this.logsArr,
                        newData = []
                        if(page == 1 || page == undefined) listArr = []
                        newData = listArr.concat(res.data)
                    this.logsArr    = newData
                    this.page       = res.page
                    this.lodingStats= false
                    uni.stopPullDownRefresh()
            	}).catch(err => {
            		uni.showToast({
            			title: err.message,
            			icon: "none"
            		})
            	})
            },
            
            // 查看图片
            openImg(img) {
                uni.previewImage({
                    current: img,
                    urls:[img]
                })
            },
            
            // 页面相关事件处理函数--监听用户下拉动作
            onPullDownRefresh() {
                // 商品列表数据
                this.logsInfo();
            },
                    
            // 上拉加载
            onReachBottom(){
                this.lodingStats = true
                let pageNumber = this.page.current
                if(this.page.has_more){
                    pageNumber++
                    // 商品列表数据
                    this.logsInfo(pageNumber);
                }
            }
        }
	}
</script>

<style lang="scss">
    .content{
    	overflow: hidden;
    	background: #f3f4f6;
        padding: 20rpx;
        box-sizing: border-box;
    }
    
    .While {
        border-radius: 10rpx;
        margin-bottom: 30rpx;
        background-color: #FFFFFF;
        padding:30rpx;
        box-sizing: border-box;
        box-shadow: 0 0 10rpx rgba($color: #000000, $alpha: .05);
    }
    
    .circle {
        border-radius: 10rpx;
        .circle-user {
            position: relative;
            .circle-user-head {
                width: 60rpx;
                height: 60rpx;
                border-radius: 50%;
            }
            .circle-user-name {
                line-height: 60rpx;
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                padding-left: 80rpx;
                box-sizing: border-box;
                font-size: 28rpx;
                display: flex;
                .circle-user-quantity {
                    background-color: #a7affd;
                    color: #FFFFFF;
                    font-size: 24rpx;
                    padding: 0 10rpx;
                    border-radius: 60rpx;
                    height: 40rpx;
                    line-height: 40rpx;
                    margin: 10rpx 20rpx;
                }
            }
        }
        .circle-content {
            margin: 20rpx 0;
            font-size: 26rpx;
            line-height: 44rpx;
        }
        
        .circle-picture-img{
            width: 60%;
            border-radius: 6rpx;
        }
        
        .circle-see {
            font-size: 26rpx;
            color: #919191;
            margin-top: 20rpx;
            text {
                padding-right: 40rpx;
            }
        }
    }
</style>
