<style lang="scss" scoped>
	@import url("@/asset/css/flex.css");
    .teamLeaderTitle{
        
    }
    .teamLeader{
        width: 100%;
		height: 100vh;
        overflow: hidden;
    }
    .teamLeaderBJ{
        background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638868977886703780.png') no-repeat;
        background-size: 100% 100%;
    }
    .teamLeaderPath{
        background: #fff;
    }
    .teamLeaderListBox:first-child{
        border-bottom: 1px solid #ccc;
    }
    .teamLeaderList{
        width: 33.33%;
        height: 200rpx;
        border-right: 1px solid #ccc;
    }
    .teamLeaderList:last-child{
        border: 0;
    }
    .teamLeaderList-top{
       text-align: center;
    }
    .teamLeaderList-top img{
        width:  62rpx;
        height: 62rpx;
        display: inline-block;
    }
    .teamLeaderList-text{
        width: 100%;
        text-align: center;
        font-weight: 400;
        font-size: 28rpx;
        margin-top: 10rpx;
    }
    .teamLeader-center{
        padding-right: 41rpx;
        color: #fff;
    }
    .teamLeader-c-box{
       padding: 30rpx 0;
    }
    .triangle {
        width: 0;
        height: 0;
        border-left: 8rpx solid transparent;
        border-right: 8rpx solid transparent;
        border-top: 8rpx solid #fff;
    }
    .teamLeader-currency{
        font-size: 24rpx;
        border-radius: 30rpx;
        border: 1px solid #fff;
        padding: 8rpx 20rpx;
    }
    .teamLeader-currency text{
        margin-right: 15rpx;
    }
    .teamLeader-title{
        font-weight: 400;
        font-size: 28rpx;
        color: #FFFFFF;
        margin-bottom: 20rpx;
    }
    .teamLeader-text{
        font-weight: 100;
        font-size: 28rpx;
        color: #FFFFFF;
    }
    .teamLeader-text .stip{
        position: relative;
        top: -10rpx;
        left: -10rpx;
    }
    .teamLeader-text .num{
        font-size: 54rpx;
        font-weight: 400;
    }
    .teamLeaderLine{
        margin: 0 40rpx;
    }
    .teamLeaderLine view{
        height: 50rpx;
        width: 1px;
        background: #fff;
    }
    .teamLeaderMakeNote{
        margin-bottom: 84rpx;
    }
    .teamLeaderMakeNote view{
        width: 413rpx;
        height: 80rpx;
        line-height: 80rpx;
        background: #257BF1;
        border-radius: 40rpx;
        font-weight: 400;
        font-size: 36rpx;
        color: #FFFFFF;
    }
    

</style>
<template>
    <view class="teamLeader column" >
        <view class="teamLeaderBJ flex1 column">
            <view class="teamLeaderTitle">
                <headers textAlign="left" :title="pageTitle" color="#fff"></headers>
            </view>
            <view class="teamLeader-center">
                <view class="teamLeader-c-box row">
                    <view class="col"></view>
                    <view class="teamLeader-currency row items-center" @click="currencyVisible=true"><text>{{ dataList[currentIndex].CurrencyStr }}</text> <view class="triangle"></view></view>
                </view>
                <view class="teamLeader-c-box row">
                    <view class="col"></view>
                    <view>
                        <view class="teamLeader-title text-right">领队团款</view>
                        <view class="teamLeader-text row justify-flex-end">
                            <view class="row items-flex-end">
                                <text class="stip">¥</text>
                            </view>
                            <text class="num">{{ dataList[currentIndex].PlanTotalPrice }}</text>
                        </view>
                    </view>
                </view>
                <view class="teamLeader-c-box row">
                    <view class="col"></view>
                    <view class="row">
                        <view class="teamLeader-titleBox">
                            <view class="teamLeader-title text-center">收入</view>
                            <view class="teamLeader-text row">
                                <view class="row items-flex-end">
                                    <text class="stip">¥</text>
                                </view>
                                <text class="num">{{ dataList[currentIndex].IncomeTotalPrice }}</text>
                            </view>
                        </view>
                        <view class="teamLeaderLine row items-center">
                            <view></view>
                        </view>
                        <view class="teamLeader-titleBox">
                            <view class="teamLeader-title text-center">支出</view>
                            <view class="teamLeader-text row">
                                <view class="row items-flex-end">
                                    <text class="stip">¥</text>
                                </view>
                                <text class="num">{{ dataList[currentIndex].ExpendTotalPrice }}</text>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="teamLeader-c-box row">
                    <view class="col"></view>
                    <view>
                        <view class="teamLeader-title text-right">余额</view>
                        <view class="teamLeader-text row justify-flex-end">
                            <view class="row items-flex-end">
                                <text class="stip">¥</text>
                            </view>
                            <text class="num">{{ dataList[currentIndex].BalanceTotalPrice }}</text>
                        </view>
                    </view>
                </view>
                <view class="teamLeader-c-box row">
                    <view class="col"></view>
                    <view>
                        <view class="teamLeader-title text-right">佣金收入</view>
                        <view class="teamLeader-text row justify-flex-end">
                            <view class="row items-flex-end">
                                <text class="stip">¥</text>
                            </view>
                            <text class="num">{{ dataList[currentIndex].CommissionIncome }}</text>
                        </view>
                    </view>
                </view>
                <view class="col"></view>
                <view class="teamLeaderMakeNote row justify-center">
                    <view class="text-center" @click="goUrl('/pages/teamLeader/reimbursementInfor')">记一笔</view>
                </view>
            </view>
            
        </view>
        <view class="teamLeaderPath column">
            <view class="teamLeaderListBox row">
                <template v-for="(item,index) in pathList">
                    <view v-if="index<3" class="teamLeaderList column justify-center"
                    @click="goUrl(item.path)">
                        <view class="teamLeaderList-top">
                            <img :src="item.src">
                        </view>
                        <view class="teamLeaderList-text">{{ item.name }}</view>
                    </view>
                </template>
            </view>
            <view class="teamLeaderListBox row">
                <template v-for="(item,index) in pathList">
                    <view v-if="index>=3" class="teamLeaderList column justify-center"
                        @click="goUrl(item.path)">
                        <view class="teamLeaderList-top">
                            <img :src="item.src">
                        </view>
                        <view class="teamLeaderList-text">{{ item.name }}</view>
                    </view>
                </template>
            </view>
        </view>
       <currencyBottom v-if="currencyVisible" 
       :current="currentId"
       :currencyList="currencyList"
       @close="close" @change="popupCurrency"></currencyBottom>
       <QRCode v-if="showQRCode" @close="close" :TCIDs="msg.TCIDs"></QRCode>
    </view>
