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

    }
    .reimbursementInforText{
        font-weight: 500;
        font-size: 32rpx;
        color: #FFFFFF;
        white-space: nowrap;
        margin: 0 22rpx 20rpx;
    }
    .reimbursementInforText.active{
        color: #257BF1;
        background: #FFFFFF;
        border-radius: 6rpx;
        padding: 5rpx 20rpx;
    }
    .saveBox{
        position: fixed;
        right: 50rpx;
        bottom: 50rpx;
        z-index: 2;
    }
    .saveBox view{
        background: #257BF2;
        box-shadow: 0rpx 0rpx 10rpx #fff;
        color: #fff;
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
    }
</style>
<template>
    <view style="height: 100vh;">
        <scroll-view class="reimbursementInforBox" scroll-y="true"
        :enable-back-to-top="true" :enable-flex="true"
        @scroll="scroll" style="height: 100vh;">
            <view class="reimbursementInforHeaderBox">
                <view class="reimbursementInforTitle">
                    <headers textAlign="left" :title="pageTitle" color="#fff"></headers>
                    <scroll-view class="reimbursementInforTsBox" :scroll-x="true"
                    :scroll-left="scrollLeft"
                    @scroll="scrollHandler">
                        <view class="reimbursementInforT-text row-aic-n">
                            <view class="reimbursementInforText" 
                            :class="[params.type==item.id?'active':'']"
                            v-for="(item,index) in titles"
                            :key="index"
                            @click="getType(item)">{{ item.name }}</view>
                        </view>
                    </scroll-view>
                </view>
                <view class="reimbursementInforTitle fixed"
                :style="{ opacity: boxOption + '%' }">
                    <headers textAlign="left" :title="pageTitle" color="#fff"></headers>
                    <scroll-view class="reimbursementInforTsBox" :scroll-x="true"
                    :style="[titleStyle]"
                    :scroll-left="scrollLeft"
                    @scroll="scrollHandler">
                        <view class="reimbursementInforT-text row-aic-n">
                            <view class="reimbursementInforText" 
                            :class="[params.type==item.id?'active':'']"
                            v-for="(item,index) in titles"
                            :key="index"
                            @click="getType(item)">{{ item.name }}</view>
                        </view>
                    </scroll-view>
                </view>
                <headeDatas v-show="params.type<5" :currencyList="currencyList" :data="params" @change="getNewData"></headeDatas>
            </view>
            <!-- 车信息-->
            <productInfor1 :data="params" v-show="params.type==1" @change="getNewData" :optionList="busTypeList"></productInfor1>
            <!-- 酒店信息-->
            <productInfor2 :data="params" v-if="params.type==2" @change="getNewData" :optionList="hotelTypeList"></productInfor2>
            <!-- 餐食信息-->
            <productInfor3 :data="params" v-else-if="params.type==3" @change="getNewData" :optionList="diningTypeList"></productInfor3>
            <!-- 门票信息-->
            <productInfor4 :data="params" v-else-if="params.type==4" @change="getNewData" :optionList="scenicTypeList"></productInfor4>
            <!-- 其它信息-->
            <otherInfor1 :currencyList="currencyList" :data="params" v-else-if="params.type==5" @change="getNewData" :options="otherTypeList"></otherInfor1>
            <!-- 小费收入-->
            <otherInfor2 :currencyList="currencyList" :data="params" v-else-if="params.type==6" @change="getNewData"></otherInfor2>
            <!-- 团费小计-->
            <otherInfor3 :currencyList="currencyList" :data="params" v-else-if="params.type==7" @change="getNewData"></otherInfor3>
            <!-- 自费收入-->
            <otherInfor4 :currencyList="currencyList" :data="params" v-else-if="params.type==8" @change="getNewData"></otherInfor4>
            <!-- 自费支出-->
            <otherInfor5 :currencyList="currencyList" :data="params" v-else-if="params.type==9" @change="getNewData"></otherInfor5>
            <!-- 购物报账-->
            <otherInfor6 :currencyList="currencyList" :data="params" v-else-if="params.type==10" @change="getNewData" :options="shopTypeList"></otherInfor6>
        </scroll-view>
        <view class="saveBox" @click="saveData">
            <view class="row justify-center items-center">
                <text>保存</text>
            </view>    
        </view>
    </view>
</template>
<script>
import headers from "@/components/header/header";
import headeDatas from "./components/headeDatas";
import productInfor1 from "./components/report/productInfor1";
import productInfor2 from "./components/report/productInfor2";
import productInfor3 from "./components/report/productInfor3";
import productInfor4 from "./components/report/productInfor4";
import otherInfor1 from "./components/report/otherInfor1";
import otherInfor2 from "./components/report/otherInfor2";
import otherInfor3 from "./components/report/otherInfor3";
import otherInfor4 from "./components/report/otherInfor4";
import otherInfor5 from "./components/report/otherInfor5";
import otherInfor6 from "./components/report/otherInfor6";
export default {
    components: {
        headers,
        headeDatas,
        productInfor1,
        productInfor2,
        productInfor3,
        productInfor4,
        otherInfor1,
        otherInfor2,
        otherInfor3,
        otherInfor4,
        otherInfor5,
        otherInfor6,
    },
    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,
                },
                {
                    name:'购物报账',
                    id: 10,
                },
            ],
            currencyVisible: false,
            oldDataIndex: 1,
            loading: false,
            msg:{
                TCIDs: ''
            },
            datas: {},
            params:{
                IsOperation: 0,//0-可以操作，1-已制单，不能操作
                IsEditHotel: 0,//是否有修改酒店价格、付款方式权限
                IsEditHotelPeople: 0,//是否有修改酒店人数权限
                CreateBy: null,//线路负责人
                CreateByName: null,//线路负责人
                CreateByPhoto: null,//电话
                CreateByAccount: null,//联系方式
                BusOrderState: 0,//车订单信息
                Complain_Extend: null,//供应商投诉信息
                HotelOrderListReport: [],//酒店信息，合团
                BusPlanListReport: null,//车信息
                HotelList: [],//酒店列表
                PriceHotelResult: [],//酒店团情况
                ScenicList: [],//景点
                DiningList: [],//餐厅
                PriceShopList: null,//购物店列表
                HouseStatistics: {},//房间信息
                BusList: [],//车
                OtherOrderInfo: {
                    OtherList:[],//其他费用 
                    TipList:[],//小费收入
                    TeamList:[],//团费小计
                    SelfPlayingIncomeList:[],//自费收入
                    SelfPlayingExpendList:[],//自费支出
                },//其他订单信息
                LeaderApply: {},//领队用款
                LeaderShopList: [],//	购物店信息(领队报账的时候填写)
            },
            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>