<style lang="scss" scoped>
	@import url("@/asset/css/flex.css");
    .schedule{
        height: 100vh;
    }
    .scheduleHeaderBox{
        background: linear-gradient(-30deg, #4FA9FF, #4779FF);
        box-shadow: 0rpx 5rpx 35rpx 0rpx #4C97FF;
    }
    .scheduleTitle{
        // position: relative;
        z-index: 3
    }
    .scheduleTitle.fixed{
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        z-index: 2;
        background: linear-gradient(-30deg, #4FA9FF, #4779FF);
    }
    .scheduleTitle.fixed .scheduleTsBox{
        top: 22rpx;
    }
    .scheduleTsBox{
        // width: 60%;
        // position: absolute;
        // top: 118rpx;
        // left: 80rpx;
        // right: 300rpx;
        overflow: hidden;
    }
    .scheduleT-text{

    }
    .scheduleText{
        font-weight: 500;
        font-size: 32rpx;
        color: #ACCEFF;
        white-space: nowrap;
        margin-left: 22rpx;
        margin-right: 22rpx;
        margin-top: 22rpx;
        padding: 0 20rpx;
    }
    .scheduleText text{
        display: block;
    }
    .scheduleText view{
        border-radius: 4rpx;
        height: 8rpx;
        margin-top: 15rpx;
    }
    .scheduleText.active{
        color: #FFFFFF;
    }
    .scheduleText.active view{
        background: #FBCF20;
    }
    .schedule-Touxiang{
        width: 65rpx;
        height: 65rpx;
        background: #fff;
        border-radius: 50%;
        overflow: hidden;
    }
    .schedule-title{
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        overflow: hidden;
    }
    .triangle {
        width: 0;
        height: 0;
        border-left: 8rpx solid transparent;
        border-right: 8rpx solid transparent;
        border-top: 8rpx solid #fff;
    }
</style>
<template>
    <view style="height: 100vh;">
        <scroll-view class="scheduleBox" scroll-y="true"
        :enable-back-to-top="true" :enable-flex="true"
        @scroll="scroll" style="height: 100vh;">
            <view class="scheduleHeaderBox">
                <view class="scheduleTitle">
                    <headers textAlign="left" :title="pageTitle" color="#fff"></headers>
                    <view class="PT10 row justify-center items-center colorFFF" 
                    @click="BaseInfo.length>1?optionVisible=true:''">
                        <text class="fz36">{{ BaseInfo[currentIndex].TCNUMS }}</text>
                        <view class="triangle ML10" v-if="BaseInfo.length>1"></view>
                    </view>
                    <view class="PX40 PY20">
                        <view class="column" style="border-radius: 8rpx;overflow: hidden;">
                            <view class="colorFFF relative column" 
                            style="height: 386rpx;background:url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638868977886703780.png') no-repeat;background-size: 100% 100%;">
                                <img class="absolute" style="width: 100%;height: 386rpx;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638875686175608095.png"/>
                                <view class="absolute column" style="left: 0;right: 0;top: 0;bottom: 0;z-index: 2;">
                                    <view class="row items-center PX30 PT30">
                                        <view class="row items-center">
                                            <view class="schedule-Touxiang">
                                                <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638748795455095258.png" style="width: 65rpx;height: 65rpx;display: inline-block;"/>
                                            </view>
                                            <view class="schedule-name ML20">
                                                <view class="fz28">{{ BaseInfo&&BaseInfo[currentIndex].LeaderName?BaseInfo[currentIndex].LeaderName:'' }}</view>
                                                <view class="fz24">(领队)</view>
                                            </view>
                                        </view>
                                        <view class="row items-center ML50">
                                            <view class="schedule-Touxiang">
                                                <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638748795455095258.png" style="width: 65rpx;height: 65rpx;display: inline-block;"/>
                                            </view>
                                            <view class="schedule-name ML20">
                                                <view class="fz28">{{ BaseInfo&&BaseInfo[currentIndex].GuideName?BaseInfo[currentIndex].GuideName:'' }}</view>
                                                <view class="fz24">(导游)</view>
                                            </view>
                                        </view>
                                    </view>
                                    <view class="flex1"></view>
                                    <view class="schedule-title fz28 MB30 PX30">{{ BaseInfo&&BaseInfo[currentIndex].Titles?BaseInfo[currentIndex].Titles:'' }}</view>
                                    <view class="row PX30 justify-between items-center fz24 PB20">
                                        <view class="row items-center">
                                            <img style="width: 24rpx;height: 32rpx;display: inline-block;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638875688769461022.png"/>
                                            <text class="ML20">{{ BaseInfo&&BaseInfo[currentIndex].StartCityNames?BaseInfo[currentIndex].StartCityNames:'' }}</text>
                                        </view>
                                        <view class="row items-center">
                                            <img style="width: 22rpx;height: 32rpx;display: inline-block;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638875688811834355.png"/>
                                            <text class="ML20">{{ BaseInfo&&BaseInfo[currentIndex].TotalSeat?BaseInfo[currentIndex].TotalSeat:'' }}</text>
                                        </view>
                                    </view>
                                </view>
                            </view>
                            <view class="bgFFF PA30">
                                <view class="PB20 row justify-between items-center">
                                    <view class="color666">集合时间</view>
                                    <view class="color333">{{ BaseInfo&&BaseInfo[currentIndex].GatherTime?BaseInfo[currentIndex].GatherTime:'' }}</view>
                                </view>
                                <view class="PB20 row justify-between items-center">
                                    <view class="color666">出发时间</view>
                                    <view class="color333">{{ BaseInfo&&BaseInfo[currentIndex].FlightList?BaseInfo[currentIndex].FlightList[0].Departure_time:'' }}</view>
                                </view>
                                <view class="row justify-between items-center">
                                    <view class="color666">进出点</view>
                                    <view class="color333">{{ BaseInfo&&BaseInfo[currentIndex].InOut?BaseInfo[currentIndex].InOut:'' }}</view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <scroll-view class="scheduleTsBox" :scroll-x="true"
                    :scroll-left="scrollLeft"
                    @scroll="scrollHandler">
                        <view class="scheduleT-text row-aic-n">
                            <view class="scheduleText" 
                            :class="[params.type==item.id?'active':'']"
                            v-for="(item,index) in titles"
                            :key="index"
                            @click="getType(item)">
                            <text>{{ item.name }}</text>
                            <view></view>
                            </view>
                        </view>
                    </scroll-view>
                </view>
                <view class="scheduleTitle fixed"
                :style="{ opacity: boxOption + '%' ,'display':boxOption<=0?'none':'show'}">
                    <headers textAlign="left" :title="pageTitle" color="#fff"></headers>
                    <scroll-view class="scheduleTsBox" :scroll-x="true"
                    :scroll-left="scrollLeft"
                    @scroll="scrollHandler">
                        <view class="scheduleT-text row-aic-n">
                            <view class="scheduleText" 
                            :class="[params.type==item.id?'active':'']"
                            v-for="(item,index) in titles"
                            :key="index"
                            @click="getType(item)">
                            <text>{{ item.name }}</text>
                            <view></view>
                            </view>
                        </view>
                    </scroll-view>
                </view>
            </view>
            <infor1 v-if="params.type==1" :data="inforData1"></infor1>
            <infor2 v-if="params.type==2" :data="BaseInfo[currentIndex]"></infor2>
            <infor3 v-if="params.type==3" :data="BaseInfo[currentIndex].CommonReport"></infor3>
            <infor4 v-if="params.type==4" :data="BaseInfo[currentIndex].CommonReport"></infor4>
            <infor5 v-if="params.type==5" :data="BaseInfo[currentIndex].CommonReport"></infor5>
            <infor6 v-if="params.type==6" :data="BaseInfo[currentIndex].CommonReport"></infor6>
            <infor7 v-if="params.type==7" :data="shopList"></infor7>
            <infor8 v-if="params.type==8" :data="guestList"></infor8>
            <infor9 v-if="params.type==9" :data="JourneyTitle"></infor9>
        </scroll-view>
        <singleChoice v-if="optionVisible" 
       :current="optionObj.id"
       :list="optionList"
       @close="close" @change="popupCurrent"></singleChoice>
    </view>
</template>
<script>
import headers from "@/components/header/header";
import singleChoice from "./components/singleChoice";
import infor1 from "./components/schedule/infor1";
import infor2 from "./components/schedule/infor2";
import infor3 from "./components/schedule/infor3";
import infor4 from "./components/schedule/infor4";
import infor5 from "./components/schedule/infor5";
import infor6 from "./components/schedule/infor6";
import infor7 from "./components/schedule/infor7";
import infor8 from "./components/schedule/infor8";
import infor9 from "./components/schedule/infor9";
export default {
    components: {
        headers,
        singleChoice,
        infor1,
        infor2,
        infor3,
        infor4,
        infor5,
        infor6,
        infor7,
        infor8,
        infor9,
    },
    data() {
        return {
            pageTitle: '领队导游运行计划表',
            boxOption: 0,
            titleStyle: {
                opacity: 0,
            },
            scrollTop: 100,
            old: {
                scrollTop: 0
            },
            titles:[
                {
                    name:'相关信息',
                    id: 1,
                },
                {
                    name:'航班信息',
                    id: 2,
                },
                {
                    name:'车辆使用',
                    id: 3,
                },
                {
                    name:'酒店使用',
                    id: 4,
                },
                {
                    name:'餐食使用',
                    id: 5,
                },
                {
                    name:'门票使用',
                    id: 6,
                },
                {
                    name:'购物店',
                    id: 7,
                },
                {
                    name:'旅客名单',
                    id: 8,
                },
                {
                    name:'行程内容',
                    id: 9,
                },
            ],
            msg:{
                TCIDs: '',
                NewCombinationNum: ''
            },
            datas: {},
            params:{
                type: 1
            },
            scrollLeft: 0,
            currencyList: [],
            shopTypeList: [],
            BaseInfo:[],
            DMCStaticsCommon:{},
            JourneyTitle: [],
            PrincipalList: [],
            guestList: [],
            shopList: [],
            inforData1:{
                PrincipalList: [],
                DMCStaticsCommon: {}
            },
            datas: {},
            currentIndex: 0,
            optionVisible: false,
            optionObj:{},
            optionList: [],
        }
    },
    onLoad(option){
        if(option.TCIDs){
            this.msg.TCIDs = option.TCIDs
            this.init()
        }
    },
    created() {
        this.contentHeight = this.$utils.calcContentHeight(-40) + "px";
        this.mainColor = this.$uiConfig.mainColor;
    },
    mounted() {
        const that = this
        uni.getSystemInfo({
          success(res) {
            that.titleStyle = {
              paddingTop: `${res.statusBarHeight}px`
            };
          },
        });
    },
    methods: {
        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]
        },
        getType(item){
            this.params.type = item.id
        },
        init() {
            uni.showLoading()
            this.apipost("dmcstatistics_post_GetExtendLeaderAllStatics", this.msg, (res) => {
                if (res.resultCode == 1) {
                    this.datas = res.data;
                    this.BaseInfo = res.data.BaseInfo
                    this.DMCStaticsCommon = res.data.DMCStaticsCommon
                    this.JourneyTitle = res.data.JourneyTitle
                    this.PrincipalList = res.data.PrincipalList
                    this.guestList = res.data.guestList
                    this.shopList = res.data.shopList
                    this.optionList = []
                    this.BaseInfo.forEach((x,index) => {
                        this.optionList.push({
                            name: x.TCNUMS,
                            id: index+1
                        })
                    });
                    this.optionObj = this.optionList[0]
                    this.inforData1 = {
                        PrincipalList: [JSON.parse(JSON.stringify(this.PrincipalList[0]))],
                        DMCStaticsCommon: this.DMCStaticsCommon
                    }
                    let arrList = function(list){
                        list.forEach(x=>{
                            x.CreateByNameList=[]
                            x.HConfirmNameList=[]
                            x.BConfirmNameList=[]
                            x.DConfirmNameList=[]
                            x.TConfirmNameList=[]
                        })
                    }
                    arrList(this.inforData1.PrincipalList)
                    this.PrincipalList.forEach((item,index)=> {
                        if(index){
                            let data = this.inforData1.PrincipalList[0]
                            data.CreateByNameList = [{
                                name:data.CreateByName,
                                tel:data.CreateByMobile
                            },{
                                name:item.CreateByName,
                                tel:item.CreateByMobile
                            }]

                            data.HConfirmNameList = [{
                                name:data.HConfirmName,
                                tel:data.HConfirmMobile
                            },{
                                name:item.HConfirmName,
                                tel:item.HConfirmMobile
                            }]

                            data.BConfirmNameList = [{
                                name:data.BConfirmName,
                                tel:data.BConfirmMobile
                            },{
                                name:item.BConfirmName,
                                tel:item.BConfirmMobile
                            }]

                            data.DConfirmNameList = [{
                                name:data.DConfirmName,
                                tel:data.DConfirmMobile
                            },{
                                name:item.DConfirmName,
                                tel:item.DConfirmMobile
                            }]

                            data.TConfirmNameList = [{
                                name:data.TConfirmName,
                                tel:data.TConfirmMobile
                            },{
                                name:item.TConfirmName,
                                tel:item.TConfirmMobile
                            }]
                        }
                    })
                    uni.hideLoading()
                }
            }, (failed) => {
                uni.hideLoading()
                uni.showToast({
                    title: failed.message,
                    icon: "none",
                });
            }, (error) => {
                uni.hideLoading()
            })
        },
        scrollHandler(e){
            // console.log(e.detail.scrollLeft,'-----------')
            // this.scrollLeft = e.detail.scrollLeft
        },
        scroll(e) {
            this.old.scrollTop = e.detail.scrollTop
            this.boxOption = Math.floor((e.detail.scrollTop - 350) / 1.5);
            this.titleStyle.opacity =
                e.detail.scrollTop - 350 < 0 ?
                0 :
                Math.floor(e.detail.scrollTop - 350) / 100 > 1 ?
                1 :
                Math.floor(e.detail.scrollTop - 350) / 100;
                
        },
    }
}
</script>