<template>
	<view class="page-lib-index"  v-if="donateInfo">
		<uni-nav-bar :fixed="true" height="160rpx" left-icon="home" backgroundColor="rgb(0,0,0,0)" :border="false" @clickLeft="onHome" color="white"/>
		
		
		
		
		<view class="school-item">
			<view class="process"> 
				<view class="heart">{{heart}}</view>
				<view class="process-txt">
					<view class="bg"></view>
					<view class="bar">
						<view class="p" :style="{width:heart+'%'}"></view>
					</view>
				</view> 
			</view>
			<view class="content">
				<view class="bg"></view>
				<view class="user">
					<view class="left">
						<view class="header">
							<image  class="img" :src="donateInfo.user.avatar" mode="scaleToFill"></image> 
						</view> 
						<view class="info">
							<view class="text">已拥有：{{donateInfo.user.integral}}爱心币</view>
							<view class="text">已捐赠：{{donateInfo.user.integral_donate}}爱心币</view>
						</view>
					</view>
					<view class="right">
						<button class="btn active" @click="onOpenKey">
							<uni-icons type="heart-filled" color="#FFF" size="12"></uni-icons>
							我要损赠
						</button>
					</view>
				</view>
				
				
				<view class="item-list">
					<view class="items">
						<view class="heart_total" >总共已添加了：{{donateInfo.info.current_num}}块砖块，还需要：{{donateInfo.info.total_num-donateInfo.info.current_num}}块砖</view>
						<block v-for="(it,index) in donateInfo.list ">
							<view class="item">
								<view class="date">{{it.createTime}}</view>
								<view class="name">{{it.content}}</view>
								<view class="qty">+{{it.num}}</view>
							</view> 
						</block> 
						
					</view>
					
				</view>
				<view class="donate" v-if="donateInfo.list.length<=0">
					<view class="mid">还没有捐赠记录哦！！！</view>
					
				</view>
				
			</view>
		</view>
		
		<uni-popup ref="popKey">
			<DonateKeyForm :info="donateInfo" :storeId="store_id" @onSuccess="onSuccess"></DonateKeyForm>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutations
	} from 'vuex'
	const app = getApp();
	let hideLoading = true;
	import DonateKeyForm from '@/components/DonateKeyForm/DonateKeyForm.vue'
	import SchoolUserHeader from '@/components/SchoolUserHeader/SchoolUserHeader.vue'
	export default {
		components:{
			DonateKeyForm,
			SchoolUserHeader
		},
		computed: {
			...mapState(['store_id','systemInfo','userInfo'])
		},
		
		data() {
			return {
				dataList:[{
					id:1,
				}],
				donateInfo:null,
				heart:0, 
			};
		},
		onShow(){
			this.$store.dispatch('getOpenid', this.store_id);
			this.initDonate(); 
		},
		methods:{
			
			onHome(e){
				uni.switchTab({
					url:'/pages/home/home'
				})
			},
			
			onSuccess(e){
				this.$refs.popKey.close();
				this.initDonate();
			},
			
			initDonate(){
				let _this=this; 
				this.$http.request('donate/getInfo', {
					type:2, 
					userId: this.userInfo.id, 
				}, "", "", hideLoading).then(res => {
					_this.donateInfo=res.data; 
					_this.initHeart(); 
				}).catch(err => {})
			},
			//初始化百分比
			initHeart(){
				let _this=this;
				let percent=0;
				if(_this.donateInfo.info.total_num>0){
					percent=_this.donateInfo.info.current_num/_this.donateInfo.info.total_num;
				}
				_this.heart=parseFloat(percent*100).toFixed(2);
			},
			
			onOpenKey(e){
				this.$refs.popKey.open("bottom");
			},
		}
	}
</script>

<style lang="scss">
@import "./library.scss"
</style>
