<template>
    <view class="SetListBox column"
    :class="[Details.Level>0?`activeLv${Details.Level}`:'activeLv1']">
        <view class="SetListHeaderBox">
            <headers :title="page"></headers>
            <view class="SetListHeader row items-center">
                <view class="SetListHeaderL">
                    <u-avatar v-if="b2bUser.photo||UserInformation.image" :src="b2bUser.photo?b2bUser.photo:UserInformation.image" size="88" shape="circle"></u-avatar>
                    <u-avatar v-else src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638748795455095258.png" size="88" shape="circle"></u-avatar>
                    <!-- <image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638748795455095258.png" />-->
                </view>
                <view class="SetListHeaderR">
                    <view class="SetListHeaderRTitle">{{ UserInformation.name }}</view>
                    <view class="SetListHeaderRLV">等级：
                        Lv{{ Details.Level>0?Details.Level:1 }}.
                        <template v-if="Details.Level<=1">出发序章</template>
                        <template v-else-if="Details.Level==2">秘境探索</template>
                        <template v-else-if="Details.Level==3">云端行者</template>
                        <template v-else-if="Details.Level==4">丝路征程</template>
                        <template v-else-if="Details.Level==5">寰宇旅人</template>
                    </view>
                </view>
            </view>
        </view>
        <view class="SetListCenterBox column" v-if="Details.TotalClosePrice>=0">
            <view class="SetListCenTjBox">
                <view class="SetListCenTjTitle">大红包额度</view>
                <view class="row-sbas-n items-center">
                    <view class="SetListCenTNumL">
                        ¥<text>{{ Details.TotalClosePrice.toFixed(2) }}</text>
                    </view>
                    <view class="SetListCenTImgR" 
                    v-if="Details.ContractStatus==3&&
                    Details.Status==2&&
                    Details.TotalClosePrice>0"
                    @click="showPreviwe=true">
                        <view>
                            立即提现
                        </view>
                    </view>
                </view>
            </view>
            <view class="SetListCenTimeBox row-sbas-n">
                <view class="row items-center">
                    <view class="SetListCenTimeAll"
                    :class="[isType==1?'active':'']"
                    @click="SelectDate(1)">
                        全部
                    </view>
                    <view class="SetListCenTime row">
                        <view  @click="SelectDate(2)"
                        :class="[isType==2||isType==0?'active':'']">
                            <text>{{year}}年</text>
                            <text>{{month}}月</text>
                        </view>
                        <u-icon @click="SelectDate(0)" name="arrow-down" size="28" color="#000"></u-icon>
                    </view>
                    </view>
                <view class="SetListCenSSE">
                    总销售额：
                    <text>¥{{ total }}</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 activeLY" 
                    v-for="(item,index) in CustomerOrderList" :key="index"
                    @click="goDetails(item)">
                        <view class="SetListListTitle">
                            <text>
                                旅游
                            </text>
                            <view></view>
                        </view>
                        <view class="SetListListDec">
                            {{ item.Title }}
                        </view>
                        <view class="SetListListDecNum">¥{{item.Unit_Price}}，{{item.GuestNum}}人</view>
                        <view class="SetListListTime row-sbas-n items-center">
                            <view>下单时间：{{ item.CreateDate }}</view>
                            <view class="SetListListTimeR">¥{{item.Money}}</view>
                        </view>
                    </view>
                </view>
                <u-empty v-if="CustomerOrderList.length == 0" text="暂无数据" mode="data"></u-empty>
                <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-popup v-model="showPreviwe" mode="bottom" 
        border-radius="50" length="50%" 
        :safe-area-inset-bottom="true">
            <view class="signAconForm column">
                <view class="signAconBox col">
                    <view class="signAconTitle">发票</view>
                    <view class="signAconImg row items-center"
                    :class="[InvoiceUrl==''?'signAconImgYYZZ':'']">
                        <view v-if="InvoiceUrl==''" class="signAconImgBut">上传发票</view>
                        <uploadImg class="signAconUp"
                        :img="InvoiceUrl"
                        @onSuccess="(data)=>{onSuccess(data)}"
                        ></uploadImg>
                    </view>
                </view>
                <view class="signAconNext col"
                :class="[!loading&&InvoiceUrl?'active':'']" @click="Applyfor()">
                    提交
                </view>
            </view>
        </u-popup>
        <u-picker mode="time" v-model="showTime" :defaultTime="times" :params="params" @confirm = 'confirm'></u-picker>
        <auth v-if="showAuth&&is_show_auth==1" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
    </view>
