<template>
	<view class="content">
		<view class="dt-header">
			<view class="title">共力值余额</view>
			<view class="num">{{glz}}</view>
		</view>
		<view class="logs-title">账户记录</view>
		<block v-if="log.length > 0">
			<view class="logs-item" v-for="(item, index) in log" :key="index">
				<view class="logs-item-title">{{item.remark}}</view>
				<view class="logs-item-time">{{item.created_at}}</view>
				<view class="logs-item-price" :class="item.amount > 0 ? 'add': 'remove'">{{item.amount}}</view>
			</view>
		</block>
		<block v-else>
		    <view class="vertical pages-empty">
		        <u-empty icon="http://cdn.uviewui.com/uview/empty/list.png" textColor="#999" text="暂无账户记录">
		        </u-empty>
		    </view>
		</block>
	</view>
</template>

<script>
	import { integral } from '@/apis/interfaces/account.js'
	export default {
		data() {
			return {
				glz: '0.00',
				log: []
			};
		},
		created() {
			integral().then(res => {
				this.glz = res.glz
				this.log = res.lists.data
			}).catch(err => {
				uni.showToast({
					title: err.message,
					icon : 'none'
				})
			})
		}
	}
</script>

<style lang="scss">
	.pages-empty {
	    height: 50vh;
	}
	.content{
		background: $window-color;
		min-height: 100vh;
		.dt-header{
			background: $main-color;
			padding: $padding*3 $padding $padding*2;
			.title{
				color: rgba(255, 255, 255, .9);
				font-size: 28rpx;
			}
			.num{
				font-weight: bold;
				font-size: 60rpx;
				padding-top: 10rpx;
				color: white;
			}
		}
		// 账户记录
		.logs-title{
			padding: 0 $padding;
			font-weight: bold;
			line-height: 90rpx;
			color: #333;
			font-size: 30rpx;
		}
		.logs-item{
			position: relative;
			background: white;
			border-radius: $radius;
			padding: $padding - 10 $padding;
			padding-right: 240rpx;
			box-sizing: border-box;
			margin: 0 $margin ($margin - 10);
			.logs-item-title{
				font-weight: bold;
				font-size: 30rpx;
				line-height: 50rpx;
			}
			.logs-item-time{
				font-size: 28rpx;
				line-height: 40rpx;
				color: gray;
			}
			.logs-item-price{
				position: absolute;
				right: $padding;
				top: $padding - 10;
				line-height: 90rpx;
				width: 180rpx;
				text-align: right;
				font-weight: bold;
				@extend .nowrap;
				&.add{
					color: $main-color;
				}
				&.remove{
					color: $text-price;
				}
			}
		}
	}
</style>
