<template>
    <view class="store-vip">
        <image class="vip-bg" src="/static/store/store-vip-bg.png"  mode="widthFix"/>
        <swiper class="swiper" circular :current="swiperCurrent">
            <swiper-item class="swiper-item" v-for="(item, index) in vip" :key="index">
                <view class="top">
                    <view class="left" v-if="vip.length > 1">
                         <image class="left-img" src="/static/store/get-more.gif" mode="widthFix" /> 滑动获取更多 
                    </view>
                    <view class="content">
                        <!-- 四个角标 -->
                        <block> <image class="jiao" src="/static/store/vip-left-top.png" mode="widthFix" /> <image class="jiao" src="/static/store/vip-right-top.png" mode="widthFix" /> <image class="jiao" src="/static/store/vip-left-bottom.png" mode="widthFix" /> <image class="jiao" src="/static/store/vip-right-bottom.png" mode="widthFix" /> </block>
                        <view class="title1"> {{item.shop.name}} </view>
                        <image class="title2" :src="item.title_cover" mode="widthFix" />
                        <view class="title3"> {{item.description}} </view> <!-- 分类 -->
                        <view class="type">
                            <view class="type-item" v-for="(it, itIndex) in item.rules" :key="itIndex">
                                <image :src="it.cover" mode="aspectFill" />
                                <view class="title">{{it.name}}</view>
                            </view>
                        </view>
                        <view class="title4">详情咨询可添加产品页下方客服二维码</view>
                    </view>
                    <view class="right" v-if="vip.length > 1"> 滑动获取更多 <image class="right-img" src="/static/store/get-more.gif" mode="widthFix" /> </view>
                    </view>
                    <view class="bottom">
                        <view class="left">
                            <view class="title-1">立享尊贵特权 >> </view>
                            <view class="title-2" v-if="item.vip_info.ended_at"> 到期时间：{{item.vip_info.ended_at}} </view>
                            <view  class="title-2" v-if="item.margins.days>0"> 距离{{item.margins.days}}天只需要补{{item.margins.price}}元升级 </view>
                        </view>
                        <view class="right" @click="onOpenVip(item.identity_id)">
                            {{item.is_vip ?'立即续费':item.margins.days>0 ? '立即升级':'立即开通'}}
                        </view>
                    </view>
            </swiper-item>
        </swiper>
    </view>
</template>
<script>
    import {
        shopVipInfo,
        shopVipCreate,
        shopVipWeChat
    } from '@/apis/interfaces/vip.js'
    export default {
        data() {
            return {
				id				: '',
				identityId		: '',
                vip				: [],
				swiperCurrent	: 0
            };
        },
        onLoad(e) {
            this.id = e.id;
			this.identityId = e.identityId
            this.getInfo()
        },
        methods: {
            getInfo() {
                shopVipInfo(this.id).then(res => {
                    uni.setNavigationBarTitle({
                        title: res[0].shop.name + '会员'
                    });
                    this.vip 			= res;
					this.swiperCurrent	= res.findIndex(val => val.identity_id == this.identityId)
                }).catch(err => {
                    uni.showToast({
                        title: err.message,
                        icon: 'none',
                        mask: true,
                    })
                })
            },
            //  创建店铺vip会员
            onOpenVip(identity) {
                // 获取订单
                uni.showLoading({
                    title: 'VIP会员开通中'
                })
                shopVipCreate(this.id,identity).then(res => {
                    // 支付参数
                    if (res.id) {
                        uni.showLoading({
                            title: '获取支付信息'
                        })
                        this.wxPay(res.id)
                    }
                }).catch(err => {
                    uni.showToast({
                        title: err.message,
                        icon: 'none'
                    })
                })
            },
            // 微信支付
            wxPay(orderId) {
                shopVipWeChat(orderId).then(orderInfo => {
                    uni.requestPayment({
                        provider: "wxpay",
                        orderInfo: JSON.parse(orderInfo),
                        success: res => {
                            uni.showModal({
                                title: '提示',
                                content: '开通成功',
                                showCancel: false,
                                success: () => {
                                    uni.navigateBack({})
                                }
                            })
                        },
                        fail(err) {
                            let showToast = err.message
                            if (err.errMsg === 'requestPayment:fail [payment微信:-2]User canceled') {
                                showToast = '支付被取消'
                            }
                            uni.showToast({
                                title: showToast,
                                icon: 'none'
                            })
                        }
                    })
                }).catch(err => {
                    uni.showToast({
                        title: err.message,
                        icon: 'none',
                        mask:true,
                    })
                })
            }

        }
    }
