<template>
	<view class="wallet">
		<view class="page-bg">
			<view class="profit-total">
				<view class="item">
					<view class="profit">
						<u-count-to :startVal="0" decimals="2" color="#ffffff" :endVal="merchant.money"></u-count-to>
					</view>
					<view class="desc">可提现收益</view>
					<view class="total-desc">累计提现：{{ merchant.totalMoney }}</view>
				</view>
				<view class="item">
					<u-button text="去提现" type="warning" :hairline="true" size="small" @click="$push('sub_pages/withdraw/withdraw')"></u-button>
				</view>
			</view>
		</view>
		<view class="tabs">
			<u-tabs :list="tabs" @click="onChangeTab" lineColor="#7f006f"></u-tabs>
			<!-- <uni-data-select v-model="where.gradeId" :localdata="grade" @change="onSearch"></uni-data-select> -->
			<u-cell :title="gradeText" isLink :border="false" arrowDirection="down" @click="showGrade = true"></u-cell>
			<u-icon class="icon" size="22" name="calendar" @click="openCalendar()"></u-icon>
		</view>
		<view class="order" v-for="(item,index) in list" :key="index">
			<view class="fenqi">
				<block>
					<view class="item">
						<view class="goods-info">
							<view class="goods-name">
								<view class="order-id">订单号：{{ item.logId }}</view>
								<view class="user-box">
									<view class="avatar">
										<u-avatar :src="item.playerAvatar"></u-avatar>
									</view>
									<view class="user-info">
										<text class="name">{{ item.playerNickname }}</text>
										<text class="selling-point">{{ item.gradeName }}</text>
										<text class="selling-point">ID：{{ userIdPrefix }}{{ item.playerId }}</text>
										<!-- <text class="selling-point" v-if="item.scene == 10">推荐收益</text>
										<text class="selling-point" v-if="item.scene == 20">解锁收益</text>
										<text class="selling-point" v-if="item.scene == 30">团队收益</text>
										<text class="selling-point" v-if="item.scene == 40">区域收益</text>
										<text class="selling-point" v-if="item.scene == 50">收益提现</text> -->
										<text class="selling-point">金额：￥{{ item.orderPrice }}</text>
										<text class="selling-point">备注：{{ item.comments }}</text>
										<text class="selling-point">状态：{{ item.isSettled == 1 ? '已结算' : '未结算' }}</text>
										<text class="selling-point">时间：{{ item.createTime }}</text>
									</view>
								</view>
							</view>
							<view class="goods-price" v-if="item.isSettled == 1">
								<text class="add-price"
									v-if="item.scene == 10 || item.scene == 20">+￥{{ item.money }}</text>
								<text class="sub-price" v-if="item.scene == 40">-￥{{ item.money }}</text>
								<block v-if="item.scene == 30">
									<text class="add-price" v-if="item.money > 0">+￥{{ item.money }}</text>
									<text class="sub-price" v-else>-￥{{ Math.abs(item.money) }}</text>
								</block>
								<text class="num">￥{{ item.balance }}</text>
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>
		<u-loadmore v-if="list.length > 0" :status="status" />
		<u-empty mode="order" icon="http://cdn.uviewui.com/uview/empty/order.png" text="暂无收益记录"  v-if="list.length == 0">
		</u-empty>

		<u-calendar :show="show" mode="range" :minDate="minDate" @confirm="changeDate"
			@close="closeShow"></u-calendar>

		<u-action-sheet :actions="grade" @select="onGrade"
			:show="showGrade"></u-action-sheet>
	</view>
</template>

