<style lang="scss" scoped>
	@import url("@/asset/css/flex.css");
    .billDetailsHeaderBox{
        background: linear-gradient(-30deg, #4779FF, #47A5FF);
    }
    .billDetailsTitle{
        position: relative;
        z-index: 3
    }
    .billDetailsTitle.fixed{
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        z-index: 2;
        background: linear-gradient(-30deg, #4779FF, #47A5FF);
    }
    .billDetailsTitle.fixed .billDetailsTsBox{
        top: 22rpx;
    }
    .teamLeader-currency{
        font-size: 24rpx;
        border-radius: 30rpx;
        // border: 1px solid #fff;
        padding: 8rpx 20rpx;
        position: absolute;
        right: 210rpx;
        top: 115rpx;
        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;
    }
    .billDetailsHeaderNBox{
        padding: 0 30rpx;
        position: relative;
    }
    .billDetailsHeaderNBox img{
        width: 100%;
        height: 298rpx;
        position: absolute;
        top: -50rpx;
        left: 0;
        right: 0;
    }
    .billDetailsHeaderNum{
        padding: 60rpx 50rpx 57rpx 50rpx;
        background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638874803742697756.png')no-repeat #fff;
        background-size:100% auto ;
        position: relative;
        z-index: 2;
        .label{
            font-size: 24rpx;
        }
        .value{
            font-size: 32rpx;
            margin-top: 20rpx;
            text{
                font-size: 24rpx;  
                margin-right: 10rpx;
            }
        }
    }
    .billDetailsCTop{
        margin: 30rpx 30rpx 30rpx 30rpx;
        // overflow: hidden;
        box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(114,114,114,0.16);
    }
    .billDetailsCTop.one{
        margin: 0 30rpx 0 30rpx; 
    }
    .billDetailsCTop.one:first-child{
        margin: 39rpx 30rpx 0 30rpx;
        border-top-left-radius: 8rpx;;
        border-top-right-radius: 8rpx;;
    }
    .billDetailsCTop.one:last-child{
        margin: 39rpx 30rpx 0 30rpx;
        border-bottom-left-radius: 8rpx;;
        border-bottom-right-radius: 8rpx;;
    }
    .billDetailsCHeader{
        background: #EDF5FF;
        padding: 28rpx 31rpx;
    }
    .billDetailsCHeaderR img{
        width: 18rpx;
        height: 12rpx;
    } 
    .billDetailsCCBox{
        padding: 30rpx;
    }
    .billDetailsCCBox img{
        width: 72rpx;
        height: 72rpx;
    }
    .billDetailsCCR{
        padding: 30rpx 0;
        border-bottom: 1px solid #eee;
    }
    .billDetailsCCBox:last-child .billDetailsCCR{
        border-bottom: 0;
    }
    .billDetailsCHeader.billDetailsCHeaderOth{
        background: #FFF5ED;
    }
    .billDetailsCCBox.billDetailsCCBoxOth{
        background: #F5F5F5;
        padding: 25rpx 22rpx;
        margin: 0 30rpx;
    }
    .billDetailsCCBoxOth:first-child{
        margin-top: 20rpx;
    }
    .billDetailsCCBoxOth:nth-child(2){
        background: #fff;
    }
    .TotalListBox{

    }
    .TotalList img{
        width: 72rpx;
        height: 72rpx;
    }
</style>
<template>
     <view style="height: 100vh;">
        <scroll-view class="billDetailsBox" scroll-y="true"
        :enable-back-to-top="true" :enable-flex="true"
        @scroll="scroll" style="height: 100vh;">
            <view class="billDetailsHeaderBox PB40">
                <view class="billDetailsTitle">
                    <headers textAlign="left" :title="pageTitle" color="#fff"></headers>
                    <view class="teamLeader-currency row items-center" @click="currencyVisible=true"><text>{{ dataList[currentIndex].CurrencyStr?dataList[currentIndex].CurrencyStr:'人民币' }}</text> <view class="triangle"></view></view>
                </view>
                <view class="billDetailsTitle fixed"
                :style="{ opacity: boxOption + '%' }">
                    <headers textAlign="left" :title="pageTitle" color="#fff"></headers>
                    <view class="teamLeader-currency row items-center" @click="currencyVisible=true"><text>{{ dataList[currentIndex].CurrencyStr?dataList[currentIndex].CurrencyStr:'人民币' }}</text> <view class="triangle"></view></view>

                </view>
                <view class="billDetailsHeaderNBox MT50">
                    <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638874816517253757.png" />
                    <view class="billDetailsHeaderNum row justify-between">
                        <view class="column">
                            <text class="label">自费收入</text>
                            <text class="value"><text>¥ </text> {{ dataList[currentIndex].SelfPayingIncomeTotalPrice?dataList[currentIndex].SelfPayingIncomeTotalPrice:0 }}</text>
                        </view>
                        <view class="column">
                            <text class="label">自费支出</text>
                            <text class="value"><text>¥ </text> {{ dataList[currentIndex].SelfPayingExpendTotalPrice?dataList[currentIndex].SelfPayingExpendTotalPrice:0 }}</text>
                        </view>
                        <view class="column">
                            <text class="label">小费收入</text>
                            <text class="value"><text>¥ </text> {{ dataList[currentIndex].TipTotalPrice?dataList[currentIndex].TipTotalPrice:0 }}</text>
                        </view>
                    </view>
                </view>
            </view>
            <view class="TotalListBox row justify-between PX60 PT20">
                <view class="TotalList column justify-center items-center" v-for="(item,index) in TotalList">
                    <img :src="typeImgs[index]" />
                    <text class="fz24 MT10">¥ {{ item.price }}</text>
                </view>
            </view>
            <view>
                <template v-if="TeamUsePriceList&&TeamUsePriceList.length>0">
                    <template v-for="(item,index) in TeamUsePriceList">
                        <view class="billDetailsCTop one">
                            <view class="billDetailsCHeader row justify-between items-center"
                            @click="showTeamUse(index)">
                                <view class="billDetailsCHeaderL">
                                    <view class="fz28">{{ item.month }}月{{ item.day }}日</view>
                                    <view class="fz20 MT10">{{ item.year }}年</view>
                                </view>
                                <view class="billDetailsCHeaderR row items-center fontBold">
                                    <text>¥{{ item.TotalPrice }}</text>
                                    <img class="ML20" :src="!item.showList?downImg[0]:downImg[1]"/>
                                </view>
                            </view>
                            <view v-if="item.showList">
                                <template v-for="child in item.list">
                                    <view class="billDetailsCCBox row items-center fz28">
                                        <img :src="typeImgs[child.index]" />
                                        <view class="billDetailsCCR flex1 row justify-between items-center">
                                            <view class="ML23 fz28">{{ child.name }}</view>
                                            <text class="fz28 fontWeight500">¥{{ child.price }}</text>
                                        </view>
                                    </view>
                                </template>
                                <u-empty v-if="item.list.length==0||!item.list" text="暂无数据" mode="data" paddingTop="0"></u-empty>
                            </view>
                        </view>
                    </template>
                </template>
                <view class="billDetailsCTop">
                    <view class="billDetailsCHeader billDetailsCHeaderOth row justify-between items-center"
                    @click="showOther=!showOther">
                        <view class="billDetailsCHeaderL row items-center" style="height: 66rpx;">
                            <view class="fz28">其他费用</view>
                        </view>
                        <view class="billDetailsCHeaderR row items-center fontBold" style="height: 66rpx;">
                            <text>¥{{ dataList[currentIndex].OtherTotalPrice?dataList[currentIndex].OtherTotalPrice:0 }}</text>
                            <img class="ML20" :src="!showOther?downImg[0]:downImg[1]"/>
                        </view>
                    </view>
                    <view v-if="dataList&&dataList[currentIndex]&&dataList[currentIndex].OtherTotalPriceList&&dataList[currentIndex].OtherTotalPriceList.length>0&&showOther" class="PB20">
                        <view
                        v-for="(item,index) in dataList[currentIndex].OtherTotalPriceList"
                        class="billDetailsCCBox billDetailsCCBoxOth row items-center justify-between fz28">
                            <view class="billDetailsCCROth row items-center">
                                <view class="">{{ item.date.split('-')[1] }}月{{ item.date.split('-')[2] }}日</view>
                                <view class="ML23">{{ item.UseType }}</view>
                            </view>
                            <text class="fontWeight500">¥{{ item.TotalPrice }}</text>
                        </view>
                    </view>
                </view>
            </view>
            <view style="height: 50rpx;"></view>
        </scroll-view>
        <currencyBottom v-if="currencyVisible" 
       :current="currentId"
       :currencyList="currencyList"
       @close="close" @change="popupCurrency"></currencyBottom>
    </view>
</template>
<script>
import headers from "@/components/header/header";
import currencyBottom from "./components/currencyBottom";
export default {
    components: {
        headers,
        currencyBottom,
    },
    data() {
        return {
            pageTitle: '账单明细',
            boxOption: 0,
            currencyVisible: false,
            currencyList: [],
            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
            },
            dataList: [],
            currencyList: [],
            currentId: 0,
            currentIndex: 0,
            loading: false,
            TeamUsePriceList: [],
            TeamUsePriceObj:{
                TotalPrice: '',
                date: '',
                year: '',
                month: '',
                showList: true,
                list:[]
            },
            showOther: false,
            TotalList: [
                {
                    name:'车辆',
                    price: 0,
                },
                {
                    name:'酒店',
                    price: 0,
                },
                {
                    name:'门票',
                    price: 0,
                },
                {
                    name:'餐饮',
                    price: 0,
                },
            ]
        }
    },
    onLoad(option){
        if(option.TCIDs){
            this.msg.TCIDs = option.TCIDs
            this.init()
        }
    },
    created() {

    },
    mounted() {

    },
    methods: {
        showTeamUse(index){
            this.TeamUsePriceList[index].showList = !this.TeamUsePriceList[index].showList
        },
        close(){
            this.currencyVisible = false
        },
        popupCurrency(value){
            this.currencyVisible = false
            this.currentId = value
            this.currentIndex = this.dataList.findIndex(item=>item.CurrencyId==value)
            this.newTeamUsePrice()
        },
        newTeamUsePrice(){
            this.TeamUsePriceList = []
            this.TotalList[0].price = 0
            this.TotalList[1].price = 0
            this.TotalList[2].price = 0
            this.TotalList[3].price = 0
            this.dataList[this.currentIndex].TeamUsePriceList.forEach(x=>{
                let findIndex = this.TeamUsePriceList.findIndex(item=>item.date==x.date)
                if(findIndex==-1){
                    let TeamUsePriceObj = JSON.parse(JSON.stringify(this.TeamUsePriceObj))
                    TeamUsePriceObj.date = x.date
                    TeamUsePriceObj.year = x.date.substring(0,4)
                    TeamUsePriceObj.month = x.date.substring(5,7)
                    TeamUsePriceObj.day = x.date.substring(8,10)
                    TeamUsePriceObj.TotalPrice = x.TotalPrice
                    TeamUsePriceObj.list.push({
                        name: '车辆',
                        price: x.BusTotalPrice,
                        index: 0,
                    })
                    TeamUsePriceObj.list.push({
                        name: '酒店',
                        price: x.HouseTotalPrice,
                        index: 1,
                    })
                    TeamUsePriceObj.list.push({
                        name: '门票',
                        price: x.ScenicTotalPrice,
                        index: 2,
                    })
                    TeamUsePriceObj.list.push({
                        name: '餐饮',
                        price: x.DiningTotalPrice,
                        index: 3,
                    })
                    
                    this.TotalList[0].price += x.BusTotalPrice
                    this.TotalList[1].price += x.HouseTotalPrice
                    this.TotalList[2].price += x.ScenicTotalPrice
                    this.TotalList[3].price += x.DiningTotalPrice

                    this.TeamUsePriceList.push(TeamUsePriceObj)
                }else{
                    this.TeamUsePriceList[findIndex].list.push(x)
                }
            })
        },
        scroll(e) {
            this.boxOption = Math.floor((e.detail.scrollTop - 100) / 1.5);
            this.$forceUpdate();
        },
        init() {
            uni.showLoading()
            this.apipost("dmcstatistics_post_GetTotalPrice_V2", this.msg, (res) => {
                if (res.resultCode == 1) {
                    uni.hideLoading()
                    this.dataList = res.data
                    //this.dataList = res.data.sort((a,b)=>{
                    //     return new Date(b.TeamUsePriceList[0].UseTime) - new Date(a.TeamUsePriceList[0].UseTime)
                    // })
                    this.dataList.forEach(x=>{
                        if(x.TeamUsePriceList) x.TeamUsePriceList.forEach(y=>{
                            y.date = this.$utils.formatDates(new Date(y.UseTime),'yyyy-MM-dd')
                        })
                        if(x.OtherTotalPriceList) x.OtherTotalPriceList.forEach(y=>{
                            y.date = this.$utils.formatDates(new Date(y.UseTime),'yyyy-MM-dd')
                        })
                    })
                    this.currentId = res.data[0].CurrencyId
                    this.currentIndex = 0
                    for(let i=0;i<res.data.length;i++){
                        this.currencyList.push({
                            name: res.data[i].CurrencyStr,
                            id: res.data[i].CurrencyId,
                        })
                    }
                    if(this.dataList[this.currentIndex].OtherTotalPriceList&&this.dataList[this.currentIndex].OtherTotalPriceList.length>0){
                        this.showOther = true
                    }
                    this.newTeamUsePrice()
                }
            }, (failed) => {
                uni.hideLoading()
                uni.showToast({
                    title: failed.message,
                    icon: "none",
                });
            }, (error) => {
                uni.hideLoading()
            })
        },
    },
}
</script>