<template>
	<view class="uni-container">
		<u-navbar :autoBack="true" :bgColor="bgColor">
			<view slot='center' style="font-size: 36rpx; font-weight: bold;">
				我的收藏
			</view>
		</u-navbar>
        <mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption" :top="paddingTop + 'px'">
            <view class="list_waper">
                <view class="list" v-for="(i, index) in list" :key="index" @click="viewDetails(i)">
                    <view>
                        <text>{{i.title}}</text>
                        <text>{{$utils.formatDate('Y-M-D', i.publishtime * 1000)}}</text>
                    </view>
                    <view>{{i.description || ''}}</view>
                </view>
            </view>
        </mescroll-body>
	</view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
export default {
    mixins: [MescrollMixin],
    data () {
        return {
            paddingTop: 0,
            bgColor: '#F6F9FF',
            list: []
        }
    },
    onLoad () {
        this.paddingTop = this.$paddingTop;
    },
    onShow () {
        this.mescroll && this.mescroll.resetUpScroll();
    },
    methods: {
        async upCallback (page) {
            let obj = {  pageNum: page.num, pageSize: page.size };
            let info = await this.$http.myCollect(obj);
            if(page.num == 1) this.list = [];
            this.list = this.list.concat(info.rows);
            this.mescroll.endBySize(info.rows.length, info.total); 
        },
		viewDetails(i) {
			uni.navigateTo({
				url: `/pages/strategy/detail?id=${i.id}`
			})
		}
    }
}
</script>

<style lang="scss">
page{ background: #F6F9FF; }
.list_waper{
    width: 100%; box-sizing: border-box; padding: 32rpx;
    .list{
        width: 100%; background: #fff; border-radius: 20rpx; margin-bottom: 20rpx; padding: 28rpx 32rpx; box-sizing: border-box;
        &:last-child{ margin-bottom: 0; }
        view{
            &:first-child{
                width: 100%; box-sizing: border-box; padding-right: 156rpx; position: relative; height: 46rpx;
                text{
                    &:first-child{ line-height: 46rpx; color: #333; font-size: 32rpx; font-weight: bold; display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
                    &:last-child{ line-height: 46rpx; color: #666; font-size: 24rpx; position: absolute; right: 0; top: 0; }
                }
            }
            &:last-child{ margin-top: 10rpx; line-height: 34rpx; font-size: 24rpx; color: #666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        }
    }
}
</style>