<script>
	import {
		dateFormat
	} from '@/utils/util.js'
	import store from '@/store';
	import {
		getUser
	} from '@/api/user.js'
	import {
		username,
		userIdPrefix
	} from '@/config.js';
 	import * as MerchantApi from '@/api/merchant.js'
	import * as ProfitApi from '@/api/love-profit.js'

	const userId = uni.getStorageSync('userId')

	// tab栏数据
	const tabs = [{
		name: `推广收益`,
		value: 10
	},{
		name: `团队收益`,
		value: 20
	}]

	export default {
		data() {
			return {
				userIdPrefix,
				tabs,
				list: [],
				loadMore: true,
				status: '加载更多',
				record: {},
				userInfo: {},
				deliveryTime: dateFormat('YYYY-mm-dd', new Date()),
				createTimeStart: null,
				createTimeEnd: null,
				// 正在加载中
				isLoading: true,
				// 当前选择的设备ID
				show: false,
				minDate: '',
				isLogin: false,
				showGrade: false,
				grade: [
					{
						name: '不限'
					},{
						name: '线上会员'
					},
					{
						name: '线下会员'
					},
					{
						name: '线上门店'
					}
				],
				gradeText: '不限',
				page: 1,
				where: {
					scene: 10,
					userId
				},
				merchant: {
					// 总收益
					totalMoney: 0.00,
					// 当前可提现金额
					money: 0.00,
					// 今日收益
					todayMoney: 0.00,
					// 本月收益
					monthMoney: 0.00
				},
			}
		},
		onLoad(option) {
			const app = this
			app.getUserInfo()
 			app.getMerchant()
			app.onRefreshList()
			app.minDate = uni.$u.timeFormat(new Date().getTime() - 2592000000 * 2, 'yyyy-mm-dd');
		},
		onShow() {},
		// 触底函数
		onReachBottom() {
			const app = this
			if (app.loadMore) {
				app.page = ++app.page;
				app.onRefreshList()
			}
		},
		onPullDownRefresh() {
			const app = this
			app.page = 1
			app.list = []
 			app.getMerchant()
			app.onRefreshList();
			uni.stopPullDownRefresh();
		},
		methods: {
			onRefreshList() {
				const app = this
				const {
					deliveryTime,
					createTimeStart,
					createTimeEnd,
					curTab
				} = this

				app.where.page = app.page
				app.where.userId = userId
				app.where.payStatus = 20
				// 只查询已支付订单
				ProfitApi.pageProfit(app.where).then(res => {
					const newList = res.data.list
					if (newList.length > 0) {
						app.list = app.list.concat(newList)
					} else {
						app.status = '没有更多了'
						app.loadMore = false
					}
				})
			},
			getMerchant(){
				const app = this
				MerchantApi.listMerchant({
					userId
				}).then(res => {
					console.log("res: ",res);
					if(res.data.length > 0){
						app.merchant = res.data[0]
					}
				})
			},
			// 获取购物车数据
			// getLog() {
			// 	const app = this
			// 	const {
			// 		deliveryTime,
			// 		createTimeStart,
			// 		createTimeEnd
			// 	} = this

			// 	const userId = uni.getStorageSync('userId')
			// 	ProfitApi.pageProfit({
			// 		userId,
			// 		createTimeStart: createTimeStart ? createTimeStart + ' 00:00:00' : '',
			// 		createTimeEnd: createTimeEnd ? createTimeEnd + ' 23:59:59' : '',
			// 		limit: 50,
			// 		page: 1
			// 	}).then(res => {
			// 		app.list = res.data.list
			// 	})
			// },

			getUserInfo() {
				const app = this
				uni.getSystemInfo({
					success(data) {
						if (data) {
							app.statusBarHeight = data.statusBarHeight + 50
						}
					}
				})
				getUser().then(res => {
					if (res.code == 0 && res.data.username != 'www') {
						app.userInfo = res.data
						if(app.userInfo.gradeId >= 10 && app.tabs.length == 2){
							app.tabs.push({
								name: `门店收益`,
								value: 30
							})
						}
						app.isLogin = true
					} else {
						app.isLogin = false
					}
				})
			},
			changeDate(date) {
				console.log("date: ", date[0]);
				console.log("date.lenght: ", date.length);
				// this.deliveryTime = date.result
				this.page = 1
				this.where.createTimeStart = date[0]
				this.where.createTimeEnd = date[date.length - 1]
				this.onRefreshList()
				this.show = false
			},
			change(e) {
				console.log(e);
			},
			onChangeTab(e) {
			  const app = this
			  app.where.scene = e.value
			  app.page = 1
			  app.list = []
			  app.onRefreshList()
			},
			openCalendar() {
				this.show = true
			},
			closeShow(){
				this.show = false
			},
			onGrade(e){
				const app = this
				app.gradeText = e.name
				if(e.name == '线上会员'){
					app.where.gradeStart = 2
					app.where.gradeEnd = 4
				}
				if(e.name == '线下会员'){
					app.where.gradeStart = 5
					app.where.gradeEnd = 6
				}
				if(e.name == '线上门店'){
					app.where.gradeStart = 7
					app.where.gradeEnd = 9
				}
				if(e.name == '不限'){
					app.where.gradeStart = undefined
					app.where.gradeEnd = undefined
				}
				app.page = 1
				app.list = []
				app.onRefreshList()
				app.showGrade = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wallet {
		background-color: #f3f3f3;
		min-height: 100vh;
	}
	.page-bg {
		width: 750rpx;
		height: calc(150rpx + var(--status-bar-height));
		display: block;
 		background: linear-gradient(to bottom, $main-bg, $main-bg2);
		color: #ffffff;
		.profit-total{
			width: 600rpx;
			height: 200rpx;
			margin: auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.item{
				text-align: center;
				.profit{
					font-size: 40rpx;
				}
				.desc{
					color: #d0d1d4;
					font-size: 24rpx;
				}
				.total-desc{
					margin-top: 40rpx;
					font-size: 24rpx;
					color: #d0d1d4;
				}
			}
		}
	}
	.tabs {
			width: 700rpx;
			margin: auto;
			display: flex;
			justify-content: space-between;
		}
	.order {
		background-color: #ffffff;
		border-radius: 12rpx;
		width: 700rpx;
		margin: 20rpx auto;
		padding: 10rpx 0;

		.title {
			font-weight: bold;
			font-size: 30rpx;
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
		}

		.xieyi {
			padding: 20rpx;
			font-size: 26rpx;
		}
	}

	.fenqi {
		padding: 10rpx 30rpx;
		font-size: 26rpx;

		.item {
			display: flex;
			padding: 10rpx 0;

			.image {
				width: 160rpx;
				height: 120rpx;
			}

			.goods-info {
				width: 700rpx;
				margin-left: 10rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.goods-name {
					text-align: left;
					display: flex;
					flex-direction: column;
					.order-id{
						display: flex;
						justify-content: space-between;
					}
					.user-box{
						display: flex;
						margin-top: 20rpx;
						.avatar{
							display: flex;
							flex-direction: column;
							align-items: center;
							.user-id{
								color: #cccccc;
							}
						}
						.user-info{
							margin-left: 20rpx;
						}
					}

					.name {
						font-weight: 500;
						max-width: 300rpx;
						text-overflow: -o-ellipsis-lastline;
						overflow: hidden; //溢出内容隐藏
						text-overflow: ellipsis; //文本溢出部分用省略号表示
						display: -webkit-box; //特别显示模式
						-webkit-line-clamp: 2; //行数
						line-clamp: 2;
						-webkit-box-orient: vertical; //盒子中内容竖直排列
					}

					.selling-point {
						max-width: 400rpx;
						color: #999999;
						text-overflow: -o-ellipsis-lastline;
						overflow: hidden; //溢出内容隐藏
						text-overflow: ellipsis; //文本溢出部分用省略号表示
						display: -webkit-box; //特别显示模式
						-webkit-line-clamp: 1; //行数
						line-clamp: 1;
						-webkit-box-orient: vertical; //盒子中内容竖直排列
					}
				}

				.goods-price {
					display: flex;
					flex-direction: column;

					.add-price {
						color: #27b900;
					}

					.sub-price {
						color: #ff0000;
					}

					.num {
						text-align: right;
						color: #999999;
					}
				}
			}

		}
	}

	.select-date {
		text-align: center;
		font-size: 28rpx;
		padding: 12rpx 0;
		margin: auto;
		display: flex;
		justify-content: center;
		align-items: center;

		.icon {
			margin-right: 30rpx;
		}
	}

	.on-buy {
		background-color: #804002;
	}

	.user-card {
		width: 700rpx;
		height: 260rpx;
		margin: 30rpx auto;
		border-radius: 24rpx;
		background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');

		.user-info {
			padding: 40rpx;
			position: relative;

			.avatar {
				display: flex;
				align-items: center;
				color: #ffffff;

				.avatar-img {
					border: 4rpx solid #ffffff;
				}

				.user {
					margin-left: 15rpx;

					.nickname {
						font-size: 34rpx;
					}

					.desc {
						font-size: 26rpx;
						color: #b2b2b2;
					}
				}

				image {
					border: 4rpx solid #ffffff;
				}
			}

			.buy-log {
				position: absolute;
				z-index: 999;
				text-align: center;
				top: 50rpx;
				right: 40rpx;
				font-size: 24rpx;
				padding: 5rpx 20rpx;
				border-radius: 12rpx 0 12rpx 0;
				background-color: #f3f3f3;
			}
		}
	}

	// 我的收益
	.my-profit {
		background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
		display: flex;
		align-items: center;
		justify-content: space-around;
		color: #ffffff;
		margin: 42rpx auto 42rpx auto;
		padding: 22rpx 0;
		width: 700rpx;
		height: 140rpx;
		box-shadow: 0 1rpx 5rpx 0px #eaebec;
		border-radius: 24rpx;

		.item {
			text-align: center;

			.profit {
				font-size: 38rpx;
				font-weight: 500;
				color: #ffffff;
			}

			.desc {
				font-size: 24rpx;
				color: #d8d9dc;
			}
		}

	}
</style>