</template>
<script>
import auth from "@/components/auth/index.vue";
import headers from "@/components/header/header";
import uploadImg from "./components/upload";
export default {
    components: {
        auth,
        headers,
        uploadImg
    },
    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: '',
                YearMonth: '',
            },
            scrollHeight: 0,
            scrollTop: 0,
            U: {},
            showAuth: false,
            is_show_auth: 0,
            b2bUser:{},
            isType: 2,
            ContractId: 0,
            Details: {},
            CustomerOrderListAll: [],
            CustomerOrderList: [],
            UserInformation: null,
            total: 0,
            showPreviwe: false,
            InvoiceUrl: '',
            loading: false,
        }
    },
    watch:{
        CustomerOrderList: {
			handler (val, oldval) {
                this.count()
            },
            deep: false,
            immediate: false,
        },
    },
    onLoad(options) {
        this.ContractId = options.ContractId
    },
    onShow() {
        this.U = uni.getStorageSync("mall_UserInfo");
        this.b2bUser = uni.getStorageSync("b2b_user");
        let basedata = uni.getStorageSync("basedata");
        //判断后台是否开启自动授权
        if (basedata && basedata.mall
        && basedata.mall.setting 
        && basedata.mall.setting.is_show_auth ==1) {
            this.is_show_auth = 1;
        }

        if (!this.U) {
            this.U = {
                nickName: "未登录",
                avatarUrl: "",
            };
            this.showAuth = true;
        } else if (!this.b2bUser && this.is_show_auth == 1) {
            this.U = {
                nickName: "未登录",
                avatarUrl: "",
            };
            this.showAuth = true;
        }

        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.msg.YearMonth = this.year + '-' + this.month
    },
    mounted() {
        this.GetCustomerCenter()
        this.getSignDetails()
    },
    methods: {
        onSuccess(data) {
            this.InvoiceUrl = data.BusinessLicense?data.BusinessLicense:'';
        },
        goDetails(item){
            return
            let url = null
            let msg = null
            msg = `orderId=${item.erpOrderId}`
            if(item.goodsType==2) url = `jiuzhai/jz_SureOrder?`//线路
            else if(item.goodsType==4){//景点门票
            }else if(item.goodsType==3){//酒店住宿
            }else if(item.goodsType==5){//目的地用车
            }else if(item.goodsType==6) url = `visa/visa_SureOrder?`//签证  
            else if(item.goodsType==1){//机票
                url = `airTicket/airTicketOrderDetail?`
                msg = `id=${item.erpOrderId}`
            }
            if(url) {
                let path = `/pages/${url}${msg}`
                uni.navigateTo({
                    url: path,
                });
            }
        },
        Applyfor(){
            if(!this.ContractId) return uni.showToast({
                title: '请先选择合同',
                icon:'none',
                duration: 2000, 
            })
            if(this.InvoiceUrl=="") return uni.showToast({
                title: '请上传发票',
                icon:'none',
                duration: 2000, 
            })
            if(this.loading) return
            uni.showLoading({
                title: '提交中...',
                mask: true 
            })
            this.loading =true
            this.apipost('app_customer_Update2025ClearingAlliance',
                {
                    ContractId: this.ContractId,
                    InvoiceUrl: this.InvoiceUrl,
                },
                (res) => {
                    if(res.resultCode == 1){
                        uni.showToast({
                            title: '提交成功',
                            icon: 'success',
                            duration: 2000, 
                        })
                        this.loading = false
                        uni.navigateTo({
                            url: `/pages/bigredrnvelope/PaymentProgress?type=3&ContractId=${this.ContractId}`
                        })
                    }
                    uni.hideLoading()
                },err=>{
                    uni.showToast({
                        title: err.message,
                        icon:'none',
                        duration: 2000,	
                    })
                    this.loading = false
                    uni.hideLoading()
                }
            );
            
        },
        GetCustomerCenter(){
            this.apipost('b2b_get_GetCustomerCenter_New',
                {},
                (res) => {
                    this.UserInformation = res.data
                },err=>{
                   
                }
            );
        },
        getSignDetails(){
            uni.showLoading({
                title: '加载中',
                mask: true
            })
            this.apipost('app_customer_GetAuthenticationContractDetails',{
                ContractId: this.ContractId
            },
            res=>{
                if (res.resultCode == 1) {
                    let data = res.data
                    this.Details = data
                    this.CustomerOrderListAll = data.CustomerOrderList
                    this.getCustomerOrderList()
                    uni.hideLoading()
                    this.$forceUpdate()
                }
            })
        },
        getCustomerOrderList(){
            this.CustomerOrderList = this.CustomerOrderListAll.filter(item=>{
                return this.msg.YearMonth == item.CreateDate.slice(0,7)
            })
        },
        count(){
            let total = 0;
            if (this.CustomerOrderList.length>0) {
                this.CustomerOrderList.forEach(order => {
                    total += Number(order.Money);
                });
            }
            this.total=total.toFixed(2);
            this.$forceUpdate()
        },
        goTisp(){
            this.scrollTop = this.scrollHeight
        },
        confirm(e){
            uni.hideLoading()
            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.msg.YearMonth = this.year + '-' + this.month
            this.getCustomerOrderList()
            this.showTime = false
            // this.scrollTop = 630
        },
        SelectDate(type){
            this.isType = type;
            if(type==1){
                this.CustomerOrderList = JSON.parse(JSON.stringify(this.CustomerOrderListAll))
            }else if(type==2){
                this.getCustomerOrderList()
            }else{
                this.showTime = true
            }
            // this.scrollTop = 630
        },
        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");
.signAconBox{
    background: #fff;
    border-radius: 20rpx;
    padding: 50rpx 43rpx 43rpx 43rpx;
    margin: 0 30rpx;
}
.signAconTitle{
    font-size: 38rpx;
    font-weight: 800;
    margin-bottom: 40rpx;
}
.signAconText{
    font-size: 28rpx;
    color: #7686A3;
    font-weight: 500;
    margin-top: 10rpx;
    margin-bottom: 40rpx;
}
.signAconImgBut{
    border-radius: 50rpx;
    border: 1rpx solid #0399FF;
    color: #0399FF;
    background: #F3F5F9;
    font-size: 32rpx;
    font-weight: 800;
    margin: auto;
    line-height: 80rpx;
    padding: 0 31rpx;
}
.signAconImg{
    width: 100%;
    height: 379rpx;
    border-radius:20rpx;
    position: relative;
    overflow: hidden;
    margin-bottom: 20rpx;
    background: #F3F5F9;
}
.signAconImg.signAconImgYYZZ{
    background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638796480136781668.png')no-repeat;
    background-size: 100% 100%;
}
.signAconNext{
    border-radius: 10rpx;
    background: #AAD7F7;
    margin: 0 30rpx;
    line-height: 85rpx;
    text-align: center;
    color: #fff;
    margin-top: 65rpx;
    margin-bottom: 100rpx;
}
.signAconNext.active{
    background: #0399FF;
    border: 2rpx solid #0399FF;
}
.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;
}
.SetListCenTimeAll{
    border-radius: 10rpx;
    padding: 0 15rpx 0 0;
    font-size: 24rpx;
    margin-right: 20rpx;
}
.SetListBox.activeLv1 .SetListCenTimeAll.active,
.SetListBox.activeLv1 .SetListCenTime .active{
    color: #3175FF;
}
.SetListBox.activeLv2 .SetListCenTimeAll.active,
.SetListBox.activeLv2 .SetListCenTime .active{
    color: #E8AA4B;
}
.SetListBox.activeLv3 .SetListCenTimeAll.active,
.SetListBox.activeLv3 .SetListCenTime .active{
    color: #7D49EA;
}
.SetListBox.activeLv4 .SetListCenTimeAll.active,
.SetListBox.activeLv4 .SetListCenTime .active{
    color: #44667C;
}
.SetListBox.activeLv5 .SetListCenTimeAll.active,
.SetListBox.activeLv5 .SetListCenTime .active{
    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 9rpx 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>