</template>
<script>
import headers from "@/components/header/header";
import currencyBottom from "./components/currencyBottom";
import QRCode from "./components/QRCode";
export default {
    components: {
        headers,
        currencyBottom,
        QRCode
    },
    data() {
        return {
            pageTitle: '报账',
            pathList: [
                {
                    name: "账单",
                    src: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638868998200434106.png",
                    path: "/pages/teamLeader/billDetails",
                    id: 1,
                },
                {
                    name: "行程",
                    src: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638868998200882976.png",
                    path: "/pages/teamLeader/itineraryInformation",
                    id: 2,
                },
                {
                    name: "分房表",
                    src: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638868998392386701.png",
                    path: "/pages/teamLeader/roomAllocation",
                    id: 3,
                },
                {
                    name: "计划表",
                    src: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638868998200482430.png",
                    path: "/pages/teamLeader/schedule",
                    id: 4,
                },
                {
                    name: "二维码",
                    src: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638868998200501813.png",
                    path: "",
                    id: 5,
                },
                {
                    name: "意见调查",
                    src: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638868998200462985.png",
                    path: "/pages/teamLeader/opinionSurvey",
                    id: 6,
                }
            ],
            dataList: {},
            loading: false,
            msg:{	
                TCIDs: '',//	领队id
            },
            b2b_user_info: {},
            currencyVisible: false,
            currencyList: [],
            currentId: 0,
            currentIndex: 0,
            showQRCode: false,
        }
    },
    onLoad(option){
        if(option.TCIDs) this.msg.TCIDs = option.TCIDs
        if(option.datas){
            const datas = JSON.parse(decodeURIComponent(option.datas));
            this.pageTitle = `${datas.LineName}(${this.msg.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() {

    },
    methods: {
        goUrl(url){
            if(url!=''){
                uni.navigateTo({
                    url: `${url}?TCIDs=${this.msg.TCIDs}`,

                })
            }else{
                this.showQRCode = true
            }
        },
        close(){
            this.currencyVisible = false
            this.showQRCode = false
        },
        popupCurrency(value){
            this.currencyVisible = false
            this.currentId = value
            this.currentIndex = this.dataList.findIndex(item=>item.CurrencyId==value)
        },
        init() {
            uni.showLoading()
            this.apipost("dmcstatistics_post_GetTotalPrice_V2", this.msg, (res) => {
                if (res.resultCode == 1) {
                    uni.hideLoading()
                    this.dataList = res.data;
                    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,
                        })
                    }
                }
            }, (failed) => {
                uni.hideLoading()
                uni.showToast({
                    title: failed.message,
                    icon: "none",
                });
            }, (error) => {
                uni.hideLoading()
            })
        },
    }
}
</script>