<style lang="scss" scoped>
	@import url("@/asset/css/flex.css");
    .teamLeaderTitle{
        background: linear-gradient(-30deg, #47A5FF, #4779FF);
    }
    .teamLeaderIndex{
        width: 100%;
		height: 100vh;
		background: #f3f4f6;
        overflow: hidden;
    }
    .teamLeaderHeaderBox {
		background: #fff;
	}
    .teamLeaderHeader {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 89rpx 20rpx 89rpx;
	}
    .teamLeaderHeadText {
        position: relative;
        color: #333;
    
	}
    .textLine{
        position: absolute;
        left: 0;
        right: 0;
        bottom: -20rpx;
    }
    .textLine view{
        width: 40rpx;
        height: 4rpx;
        background: #257BF1;
        margin: auto;
    }

	.teamLeaderHeadText {
		padding: 0 27rpx;
		font-size: 32rpx;
		white-space: nowrap;
	}

	.teamLeaderHeadText.active {
		color: #257BF1;
	}
    .list-box{
        background: #fff;
        border-radius: 8rpx;
        margin: 30rpx 29rpx 0 29rpx;
    }
    .list-top{
        padding: 21rpx 20rpx;
    }
    .list-top-tisp{
        width: 32rpx;
        height: 32rpx;
        background: #FFB400;
        border-radius: 4rpx;
        font-weight: 500;
        font-size: 24rpx;
        color: #FFFFFF;
        text-align: center;
        line-height: 32rpx;
        margin-right: 15rpx;
    }
    .list-top-text{
        font-weight: 400;
        font-size: 28rpx;
        color: #333333;
        margin-right: 20rpx;
    }
    .list-top-right{
        font-weight: 500;
        font-size: 24rpx;
        color: #FF5F3D;
    }
    .list-top-right.active1{
        color: #333;
    }
    .list-top-right.active2{
        color: #0acc82;
    }
    .list-title-box{
        font-weight: 500;
        font-size: 28rpx;
        color: #333333;
        position: relative;
        text-indent: 30rpx;
        padding: 0 20rpx;
    }
    .list-title{
        margin-bottom: 19rpx;
        position: relative;
    }
    .list-title::after{
        content: '';
        position: absolute;
        left: 0;
        top: 18rpx;
        width: 6rpx;
        height: 6rpx;
        background: #333;
    }
    .list-title text{
        font-weight: 400;
        font-size: 24rpx;
        color: #999999;
        margin-left: 21rpx;
    }
    .list-time{
        text-align: right;
        font-weight: 400;
        font-size: 24rpx;
        color: #333333;
        border-top: 1px dashed #ccc;
        padding: 32rpx 0 21rpx 0;
        margin: 0 20rpx 0 20rpx;
    }

</style>
<template>
    <view class="teamLeaderIndex column" >
        <view class="teamLeaderTitle">
            <headers :title="pageTitle" color="#fff"></headers>
        </view>
        <view class="teamLeaderHeaderBox">
			<view class="teamLeaderHeader row justify-between">
				<view class="teamLeaderHeadText" 
                v-for="(item,index) in stateList"
                @click.stop="changeState(item)"
                :class="[msg.TCStatus==item.id?'active':'']">
					<view>{{ item.name }}</view>
                    <view v-if="msg.TCStatus==item.id" class="textLine">
                        <view></view>
                    </view>
				</view>
			</view>
		</view>
        <u-empty v-if="dataList.length == 0 && !loading" text="暂无相关团信息" mode="data" color="#333"></u-empty>
        <view class="flex1" style="padding-bottom: 100rpx;">
            <scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" 
            @scrolltolower="lower" style="height: 84vh;">
                <template v-if="dataList.length>0">
                    <view class="list-box" v-for="(item,index) in dataList" :key="index"
                    @click="goTeamLeader(item)">
                        <view class="list-top row justify-between">
                            <view class="list-top-left row items-center">
                                <view class="list-top-tisp" v-if="item.TravelPriceList.length>1">合</view>
                                <view class="list-top-text">{{ item.LineName }}</view>
                                <u-icon name="arrow" size="28" color="#ccc"></u-icon>
                            </view>
                            <view class="list-top-right"
                            :class="[item.TravelPriceList[0].LeaderApplyStatus==2?'active2':item.TravelPriceList[0].LeaderApplyStatus==0?'active1':'']">{{ item.TravelPriceList[0].LeaderApplyStatusName }}</view>
                        </view>
                        <view class="list-title-box">
                            <view class="list-title" v-for="(child,i) in item.TravelPriceList" :key="i">
                                {{ child.TCNUM }}<text>({{ child.LtName }})</text>    
                            </view>     
                        </view>
                        <view class="list-time">
                            {{ item.TravelPriceList[0].StartDate }}
                        </view>  
                    </view>
                </template>
                <u-loadmore v-if="!loading&&dataList.length>0" :status="status" :load-text="loadText" :font-size="24" :margin-top="20"
					:margin-bottom="100" bg-color="#f3f4f6" />
                <view style="height: 1rpx;"></view>
            </scroll-view>
        </view>
    </view>
</template>
<script>
import headers from "@/components/header/header";
export default {
    components: {
        headers
    },
    data() {
        return {
            pageTitle: '团队',
            stateList: [
                {
                    name: "当前",
                    id: 2,
                },
                {
                    name: "未开始",
                    id: 1,
                },
                {
                    name: "已结束",
                    id: 3,
                }
            ],
            contentHeight: 0,
            dataList: [],
            page_count: 1,
            loading: false,
            status: "loadmore",
            loadText: {
                loadmore: "轻轻上拉，加载更多",
                loading: "努力加载中",
                nomore: "没有更多了",
            },
            msg:{
                "pageIndex": 1,
                "pageSize": 10,
                LineId:'',//	线路	
                LineteamId:'',//	系列	
                TCNUM:'',//	团号		
                StartGroupDate:'',//	开始团期		
                EndGroupDate:'',//	结束团期		
                // total:'',//
                // noData:'',//
                // currentPage: 1,//		
                TCStatus: 2,//	团期状态 0不限 1未开始，2进行中，3已结束	
                LeaderId: '',//	领队id2811 3036
                orderBy: 1,
            },
            b2b_user_info: {}
        }
    },
    onLoad(option){
        this.b2b_user_info = uni.getStorageSync('b2b_user')
        if(option.LeaderId) this.msg.LeaderId = option.LeaderId
        else this.msg.LeaderId = this.b2b_user_info.erpBaseInfo.employeeId
        this.init()
    },
    onShow(){
        if(this.b2b_user_info.erpBaseInfo&&this.b2b_user_info.erpBaseInfo.employeeId) this.msg.LeaderId = this.b2b_user_info.erpBaseInfo.employeeId
    },
    created() {
        this.contentHeight = this.$utils.calcContentHeight(-40) + "px";
        this.mainColor = this.$uiConfig.mainColor;
    },
    mounted() {

    },
    methods: {
        goTeamLeader(item){
            let datas = {
                LineName: item.LineName,
            }
            uni.navigateTo({
                url: `/pages/teamLeader/index?TCIDs=${item.TCIDs}&datas=${encodeURIComponent(JSON.stringify(datas))}`,
            })
        },
        changeState(item){
            if(this.loading) return uni.showToast({
                title: '正在加载...',
                icon: 'loading'
            })
            this.msg.TCStatus = item.id
            this.resetQuery()
        },
        resetQuery() {
            this.dataList = []
            this.msg.pageIndex = 1
            this.init()
        },
        init() {
            if(this.loading) return
            this.loading = true;
            uni.showLoading()
            if(this.msg.pageIndex==1) this.couponDataList = []
            this.apipost("travel_get_GetUniteDmcPageList", this.msg, (res) => {
                if (res.resultCode == 1) {
                    uni.hideLoading()
                    this.loading = false;
                    const d = res.data.pageData;
                    this.page_count = res.data.pageCount;
                    this.dataList = this.dataList.concat(d)
                    this.dataList = this.dataList.sort((a,b)=>{
                        return new Date(b.TravelPriceList[0].StartDate) - new Date(a.TravelPriceList[0].StartDate)
                    })
                    if(this.page_count==1) this.status = 'nomore'
                }else {
                    uni.hideLoading()
                }
            }, (failed) => {
                uni.hideLoading()
                uni.showToast({
                    title: failed.message,
                    icon: "none",
                });
                this.loading = false;
            }, (error) => {
                uni.hideLoading()
                this.loading = false;
            })
        },
        lower(e) {
            if (this.msg.pageIndex < this.page_count) {
                this.msg.pageIndex++;
                this.status = "loading";
                this.init();
            } else {
                this.status = "nomore";
            }
        },
    }
}
</script>