<template>
    <view class="content">
        <view class="tab">
            <view class="tab-item" :class="{active : tabType == 'season'}" @click="typeClick('season')">
                季卡会员
            </view>
            <view class="tab-item" :class="{active : tabType == 'year'}" @click="typeClick('year')">
                年卡会员
            </view>
        </view>
        <view class="rights">
            <view class="card">
                <image class="cardBack" :src="tabType == 'season' ? '/static/imgs/memberBack_01.png':'/static/imgs/memberBack_02.png'" mode="widthFix"></image>
                <view class="cardText">
                    <view class="card-title">
                        <image src="@/static/icons/memberOpen_icon.png"></image>{{identities.name}}
                    </view>
                    <!-- <view class="tips">
                        享{{rights.length}}大会员权益，赠送{{tabType == 'season' ? '5000' : '2000'}}水滴
                    </view> -->
                    <view class="price-left" v-if="identities.is_open">
                        <view class="price-serial">
                            {{identities.times.serial}}
                        </view>
                        <view class="price-time">
                            到期时间： {{identities.times.ended_at}}
                        </view>
                    </view>
                    <view class="price-left" v-else>
                        <view class="price-top">
                            开通{{tabType == 'season' ? '季卡' : '年卡'}}会员金额
                        </view>
                        <view class="price-number">
                            ￥{{identities.price}}<image src="@/static/icons/memberOpen_img.png"></image>
                        </view>
                    </view>
                    
                    <!-- <view class="price-right">
                        限购：{{tabType == 'season'?'20000' : '10000'}}席
                    </view> -->
                </view>
            </view>
            <scroll-view scroll-x class="list" scroll-with-animation>
                <view class="list-item" v-for="(item, index) in rules" :key="index">
                    <view class="list-img">
                        <image :src="item.cover" mode=""></image>
                    </view>
                    <view class="list-rights">
                        <text v-if="tabType == 'season'">{{item.name == 'recommend_coupon' ? '￥' : '+'}}</text>
                        <text v-else>{{item.name == 'open_nk' ? '' : '+'}}</text>
                        {{item.value}}
                    </view>
                    <view class="list-name">
                        {{item.text}}
                    </view>
                    <view class="list-tips" :class="{active : tabType == 'season'}" v-if="tabType == 'season'">
                        <text>{{item.name == 'recommend_coupon' ? '券' : '水滴'}}</text>
                    </view>
                    <view class="list-tips" :class="{active : tabType == 'season'}" v-else>
                        <text v-if="item.name == 'open_nk'">折</text>
                        <text v-else-if="item.name == 'open_get_goods'">水</text>
                        <text v-else>水滴</text>
                    </view>
                </view>
            </scroll-view>
            <view class="suggest">
                <view class="suggest-cont">
                    <view class="suggest-title">
                        {{tabType == 'season'?'季卡' : '年卡'}}权益说明
                    </view>
                    <view class="suggest-item">
                        <view class="suggest-label" v-for="(item, index) in rights" :key="index">
                            <text>{{index + 1}}</text>
                            <view class="suggest-text">
                                {{item.remark}}
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="emption">
            <view class="emption-cont">
                <view class="emption-price">
                    <view class="emption-top">￥{{identities.price}}</view>
                    <view class="emption-tips" v-if="couponPrice > 0">(抵值券￥{{couponPrice}})</view>
                    <view class="emption-tips" v-else>({{tabType == 'season'?'季卡会员' : '年卡会员'}})</view>
                </view>
                <view class="emption-btn" v-if="can.open" @click="$Router.push({name: 'memberOpen', params:{identity_id: newId}})">
                    立即开通
                </view>
                <block v-else>
                    <view class="emption-btn" v-if="can.renew" @click="$Router.push({name: 'memberOpen', params:{identity_id: newId}})">
                        立即续费
                    </view>
                    <view class="emption-btn active" v-else>
                        {{buttonText}}
                    </view>
                </block>
            </view>
        </view>
    </view>
</template>

<script>
    import { identitySee } from '@/apis/interfaces/member'
    export default {
    	data() {
    		return {
                buttonText: '',
                couponPrice: '',    //抵值券
                tabType: 'season', //会员标签
                rights : [],    //权益
                rules  : [],
                newId: '',
                identities: '',
                identityId: '',
                can: ''
    		}
    	},
    	onShow() {
            // 获取身份前置
            this.identityInfo();
    	},
    	methods: {
            // 身份前置
            identityInfo(){
                // 3为季卡,4为年卡
                let identityId = ''
                if(this.tabType == 'season') {
                    identityId = 3
                } else {
                    identityId = 4
                }
                identitySee(identityId).then(res => {
                    this.identities = res
                    this.rules = res.rules
                    this.couponPrice = res.coupon_price
                    this.rights = res.rights
                    this.newId = res.identity_id
                    this.can = res.can
                    this.buttonText = res.buttonText
                }).catch(err => {
                	uni.showToast({
                		title: err.message,
                		icon: "none"
                	})
                })
            },
            
            // 切换身份
            typeClick(e) {
                this.tabType = e
                // 获取身份前置
                this.identityInfo();
            }
    	}
    }
</script>

