<template>
    <view class="SetListBox activeLv1 column">
        <view class="SetListHeaderBox">
            <headers :title="page"></headers>
            <view class="SetListHeader row items-center">
                <view class="SetListHeaderL">
                    <image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638748795455095258.png" />
                </view>
                <view class="SetListHeaderR">
                    <view class="SetListHeaderRTitle">Ranjunjun</view>
                    <view class="SetListHeaderRLV">等级：LV1.出发序章</view>
                </view>
            </view>
        </view>
        <view class="SetListCenterBox column">
            <view class="SetListCenTjBox">
                <view class="SetListCenTjTitle">大红包额度</view>
                <view class="row-sbas-n items-center">
                    <view class="SetListCenTNumL">
                        ¥<text>2318</text>
                    </view>
                    <view class="SetListCenTImgR">
                        <view>
                            立即提现
                        </view>
                    </view>
                </view>
            </view>
            <view class="SetListCenTimeBox row-sbas-n">
                <view class="SetListCenTime row" @click="SelectDate">
                    <text>{{year}}年</text>
                    <text>{{month}}月</text>
                    <u-icon name="arrow-down" size="28"></u-icon>
                </view>
                <view class="SetListCenSSE">
                    总销售额：
                    <text>¥518960</text>
                </view>
            </view>
            <scroll-view :scroll-y="true"
            style="height: 1px;flex: 1;box-sizing: border-box;border-radius: 18rpx;overflow: hidden;"
            @scroll="scroll">
                <view class="SetListListBox">
                    <view class="SetListList activeJD" 
                    v-for="(item,index) in 10" :key="index">
                        <view class="SetListListTitle">
                            <text>
                                酒店
                            </text>
                            <view></view>
                        </view>
                        <view class="SetListListDec">
                            星空九寨~九寨沟.黄龙.熊猫乐园.纯玩3天(4人定制小包团·赠送...
                        </view>
                        <view class="SetListListDecNum">¥1440，2人</view>
                        <view class="SetListListTime row-sbas-n items-center">
                            <view>完结时间：2025-04-01</view>
                            <view class="SetListListTimeR">¥2880</view>
                        </view>
                    </view>
                </view>
                <view style="height: 20rpx;"></view>
            </scroll-view>
            
            <!-- <u-alert-tips :close-able="false"
            style="padding: 30rpx 30rpx;border-radius: 18rpx;"
            type="warning"
            title="2025年2月1日（包含）起生效"
            description="积分：平台所有跟团游产品均可参加积分活动，积分获得比例：100:1（例：客人实付金额100元，获得1个积分)。团队出发后7个工作日内将会存入积分余额。"
            ></u-alert-tips> -->
        
        
        </view>
        <u-picker mode="time" v-model="showTime" :defaultTime="times" :params="params" @confirm = 'confirm'></u-picker>
    </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: 2025,
            month: 12,
            date: 31,
            times: null,
            showTime: false,
            msg: {
                QStartDate: '',
                QEndDate: ''
            },
            scrollHeight: 0,
            scrollTop: 0,
        }
    },
    onLoad(options) {

    },
    onShow() {
    },
    mounted() {
        
    },
    methods: {
        goTisp(){
            this.scrollTop = this.scrollHeight
        },
        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()
        },
        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");
.SetListBox{
    height: 100vh;
    overflow: hidden;
}
.SetListHeaderBox{
    height: 400rpx;
}
.SetListHeaders{
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
}
.SetListHeader{
    padding: 25rpx 40rpx 0 40rpx;
}
.SetListHeaderL{
    width: 88rpx;
    height: 88rpx;
    border-radius: 50%;
    overflow: hidden;
}
.SetListHeaderL image{
    width: 100%;
    height: 100%;
    display: block;
}
.SetListCenterBox{
    padding: 0 30rpx;
    height: 1px;
    flex: 1;
}
.SetListHeaderR{
    margin-left: 25rpx;
    color: #080A0A;
}
.SetListHeaderRTitle{
    font-weight: bold;
    font-size: 40rpx;
}
.SetListHeaderRLV{
    font-weight: bold;
    font-size: 20rpx;
    margin-top: 10rpx;
}

