<template>
    <view>
        <view v-if="frozenData.length > 0">
            <view class="grantSwiper">
                <swiper class="banner-swiper" @change="monitorCurrent" :current="current">
                    <swiper-item v-for="(item,index) in frozenData" :key="index">
                        <view class="banner-height">
                            <view class="grantTop">
                                <image class="grantTop-img" src="https://card.ysd-bs.com/storage/materials/2021/09/01/frozen_back.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>{{ item.ungrant }}
                                    </view>
                                </view>
                                <view class="grantTop-tips">
                                    <view class="grantTop-time">发放周期 {{ item.cycle }}</view>
                                    <view class="grantTop-number">共{{ item.num }}期</view>
                                </view>
                            </view>
                            <view class="grantTitle">
                                <view class="nowrap grantTitle-name">{{ item.source.remark }}</view>
                                <view class="grantTitle-tel">{{ item.mobile }}</view>
                            </view>
                        </view>
                        <view class="grantIssue">
                            <view class="grantIssue-title">
                                <view class="grantIssue-title-name">
                                    <image src="https://card.ysd-bs.com/storage/materials/2021/09/01/frozen_icon.png"></image><text>消费红包分期发放</text>
                                </view>
                                <view class="grantIssue-title-tips">
                                    应发余额<text>￥{{ item.variable }}</text>，发放期数<text>{{ item.num }}</text>期，每期发放<text>￥{{ item.avg }}/期</text>
                                </view>
                            </view>
                            <view class="grantIssue-list">
                                <block v-if="item.items.length > 0">
                                    <view class="grantIssue-label" v-for="(listItem,indexItem) in item.items" :key="indexItem">
                                        <image class="grantIssue-label-img" :class="{active : listItem.status == 0}" 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 : listItem.status == 0}">
                                                    第<text>{{listItem.num}}</text>期</view>
                                                <view class="grantIssue-left-number" :class="{active : listItem.status == 0}">
                                                    共<text>{{item.items.length}}</text>期</view>
                                            </view>
                                            <view class="grantIssue-label-center">
                                                <view class="grantIssue-center-top" :class="{active : listItem.status == 0}">
                                                    <text>{{listItem.variable}}</text>( 发放额度 )
                                                </view>
                                                <view class="grantIssue-center-time">发放时间：{{listItem.start_at}}</view>
                                            </view>
                                            <view class="grantIssue-label-right" :class="{active : listItem.status == 0}">
                                                {{listItem.status_text}}
                                            </view>
                                        </view>
                                        <image class="grantIssue-label-tips" :class="{active : listItem.status == 0}" src="https://card.ysd-bs.com/storage/materials/2021/09/01/frozen_btn.png" mode="scaleToFill">
                                        </image>
                                    </view>
                                </block>
                                <!-- 暂无内容 -->
                                <view class="grantIssue-pack" v-else>
                                    <image src="https://card.ysd-bs.com/storage/materials/2021/09/01/Account_icon_tips.png"></image>
                                    <view>抱歉，目前发放期数~</view>
                                </view>
                            </view>
                        </view>
                    </swiper-item>
                </swiper>
            </view>
        
            <view class="frozenArrow">
                <view class="frozenArrow-left" v-if="current != 0">
                    <image src="/static/icon/frozen_arrow.png"></image>
                    返回上一个权益
                </view>
                <view class="frozenArrow-right" v-if="current == 0 || frozenData[frozenData.length - 1] > 0">
                    <image src="/static/icon/frozen_arrow.png"></image>
                    查看下一个权益
                </view>
            </view>
        
            <!-- 自定义轮播图进度点 -->
            <view class="dots">
                <block v-for="(item,index) in frozenData" :key="index">
                    <view :class="{active : index == current}"></view>
                </block>
            </view>
        </view>
        <!-- 暂无内容 -->
        <view class="no-pack-center pack-center pages-hint" wx:else>
            <image src="https://card.ysd-bs.com/storage/materials/2021/09/01/Account_icon.png"></image>
            <view>抱歉，目前暂无内容~</view>
        </view>
    </view>
