<template>
	<view class="wallet-view">
		<u-navbar back-icon-color="#333333" background="#F4F5F7" title="我的钱包" titleColor="#333333"
			:border-bottom="false" title-bold></u-navbar>
		<view class="wallet-content-view">
			<view class="header-view">
				<image class="header-image" :src="qnFile('qianbaobeijing.png')"></image>
			</view>
			<view class="survey-view">
				<view class="survey-top-view">
					<view class="survey-top-left">
						<view>账户总资产（元）</view>
						<view class="survey-top-account">{{info.totalPayAmount}}</view>
					</view>
					<view class="survey-top-right">
						<u-button type="primary" shape="circle" :custom-style="buttonStyle"
							@click="handleClickWithdraw">提现</u-button>
					</view>
				</view>
				<view class="survey-bottom-view">
					<view v-for="(value, key) in items" :key="key">
						<view>{{value}}</view>
						<view class="survey-bottom-account">{{info[key]}}</view>
					</view>
				</view>
			</view>
			<view class="content-view">
				<view v-for="(item, index) in lists" :class="['content-list', {'first': index==0}]" :key="index"
					@click="handleClick(index)">
					<view class="content-list-left">
						<image class="content-list-image" :src="item.icon"></image>
						<view class="content-list-text">
							<view class="content-list-text-title">{{item.title}}</view>
							<view>{{item.content}}</view>
						</view>
					</view>
					<view class="content-list-right">
						<text class="content-list-right-text">{{ item.value }}</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
			<view class="line-view" v-if="hasList"></view>
			<view class="list-view" v-if="hasList">
				<u-gap height="20" v-if="loading"></u-gap>
				<view class="u-flex u-row-center" v-if="loading">
					<u-loading color="#2272FF" :show="loading"></u-loading>
				</view>
				<view v-for="(item, index) in statementList" :key="index">
					<Statement :data="item" @click="handleClickCell"></Statement>
				</view>
			</view>
		</view>
		<MaskTip
      :show="showMask"
      imageName="mengceng5.png"
      :imageStyle="imageStyle"
      name="settlement_tip"
    />
	</view>
</template>

