<template>
	<view class="content">
		<view class="grantSwiper" v-if="frozenData.length > 0">
		    <view class="banner-height">
		        <view class="grantTop">
		            <image class="grantTop-img" src="https://card.ysd-bs.com/storage/materials/2023/07/20/7ebb8b87cf537179f79ba96b77da6ab7.png" mode="scaleToFill"></image>
		            <view class="grantTop-text">
		                <!-- <image :src="type == 'silver' ? 'https://card.ysd-bs.com/storage/materials/2021/09/01/frozen_identity_00.png' : 'https://card.ysd-bs.com/storage/materials/2021/09/01/frozen_identity_01.png'"></image> -->
		                <view class="grantTop-price">
		                    <text>待发放(额度)</text>
		                    <view class="grantTop-price-tips">￥</view>{{total}}
		                </view>
		            </view>
		        </view>
		    </view>
		    <view class="grantIssue">
		        <view class="grantIssue-list">
		            <view class="grantIssue-label" v-for="(item, index) in frozenData" :key="index">
		                <image class="grantIssue-label-img active" src="https://card.ysd-bs.com/storage/materials/2021/09/01/frozen_img.png" mode="scaleToFill"></image>
		                <view class="grantIssue-label-cont">
		                    <view class="grantIssue-label-left">
		                        <view class="grantIssue-left-top" :class="{active : item.status == 0}">￥<text>{{item.variable}}</text></view>
		                        <view class="grantIssue-left-number" :class="{active : item.status == 0}">发放额度</view>
		                    </view>
		                    <view class="grantIssue-label-center">
		                        <view class="grantIssue-center-top" :class="{active : item.status == 0}">
		                            <text>{{item.title}}</text>
		                        </view>
		                        <view class="grantIssue-center-time">发放时间：{{item.grant_time}}</view>
		                    </view>
		                    <view class="grantIssue-label-right" :class="{active : item.status == 0}">{{item.status_text}}</view>
		                </view>
		                <image class="grantIssue-label-tips active" src="https://card.ysd-bs.com/storage/materials/2021/09/01/frozen_btn.png" mode="scaleToFill">
		                </image>
		            </view>
		        </view>
		    </view>
		</view>
		
		<view class="no-pack-center pack-center pages-hint" v-else>
		    <image src="https://card.ysd-bs.com/storage/materials/2021/09/01/Account_icon.png"></image>
		    <view>抱歉，目前暂无内容~</view>
		</view>
	</view>
</template>

