<template>
    <view>
        <!-- 轮播 -->
        <view class="banner" v-if="productData.share">
            <swiper class="swiperCont" interval="3000" autoplay circular @change="swiperChange">
                <swiper-item v-for="(item, index) in productData.share.pictures" :key="index">
                    <image class="swiperImg" :src="item" mode="aspectFill"></image>
                </swiper-item>
            </swiper>
            <view class="swiperDot" v-if="productData.share.pictures.length > 0">
                {{ current }}/{{ productData.share.pictures.length }}
                </view>
        </view>
        
        <!-- 权益介绍 -->
        <view class="content">
            <view class="contentText">
                <view class="contentText-title">{{ productData.title }}</view>
                <view class="contentText-text" v-if="productData.share">{{ productData.share.description }}</view>
                <view class="contentText-price">
                    <view class="contentText-price-primary"><text>￥</text>{{ productData.price }}</view>
                    <view class="contentText-price-close" v-if="productData.share">门市价￥{{ productData.share.cost }}</view>
                </view>
            </view>
            <view @tap="userNav" class="contentBuy">立即购买</view>
        </view>
        
        <!-- 规格 -->
        <view class="specs">
            <view class="specs-label" v-if="productData.share">
                <text>规格</text>
                {{ productData.share.type_name }}
            </view>
            <view class="specs-label">
                <text>门店</text>
                <view class="specs-site">
                    <view class="specs-site-list" v-for="(item, index) in productStores" :key="index">
                        <view class="specs-site-name">{{ item.title }}</view>
                        {{ item.address }}
                    </view>
                </view>
            </view>
        </view>
        
        <!-- 规格 -->
        <view class="imageText">
            <view class="imageText-title">
                图文详情
            </view>
            <view class="imageText-text" v-if="productContent">
                <rich-text :nodes="productContent"></rich-text>
            </view>
            <view class="imageText-end">
                END
            </view>
        </view>
        
        
        <!-- 漂浮窗 -->
        <movable-area class="indexFloat" v-if="canShare">
            <movable-view y="400" direction="vertical" class="indexFloat-movable">
                <navigator hover-class="none" :url="'/pages/userGoods/goodsCode?rightid=' + rightId"
                    class="indexFloat-img">
                    <image src="https://card.ysd-bs.com/storage/materials/2021/09/01/index_float_01.png" mode="aspectFill"></image>
                </navigator>
            </movable-view>
        </movable-area>
    </view>
</template>

