<template>
    <view class="content">
        <view class="tab">
            <view class="tab-item active" v-if="orderId == 5">创始会员</view>
            <view class="tab-item active" v-if="orderId == 6">合伙人</view>
        </view>
        <view class="rights">
            <view class="card">
                <image class="cardBack" :src="orderId == 5 ? 'http://api.siyuankunlun.com/storage/materials/2022/08/30/memberBack_3.png':'http://api.siyuankunlun.com/storage/materials/2022/08/30/memberBack_4.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}}大会员权益
                    </view> -->
                    <view class="price">
                        <view class="price-serial" v-if="identities.times">
                            {{identities.times.serial}}
                        </view>
                        <view class="price-left" v-if="identities.is_open">
                            <view class="price-top">
                                到期时间：
                            </view>
                            <view class="price-times" v-if="identities.times">
                                {{identities.times.ended_at}}
                            </view>
                        </view>
                    </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">
                        {{item.value}}
                    </view>
                    <view class="list-name">
                        {{item.text}}
                    </view>
                    <view class="list-tips active" v-if="orderId == 6">
                       现金
                    </view>
                </view>
            </scroll-view>
            <view class="suggest">
                <view class="suggest-cont">
                    <view class="suggest-title">
                        {{orderId == 5 ? '创始会员' : '合伙人'}}权益说明
                    </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>
</template>

<script>
    import { identitySee } from '@/apis/interfaces/member'
    export default {
    	data() {
    		return {
                orderId: '',  //身份id
                rights : [],    //权益
                rules  : [],
                newId: '',
                identities: '',
                identityId: '',
                can: ''
    		}
    	},
    	onShow() {
            // 获取身份前置
            this.identityInfo();
            this.orderId = this.$Route.query.orderId
    	},
    	methods: {
            // 身份前置
            identityInfo(){
                identitySee(this.$Route.query.orderId).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"
                	})
                })
            }
    	}
    }
</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);
        .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 {
                    font-size: $title-size-lg;
                    color: #653925;
                    display: flex;
                    margin-top: 140rpx;
                    .price-left {
                        text-align: right;
                        display: flex;
                    }
                    .price-serial {
                        font-weight: 600;
                        font-size: $title-size + 4;
                        flex: 1;
                    }
                }
            }
        }
        .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;
                    font-size: $title-size-m;
                }
                .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;
                        }
                    }
                }
            }
        }
    }
</style>