<script>
	let now = new Date(new Date().toLocaleDateString()).getTime();
	import util from '@/utils/util.js'
	import Statement from "@/components/mine/statement.vue"
	import MaskTip from '@/components/mask-tip/index.vue'

	export default {
		components: {
			Statement,
			MaskTip
		},
		data() {
			return {
				info: {
					canApplyAmount: 0, // 可提现金额	
					saveApplyCount: 0, // 已申请提现的支付单数	
					canApplyCount: 0, // 可申请提现的支付单数	
					totalPayAmount: 0, // 总共收入
					saveAndApplyAmount: 0, // 预计待入账
				},
				loading: true,
				statementList: [],
				settledAmount: 0,
				showMask: false,
			}
		},
		computed: {
			hasList() {
				return this.loading || this.statementList && this.statementList.length
			},
			statementContent() {
				if(this.loading) {
					return '当前展示最近5条，点击查看全部'
				}
				return this.statementList && this.statementList.length 
						&& '当前展示最近5条，点击查看全部' || '暂无流水'
			},
			lists() {
				return [{
					title: '结算账单',
					content: '展示您已提现的账单信息',
					icon: this.imageUrl + 'jiesuan.png',
					value: '点击查看'
				}, {
					title: '收入流水',
					content: this.statementContent,
					icon: this.imageUrl + 'liushui.png',
					value: '查看全部'
				}]
			},
			items() {
				return {
					canApplyAmount: '可提现（元）',
					saveAndApplyAmount: '预计待入账（元）'
				}
			},
			imageUrl() {
				return process.uniEnv.qn_base_url
			},
			buttonStyle() {
				return {
					width: "200rpx",
					height: "80rpx",
					"font-size": "32rpx",
					"font-weight": "bold",
					'background-color': '#FFFFFF',
					'color': '#2272FF',
					'margin-bottom': '20rpx'
				};
			},
			pages() {
				return ['settlement','statement']
			},
			imageStyle() {
      	return  'width:690rpx; margin-top:542rpx; margin-left:30rpx'
			}
		},
		onLoad() {
			getApp().trackPage('我的钱包页')
			this.showMaskTip()
		},
		onShow() {
			// 未登录，先跳转登录
			if(!this.vuex_token) {
				this.$u.route({url: 'pages/login/index'})
			}
			this.loadAssets()
			this.loadStatement()
		},
		methods: {
			qnFile(src) {
				return process.uniEnv.qn_base_url + src
			},
			// 提现
			handleClickWithdraw() {
				this.$u.route({
					url: 'pages/mine/wallet/withdraw'
				})
			},
			handleClick(index) {
				this.$u.route({
					url: 'pages/mine/wallet/' + this.pages[index]
				})
			},
			handleClickCell(orderId) {
				this.$u.route({
					url: 'pages/order/detail?&type=other',
					params: {
						id: orderId
					}
				})
			},
			async loadAssets() {
				let self = this
				let res = await self.$u.api.getAssets()
				if(res && res.code == 200) {
					self.info = res.data || self.info
				}
			},
			async loadStatement() {
				let self = this
				self.loading = true
				let res = await self.$u.api.listStatement({
					starDate: this.moment(new Date()).startOf('month').format('YYYY-MM-DD'),
					endDate:this.moment(new Date()).endOf('month').format('YYYY-MM-DD')
				})
				self.loading = false
				if(res && res.code == 200) {
					let data = res.data && res.data.orderList  || []
					self.settledAmount = res.data && res.data.settledAmount || 0
					if (data.length < 6) {
						self.statementList = data
					} else {
						self.statementList = data.slice(0, 5)
					}
				}
			},
			// 显示提示蒙版
			showMaskTip() {
				this.showMask = true
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wallet-view {
		display: flex;
		flex-direction: column;
		height: 100vh;
		.wallet-content-view {
			position: relative;
			overflow: auto;
			background-color: #F4F5F7;
			.header-view {
				position: absolute;
				width: 100%;
				padding-top: 10rpx;
				padding-left: 14rpx;
				.header-image {
					width: 730rpx;
					height: 420rpx;
				}
			}
			

			.survey-view {
				position: relative;
				height: 400rpx;
				margin: 30rpx 30rpx 10rpx 30rpx;
				color: #FFFFFF;
				padding: 30rpx;

				.survey-top-view {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					margin-top: 10rpx;
					.survey-top-left {
						font-size: 28rpx;

						.survey-top-account {
							font-size: 72rpx;
							font-weight: bold;
							margin-top: 6rpx;
						}
					}

					.survey-top-right {}
				}

				.survey-bottom-view {
					display: flex;
					justify-content: space-between;
					font-size: 24rpx;
					margin-top: 50rpx;

					.survey-bottom-account {
						margin-top: 6rpx;
						font-size: 40rpx;
						font-weight: bold;
					}
				}
			}

			.content-view {
				position: relative;
				padding: 0 30rpx;

				.content-list {
					height: 140rpx;
					border-radius: 12rpx 12rpx 0 0;
					display: flex;
					justify-content: space-between;
					padding: 30rpx;
					background-color: #FFFFFF;

					&.first {
						margin-bottom: 20rpx;
						border-radius: 12rpx;
					}

					.content-list-left {
						display: flex;

						.content-list-image {
							width: 56rpx;
							height: 56rpx;
							margin-top: 2rpx;
						}

						.content-list-text {
							font-size: 24rpx;
							color: #666666;
							margin-left: 20rpx;

							.content-list-text-title {
								font-size: 32rpx;
								color: #333333;
							}
						}
					}

					.content-list-right {
						color: #2272FF;
						font-size: 26rpx;

						.content-list-right-text {
							margin-right: 4rpx;
						}
					}
				}
			}

			.line-view {
				background-color: #F4F5F7;
				height: 2rpx;
				margin: 0 30rpx;
			}

			.list-view {
				position: relative;
				background-color: #FFFFFF;
				margin: 0rpx 30rpx 30rpx 30rpx;
				padding-bottom: 30rpx;
				border-radius: 0 0 12rpx 12rpx;
			}
		}
	}
</style>