<script>
    import { productInfo } from '@/apis/interfaces/user'
    export default {
    	data() {
    		return {
                isUser          : false, //用户登录状态
                qrcode          : '',   //二维码
                userInfo        : '',   //我的信息
                current         : 1,    //产品轮播index
                rightId         : '',   //产品id
                parentId        : '',   //分享人id
                productData     : '',   //详情数据
                productStores   : [],   //门店列表
                productContent  : '',   //图文详情
                canShare        : ''    //分享按钮状态
    		}
    	},
        onLoad(options) {
            if(options.type){
                getApp().globalData.shareObj = {
                    type    : options.type,
                    goodsId : options.rightid,
                    userId  : options.parent_id
                }
            }
    
            this.rightId = options.rightid
        },
        onShow(){
            // 获取产品详情
            this.goodsShow();
            this.isUser = getApp().globalData.isUser
        },
        methods: {
            // 商品轮播
            swiperChange(e) {
                this.current = e.detail.current + 1
            },
        
            // 产品详情
            goodsShow(){
                productInfo(this.rightId).then(res=>{
                    this.canShare      = res.canShare
                    this.productData   = res.info
                    this.productStores = res.stores
                    this.productContent= res.info.share.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"')
                }).catch(err=>{})
            },
        
            // 处理未登录时的转跳
            userNav(){
                if(uni.getStorageSync("token")) {
                    uni.navigateTo({
                        url: '/pages/rights/index?id=' + this.productData.right_config_id + '&parent_id=' + this.parentId + '&type=share'
                    })
                } else {
                    // 去登录
                    uni.navigateTo({
                        url: "/pages/auth/login?way=shareLogin"
                    })
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    page {
        background-color: #f0f0f0;
    }
    
    /* 轮播图 */
    .banner {
        width: 100%;
        position: relative;
        padding-top: 60%;
    }
    
    .swiperCont, .swiperImg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    
    .swiperDot {
        position: absolute;
        background: rgba(0, 0, 0, .5);
        border-radius: 80rpx;
        padding: 0 25rpx;
        line-height: 46rpx;
        z-index: 2;
        bottom: 20rpx;
        right: 50rpx;
        color: #ffffff;
    }
    
    /* 权益介绍 */
    .content {
        width: 100%;
        padding: 25rpx;
        box-sizing: border-box;
        display: flex;
    }
    
    .contentText {
        width: calc(100% - 240rpx);
        margin-right: 40rpx;
    }
    
    .contentText-title {
        font-weight: 600;
        font-size: 36rpx;
    }
    
    .contentText-text {
        font-size: 26rpx;
        padding: 20rpx;
        box-sizing: border-box;
        color: #646464;
    }
    
    .contentText-price {
        padding: 0 20rpx;
        box-sizing: border-box;
        display: flex;
    }
    
    .contentText-price-primary {
        color: #f57400;
        font-size: 48rpx;
        font-weight: 600;
        text {
            font-size: 28rpx;
        }
    }
    
    .contentText-price-close {
        font-size: 24rpx;
        color: #646464;
        margin: 20rpx 0 0 10rpx;
        text-decoration: line-through;
    }
    
    .contentBuy {
        background: linear-gradient(to left, #fe6d52, #fe8750);
        border-radius: 20rpx;
        width: 200rpx;
        text-align: center;
        height: 70rpx;
        line-height: 70rpx;
        color: #ffffff;
        margin-top: 70rpx;
    }
    
    /* 规格 */
    .specs {
        background-color: #ffffff;
        padding: 25rpx;
        box-sizing: border-box;
        margin: 0 20rpx;
        border-radius: 20rpx;
    }
    
    .specs-label {
        display: flex;
        margin-bottom: 30rpx;
        text {
            font-size: 30rpx;
            display: block;
            width: 100rpx;
            color: #808080;
            line-height: 44rpx;
        }
    }
    
    .specs-label:last-child {
        margin-bottom: 0;
    }
    
    .specs-site {
        box-sizing: border-box;
        font-size: 30rpx;
        width: calc(100% - 120rpx);
    }
    
    .specs-site-list {
        margin-bottom: 20rpx;
        font-size: 28rpx;
    }
    
    .specs-site-list:last-child {
        margin-bottom: 0;
    }
    
    .specs-site-name {
        font-size: 32rpx;
        margin-bottom: 10rpx;
    }
    
    /* 详情 */
    .imageText {
        width: 100%;
        padding: 40rpx;
        box-sizing: border-box;
    }
    
    .imageText-title {
        width: 200rpx;
        margin: 0 auto 30rpx;
        text-align: center;
        position: relative;
    }
    
    .imageText-title::after,
    .imageText-title::before {
        position: absolute;
        content: '';
        top: 49%;
        background-color: #000000;
        width: 100rpx;
        height: 2rpx;
    }
    
    .imageText-title::after {
        left: -100rpx;
    }
    
    .imageText-title::before {
        right: -100rpx;
    }
    
    .imageText-end {
        width: 80rpx;
        height: 80rpx;
        margin: 30rpx auto;
        line-height: 80rpx;
        text-align: center;
        border-radius: 50%;
        border: 2rpx solid #000000;
        position: relative;
    }
    
    .imageText-end::after {
        position: absolute;
        content: '';
        width: 10rpx;
        height: 10rpx;
        border-radius: 50%;
        top: 0rpx;
        right: 16rpx;
        background-color: #000000;
    }
    
    /* 漂浮弹出层 */
    .indexFloat {
        position: fixed;
        height: 52%;
        width: 130rpx;
        right: 20rpx;
        bottom: 40rpx;
        z-index: 99;
    }
    
    .indexFloat-movable {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 150rpx;
        z-index: 99;
        image {
            width: 130rpx;
            height: 130rpx;
            margin-bottom: 20rpx;
        }
    }
</style>