<style lang="scss" scoped>
    .content {
        background-image: linear-gradient(to bottom, #383041, #1a1528);
        min-height: 100vh;
    }
    
    .tab {
        position: fixed;
        width: 100%;
        left: 0;
        top: 0;
        z-index: 100;
        height: 100rpx;
        line-height: 100rpx;
        background-color: #383041;
        display: flex;
        .tab-item {
            text-align: center;
            flex: 2;
            color: #c3c1c5;
            font-size: $title-size + 2;
            position: relative;
            font-weight: 600;
            &::after {
                position: absolute;
                content: '';
                left: calc(50% - 40rpx);
                bottom: 0;
                background-color: transparent;
                width: 80rpx;
                height: 6rpx;
                border-radius: 50rpx;
            }
            &.active {
                color: #ffffff;
            }
            &.active::after {
                background-color: #ffffff;
            }
        }
    }
    .rights {
        position: absolute;
        width: 100%;
        top: 120rpx;
        background-image: linear-gradient(to bottom, #383041, #1a1528);
        border-bottom: 160rpx solid transparent;
        .card {
            position: relative;
            height: 380rpx;
            .cardBack {
                position: absolute;
                width: 100%;
                left: 0;
                top: 0;
            }
            .cardText {
                position: absolute;
                width: 100%;
                left: 0;
                top: 0;
                z-index: 3;
                padding: $padding + 20 $padding + 30;
                box-sizing: border-box;
                .card-title {
                    font-weight: 600;
                    font-size: $title-size + 12;
                    color: #4c2616; 
                    display: flex;
                    image {
                        width: 46rpx;
                        height: 46rpx;
                        margin: 6rpx 10rpx 0 0;
                    }
                }
                .tips {
                    color: #653925;
                    margin: 10rpx 0 30rpx;
                    font-size: $title-size-lg;
                }
                .price-left {
                    color: #653925;
                    display: flex;
                    margin-top: 140rpx;
                    .price-top {
                        flex: 1;
                        line-height: 64rpx;
                    }
                    .price-number {
                        font-weight: 600;
                        font-size: $title-size + 14;
                        display: flex;
                        image {
                            width: 32rpx;
                            height: 32rpx;
                            margin: 16rpx 0 0 10rpx;
                        }
                    }
                    .price-serial {
                        font-weight: 600;
                        font-size: $title-size + 4;
                        flex: 1;
                        line-height: 64rpx;
                    }
                    .price-time {
                        line-height: 60rpx;
                        font-size: $title-size-sm;
                    }
                }
            }
        }
        .list {
            display: flex;
            padding: $padding 20rpx;
            box-sizing: border-box;
            white-space: nowrap;
            flex-direction: row;
            align-items: center;
            justify-content: space-around;
            .list-item {
                width: 25%;
                display: inline-block;
                position: relative;
                text-align: center;
                .list-tips {
                    position: absolute;
                    top: 0;
                    left: 60%;
                    font-size: $title-size-sm - 2;
                    background: #f1bd6e;
                    color: #681e0f;
                    border-radius: 30rpx;
                    padding: 0 10rpx;
                    line-height: 30rpx;
                    height: 30rpx;
                    &.active {
                        background: #f2c2a3;
                    }
                }
                .list-img {
                    width: 100rpx;
                    height: 100rpx;
                    margin: 0 auto;
                    background-color: rgba(255,255,255,.1);
                    border-radius: 50%;
                    padding: $padding - 10;
                    box-sizing: border-box;
                    image {
                        width: 100%;
                        height: 100%;
                    }
                }
                .list-rights {
                    color: #ffffff;
                    margin: 20rpx 0 10rpx;
                }
                .list-name {
                    color: #8d8a93;
                    font-size: $title-size-sm;
                }
            }
        }
        .suggest {
            padding: 20rpx $padding + 10;
            box-sizing: border-box;
            .suggest-cont {
                border: 2rpx solid #d2bfa9;
                border-radius: $radius + 10;
                padding: $padding $padding + 10;
                box-sizing: border-box;
                .suggest-title {
                    color: #e8bb9f;
                    font-size: $title-size + 4;
                    margin-bottom: 30rpx;
                }
                .suggest-item {
                    color: #b3a3a3;
                    font-size: $title-size-lg;
                    .suggest-label{
                        display: flex;
                        margin-bottom: 30rpx;
                        &:last-child {
                            margin-bottom: 0;
                        }
                        text {
                            width: 38rpx;
                            height: 38rpx;
                            border-radius: 50%;
                            border: 2rpx solid #b3a3a3;
                            text-align: center;
                            font-size: $title-size-sm;
                            display: inline-block;
                            margin-top: 5rpx;
                        }
                        .suggest-text {
                            width: calc(100% - 50rpx);
                            padding-left: 20rpx;
                            line-height: 40rpx;
                            box-sizing: border-box;
                            text-align: justify;
                        }
                    }
                }
            }
        }
    }
    
    .emption {
        position: fixed;
        background-color: #251f31;
        bottom: 0;
        left: 0;
        padding: $padding;
        box-sizing: border-box;
        width: 100%;
        height: 160rpx;
        z-index: 99;
        .emption-cont {
            border: 2rpx solid #e9c1a4;
            border-radius: 50rpx;
            line-height: 100rpx;
            height: 100rpx;
            color: #fbe8d2;
            display: flex;
            padding: 0 $padding - 15;
            box-sizing: border-box;
            .emption-price {
                flex: 1;
                display: flex;
                .emption-top {
                    font-weight: 600;
                    font-size: $title-size + 10;
                    padding-right: 10rpx;
                }
                .emption-tips {
                    font-size: $title-size-m;
                }
            }
            .emption-btn {
                background-image: linear-gradient(to right, #f5c17d , #fbe9d6);
                color: #681e0f;
                height: 74rpx;
                line-height: 74rpx;
                padding: 0 30rpx;
                border-radius: 50rpx;
                font-weight: 600;
                font-size: $title-size-lg;
                margin-top: 13rpx;
                &.active {
                    background-image: linear-gradient(to right, #bbbbbb, #9e9e9e);
                    color: #000;
                }
            }
        }
    }
</style>
