<template>
    <view>
        <!-- 账户余额 -->
        <view class="integra-top">
        	<view class="integra-name">
        		<block v-if="balanceType == 'silver'">白金账户余额</block>
        		<block v-else-if="balanceType == 'drill'">钻石账户余额</block>
        	</view>
        	<view class="integra-info">
        		<view class="integra-right">
        			<view class="integra-title"><text>可用余额</text><image src="/static/icon/integra_icon00.png"></image></view>
        			<view class="integra-number">{{ balanceData.number }}</view>
                    <view class="integra-btn"><text>可用余额，入账记录</text></view>
                    <!-- <navigator class="integra-btn" hover-class="none" url="/pages/account/recharge"><text>立即充值</text><image src="/static/icon/rightsArrow.png"></image></navigator> -->
        		</view>
        		<view class="integra-right">
        			<view class="integra-title"><text>待发放</text><image src="/static/icon/integra_icon01.png"></image></view>
        			<view class="integra-number">{{ balanceData.blockeds }}</view>
        			<navigator hover-class="none" :url="'/pages/frozen/frozen?type=' + balanceType + '&blockeds=' + balanceData.blockeds" class="integra-btn integra-blue">立即查询<image src="/static/icon/rightsArrow.png"></image></navigator>
        		</view>
        	</view>
        </view>
        
        <!-- 账变记录 -->
        <view class="integra-cont">
        	<view class="integra-cont-title">
        		<view class="integra-cont-name">账变记录</view>
        		<view class="integra-cont-picker" v-if="balanceData.screenArray[balanceData.screenIndex]">
        			<picker @change="screenBind" :value="balanceData.screenIndex" :range-key="'name'" :range="balanceData.screenArray">
        				{{ balanceData.screenArray[balanceData.screenIndex].name }}
        			</picker>
        			<image class="integra-cont-icon" src="/static/icon/arrow_down.png"></image>
        		</view>
        	</view>
            <block v-if="balanceData.accounts.length > 0">
                <view class="integra-list" v-for="(item,index) in balanceData.accounts" :key="index">
                    <view class="integra-text">
                        <view class="integra-title">
                            <view class="integra-title-tips" :class="{active : item.channel == 'in'}">{{ item.channel == 'in' ? '入' : '出' }}</view>{{ item.title }}
                        </view>
                        <view class="integra-oints" :class="{active : item.channel == 'in'}">
                            {{ item.variable }}
                        </view>
                    </view>
                    <view class="integra-remark">
                        {{ item.remark }}
                    </view>
                    <view class="integra-date">
                        <view class="integra-time">
                            <text>{{ item.channel == 'in' ? '有效期：' : '扣除时间：' }}</text>
                            {{ item.created_at }}{{ item.channel == 'in' ? ' 至 ' + item.expired_at : '' }}
                        </view>
                    </view>
                </view>
            </block>
            
            <!-- 暂无内容 -->
            <view class="pack-center pages-hint" v-else>
            	<image src="/static/img/null_icon.png"></image>
            	<view>抱歉，目前暂无内容~</view>
            </view>
        </view>
    </view>
</template>

<script>
    import { logs } from '@/apis/interfaces/user'
    import { create, store } from '@/apis/interfaces/recharge'
    export default {
    	data() {
    		return {
                balanceType : '',    // 卡来源-类型
                balanceData : {
                    blockeds        : '',    // 待发放余额
                    number          : '',    // 账户余额
                    accounts        : [],    //账户列表
                    screenChannel   : '',    //账变记录筛选数组标识
                    screenIndex     : 0,    //账变记录筛选index
                    screenArray : [
                        {
                            channel: 'all',
                            name: '全部'
                        },
                        {
                            channel: 'in',
                            name: '入账'
                        },
                        {
                            channel: 'out',
                            name: '出账'
                        }
                    ]
                },
                load:       {
                    page    : 1,       // 第一页
                    allpage : 0,       // 总页数
                    has_more: false,   // 是否有分页
                    show    : false    // 是否有下一页数据
                },
                finished    : false,  //商品列表没有更多商品是否显示
                LoadData    : false   //数据加载完渲染
            }
        },
        onLoad(options) {
            this.balanceType = options.type
        },
        onShow() {
            // 获取账变记录
            this.accountInfo();
        },
        methods:{
            // 账变记录
            accountInfo() {
                if (this.load.page == 1) {
                    this.balanceData.accounts = [];
                }
                logs({
                    type    : this.balanceType,
                    channel : this.balanceData.screenChannel,
                    page    : this.load.page
                }).then(res=>{
                    //判断金卡、银卡、钻石卡
                    let number
                    if(this.balanceType == "silver") {
                        number = res.account.silver
                    } else if(this.balanceType == "gold") {
                        number = res.account.gold
                    } else if(this.balanceType == "drill") {
                        number = res.account.drill
                    } else {
                        return
                    }
                    this.balanceData.accounts = this.balanceData.accounts.concat(res.data)
                    this.balanceData.number   = number
                    this.balanceData.blockeds = res.blockeds
                    this.load.allpage         = res.page.total_page
                    this.load.has_more        = res.page.has_more
                    
                    // 数据渲染加载
                    this.LoadData = true
                })
            },
            
            // 筛选账变记录-条件
            screenBind(e) {
                this.balanceData.screenIndex  = e.detail.value,
                this.balanceData.screenChannel= this.balanceData.screenArray[e.detail.value].channel
                
                // 获取账变记录
                this.accountInfo();
            },
        }
    }
