<template>
	<view class="integral">
		<image class="icon" src="@/static/icons/work_icon_22.png" mode="aspectFill"></image>
		<view class="title">火力值</view>
		<view class="score">{{score}}</view>
		<view class="btns">
			<button class="btns-item" size="mini" @click="onNav('AccountLogs', { type: 0 })">消费记录</button>
		</view>
		<view class="footer">抖火法律</view>
	</view>
</template>

<script>
	import { score } from '@/apis/interfaces/account.js'
	export default {
		data() {
			return {
				score: '0.00',
				logs : [],
				pages: {}
			};
		},
		created() {
			this.getScore()
		},
		methods: {
			getScore(){
				uni.showLoading({
					title: '加载中...',
					mask : true
				})
				score().then(res => {
					this.score = res.score
					this.logs = res.logs
					uni.hideLoading()
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			onNav(name, p){
				let params = p || {}
				this.$Router.push({name, params})
			}
		},
		onNavigationBarButtonTap() {
			this.onNav('AccountLogs', { type: 1 })
		}
	}
</script>

<style lang="scss">
	.integral{
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		height: 100vh;
		padding: 50rpx;
		box-sizing: border-box;
		.icon{
			width: 128rpx;
			height: 128rpx;
			border-radius: 50%;
			margin-bottom: 40rpx;
			background: #f1f1f1;
		}
		.title{
			font-size: 32rpx;
			color: #111;
			line-height: 50rpx;
		}
		.score{
			padding-top: 20rpx;
			font-weight: bold;
			font-family: Arial, Helvetica, sans-serif;
			font-size: 86rpx;
		}
		.btns{
			display: flex;
			flex-direction: column;
			height: 40vh;
			justify-content: flex-end;
			width: 100%;
			.btns-item[size="mini"]{
				width: 50vw;
				height: 100rpx;
				line-height: 100rpx;
				padding: 0;
				background: $main-color;
				font-weight: bold;
				color: white;
				font-size: 32rpx;
				&::after{
					display: none;
				}
				&:last-child{
					background-color: #f1f1f1;
					margin-top: 30rpx;
					color: $main-color;
				}
			}
		}
		.footer{
			font-size: 28rpx;
			color: gray;
			padding-top: 10vh;
		}
	}
</style>
