<template>
    <view>
        <!-- 权益数据 -->
        <view class="cont">
            <view class="contBack">
                <image class="classBack" src="https://card.ysd-bs.com/storage/materials/2021/09/01/class_back_01.png" mode="scaleToFill"></image>
                <view class="classCircle"></view>
                <view class="rightsCont">
                    <view class="rightsCont-tips" v-if="infoData.two_title != null">
                        {{ infoData.two_title }}
                    </view>
                    <view class="nowrap rightsCont-title">
                        {{ infoData.three_title == null ? '' : infoData.three_title }}
                    </view>
                    <view class="nowrap rightsCont-btn">
                        {{ infoData.two_description }}
                    </view>
                </view>
            </view>
        </view>
        
        <!-- 公告 -->
        <view class="indexNews">
            <image src="/static/icon/news_icon.png"></image>
            <view class="marquee_container" style="--marqueeWidth--:-30em">
                <view class="marquee_text" :class="{active : noticeData.length > 20}">{{ noticeData }}</view>
            </view>
        </view>
        
        <!-- 卡券专区 -->
        <view class="special">
            <view class="special-title">卡券专区</view>
            <view class="special-list">
                <block v-if="infoItems.length > 0">
                    <view class="special-label" v-for="(item,index) in infoItems" :key="index" @click="rightNav(item.right_config_id, item.from)">
                        <view class="special-rebate" v-if="item.label != ''">{{ item.label }}</view>
                        <scroll-view scroll-x class="welfareCont-top" scroll-with-animation>
                            <block v-if="item.logos != ''">
                                <view class="welfareCont-list-img" v-for="(items,indexItem) in item.logos" :key="indexItem">
                                    <image :src="items" mode="aspectFill"></image>
                                </view>
                            </block>
                            <block v-else>
                                <view class="welfareCont-list-img">
                                    <image src="https://card.ysd-bs.com/storage/materials/2021/09/14/defaultImg.png" mode="aspectFill"></image>
                                </view>
                            </block>
                        </scroll-view>
                        <view class="special-text">
                            <view class="nowrap special-name">{{ item.title }}</view>
                            <view class="special-tips">{{ item.subtitle }}</view>
                        </view>
                    </view>
                </block>
                <block v-else>
                    <view class="legalTips">
                        <image src="/static/img/null_icon.png"></image>
                        <text>抱歉, 暂无内容</text>
                    </view>
                </block>
            </view>
        </view>
        
        <!-- 购买须知 -->
        <view class="notice">
            <view class="noticeTitle" @click="noticeTap">
                <view class="noticeTitle-flex">
                    <image class="noticeTitle-img" src="/static/icon/notice_icon.png"></image>
                    购买前请仔细阅读内容介绍
                </view>
                <image class="noticeTitle-row" :class="{active : contentShow}" src="/static/icon/arrow_right_black.png"></image>
            </view>
            <view class="noticeText" :class="{active : contentShow}">
                <view class="noticeText-cont">
                    <rich-text :nodes="content"></rich-text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import { classify, washcarUrl } from '@/apis/interfaces/rights'
    export default {
    	data() {
    		return {
                noticeData : '',     // 公告
                infoData   : '',     // 权益数据
                infoItems  : '',     // 卡券专区
                content    : '',     // 内容简介
                contentShow: false   // 内容简介-显示状态
            }
        },
        onLoad(options) {
            this.indexNav(options.id,options.areaname,options.latitude,options.userlng)
        },
        methods:{
           // 卡权益分类
           indexNav(id, areaname,latitude,userlng) {
               classify(id, {
                   area_name: areaname,
                   user_lng : latitude,
                   user_lat : userlng
               }).then(res=>{
                   this.noticeData  = res.notice
                   this.infoData    = res.info
                   this.infoItems   = res.items
                   this.content     = res.info.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"')
               }).catch(err=>{
                    if(!err.login){
                        // 写入缓存
                        uni.setStorage({
                           key     : 'token',
                           data    : ''
                        })
                    }
               })
            },
            
            // 须知展开收起状态
            noticeTap() {
                this.contentShow = !this.contentShow
            },
            
            // 活动中心权益跳转详情
            rightNav(rightid,rightfrom) {
                if(uni.getStorageSync("token")) {
                    if(rightfrom == 'washcar') {
                        // 先做成固定跳转
                        // uni.navigateTo({
                        //     url: "/pages/car/index?welfare_id=" + "&right_id=" +rightid
                        // })
                        // return
                        washcarUrl({
                            welfare_id      : '',
                            right_config_id : rightid
                        }).then(res=>{
                            const newUrl = res
                            let url= encodeURIComponent(newUrl)
                            uni.redirectTo({
                                // 跳转到webview页面
                                url: `/pages/washcar/washcar?url=${url}`
                            });
                        })
                    } else {
                        // 跳转分类页
                        uni.navigateTo({
                            url: '/pages/rights/index?id=' + rightid
                        })
                    }
                    return
                }
                uni.navigateTo({
                    url: "/pages/auth/login"
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    // 权益数据
    .cont {
        width: 100%;
        overflow: hidden;
        .contBack {
            position: relative;
            width: 200%;
            height: 400rpx;
            left: -50%;
            text-align: center;
            background: #000000;
            border-radius: 0 0 100% 100%;
            overflow: hidden;
            &::after {
                width: 100%;
                height: 30rpx;
                position: absolute;
                left: 0;
                bottom: 0;
                z-index: 2;
                content: '';
                background-image: linear-gradient(transparent, rgba(0,0,0,.25));
            }
            &::before {
                position: absolute;
                border-radius: 50%;
                content: '';
                z-index: 1;
                background-color: rgba(255,255,255,.1);
            }
            .classBack {
                position: absolute;
                left: 30%;
                right: 30%;
                width: 40%;
                top: 40rpx;
            }
            .classCircle {
                position: relative;
                &::after {
                    position: absolute;
                    border-radius: 50%;
                    content: '';
                    z-index: 1;
                    background-color: rgba(255,255,255,.1);
                }
            }
            .rightsCont {
                position: absolute;
                z-index: 3;
                left: calc(30% - 2rpx);
                right: calc(30% - 2rpx);
                width: calc(40% + 4rpx);
                top: 58rpx;
                .rightsCont-tips {
                    color: #fff;
                }
                .rightsCont-title {
                    color: #63320a;
                    font-size: 60rpx;
                    margin: 60rpx 0 20rpx;
                    padding: 0 20rpx;
                    box-sizing: border-box;
                }
                .rightsCont-btn {
                    background-color: #f4dfcc;
                    width: 100%;
                    line-height: 70rpx;
                    font-size: 38rpx;
                    color: #2d2d2d;
                    padding: 0 20rpx;
                    box-sizing: border-box;
                }
            }
        }
    }
    
    // 公告
    .indexNews {
        display: flex;
        font-size: 28rpx;
        line-height: 46rpx;
        background: #c4c4c4;
        border-radius: 10rpx;
        padding: 25rpx 20rpx;
        box-sizing: border-box;
        margin: 30rpx 20rpx;
        image {
            width: 42rpx;
            height: 42rpx;
            margin: 4rpx 20rpx 0 0;
        }
        .marquee_container {
            width: calc(100% - 40rpx);
            overflow: hidden;
            &:hover {
                /* 不起作用 */
                animation-play-state: paused;
            }
            .marquee_text {
                font-size: 28rpx;
                display: inline-block;
                white-space: nowrap;
                &.active {
                    animation-name: around;
                    animation-duration: 20s;
                    /*过渡时间*/
                    animation-iteration-count: infinite;
                    animation-timing-function: linear;
                }
                /*首页跑马灯效果*/
                @keyframes around {
                    from {
                        margin-left: 60rpx;
                    }
                    to {
                        /* var接受传入的变量 */
                        margin-left: var(--marqueeWidth--);
                    }
                }
            }
        }
    }
    
    // 卡券专区
    .special {
        border-radius: 10rpx;
        padding: 25rpx 20rpx;
        box-sizing: border-box;
        background: #fff;
        margin: 30rpx 20rpx;
        .special-list {
            margin: 20rpx -10rpx 0;
            flex-wrap: wrap;
            display: flex;
            .special-label {
                margin: 10rpx;
                width: calc(50% - 20rpx);
                height: 330rpx;
                flex: 0 0 calc(50% - 20rpx);
                border: 4rpx solid #fb9b00;
                background-color: #ffe0b8;
                border-radius: 10rpx;
                text-align: center;
                padding: 20rpx 0;
                box-sizing: border-box;
                position: relative;
                .special-rebate {
                    position: absolute;
                    top: -30rpx;
                    right: 10rpx;
                    background: #fe0002;
                    color: #fff;
                    border-radius: 30rpx;
                    line-height: 52rpx;
                    height: 52rpx;
                    font-size: 26rpx;
                    padding: 0 20rpx;
                    font-weight: 600;
                }
                .welfareCont-top {
                    white-space: nowrap;
                    flex-direction: row;
                    align-items: center;
                    justify-content: space-around;
                    width: 100%;
                    padding: 0 10rpx;
                    box-sizing: border-box;
                    margin: 10rpx 0;
                    .welfareCont-list-img {
                        border: 2rpx solid #eccc69;
                        border-radius: 50%;
                        width: 100rpx;
                        height: 100rpx;
                        display: inline-block;
                        margin: 0 10rpx;
                        overflow: hidden;
                        image {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
                .special-text {
                    padding: 0 15rpx;
                    box-sizing: border-box;
                    position: relative;
                    font-size: 26rpx;
                    border-top: 4rpx dashed #fb9b00;
                    margin-top: 20rpx;
                    padding-top: 20rpx;
                    .special-name {
                        color: #6f4a2d;
                        font-weight: 600;
                        font-size: 28rpx;
                    }
                    .special-tips {
                        background-color: #242424;
                        color: #fff;
                        border-radius: 10rpx;
                        padding: 4rpx 20rpx;
                        line-height: 46rpx;
                        height: 46rpx;
                        margin-top: 20rpx;
                        font-size: 24rpx;
                        display: inline-block;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
            }
        }
    }
    
    // 内容介绍
    .notice {
        border-radius: 10rpx;
        padding: 25rpx 20rpx;
        box-sizing: border-box;
        background: #c4c4c4;
        margin: 30rpx 20rpx;
        .noticeTitle {
            color: #747d86;
            display: flex;
            line-height: 46rpx;
            .noticeTitle-flex {
                flex: 1;
                display: flex;
                font-size: 30rpx;
                color: #000;
                .noticeTitle-img {
                    width: 46rpx;
                    height: 46rpx;
                    margin-right: 20rpx;
                }
            }
            .noticeTitle-row {
                width: 32rpx;
                height: 32rpx;
                margin-top: 6rpx;
                transform:rotate(-180deg);
                &.active {
                    transform: rotate(90deg);
                }
            }
        }
        .noticeText {
            font-size: 26rpx;
            height: 0;
            overflow: hidden;
            &.active {
                height: auto;
            }
            .noticeText-cont {
                line-height: 60rpx;
            }
        }
    }
    
    /* 权益提示 */
    .legalTips {
        text-align: center;
        font-size: 26rpx;
        color: #999;
        image {
            width: 180rpx;
            height: 180rpx;
            display: block;
            margin: 0 auto;
        }
    }
</style>