</script>

<style lang="scss" scoped>
    // 账户余额
    .integra-top {
        padding: 30rpx 20rpx 0;
        background-color: #dfb48b;
        border-radius: 0 0 100rpx 100rpx;
        .integra-name {
            color: #fff;
            font-size: 32rpx;
            margin-bottom: 30rpx;
        }
        .integra-info {
            background-color: #fff;
            text-align: center;
            border-radius: 20rpx;
            display: flex;
            box-shadow: 0 10rpx 10rpx rgba(0, 0, 0, .1);
            padding: 30rpx 20rpx;
            box-sizing: border-box;
            text-align: left;
            .integra-right {
                flex: 2;
                position: relative;
                &:first-child {
                    padding-right: 20rpx;
                    box-sizing: border-box;
                }
                &:last-child {
                    padding-left: 30rpx;
                    box-sizing: border-box;
                }
                &:first-child::after {
                    display: none;
                }
                .integra-title {
                    margin-bottom: 20rpx;
                    display: flex;
                    image {
                        width: 36rpx;
                        height: 36rpx;
                        margin: 4rpx 0 0 10rpx;
                    }
                }
                .integra-number {
                    font-size: 40rpx;
                }
                .integra-btn {
                    font-size: 28rpx;
                    margin-top: 20rpx;
                    color: #adadad;
                    display: flex;
                    text {
                        color: #dfb48b;
                    }
                    image {
                        width: 36rpx;
                        height: 36rpx;
                        margin-top: 2rpx;
                    }
                }
                .integra-blue {
                    color: #317afa;
                }
            }
        }
    }
    
    // 账变记录
    .integra-cont-title {
        padding: 40rpx 20rpx 10rpx;
        display: flex;
        .integra-cont-name {
            font-weight: 600;
            flex: 1;
        }
        .integra-cont-picker {
            display: flex;
            color: #797979;
            font-size: 30rpx;
            .integra-cont-icon {
                width: 28rpx;
                height: 28rpx;
                margin: 6rpx 0 0 10rpx;
            }
        }
    }
    .integra-list {
        width: calc(100% - 40rpx);
        margin: 20rpx;
        padding: 30rpx 20rpx;
        position: relative;
        box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, .1);
        box-sizing: border-box;
        background: #fff;
        border-radius: 10rpx;
        .integra-text {
            display: flex;
            margin-bottom: 20rpx;
            .integra-title {
                flex: 1;
                font-size: 30rpx;
                display: flex;
                margin: 0;
                .integra-title-tips {
                    background-color: green;
                    color: #fff;
                    width: 40rpx;
                    height: 40rpx;
                    line-height: 38rpx;
                    text-align: center;
                    border-radius: 50%;
                    margin-right: 10rpx;
                    font-size: 24rpx;
                    transform: scale(0.8);
                    &.active {
                        background-color: red;
                    }
                }
            }
            .integra-oints {
                color: green;
                &.active {
                    color: red;
                }
            }
        }
        .integra-remark {
            margin-bottom: 20rpx;
            font-size: 26rpx;
            color: #4e4e4e;
            background: #f5f5f5;
            display: inline-block;
            padding: 6rpx 20rpx;
            border-radius: 50rpx;
        }
        .integra-date {
            display: flex;
        }
    }
    
    .pages-hint {
        margin: 20rpx;
        border-radius: 10rpx;
    }
</style>
