<style lang="scss" scoped>

	@import url("@/asset/css/flex.css");
    .itinInfoHeaderBox{
        background: linear-gradient(-30deg, #4779FF, #47A5FF);
    }
    .itinInfoTitle{
        position: relative;
        z-index: 3
    }
    .itinInfoTitle.fixed{
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        z-index: 2;
        background: linear-gradient(-30deg, #4779FF, #47A5FF);
    }
    .itinInfoTitle.fixed .itinInfoTsBox{
        top: 22rpx;
    }
    .teamLeader-currency{
        font-size: 24rpx;
        border-radius: 30rpx;
        // border: 1px solid #fff;
        padding: 8rpx 20rpx;
        position: absolute;
        right: 210rpx;
        top: 118rpx;
        color: #fff;
    }
    .teamLeader-currency text{
        margin-right: 15rpx;
    }
    .triangle {
        width: 0;
        height: 0;
        border-left: 8rpx solid transparent;
        border-right: 8rpx solid transparent;
        border-top: 8rpx solid #fff;
    }
    .itinInfoNum view{
        border: 1px solid #75B7FF;
        border-radius: 22rpx;
        height: 47rpx;
        line-height: 40rpx;
        margin: 0 18rpx;
        padding: 0 20rpx;
        overflow: hidden;
    }
    .itinInfoCarNum{
        margin-top: 35rpx;
    }
    .itinInfoCarNum>view{
        height: 57rpx;
        line-height: 50rpx;
        background: rgba(1, 48, 176, .2);
    }
    .itinInfoCarNum>view:last-child{
        background: rgba(1, 48, 176, .1);
    }
    .itinInfoLeader{
        color: #0844B9 ;
        padding: 17rpx 0;
    }
    .itineraryInformationCenter{
        box-shadow: 0rpx 1rpx 6rpx 0rpx rgba(102,102,102,0.4);
        border-radius: 10rpx;
    }
    .itineraryInformationCtime{
        border-bottom: 1px dashed rgba(0, 0, 0, .1); 
        margin: 0 23rpx;   
    }
    .itineraryInformationCtext{
        margin-left: 23rpx; 
        margin-right: 23rpx; 
        align-items: flex-start;
        padding: 16rpx 0;
    }
    .itineraryInformationCtext:last-child{
        padding-top: 0;
    }
    .itineraryInformationCtext>view:first-child{
        width: 100rpx;
        text-align: right;
        color: #333;
        padding-top: 5rpx;
    }
    .itineraryInformationCtext .din{
        padding: 16rpx 0;
        margin-top: 12rpx;
    }
    .itineraryInformationCtext>view:last-child{
        margin-left: 30rpx;
    }
    .itineraryInformationCtext view:last-child view{
        border-bottom: 1px dashed rgba(0, 0, 0, .1);
        padding: 16rpx 0;
    }
    .itineraryInformationCtext view:last-child view:last-child{
        border: 0
    }
    .itineraryInformationSCenter{
        box-shadow: 0rpx 1rpx 6rpx 0rpx rgba(102,102,102,0.4);
        border-radius: 10rpx;
    }
    .itineraryInformationSCenter view view{
        
    }
    .itineraryInformationSCenter view .left{
        width: 150rpx;
        text-align: right;
        color: #333;
        padding-top: 26rpx;
    }
    .itineraryInformationSCenter view view:last-child{
        border-bottom: 1px dashed rgba(0, 0, 0, .1);
    }
    
</style>
<template>
     <view style="height: 100vh;">
        <scroll-view v-if="datas&&datas.length>0" class="itinInfoBox" scroll-y="true"
        :enable-back-to-top="true" :enable-flex="true"
        @scroll="scroll" style="height: 100vh;">
            <view class="itinInfoHeaderBox colorFFF">
                <view class="itinInfoTitle">
                    <headers textAlign="left" :title="pageTitle" color="#fff"></headers>
                    <view class="teamLeader-currency row items-center" @click="goUrl('/pages/teamLeader/itineraryDetails')"><text>行程详情</text></view>
                </view>
                <view class="itinInfoTitle fixed"
                :style="{ opacity: boxOption + '%' }">
                    <headers textAlign="left" :title="pageTitle" color="#fff"></headers>
                    <view class="teamLeader-currency row items-center" @click="goUrl('/pages/teamLeader/itineraryDetails')"><text>行程详情</text></view>
                </view>
                <view class="fz28 row justify-center items-center fz28" style="color: #D5E2FF;">
                    <img v-if="datas.length>1" class="MR20" style="width: 31rpx;height: 31rpx;display: inline-block;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638874927031858279.png"/>
                    <text>团号</text>
                </view>
                <view class="row justify-center items-center PT20 PB10" @click="datas.length>1?optionVisible=true:''">
                    <text class="fz36">{{ datas[currentIndex].TCUNM }}</text>
                    <view class="triangle ML10" v-if="datas.length>1"></view>
                </view>
                <view class="itinInfoNum row justify-center fz24">
                    <view>{{ datas[currentIndex].BusType?datas[currentIndex].BusType:'暂无车型'}}（{{ datas[currentIndex].BusSeatNum?datas[currentIndex].BusSeatNum:0}}席）</view>
                    <view>{{ datas[currentIndex].TotalGuest?datas[currentIndex].TotalGuest:0}}人</view>
                </view>
                <view class="itinInfoCarNum row fz24">
                    <view class="flex1 row justify-center">
                        <view style="color: #D5E2FF;">车牌号</view>
                        <view class="ML25">{{ datas[currentIndex].BusCode?datas[currentIndex].BusCode:'无'}}</view>
                    </view>
                    <view class="flex1 row justify-center">
                        <view style="color: #D5E2FF;">举牌接机</view>
                        <view class="ML25">{{ datas[currentIndex].PickupStr?datas[currentIndex].PickupStr:'无'}}</view>
                    </view>
                </view>
            </view>
            <view class="itinInfoLeader row fz24">
                <view class="flex1 row justify-center">
                    <view>领队：</view>
                    <view>{{ datas[currentIndex].LeaderName?datas[currentIndex].LeaderName:'无' }}</view>
                </view>
                <view class="flex1 row justify-center">
                    <view>导游：</view>
                    <view>{{ datas[currentIndex].GuidName?datas[currentIndex].GuidName:'无' }}</view>
                </view>
            </view>
            <view class="row justify-center items-center">
                <img style="width: 25rpx;height: 32rpx;display: inline-block;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638874931415480953.png"/>
                <text class="ML20 fz28">行程概要</text>
            </view>
            <view class="itineraryInformationCBox PX30" v-if="datas[currentIndex]&&datas[currentIndex].JourneyInfoList&&datas[currentIndex].JourneyInfoList.length>0">
                <view class="MT30 itineraryInformationCenter" v-for="(item,index) in datas[currentIndex].JourneyInfoList">
                    <view class="itineraryInformationCtime PY20 text-center fz24">{{item.JourneyTimeStr}}</view>
                    <view class="itineraryInformationCtext row">
                        <view class="fz24">用车情况</view>
                        <view class="flex1 fz28 fontWeight500">{{item.UseBusStr?item.UseBusStr:'无'}}</view>
                    </view>
                    <view class="itineraryInformationCtext row">
                        <view class="fz24">航班</view>
                        <view class="flex1 fz28 fontWeight500">{{item.FlightStr?item.FlightStr:'无'}}</view>
                    </view>
                    <view class="itineraryInformationCtext row">
                        <view class="fz24">行程内容</view>
                        <view class="flex1 fz28 fontWeight500">{{item.JourneyStr?item.JourneyStr:'无'}}</view>
                    </view>
                    <view class="itineraryInformationCtext row">
                        <view class="fz24">酒店</view>
                        <view class="flex1 fz28 fontWeight500">{{item.HotelName?item.HotelName:'无'}}</view>
                    </view>
                    <view class="itineraryInformationCtext row">
                        <view class="fz24">酒店联系</view>
                        <view class="flex1 fz28 fontWeight500">{{item.HotelTel?item.HotelTel:'无'}}</view>
                    </view>
                    <view class="itineraryInformationCtext row">
                        <view class="fz24">结算方式</view>
                        <view class="flex1 fz28 fontWeight500">{{item.HotelPayStyle?item.HotelPayStyle:'无'}}</view>
                    </view>
                    <view class="itineraryInformationCtext row">
                        <view class="fz24">车牌号</view>
                        <view class="flex1 fz28 fontWeight500">{{item.BusNum?item.BusNum:'无'}}</view>
                    </view>
                    <view class="itineraryInformationCtext row">
                        <view class="fz24">司机信息</view>
                        <view class="flex1 fz28 fontWeight500">{{item.DriverName?item.DriverName:'无'}}</view>
                    </view>
                    <view class="itineraryInformationCtext row">
                        <view class="fz24">司机电话</view>
                        <view class="flex1 fz28 fontWeight500">{{item.DriverTel?item.DriverTel:'无'}}</view>
                    </view>
                    <view class="itineraryInformationCtext row">
                        <view class="fz24">司机住宿</view>
                        <view class="flex1 fz28 fontWeight500">{{item.DriverHouse?item.DriverHouse:'无'}}</view>
                    </view>
                    <view class="itineraryInformationCtext row">
                        <view class="fz24">用车备注</view>
                        <view class="flex1 fz28 fontWeight500">{{item.BusRemark?item.BusRemark:'无'}}</view>
                    </view>
                    <view class="itineraryInformationCtext row">
                        <view class="fz24 din">餐食</view>
                        <view class="flex1 column fz28 fontWeight500">
                            <view class="flex1" v-for="(child,index) in item.JourneyDinningInfoList">
                                {{child.DinningStr?`${child.DinningStr}(${child.UseDinnerTypeStr})`:'无'}}
                            </view>
                            <view class="flex1" v-if="item.JourneyDinningInfoList.length==0">
                                无
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="MT30 row justify-center items-center">
                <img style="width: 32rpx;height: 27rpx;display: inline-block;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638874937294094501.png"/>
                <text class="ML20 fz28">购物店</text>
            </view>
            <view class="itineraryInformationCBox PX30">
                <view v-if="datas[currentIndex]&&datas[currentIndex].ShopList&&datas[currentIndex].ShopList.length>0" class="MT30 PB30 itineraryInformationSCenter">
                    <view class="row" v-for="(item,index) in datas[currentIndex].ShopList">
                        <view class="fz24 MR30 left PY20" v-if="item.PolicyAttention">{{item.PolicyAttention?item.PolicyAttention:'-'}}</view>
                        <view class="flex1 fz28 MT20 PY20 PL20">{{item.ShopName}}</view>
                    </view>
                </view>
                <view v-else class="fz26 text-center MT20">无购物店安排</view>
            </view>
            <view class="MT40 row justify-center items-center">
                <img style="width: 25rpx;height: 32rpx;display: inline-block;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638874937330393349.png"/>
                <text class="ML20 fz28">集团公司总部联络方式</text>
            </view>
            <view class="itineraryInformationCBox PX30">
                <view class="MT30 PB30 itineraryInformationSCenter"
                v-for="(item,index) in datas[currentIndex].PrincipalList">
                    <view class="row">
                        <view class="fz24 left PY20">车负责人</view>
                        <view class="flex1 fz28 ML30 PY20">{{item.BConfirmName?item.BConfirmName:'无'}}{{item.BConfirmMobile!=''?`/${item.BConfirmMobile}`:''}}</view>
                    </view>
                    <view class="row">
                        <view class="fz24 left PY20">门票负责人</view>
                        <view class="flex1 fz28 ML30 PY20">{{item.TConfirmName?item.TConfirmName:'无'}}{{item.TConfirmMobile!=''?`/${item.TConfirmMobile}`:''}}</view>
                    </view>
                    <view class="row">
                        <view class="fz24 left PY20">机票负责人</view>
                        <view class="flex1 fz28 ML30 PY20">{{item.CreateByName?item.CreateByName:'无'}}{{item.CreateByMobile!=''?`/${item.CreateByMobile}`:''}}</view>
                    </view>
                    <view class="row">
                        <view class="fz24 left PY20">订房负责人</view>
                        <view class="flex1 fz28 ML30 PY20">{{item.HConfirmName?item.HConfirmName:'无'}}{{item.HConfirmMobile!=''?`/${item.HConfirmMobile}`:''}}</view>
                    </view>
                    <view class="row">
                        <view class="fz24 left PY20">订餐负责人</view>
                        <view class="flex1 fz28 ML30 PY20">{{item.DConfirmName?item.DConfirmName:'无'}}{{item.DConfirmMobile!=''?`/${item.DConfirmMobile}`:''}}</view>
                    </view>
                </view>
            </view>
            <view style="height: 50rpx;"></view>
        </scroll-view>
        <currencyBottom v-if="currencyVisible" 
       :current="currentId"
       :currencyList="currencyList"
       @close="close" @change="popupCurrency"></currencyBottom>

       <singleChoice v-if="optionVisible" 
       :current="optionObj.id"
       :list="optionList"
       @close="close" @change="popupCurrent"></singleChoice>
    </view>
</template>
<script>
import headers from "@/components/header/header";
import currencyBottom from "./components/currencyBottom";
import singleChoice from "./components/singleChoice";
export default {
    components: {
        headers,
        currencyBottom,
        singleChoice
    },
    data() {
        return {
            pageTitle: '行程信息',
            boxOption: 0,
            currencyVisible: false,
            tcunmList: [],
            currentId: 0,
            currentIndex: 0,
            downImg:[
                'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638874827170491438.png',
                'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638874827279495359.png',
            ],
            typeImgs:[
                'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638874829614812469.png',
                'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638874829612454395.png',
                'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638874829612434651.png',
                'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638874829685012792.png'
            ],
            msg:{	
                TCIDs: '',//	领队id
            },
            datas: [],
            optionVisible: false,
            optionList: [],
            optionObj:{},
        }
    },
    onLoad(option){
        if(option.TCIDs){
            this.msg.TCIDs = option.TCIDs
            this.init()
        }
    },
    created() {

    },
    mounted() {

    },
    methods: {
        goUrl(url){
            uni.navigateTo({
                url: `${url}?configId=${this.datas[this.currentIndex].ConfigId}&TCID=${this.datas[this.currentIndex].PrincipalList[0].TCID}`,
            })
        },
        popupCurrency(value){
            this.currencyVisible = false
            this.currentId = value
            this.currentIndex = this.dataList.findIndex(item=>item.CurrencyId==value)
        },
        scroll(e) {
            this.boxOption = Math.floor((e.detail.scrollTop - 100) / 1.5);
            this.$forceUpdate();
        },
        close(){
            this.optionVisible = false
        },
        popupCurrent(value){
            this.optionVisible = false
            let findIndex = this.optionList.findIndex(x=>x.id==value)
            this.currentIndex = findIndex
            this.optionObj = this.optionList[findIndex]
        },
        init() {
            uni.showLoading()
            this.apipost("dmcstatistics_post_GetTravelAllInfo", this.msg, (res) => {
                if (res.resultCode == 1) {
                    uni.hideLoading()
                    this.datas = res.data
                    res.data.forEach((x,index) => {
                        this.tcunmList.push({
                            name: x.TCUNM,
                            id: index+1
                        })
                    });
                    this.optionList = this.tcunmList
                    this.optionObj = this.tcunmList[0]
                }
            }, (failed) => {
                uni.hideLoading()
                uni.showToast({
                    title: failed.message,
                    icon: "none",
                });
            }, (error) => {
                uni.hideLoading()
            })
        },
    },
}
</script>