<template>
    <view class="ActInProBox column">
        <scroll-view :scroll-y="true"
        style="height: 1px;flex: 1;box-sizing: border-box;"
        @scroll="scroll"
        :scroll-top="scrollTop">
        <view class="ActInProHeaderBox activeLv5" :style="{ opacity: 100 - boxOption + '%' }">
            <headers :title="page" color="#fff"></headers>
            <view class="ActInProHeader">
                <view class="ActInProHeaderTitle">
                    Lv1 
                    <text>
                        出发序章
                        <!-- 秘境探索
                        云端行者
                        丝路征程
                        寰宇旅人 -->
                    </text>
                </view>
                <view class="ActInProHeaderTime row-sbas-n">
                    <view>有效期至2025年12月31日 23:59</view>
                    <view class="col" @click="goTisp">规则说明</view>
                </view>
                <view class="ActInProHeaderNum row">
                    <view class="ActInProHeaderNT ActInProHeaderNTL col column">
                        <view>当前交易额</view>
                        <view>¥<text>10550</text></view>
                    </view>
                    <view class="ActInProHeaderNT ActInProHeaderNTR col column">
                        <view>预计收益</view>
                        <view>¥<text>1288</text></view>
                    </view>
                </view>
                <view class="lineBox">
                    <view class="greyLine"></view>
                    <view class="lineHigBox"
                    :style="{'width': '50%'}">
                        <view class="lineHighlight">
                            <view></view>
                        </view>
                    </view>
                </view>
                <view class="ActInProHeaMoney">交易额达¥100,000 返5%</view>
            </view>
        </view>
        <view v-if="scrollTop > 50" class="ActInProHeaders">
            <headers v-if="scrollTop > 50" :title="page"></headers>
            <view style="padding: 0 40rpx;">
                <view v-if="scrollTop > 650" class="ActInProCenTimeBox row-sbas-n"
                    style="padding: 10rpx 0 30rpx;">
                    <view class="ActInProCenTime row" @click="SelectDate">
                        <text>{{year}}年</text>
                        <text>{{month}}月</text>
                        <u-icon name="arrow-down" size="28" color="#000"></u-icon>
                    </view>
                    <view class="ActInProCenSSE">
                        总销售额：
                        <text>¥518960</text>
                    </view>
                </view>
            </view>
        </view>
        
        <view class="ActInProCenterBox">
            <view class="ActInProCenTjBox">
                <view class="ActInProCenTjTitle">月销售额统计</view>
                <view class="ActInProCenBar">

                </view>
            </view>
            <view class="ActInProCenTimeBox row-sbas-n">
                <view class="ActInProCenTime row" @click="SelectDate">
                    <text>{{year}}年</text>
                    <text>{{month}}月</text>
                    <u-icon name="arrow-down" size="28" color="#000"></u-icon>
                </view>
                <view class="ActInProCenSSE">
                    总销售额：
                    <text>¥518960</text>
                </view>
            </view>
            <u-picker mode="time" v-model="showTime" :defaultTime="times" :params="params" @confirm = 'confirm'></u-picker>
            <view class="ActInProListBox">
                <view class="ActInProList activeJD"
                v-for="(item,index) in 10" :key="index">
                    <view class="ActInProListTitle">
                        <text>
                            酒店
                        </text>
                        <view></view>
                    </view>
                    <view class="ActInProListDec">
                        星空九寨~九寨沟.黄龙.熊猫乐园.纯玩3天(4人定制小包团·赠送...
                    </view>
                    <view class="ActInProListDecNum">¥1440，2人</view>
                    <view class="ActInProListTime row-sbas-n items-center">
                        <view>完结时间：2025-04-01</view>
                        <view class="ActInProListTimeR">¥2880</view>
                    </view>
                </view>
            </view>
            <u-alert-tips :close-able="false"
            style="border-radius: 18rpx;"
            type="warning"
            title="2025年2月1日（包含）起生效"
            description="积分：平台所有跟团游产品均可参加积分活动，积分获得比例：100:1（例：客人实付金额100元，获得1个积分)。团队出发后7个工作日内将会存入积分余额。"
            ></u-alert-tips>
            <view style="height: 40rpx;"></view>
        
        </view>
        
            
    
            
        </scroll-view>
        
    </view>
</template>
<script>
import headers from "@/components/header/header";
export default {
    components: {
        headers
    },
    data() {
        return {
            page:'',
            boxOption: 0,
            params: {
                year: true,
                month: true,
                day: false,
                hour: false,
                minute: false,
                second: false
            },
            year: '',
            month: '',
            date: '',
            times: null,
            showTime: false,
            msg: {
                QStartDate: '',
                QEndDate: ''
            },
            scrollHeight: 0,
            scrollTop: 0,
        }
    },
    onLoad(options) {

    },
    onShow() {
        const now = new Date();
        this.year = now.getFullYear();
        this.month = String(now.getMonth() + 1).padStart(2, '0');
        this.msg.QStartDate = this.year + '-' + this.month + '-01'
        now.setMonth(now.getMonth() + 1, 0);
        this.msg.QEndDate = this.year + '-' + this.month + '-'+now.getDate()
        this.times = this.year + '-' + this.month
    },
    mounted() {
        
    },
    methods: {
        goTisp(){
            console.log(1111)
            this.scrollTop = this.scrollHeight?this.scrollHeight:1000000
        },
        confirm(e){
            if(this.year==e.year&&this.month==e.month) return
            this.year = e.year
            this.month = e.month 
            this.times = this.year + '-' + this.month
            const now = new Date(this.year, this.month, 1); // 设置为下个月第1天
            now.setDate(now.getDate() - 1); // 减1天即为上个月最后一天
            this.msg.QStartDate = this.year + '-' + this.month + '-01'
            this.msg.QEndDate = this.year + '-' + this.month + '-'+now.getDate()
            // this.research()
            this.scrollTop = 630
        },
        SelectDate(){
            this.showTime = true
        },
        goUrl(){
            uni.navigateTo({
                url: '/pages/bigredrnvelope/rule' 
            })
        },
        scroll(e) {
            this.scrollHeight = e.detail.scrollHeight
            this.scrollTop = e.detail.scrollTop;
            this.boxOption = Math.floor((e.detail.scrollTop - 200) / 1.5);
        },
    }
}
</script>
<style lang="scss" scoped>
@import url("@/asset/css/flex.css");
.ActInProBox{
    height: 100vh;
    background: #F3F1EF;
}
.ActInProHeaderBox{
    height: 919rpx;
}
.ActInProHeaders{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #F3F1EF;
    z-index: 3;
}
.ActInProHeader{
    padding: 25rpx 40rpx 0 40rpx;
}
.ActInProHeaderTitle{
    font-weight: 400;
    font-size: 30rpx;
}
.ActInProHeaderTitle text{
    font-family: SJzhuokai;
    font-weight: 400;
    font-size: 46rpx;
    color: #FFFFFF;
    margin-left: 10rpx;
}
.ActInProHeaderTime{
    font-weight: 500;
    font-size: 24rpx;
}
.ActInProHeaderTime view{
    display: block;
    padding: 10rpx 0;
}
.ActInProHeaderTime view:last-child{
    text-align: right;
}
.ActInProHeaderNum{
    padding: 53rpx 0 15rpx 0;
}
.ActInProHeaderNT view{
    font-size: 24rpx;
}
.ActInProHeaderNT view:first-child{
    font-weight: 500;
    margin-bottom: 10rpx;
}
.ActInProHeaderNT view:last-child{
    font-weight: bold;
}
.ActInProHeaderNT view:last-child text{
    font-size: 46rpx;
}
.ActInProHeaderNTL{
    color: #FFFFFF;
}
.lineBox{
    width: 613rpx;
    position: relative;
}
.greyLine{
    width: 613rpx;
    height: 8rpx;
    border-radius: 4rpx;
}
.lineHigBox{
    height: 8rpx;
    background: #fff;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 4rpx;
}
.lineHighlight{
    position: relative;
    width: 100%;
}
.lineHighlight view{
    width: 21rpx;
    height: 8rpx;
    background: #fff;
    border-radius:10rpx;
    position: absolute;
    right: 0;
    top: 0;
    // box-shadow: 2px 0px 73px 13px #fff;
    box-shadow: 0 0 5px #fff,
    0 0 10px #fff, 
    0 0 15px #fff, 
    0 0 20px #fff, 
    0 0 25px #fff, 
    0 0 30px #fff, 
    0 0 35px #fff, 
    0 0 40px #fff, 
    0 0 45px #fff, 
    0 0 50px #fff; 
}
.ActInProHeaMoney{
    font-weight: 500;
    font-size: 24rpx;
    color: #FFFFFF;
    margin-top: 25rpx;
}
.ActInProCenterBox{
    padding: 0 40rpx;
    position: relative;
    top: -46rpx;
}
.ActInProCenTjBox{
    background: #FFFFFF;
    border-radius: 18rpx;
    padding: 30rpx 20rpx 20rpx 20rpx;
}
.ActInProCenTjTitle{
    font-weight: bold;
    font-size: 32rpx;
    color: #080A0A;
    margin-bottom: 37rpx;
    padding: 0 20rpx;
}
.ActInProCenBar{
    height: 414rpx;
    background: #F2F8FF;
    border-radius: 18rpx;
}
.ActInProCenTimeBox{
    padding: 40rpx 0 30rpx 0;
}
.ActInProCenTime{
    font-weight: 500;
    font-size: 24rpx;
    color: #000;
}
.ActInProCenTime u-icon{
    margin-left: 10rpx;
    position: relative;
    top: -2rpx;
}
.ActInProCenSSE{
    font-weight: bold;
    font-size: 24rpx;
    color: #080A0A;
}
.ActInProCenSSE text{
    font-size: 32rpx;
    margin-left: 10rpx;
}

.ActInProList{
    padding: 38rpx;
    background: #FFFFFF;
    border-radius: 18rpx;
    margin-bottom: 34rpx;
}
.ActInProListTitle{
    font-weight: bold;
    font-size: 28rpx;
    color: #080A0A;
    position: relative;
}
.ActInProListTitle view{
    width: 43rpx;
    height: 8rpx;
    border-radius: 3rpx;
    position: absolute;
    left: 6rpx;
    bottom: 5rpx;
    z-index: 0;
}
.ActInProListTitle text{
    position: relative;
    z-index: 2;
}
.ActInProList.activeJD .ActInProListTitle view{
    background: #3175FF;
}
.ActInProList.activeLY .ActInProListTitle view{
    background: #FF3166;
}
.ActInProList.activeZC .ActInProListTitle view{
    background: #1BCB8B;
}
.ActInProList.activeJP .ActInProListTitle view{
    background: #FF9731;
}
.ActInProList.activeQZ .ActInProListTitle view{
    background: #9B2020;
}
.ActInProListDec{
    font-weight: bold;
    font-size: 28rpx;
    color: #080A0A;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical; 
    -webkit-line-clamp: 2;
    overflow: hidden;
    padding: 20rpx 0 10rpx 0;
}
.ActInProListDecNum{
    font-weight: 500;
    font-size: 24rpx;
    color: #757776;
    margin-bottom: 5rpx;
}
.ActInProListTime{
    font-weight: 500;
    font-size: 24rpx;
    color: #757776;
}
.ActInProListTimeR{
    font-weight: bold;
    font-size: 32rpx;
    color: #080A0A;
}

.ActInProHeaderNTR{
    color: #FFE6A2;
}
.ActInProHeaderNTR view:first-child{
    color: #FFE6A3;
}
.ActInProHeaderBox.activeLv5 .greyLine{
    background: #010102;
}
.ActInProHeaderBox.activeLv5 .ActInProHeaderTitle,
.ActInProHeaderBox.activeLv5 .ActInProHeaderTime{
    color: #526474;
}
.ActInProHeaderBox.activeLv4 .greyLine{
    background: #232C5A;
}
.ActInProHeaderBox.activeLv4 .ActInProHeaderTitle,
.ActInProHeaderBox.activeLv4 .ActInProHeaderTime{
    color: #22627B;
}
.ActInProHeaderBox.activeLv3 .greyLine{
    background: #232C5A;
}
.ActInProHeaderBox.activeLv3 .ActInProHeaderTitle,
.ActInProHeaderBox.activeLv3 .ActInProHeaderTime{
    color: #B7CBFF;
}
.ActInProHeaderBox.activeLv2 .greyLine{
    background: #4D3204;
}
.ActInProHeaderBox.activeLv2 .ActInProHeaderTitle,
.ActInProHeaderBox.activeLv2 .ActInProHeaderTime{
    color: #EAD39E;
}
.ActInProHeaderBox.activeLv1 .greyLine{
    background: #123369;
}
.ActInProHeaderBox.activeLv1 .ActInProHeaderTitle,
.ActInProHeaderBox.activeLv1 .ActInProHeaderTime{
    color: #86B4FF;
}
.ActInProHeaderBox.activeLv1{
   background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638797085844310824.png')no-repeat; 
   background-size: 100% 100%;
}
.ActInProHeaderBox.activeLv2{
   background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638797085843373244.png')no-repeat; 
   background-size: 100% 100%;
}
.ActInProHeaderBox.activeLv3{
   background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638797085843343956.png')no-repeat; 
   background-size: 100% 100%;
}
.ActInProHeaderBox.activeLv4{
   background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638797085843324394.png')no-repeat; 
   background-size: 100% 100%;
}
.ActInProHeaderBox.activeLv5{
   background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638797085843612910.png')no-repeat; 
   background-size: 100% 100%;
}

</style>
