<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%;
    }
    .schedule-title{
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
</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="PX40 PY20">
                        <view class="column" style="border-radius: 8rpx;overflow: hidden;">
                            <view class="colorFFF relative column" 
                            style="height: 386rpx;background-size: 100% 100%;"
                            :style="{'background': '',}">
                                <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 style="width: 65rpx;height: 65rpx;display: inline-block;"/>
                                            </view>
                                            <view class="schedule-name ML20">
                                                <view class="fz28">名字</view>
                                                <view class="fz24">(领队)</view>
                                            </view>
                                        </view>
                                        <view class="row items-center ML50">
                                            <view class="schedule-Touxiang">
                                                <img style="width: 65rpx;height: 65rpx;display: inline-block;"/>
                                            </view>
                                            <view class="schedule-name ML20">
                                                <view class="fz28">名字</view>
                                                <view class="fz24">(导游)</view>
                                            </view>
                                        </view>
                                    </view>
                                    <view class="flex1"></view>
                                    <view class="schedule-title fz28 MB30 PX30">产品名字</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">成都MU</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">20+1</text>
                                        </view>
                                    </view>
                                </view>
                            </view>
                            <view class="bgFFF PA30">
                                <view class="PB20 row justify-between items-center">
                                    <view class="color666">集合时间</view>
                                    <view class="color333">05-01 06:30</view>
                                </view>
                                <view class="PB20 row justify-between items-center">
                                    <view class="color666">出发时间</view>
                                    <view class="color333">05-01 06:30</view>
                                </view>
                                <view class="row justify-between items-center">
                                    <view class="color666">进出点</view>
                                    <view class="color333">05-01 06:30</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 + '%' }">
                    <headers textAlign="left" :title="pageTitle" color="#fff"></headers>
                    <scroll-view class="scheduleTsBox" :scroll-x="true"
                    :style="[titleStyle]"
                    :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"></infor1>
            <infor2 v-if="params.type==2"></infor2>
            <infor3 v-if="params.type==3"></infor3>
            <infor4 v-if="params.type==4"></infor4>
            <infor5 v-if="params.type==5"></infor5>
            <infor6 v-if="params.type==6"></infor6>
            <infor7 v-if="params.type==7"></infor7>
            <infor8 v-if="params.type==8"></infor8>
            <infor9 v-if="params.type==9"></infor9>
        </scroll-view>
    </view>
