<template>
	<div class="app-content">
		<div class="list-wrap">
			<block v-if="!$util.isEmpty(list.data)">
				<div class="list" v-for="(item, index) in list.data" :key="index">
					<div class="list-img">
						<app-img :src="item.img | default_img" />
					</div>
					<div class="list-det">
						<div class="det-top">
							<div>{{ item.event }}</div>
							<div class="app-bold">-{{ item.amount }}</div>
						</div>
						<div>
							<i class="iconfont" :class="[item.payWay == 0 ? 'iconweixinlaiyuan' : item.payWay == 1 ? 'iconzhifubao' : 'iconxiaochengxu']"></i>
							<span>{{ item.userName }}</span>
						</div>
						<div>{{ item.addTime | formatTime('MM-DD hh:mm') }}</div>
					</div>
				</div>
			</block>
			<block v-else>
				<app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
			</block>
		</div>
	</div>
</template>

<script>
import AppImg from '@/components/app-img'
import AppWrapperEmpty from '@/components/app-wrapper-empty'
import { list } from '@/mixins'
// api
import { getListB } from '@/api/bill'
export default {
	name: 'assets-list',
	components: {
		AppImg,
		AppWrapperEmpty
	},
	mixins: [list],
	data() {
		return {}
	},
	onPullDownRefresh() {
		this.resetList()
		this._list().then(res => {
			uni.stopPullDownRefresh()
		})
	},
	onReachBottom() {
		if (this.list.data.length < this.list.total) {
			this._list().then(res => {
				uni.stopPullDownRefresh()
			})
		} else {
			uni.stopPullDownRefresh()
		}
	},
	onLoad: function() {
		// this.init()
	},
	methods: {
		async init() {
			this._list()
		},
		_list() {
			return getListB({
				io: 1,
				page: this.list.page
			}).then(res => {
				this.completes(res)
			})
		}
	}
}
</script>

<style lang="scss" scoped>
	.list-wrap {
		width: 100%;
		background-color: #fff;
		.list {
			width: calc(100% - 60px);
			margin: 0 30px;
			padding: 20px 0;
			border-bottom: 2px solid $borderColor;
			@include disFlex(flex-start, flex-start);
			&:first-child {
				margin-top: 0;
			}
			.list-img {
				width: 80px;
				margin-right: 20px;
				border-radius: 50%;
				img {
					border-radius: 50%;
				}
			}
			.list-det {
				width: calc(100% - 100px);
				color: $fontColor3;
				& > div {
					margin-top: 16px;
					&:first-child {
						margin-top: 0;
					}
				}
				.iconfont {
					margin-right: 20px;
				}
				.iconweixinlaiyuan {
					color: #35b801;
				}
				.iconzhifubao {
					color: #00aaed;
                }
                .iconxiaochengxu {
					color: #35b801;
                }
				.det-top {
					color: #333;
					@include disFlex(center, space-between);
				}
			}
		}
	}
</style>