</script>
<style lang="scss">
    .store-vip {
        height: 100vh;
        width: 100vw;
        background-color: #f6f1eb;
        position: relative;
        z-index: 0;
        overflow: hidden;

        .vip-bg {
            width: 100%;
            // height: 100%;
            position: absolute;
            z-index: 1;
            top: -50rpx;
            left: -50rpx;
        }

        .swiper {
            width: 100%;
            height: 100%;
            position: relative;
            z-index: 2;

            .swiper-item {
                .top {
                    height: calc(100vh - 160rpx);
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: space-around;
                    box-sizing: border-box;

                    .right {
                        font-size: 30rpx;
                        color: #999;
                        text-align: right;
                        width: 100%;
                        padding-bottom: 6%;
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        box-sizing: border-box;
                        justify-content: flex-end;
                        margin-right: 20%;
                        box-sizing: border-box;
                        .right-img{
                            width: 50rpx;
                            margin-left: 10rpx;
                            opacity: 0.6;
                        }
                    }

                    .left {
                        font-size: 30rpx;
                        color: #999;
                        text-align: left;
                        width: 100%;
                        padding-top: 6%;
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        box-sizing: border-box;
                        justify-content: flex-start;
                        margin-left: 20%;
                        box-sizing: border-box;
                        .left-img{
                            width: 50rpx;
                            transform: rotate(180deg);
                            margin-right: 10rpx;
                            opacity: 0.6;
                        }
                    }

                    .content {
                        padding: $padding * 2;
                        background-color: #fff;
                        border-radius: 10rpx;
                        width: 80%;
                        min-height: 70%;
                        position: relative;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        box-sizing: border-box;

                        .title1 {
                            font-size: 34rpx;
                            color: #e5c175;
                            font-weight: bold;
                        }

                        .title2 {
                            padding-top: $padding - 0;
                            width: 100%;
                            height: 0;
                            padding-bottom: $padding - 10;
                        }

                        .title3 {
                            font-size: 28rpx;
                            color: #2f3245;
                        }

                        .title4 {
                            font-size: 28rpx;
                            color: #e5c175;
                            padding-top: 30rpx;
                        }

                        .type {
                            display: flex;
                            flex-direction: row;
                            align-items: center;
                            justify-content: flex-start;
                            box-sizing: border-box;
                            flex-wrap: wrap;
                            margin-top: $padding * 2;
                            width: 100%;

                            .type-item {
                                width: 33.33%;
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                justify-content: center;
                                box-sizing: border-box;
                                font-size: 28rpx;
                                color: #2f3245;
                                margin-bottom: 30rpx;

                                image {
                                    width: 90rpx;
                                    height: 90rpx;
                                    border-radius: 50%;
                                    margin-bottom: 20rpx;
                                }
                            }
                        }

                        .jiao {
                            width: 50rpx;
                            position: absolute;
                        }

                        .jiao:nth-child(1) {
                            left: 0;
                            top: 0;
                        }

                        .jiao:nth-child(2) {
                            right: 0;
                            top: 0;
                        }

                        .jiao:nth-child(3) {
                            left: 0;
                            bottom: 0;
                        }

                        .jiao:nth-child(4) {
                            right: 0;
                            bottom: 0;
                        }
                    }
                }

                .bottom {
                    height: 160rpx;
                    background-color: #2f3245;
                    color: #e5c175;
                    width: 100%;
                    display: flex;
                    flex-direction: row;

                    .left {
                        color: #e5c175;
                        width: 70%;
                        height: 100%;
                        font-weight: bold;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        box-sizing: border-box;

                        .title-1 {
                            font-size: 36rpx;
                        }
                        .title-2{
                            font-size: 28rpx;
                            font-weight: normal;
                        }
                    }

                    .right {
                        background-color: #e5c175;
                        width: 30%;
                        height: 100%;
                        color: #2f3245;
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        justify-content: center;
                        box-sizing: border-box;
                        font-size: 36rpx;
                        font-weight: bold;
                    }
                }
            }
        }
    }
</style>