.SetListCenTjBox{
    height: 200rpx;
    border-radius: 18rpx;
    padding: 48rpx 43rpx 41rpx 47rpx;
    margin-top: -46rpx;
}
.SetListCenTjTitle{
    font-weight: bold;
    font-size: 24rpx;
    color: #080A0A;
    margin-bottom: 12rpx;
}
.SetListCenTNumL{
    font-family: Alibaba PuHuiTi;
    font-weight: 800;
    font-size: 46rpx;
    color: #080A0A;
}
.SetListCenTNumL text{
    font-size: 66rpx;
}
.SetListCenTImgR view{
    width: 185rpx;
    height: 59rpx;
    background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638796304440442295.png')no-repeat;
    background-size: 100% 100%;
    color: #fff;
    font-weight: bold;
    font-size: 30rpx;
    text-align: center;
    line-height: 59rpx;
}

.SetListCenTimeBox{
    padding: 40rpx 0 30rpx 0;
}
.SetListCenTime{
    font-weight: 500;
    font-size: 24rpx;
    color: #000;
}
.SetListCenTime u-icon{
    margin-left: 10rpx;
    position: relative;
    top: -2rpx;
    color: #000;
}
.SetListCenSSE{
    font-weight: bold;
    font-size: 24rpx;
    color: #080A0A;
}
.SetListCenSSE text{
    font-size: 32rpx;
    margin-left: 10rpx;
}

.SetListList{
    padding: 38rpx;
    background: #FFFFFF;
    border-radius: 18rpx;
    margin-bottom: 34rpx;
}
.SetListListTitle{
    font-weight: bold;
    font-size: 28rpx;
    color: #080A0A;
    position: relative;
}
.SetListListTitle view{
    width: 43rpx;
    height: 8rpx;
    border-radius: 3rpx;
    position: absolute;
    left: 6rpx;
    bottom: 5rpx;
    z-index: 0;
}
.SetListListTitle text{
    position: relative;
    z-index: 2;
}
.SetListList.activeJD .SetListListTitle view{
    background: #3175FF;
}
.SetListList.activeLY .SetListListTitle view{
    background: #FF3166;
}
.SetListList.activeZC .SetListListTitle view{
    background: #1BCB8B;
}
.SetListList.activeJP .SetListListTitle view{
    background: #FF9731;
}
.SetListList.activeQZ .SetListListTitle view{
    background: #9B2020;
}
.SetListListDec{
    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;
}
.SetListListDecNum{
    font-weight: 500;
    font-size: 24rpx;
    color: #757776;
    margin-bottom: 5rpx;
}
.SetListListTime{
    font-weight: 500;
    font-size: 24rpx;
    color: #757776;
}
.SetListListTimeR{
    font-weight: bold;
    font-size: 32rpx;
    color: #080A0A;
}

.SetListHeaderNTR{
    color: #FFE6A2;
}
.SetListHeaderNTR view:first-child{
    color: #FFE6A3;
}
.SetListBox.activeLv1 .SetListCenTjBox{
    background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638797251203371680.png')no-repeat;
    background-size: 100% 100%;
}
.SetListBox.activeLv2 .SetListCenTjBox{
    background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638797251202995280.png')no-repeat;
    background-size: 100% 100%;
}
.SetListBox.activeLv3 .SetListCenTjBox{
    background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638797251203185715.png')no-repeat;
    background-size: 100% 100%;
}
.SetListBox.activeLv4 .SetListCenTjBox{
    background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638797251202097257.png')no-repeat;
    background-size: 100% 100%;
}
.SetListBox.activeLv5 .SetListCenTjBox{
    background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638797251201618520.png')no-repeat;
    background-size: 100% 100%;
}
.SetListBox.activeLv5 .SetListHeaderR{
    color: #fff;
}
.SetListBox.activeLv5 .SetListCenTNumL{
    color: #66CBFF;
}
.SetListBox.activeLv5 .SetListCenTjTitle{
    color: #4A7084;
}
.SetListBox.activeLv5 .SetListCenTime,
.SetListBox.activeLv5 .SetListCenTime u-icon,
.SetListBox.activeLv5 .SetListCenSSE{
    color: #D8E9F2;
}
.SetListBox.activeLv1{
   background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638797225275441361.png')no-repeat #F0F8FF; 
   background-size: 100% auto;
}
.SetListBox.activeLv2{
   background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638797225275568236.png')no-repeat #F9F5EE; 
   background-size: 100% auto;
}
.SetListBox.activeLv3{
   background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638797225274249868.png')no-repeat #F2F2FE; 
   background-size: 100% auto;
}
.SetListBox.activeLv4{
   background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638797225275646201.png')no-repeat #F0F5F7; 
   background-size: 100% auto;
}
.SetListBox.activeLv5{
   background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638797259203314911.png')no-repeat #061309; 
   background-size: 100% auto;
}

</style>
