<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;
		padding-left: 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;
	}

	.teamLeaderMakeNote view.active {
		background: rgba(211, 207, 207, .9);
		color: #333;
	}
</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&&dataList[currentIndex]?dataList[currentIndex].CommissionIncome.toFixed(2):0.00 }}</text>
						</view>
					</view>
				</view>
				<view class="col"></view>
				<view class="teamLeaderMakeNote row PX50"
					:class="[params.IsOperation==0?'justify-between':'justify-center']">
					<view class="text-center" @click="goUrl('/pages/teamLeader/reimbursementInfor')">记一笔</view>
					<view v-if="params.IsOperation==0" class="text-center ML50" :class="[loading?'active':'']"
						@click="saveData">提交</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,
				params: {},
			}
		},
		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()
			this.getParams()
		},
		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)
			},
			saveData() {
				if (this.loading) return
				this.loading = true
				uni.showLoading()
				this.apipost("dmcstatistics_post_SetNewLeaderApplyList_V2", {
					...this.params,
					RB_DMC_LeaderApply: {
						ID: 0,
						Status: 1,
						TCIDs: this.msg.TCIDs,
					}
				}, (res) => {
					if (res.resultCode == 1) {
						this.loading = false
						uni.hideLoading()
						this.getParams()
					}

				}, (failed) => {
					this.loading = false
					uni.showToast({
						title: failed.message,
						icon: "none",
					});
				}, (error) => {
					this.loading = false
				})
			},
			getParams() {
				this.apipost("dmcstatistics_post_GetNewLeaderPayMoneyStatics", this.msg, (res) => {
					if (res.resultCode == 1) {
						this.params = res.data;
					}
				}, (failed) => {
					uni.showToast({
						title: failed.message,
						icon: "none",
					});
				}, (error) => {
					uni.hideLoading()
				})
			},
			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>