<script>
	import { ungrantsNew } from '@/apis/interfaces/user'
	export default {
	    data() {
	        return {
				type         : '', //类型
				total        : '',
				frozenData   : [], //数组列表
				blockeds     : '', //待发放金额
				page        : 1,     //分页
				lodingStats : false  //加载状态
	        }
	    },
		
		// 生命周期函数--监听页面加载
		onLoad (options) {
			this.type     = options.type
			this.blockeds = options.blockeds
			
			// 获取冻结列表
			this.frozenInfo()
		},
		
	    
	    // 生命周期函数--监听页面显示
	    onShow() {
			// 存储环境-月兑活动
			getApp().globalData.envType = 'giftPEnv'
			
	    },
	    methods: {
			// 冻结列表
			frozenInfo(page) {
			    ungrantsNew({
					type    : this.type,
					page    : page || ''
			    }).then(res=>{
					console.log(res)
					
					let newStores = this.frozenData,
					    newData = []
					if(page == 1 || page == undefined) newStores = []
					newData = newStores.concat(res.logs.data)
					this.frozenData   = newData
					this.total        = res.total,
					this.page         = res.logs.page
					this.lodingStats  = false
					uni.stopPullDownRefresh()
			    })
			},
			
			// 页面相关事件处理函数--监听用户下拉动作
			onPullDownRefresh() {
			    // 获取冻结列表
			    this.frozenInfo();
			},
			        
			// 上拉加载
			onReachBottom(){
			    this.lodingStats = true
			    let pageNumber = this.page.current
			    if(this.page.has_more){
			        pageNumber++
					// 获取冻结列表
					this.frozenInfo(pageNumber);
			    }
			}
	    }
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 30rpx;
		box-sizing: border-box;
		background-color: #fff9f9;
		height: 100vh;
		overflow-y: scroll;
	}
	
	.grantSwiper {
	    width: 100%;
	    box-sizing: border-box;
	}
	
	.grantTop {
	    position: relative;
	    width: 100%;
	    height: 300rpx;
	    color: #ffe3a4;
	}
	
	.grantTop-img {
	    position: absolute;
	    width: 100%;
	    height: 100%;
	    left: 0;
	    top: 0;
	}
	
	.grantTop-text,
	.grantTop-tips {
	    position: absolute;
	    z-index: 9;
	    left: 0;
	    width: 100%;
	}
	
	.grantTop-text {
	    top: 0;
	    padding: 40rpx 60rpx;
	    box-sizing: border-box;
	}
	
	.grantTop-text image {
	    width: 120rpx;
	    height: 40rpx;
	}
	
	.grantTop-price {
	    text-align: center;
	    font-size: 60rpx;
		margin: 30rpx 0;
	}
	
	.grantTop-price text {
	    font-size: 32rpx;
	    display: block;
	    color: #fff;
	}
	
	.grantTop-price-tips {
	    display: inline-block;
	    font-size: 54rpx;
		margin-top: 20rpx;
	}
	
	.grantIssue-title {
	    height: 120rpx;
	}
	
	.grantIssue-title-name {
	    line-height: 44rpx;
	    display: flex;
	}
	
	.grantIssue-title-name image {
	    width: 42rpx;
	    height: 42rpx;
	    margin-right: 20rpx;
	}
	
	.grantIssue-title-name text {
	    font-weight: 600;
	    font-size: 32rpx;
	    background-image: -webkit-linear-gradient(left, #fbdebe, #e5ad7a);
	    -webkit-background-clip: text;
	    -webkit-text-fill-color: transparent;
	}
	
	.grantIssue-title-tips {
	    font-size: 26rpx;
	    margin: 10rpx 0 30rpx;
	    color: #d2d6e2;
	}
	
	.grantIssue-title-tips text {
	    color: #dcbc8d;
	}
	
	
	.grantIssue-label {
	    position: relative;
	    height: 180rpx;
	    margin-top: 30rpx;
	    border-radius: 10rpx;
	    overflow: hidden;
	    background-color: #f9dabb;
	}
	
	.grantIssue-label:last-child {
	    margin-bottom: 0;
	}
	
	.grantIssue-label-img {
	    position: absolute;
	    width: 100%;
	    height: 100%;
	    top: 0;
	    left: 0;
	}
	
	.grantIssue-label-img.active,
	.grantIssue-label-tips.active {
	    -webkit-filter: grayscale(50%);
	    -moz-filter: grayscale(50%);
	    -ms-filter: grayscale(50%);
	    -o-filter: grayscale(50%);
	    filter: grayscale(50%);
	    filter: gray;
	}
	
	.grantIssue-label-cont {
	    position: absolute;
	    width: 100%;
	    height: 100%;
	    left: 0;
	    top: 0;
	    z-index: 6;
	    padding: 20rpx;
	    box-sizing: border-box;
	    display: flex;
	}
	
	.grantIssue-label-left {
	    width: 160rpx;
	    text-align: center;
	    margin-top: 20rpx;
	}
	
	.grantIssue-left-top {
	    color: #e9083d;
	    font-size: 26rpx;
	}
	
	.grantIssue-left-top.active,
	.grantIssue-center-top.active{
	    color: #ba926a;
	}
	
	.grantIssue-label-right.active {
	    color: #ba926a;
	}
	
	.grantIssue-left-number.active {
	    background: -webkit-linear-gradient(left, #fce1d6, #fce1d6);
	    color: #fc7f45;
	}
	
	.grantIssue-left-top text {
	    font-size: 22rpx;
	}
	
	.grantIssue-left-top text {
	    font-size: 36rpx;
	    font-weight: 600;
	    padding: 0 6rpx;
	}
	
	.grantIssue-left-number {
	    background: -webkit-linear-gradient(left, #ffdca4, #f8af52);
	    color: #b13509;
	    border-radius: 30rpx;
	    display: inline-block;
	    font-size: 22rpx;
	    height: 42rpx;
	    line-height: 42rpx;
	    padding: 0 15rpx;
	    margin-top: 12rpx;
	}
	
	.grantIssue-label-right {
	    width: 100rpx;
	    font-weight: 600;
	    text-align: center;
	    font-size: 26rpx;
	    color: #3d2a26;
	    line-height: 140rpx;
	}
	
	.grantIssue-label-center {
	    width: calc(100% - 270rpx);
	    margin: 20rpx 0 0 20rpx;
	}
	
	.grantIssue-center-top {
	    font-size: 32rpx;
	    margin-bottom: 20rpx;
	    color: #0f004a;
	    font-weight: 600;
	}
	
	.grantIssue-center-time {
	    font-size: 26rpx;
	    color: #d6a06a;
	}
	
	.grantIssue-label-tips {
	    position: absolute;
	    width: 140rpx;
	    height: 100%;
	    right: 0;
	    top: 0;
	}
</style>