</template>

<script>
    import { ungrants } from '@/apis/interfaces/user'
    export default {
    	data() {
    		return {
                current      : 0,  // 轮播标
                type         : '', // 类型
                frozenData   : [], // 数组列表
                blockeds     : '', // 待发放金额
            }
        },
        onLoad(options) {
            this.type     = options.type,
            this.blockeds = options.blockeds
            
            // 获取冻结列表
            this.frozenInfo()
        },
        methods:{
            // 冻结列表
            frozenInfo() {
                ungrants(this.type).then(res=>{
                    this.frozenData = res
                })
            },
            
            // 轮播滑动
            monitorCurrent(e) {
                this.current = e.detail.current
            }
        }
    }
</script>

<style lang="scss" scoped>
    page,
    .no-pack-center {
        background-image: linear-gradient(to bottom, #24315d, #24315d);
    }
    .no-pack-center {
        color: #fff;
    }
    .grantSwiper {
        width: 100%;
        height: 100vh;
        padding: 0 40rpx;
        box-sizing: border-box;
        .banner-swiper {
            height: 100vh;
            overflow: hidden;
            swiper-item {
                padding: 0 20rpx;
                box-sizing: border-box;
            }
            .banner-height {
                height: 460rpx;
                margin-top: 30rpx;
                .grantTop {
                    position: relative;
                    width: 100%;
                    height: 300rpx;
                    color: #ffdf95;
                    .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;
                        image {
                            width: 120rpx;
                            height: 40rpx;
                        }
                        .grantTop-price {
                            text-align: center;
                            font-size: 60rpx;
                            text {
                                font-size: 30rpx;
                                display: block;
                                color: #fff;
                            }
                            .grantTop-price-tips {
                                display: inline-block;
                                font-size: 40rpx;
                            }
                        }
                    }
                    .grantTop-tips {
                        bottom: 0;
                        font-size: 26rpx;
                        display: flex;
                        line-height: 70rpx;
                        height: 70rpx;
                        padding: 0 20rpx;
                        box-sizing: border-box;
                        .grantTop-time {
                            flex: 1;
                        }
                    }
                }
                .grantTitle {
                    background-color: #3d4963;
                    border-radius: 15rpx;
                    margin: 40rpx 0;
                    width: 100%;
                    display: flex;
                    color: #d3d5e1;
                    height: 90rpx;
                    overflow: hidden;
                    .grantTitle-name,
                    .grantTitle-tel {
                        box-sizing: border-box;
                        height: 90rpx;
                        line-height: 90rpx;
                        font-size: 30rpx;
                    }
                    .grantTitle-name {
                        padding-left: 20rpx;
                        font-weight: 600;
                        background-image:-webkit-linear-gradient(left,#fbdebe,#e5ad7a);
                        -webkit-background-clip:text;
                        -webkit-text-fill-color:transparent;
                        flex: 1;
                    }
                    .grantTitle-tel {
                        padding: 0 30rpx 0 20rpx;
                        background-color: #192845;
                        position: relative;
                        &::after {
                            position: absolute;
                            content: '';
                            left: -20rpx;
                            top: 0;
                            width:0;
                            height:0;
                            border-left: 20rpx solid transparent;
                            border-right: 20rpx solid transparent;
                            border-bottom: 90rpx solid #192845;
                        }
                    }
                }
            }
            .grantIssue {
                height: calc(100vh - 550rpx);
                .grantIssue-title {
                    height: 120rpx;
                    .grantIssue-title-name {
                        line-height: 44rpx;
                        display: flex;
                        image {
                            width: 42rpx;
                            height: 42rpx;
                            margin-right: 20rpx;
                        }
                        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;
                        text {
                            color: #dcbc8d;
                        }
                    }
                }
                .grantIssue-list {
                    overflow-y: scroll;
                    height: calc(100% - 140rpx);
                    .grantIssue-label {
                        position: relative;
                        height: 180rpx;
                        margin-bottom: 30rpx;
                        border-radius: 10rpx;
                        overflow: hidden;
                        background-color: #f9dabb;
                        .grantIssue-label-img {
                            position: absolute;
                            width: 100%;
                            height: 100%;
                            top: 0;
                            left: 0;
                        }
                        .grantIssue-label-tips {
                            position: absolute;
                            width: 140rpx;
                            height: 100%;
                            right: 0;
                            top: 0;
                        }
                        .grantIssue-label-img.active,
                        .grantIssue-label-tips.active {
                            -webkit-filter: grayscale(100%);   
                            -moz-filter: grayscale(100%);  
                            -ms-filter: grayscale(100%);   
                            -o-filter: grayscale(100%);     
                            filter: grayscale(100%); 	     
                            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: 120rpx;
                                text-align: center;
                                margin-top: 20rpx;
                                .grantIssue-left-top {
                                    color: #e9083d;
                                    font-size: 26rpx;
                                    text {
                                        font-size: 34rpx;
                                        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;
                                    &.active {
                                        background: -webkit-linear-gradient(left,#e2e2e2,#e2e2e2);
                                        color: gray;
                                    }
                                }
                            }
                            .grantIssue-label-center {
                                width: calc(100% - 240rpx);
                                margin: 20rpx 20rpx 0 20rpx;
                                .grantIssue-center-top {
                                    font-size: 26rpx;
                                    color: #0f004a;
                                    font-weight: 600;
                                    margin-bottom: 8rpx;
                                    text {
                                        font-size: 40rpx;
                                        padding-right: 10rpx;
                                    }
                                }
                                .grantIssue-center-time {
                                    font-size: 26rpx;
                                    color: #757575;
                                }
                            }
                            .grantIssue-label-right {
                                width: 80rpx;
                                font-weight: 600;
                                text-align: center;
                                font-size: 26rpx;
                                color: #3d2a26;
                                line-height: 140rpx;
                            }
                            .grantIssue-left-top.active,
                            .grantIssue-center-top.active,
                            .grantIssue-label-right.active {
                                color: gray;
                            }
                        }
                    }
                }
            }
        }
    }
    
    // 滑动箭头
    .frozenArrow-left,
    .frozenArrow-right {
        position: fixed;
        z-index: 9;
        top: 35%;
        width: 40rpx;
        height: 40rpx;
        text-align: center;
        writing-mode:lr-tb;
        color: #f0cba8;
        font-size: 24rpx;
    }
    .frozenArrow-left {
        left: 8rpx;
        -webkit-animation: bounce-left 1s linear infinite;
        animation: bounce-left 1s linear infinite;
        image {
            transform:rotate(180deg);
            -moz-transform:rotate(180deg);
            -webkit-transform:rotate(180deg);
        }
    }
    .frozenArrow-right {
        right: 8rpx;
        -webkit-animation: bounce-right 1s linear infinite;
        animation: bounce-right 1s linear infinite;
    }
    @keyframes bounce-left {
        25% {transform: translateX(3px);}
        50%, 100% {transform: translateX(0);}
        75% {transform: translateX(-3px);}
    }
    @keyframes bounce-right {
        25% {transform: translateX(-3px);}
        50%, 100% {transform: translateX(0);}
        75% {transform: translateX(3px);}
    }
    .frozenArrow-left image,
    .frozenArrow-right image {
        width: 24rpx;
        height: 24rpx;
    }
    
    // 指示点
    .dots {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        position: fixed;
        bottom: 20rpx;
        height: 40rpx;
        view {
            width: 14rpx;
            height: 14rpx;
            margin: 0 6rpx;
            border-radius: 50%;
            background-color: #c5c5c5;
            &.active {
                width: 24rpx;
                border-radius: 40rpx;
                background-color: #ffdf95;
            }
        }
    }
</style>