</template>
<script>
import headers from "@/components/header/header";
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,
        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,
                },
            ],
            currencyVisible: false,
            oldDataIndex: 1,
            loading: false,
            msg:{
                TCIDs: ''
            },
            datas: {},
            params:{
                type: 9
            },
            busTypeList:[],
            hotelTypeList:[],
            diningTypeList:[],
            scenicTypeList:[],
            otherTypeList:[
                {
                    name:'导游津贴',
                    id: 1,
                },
                {
                    name:'司机津贴',
                    id: 2,
                },
                {
                    name:'其他支出',
                    id: 0,
                },
            ],
            scrollLeft: 0,
            currencyList: [],
            shopTypeList: [],
        }
    },
    onLoad(option){
        if(option.TCIDs){
            this.msg.TCIDs = option.TCIDs
        }
        this.b2b_user_info = uni.getStorageSync('b2b_user')
        // 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`
            };
          },
        });
        // this.getOptionData()
        // this.getCurrencyList()
    },
    methods: {
        saveData(){
            if(this.loading) return
            this.loading = true
            uni.showLoading()
            this.apipost("dmcstatistics_post_SetNewLeaderApplyList_V2", this.params, (res) => {
                if(res.resultCode == 1) {
                    this.loading = false
                    uni.hideLoading()
                    this.init()
                }
                
            }, (failed) => {
                this.loading = false
                uni.showToast({
                    title: failed.message,
                    icon: "none",
                });
            }, (error) => {
                this.loading = false
            })
        },
        getNewData(params){
            this.params = JSON.parse(JSON.stringify(params))
        },
        getType(item){
            this.params.type = item.id
            this.oldDataIndex = item.id
        },
        init() {
            uni.showLoading()
            this.apipost("dmcstatistics_post_GetNewLeaderPayMoneyStatics", this.msg, (res) => {
                if (res.resultCode == 1) {
                    this.params = res.data;
                    for(let i=1;i<5;i++){
                        this.$set(this.params, `dataIndex${i}`, 0);
                    }
                    this.$set(this.params, `type`, this.oldDataIndex);
                    for(let i=0;i<this.params.ScenicList.length;i++){
                        this.$set(this.params.ScenicList[i], `TotalMoney`, 0);
                        this.$set(this.params.ScenicList[i], `scenicIndex`, 0);
                    }
                    for(let i=0;i<this.params.DiningList.length;i++){
                        this.$set(this.params.DiningList[i], `TotalMoney`, 0);
                        this.$set(this.params.DiningList[i], `diningIndex`, 0);
                    }
                    for(let i=0;i<this.params.HotelOrderListReport.length;i++){
                        this.$set(this.params.HotelOrderListReport[i], `TotalMoney`, 0);
                        this.$set(this.params.HotelOrderListReport[i], `hotelIndex`, 0);
                    }
                    if(res.data.CountryIds) this.getShoppingType(res.data.CountryIds)
                    // console.log(this.params.HotelOrderListReport,'-----酒店')
                    // console.log(this.params.BusList,'-----车信息')
                    // console.log(this.params.ScenicList,'-----景点')
                    // console.log(this.params.DiningList,'-----餐厅')
                    // console.log(this.params.LeaderShopList ,'-----购物店信息')
                    // console.log(this.params.LeaderApply ,'-----领队用款申请信息')
                    // console.log(this.params.OtherOrderInfo,'-----其他信息')
                    setTimeout(()=>{
                        uni.hideLoading()
                    },1000)
                }
            }, (failed) => {
                uni.hideLoading()
                uni.showToast({
                    title: failed.message,
                    icon: "none",
                });
            }, (error) => {
                uni.hideLoading()
            })
        },
        getShoppingType(id){
            this.apipost("Shopping_Post_GetList", {
                QCountry: id
            }, (res) => {
                if (res.resultCode == 1) {
                    this.shopTypeList = []
                    res.data.forEach(x=>{
                        this.shopTypeList.push({
                            id: x.ID,
                            name: x.Name,
                        })
                    })
                }
            })
        },
        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 - 100) / 1.5);
            this.titleStyle.opacity =
                e.detail.scrollTop - 200 < 0 ?
                0 :
                Math.floor(e.detail.scrollTop - 100) / 100 > 1 ?
                1 :
                Math.floor(e.detail.scrollTop - 100) / 100;
                
            this.$forceUpdate();
        },
        getOptionData(){
            this.apipost("dmcstatistics_post_GetReimburseTypeList", {
                Type: ''
            }, (res) => {
                if (res.resultCode == 1) {
                    res.data.forEach(x => {
                        x.name = x.TypeName
                        x.id = x.ID
                    });
                    this.busTypeList = res.data.filter(x=>{return x.UserTypeId==4})
                    this.hotelTypeList = res.data.filter(x=>{return x.UserTypeId==1})
                    this.diningTypeList = res.data.filter(x=>{return x.UserTypeId==2})
                    this.scenicTypeList = res.data.filter(x=>{return x.UserTypeId==3})
                }
            }, (failed) => {
                uni.showToast({
                    title: failed.message,
                    icon: "none",
                });
            }, (error) => {

            })
        },
        getCurrencyList(){
            this.apipost("financeinfo_post_GetList", {
                Name: '',
            }, (res) => {
                if (res.resultCode == 1) {
                    for(let i=0;i<res.data.length;i++){
                        let data = res.data[i]
                        this.currencyList.push({
                            name: data.Name,
                            id: data.ID,
                        })
                    }
                }
            }, (failed) => {
                uni.showToast({
                    title: failed.message,
                    icon: "none",
                });
            }, (error) => {

            })
        }
    }
}
</script>